move subtext to command palette item generation. Support model-indexes (#44638)

* move subtext to command palette item generation. Support model-indexes

* changing text, adding unit tests

* PR Feedback

frontend/src/metabase/palette/components/PaletteResultItem.tsx

@@ -16,8 +16,7 @@ interface PaletteResultItemProps {
 export const PaletteResultItem = ({ item, active }: PaletteResultItemProps) => {
   const icon = item.icon ? getCommandPaletteIcon(item, active) : null;
 
-  const parentName =
-    item.extra?.parentCollection || item.extra?.database || null;
+  const subtext = item.extra?.subtext;
 
   const handleLinkClick = useCallback((e: React.MouseEvent) => {
     e.preventDefault();
@@ -81,7 +80,7 @@ export const PaletteResultItem = ({ item, active }: PaletteResultItemProps) => {
               }}
             />
           )}
-          {parentName && (
+          {subtext && (
             <Text
               component="span"
               ml="0.25rem"
@@ -89,7 +88,9 @@ export const PaletteResultItem = ({ item, active }: PaletteResultItemProps) => {
               fz="0.75rem"
               lh="1rem"
               fw="normal"
-            >{`— ${parentName}`}</Text>
+            >
+              — {subtext}
+            </Text>
           )}
         </Box>
         <Text

frontend/src/metabase/palette/hooks/useCommandPalette.tsx

@@ -3,7 +3,7 @@ import { useRegisterActions, useKBar, Priority } from "kbar";
 import { useMemo, useState } from "react";
 import { push } from "react-router-redux";
 import { useDebounce } from "react-use";
-import { t } from "ttag";
+import { t, jt } from "ttag";
 
 import { getAdminPaths } from "metabase/admin/app/selectors";
 import { getSectionsWithPlugins } from "metabase/admin/settings/selectors";
@@ -23,7 +23,8 @@ import {
   getSettings,
 } from "metabase/selectors/settings";
 import { getShowMetabaseLinks } from "metabase/selectors/whitelabel";
-import type { IconName } from "metabase/ui";
+import { type IconName, Icon } from "metabase/ui";
+import type { RecentItem } from "metabase-types/api";
 
 import type { PaletteAction } from "../types";
 import { filterRecentItems } from "../utils";
@@ -192,11 +193,10 @@ export const useCommandPalette = ({
                 dispatch(push(wrappedResult.getUrl()));
               },
               extra: {
-                parentCollection: wrappedResult.getCollection().name,
                 isVerified: result.moderated_status === "verified",
-                database: result.database_name,
                 href: wrappedResult.getUrl(),
                 iconColor: icon.color,
+                subtext: getSearchResultSubtext(wrappedResult),
               },
             };
           }),
@@ -242,22 +242,13 @@ export const useCommandPalette = ({
               dispatch(push(href));
             }
           },
-          extra:
-            item.model === "table"
-              ? {
-                  database: item.database.name,
-                  href: Urls.modelToUrl(item),
-                  iconColor: icon.color,
-                }
-              : {
-                  parentCollection:
-                    item.parent_collection.id === null
-                      ? ROOT_COLLECTION.name
-                      : item.parent_collection.name,
-                  isVerified: item.moderated_status === "verified",
-                  href: Urls.modelToUrl(item),
-                  iconColor: icon.color,
-                },
+          extra: {
+            isVerified:
+              item.model !== "table" && item.moderated_status === "verified",
+            href: Urls.modelToUrl(item),
+            iconColor: icon.color,
+            subtext: getRecentItemSubtext(item),
+          },
         };
       }) || []
     );
@@ -301,3 +292,32 @@ export const useCommandPalette = ({
     [adminActions, adminSettingsActions, hasQuery],
   );
 };
+
+export const getSearchResultSubtext = (wrappedSearchResult: any) => {
+  if (wrappedSearchResult.model === "indexed-entity") {
+    return jt`a record in ${(
+      <Icon
+        name="model"
+        style={{
+          verticalAlign: "bottom",
+          marginInlineStart: "0.25rem",
+        }}
+      />
+    )} ${wrappedSearchResult.model_name}`;
+  } else {
+    return (
+      wrappedSearchResult.getCollection().name ||
+      wrappedSearchResult.database_name
+    );
+  }
+};
+
+export const getRecentItemSubtext = (item: RecentItem) => {
+  if (item.model === "table") {
+    return item.database.name;
+  } else if (item.parent_collection.id === null) {
+    return ROOT_COLLECTION.name;
+  } else {
+    return item.parent_collection.name;
+  }
+};

frontend/src/metabase/palette/hooks/useCommandPalette.unit.spec.tsx

+import type React from "react";
+
+import { render, screen } from "__support__/ui";
+import Search from "metabase/entities/search";
+import { Text } from "metabase/ui";
+import {
+  createMockSearchResult,
+  createMockCollection,
+} from "metabase-types/api/mocks";
+
+import { getSearchResultSubtext } from "./useCommandPalette";
+
+const setup = (child: React.ReactNode) => {
+  render(<Text>{child}</Text>);
+};
+
+describe("useCommandPalette", () => {
+  describe("getSearchResultSubtext", () => {
+    it("should work for model indexes", async () => {
+      const mockSearchResult = Search.wrapEntity(
+        createMockSearchResult({
+          model: "indexed-entity",
+          model_name: "foo",
+        }),
+      );
+      setup(getSearchResultSubtext(mockSearchResult));
+
+      expect(await screen.findByText(/a record in/)).toBeInTheDocument();
+      expect(await screen.findByText(/foo/)).toBeInTheDocument();
+      expect(
+        await screen.findByRole("img", { name: /model/ }),
+      ).toBeInTheDocument();
+    });
+
+    it("should work for cards", async () => {
+      const mockSearchResult = Search.wrapEntity(
+        createMockSearchResult({
+          model: "card",
+          collection: createMockCollection({
+            name: "Foo Collection",
+            id: 2,
+          }),
+        }),
+      );
+      setup(getSearchResultSubtext(mockSearchResult));
+
+      expect(await screen.findByText("Foo Collection")).toBeInTheDocument();
+    });
+
+    it("should work for tables", async () => {
+      const mockSearchResult = Search.wrapEntity(
+        createMockSearchResult({
+          model: "table",
+          collection: createMockCollection({ id: undefined, name: undefined }),
+          database_name: "Bar Database",
+        }),
+      );
+      setup(getSearchResultSubtext(mockSearchResult));
+
+      expect(await screen.findByText("Bar Database")).toBeInTheDocument();
+    });
+  });
+});

frontend/src/metabase/palette/types.ts

@@ -5,19 +5,17 @@ import type { IconName } from "metabase/ui";
 
 interface PaletteActionExtras {
   extra?: {
-    /** parentCollection: Name of the collection to show in the palette item */
-    parentCollection?: string | null;
     /** isVerified: If true, will show a verified badge next to the item name */
     isVerified?: boolean;
-    /** database: Name of the database to show next the name in the palette item. */
-    database?: string | null;
     /**
      * href: If defined, the palette item will be wrapped in a link. This allows for
      * browser interactions to open items in new tabs/windows
      */
     href?: LocationDescriptor | null;
-    /** iconColor: Color of the icon in the  */
+    /** iconColor: Color of the icon in the list item*/
     iconColor?: string;
+    /** subtext: text to come after the item name */
+    subtext?: string;
   };
 }