Enable bookmarking pinned dashboards (#21861)

frontend/src/metabase/collections/components/PinnedItemCard/PinnedItemCard.tsx

 import React, { useState } from "react";
 import { t } from "ttag";
 
-import { Collection } from "metabase-types/api";
-
+import { BookmarksType, Collection } from "metabase-types/api";
 import Tooltip from "metabase/components/Tooltip";
 import { Item } from "metabase/collections/utils";
 
@@ -18,6 +17,9 @@ import {
 } from "./PinnedItemCard.styled";
 
 type Props = {
+  bookmarks?: BookmarksType;
+  createBookmark: (id: string, collection: string) => void;
+  deleteBookmark: (id: string, collection: string) => void;
   className?: string;
   item: Item;
   collection: Collection;
@@ -36,6 +38,9 @@ function getDefaultDescription(model: string) {
 }
 
 function PinnedItemCard({
+  bookmarks,
+  createBookmark,
+  deleteBookmark,
   className,
   item,
   collection,
@@ -67,6 +72,9 @@ function PinnedItemCard({
           <Header>
             <ItemIcon name={icon} />
             <HoverMenu
+              bookmarks={bookmarks}
+              createBookmark={createBookmark}
+              deleteBookmark={deleteBookmark}
               item={item}
               collection={collection}
               onCopy={onCopy}

frontend/src/metabase/collections/components/PinnedItemOverview/PinnedItemOverview.tsx

@@ -102,6 +102,9 @@ function PinnedItemOverview({
               <ItemDragSource item={item} collection={collection}>
                 <div>
                   <PinnedItemCard
+                    bookmarks={bookmarks}
+                    createBookmark={createBookmark}
+                    deleteBookmark={deleteBookmark}
                     item={item}
                     collection={collection}
                     onCopy={onCopy}
@@ -142,6 +145,9 @@ function PinnedItemOverview({
                 <ItemDragSource item={item} collection={collection}>
                   <div>
                     <PinnedItemCard
+                      bookmarks={bookmarks}
+                      createBookmark={createBookmark}
+                      deleteBookmark={deleteBookmark}
                       item={item}
                       collection={collection}
                       onCopy={onCopy}

frontend/test/metabase/scenarios/collections/bookmarks.cy.spec.js

@@ -60,30 +60,26 @@ describe("Bookmarks in a collection page", () => {
 
   it("can add/remove bookmark from pinned Question in collection", () => {
     const name = "Orders";
-
     cy.visit("/collection/root");
 
     pin(name);
-
     cy.findByText(/Rows/);
-
-    cy.findByText(name)
-      .closest("a")
-      .find(".Icon-ellipsis")
-      .click({ force: true });
-
-    cy.findByText("Bookmark").click();
-
-    navigationSidebar().within(() => {
-      getSectionTitle(/Bookmarks/);
-      cy.findByText(name);
-    });
+    bookmarkPinnedItem(name);
   });
 
-  it("can add/remove bookmark from Dashboard in collection", () => {
+  it("can add/remove bookmark from unpinned Dashboard in collection", () => {
     addThenRemoveBookmarkTo("Orders in a dashboard");
   });
 
+  it("can add/remove bookmark from pinned Question in collection", () => {
+    const name = "Orders in a dashboard";
+    cy.visit("/collection/root");
+
+    pin(name);
+    cy.findByText("A dashboard");
+    bookmarkPinnedItem(name);
+  });
+
   it("adds and removes bookmarks from Model in collection", () => {
     cy.createQuestion({
       name: "Orders Model",
@@ -188,3 +184,17 @@ function archive(name) {
     cy.findByText("Archive").click();
   });
 }
+
+function bookmarkPinnedItem(name) {
+  cy.findByText(name)
+    .closest("a")
+    .find(".Icon-ellipsis")
+    .click({ force: true });
+
+  cy.findByText("Bookmark").click();
+
+  navigationSidebar().within(() => {
+    getSectionTitle(/Bookmarks/);
+    cy.findByText(name);
+  });
+}