Bookmarks: render more specific icons when bookmarked item is a question (#21170)

frontend/src/metabase-types/api/bookmark.ts

 export type BookmarkableEntities = "card" | "collection";
 
 export interface Bookmark {
+  card_id: string;
+  display?: string;
   id: string;
   item_id: number;
-  card_id: string;
   name: string;
   type: BookmarkableEntities;
 }

frontend/src/metabase/collections/components/CollectionSidebar/Bookmarks/Bookmarks.tsx

@@ -6,6 +6,7 @@ import * as Urls from "metabase/lib/urls";
 import Icon from "metabase/components/Icon";
 import Link from "metabase/collections/components/CollectionSidebar/CollectionSidebarLink";
 import Tooltip from "metabase/components/Tooltip";
+import { getIcon } from "./getIcon";
 import { LabelContainer } from "../Collections/CollectionsList/CollectionsList.styled";
 import BookmarksRoot, {
   BookmarkContainer,
@@ -19,6 +20,7 @@ import { Bookmark, BookmarkableEntities, Bookmarks } from "metabase-types/api";
 
 interface LabelProps {
   name: string;
+  display?: string;
   type: BookmarkableEntities;
 }
 
@@ -27,18 +29,8 @@ interface CollectionSidebarBookmarksProps {
   deleteBookmark: (id: string, type: string) => void;
 }
 
-function getIconForEntityType(type: BookmarkableEntities) {
-  const icons = {
-    card: "grid",
-    collection: "folder",
-    dashboard: "dashboard",
-  };
-
-  return icons[type];
-}
-
-const Label = ({ name, type }: LabelProps) => {
-  const iconName = getIconForEntityType(type);
+const Label = ({ display, name, type }: LabelProps) => {
+  const iconName = getIcon(display, type);
   return (
     <LabelContainer>
       <BookmarkTypeIcon name={iconName} />
@@ -65,12 +57,12 @@ const CollectionSidebarBookmarks = ({
 
       <BookmarkListRoot>
         {bookmarks.map((bookmark, index) => {
-          const { id, name, type } = bookmark;
+          const { id, name, type, display } = bookmark;
           const url = Urls.bookmark({ id, name, type });
           return (
             <BookmarkContainer key={`bookmark-${id}`}>
               <Link to={url}>
-                <Label name={name} type={type} />
+                <Label name={name} type={type} display={display} />
               </Link>
               <button onClick={() => handleDeleteBookmark(bookmark)}>
                 <Tooltip tooltip={t`Remove bookmark`} placement="bottom">

frontend/src/metabase/collections/components/CollectionSidebar/Bookmarks/getIcon.ts

+import { BookmarkableEntities } from "metabase-types/api";
+
+export function getIcon(
+  display: string | undefined,
+  type: BookmarkableEntities,
+) {
+  if (display) {
+    return display;
+  }
+
+  const icons = {
+    card: "grid",
+    collection: "folder",
+    dashboard: "dashboard",
+  };
+
+  return icons[type];
+}

frontend/src/metabase/collections/components/CollectionSidebar/Bookmarks/getIcon.unit.spec.js

+import { getIcon } from "./getIcon";
+
+describe("get icon to render alongside bookmark", () => {
+  it("returns `display` if available", () => {
+    expect(getIcon("display")).toBe("display");
+  });
+
+  describe("maps to icon that corresponds to type", () => {
+    it("renders for generic card", () => {
+      expect(getIcon(null, "card")).toBe("grid");
+    });
+
+    it("renders for collection", () => {
+      expect(getIcon(null, "collection")).toBe("folder");
+    });
+
+    it("renders for dashboard", () => {
+      expect(getIcon(null, "dashboard")).toBe("dashboard");
+    });
+  });
+});

frontend/test/metabase-visual/collections/bookmarks.cy.spec.js

@@ -8,7 +8,11 @@ describe("Bookmarks in a collection page", () => {
   });
 
   it("updates sidebar and bookmark icon color when bookmarking a collection in its page", () => {
+    cy.request("POST", "/api/bookmark/card/1");
+    cy.request("POST", "/api/bookmark/card/2");
+    cy.request("POST", "/api/bookmark/card/3");
     cy.request("POST", "/api/bookmark/collection/1");
+    cy.request("POST", "/api/bookmark/dashboard/1");
 
     cy.visit("/collection/1");