Add the default pinned metric description (#45287)

* Add the default pinned metric description

* Expand unit tests to repro #45270

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

@@ -60,6 +60,7 @@ const TOOLTIP_MAX_WIDTH = 450;
 
 const DEFAULT_DESCRIPTION: Record<string, string> = {
   card: t`A question`,
+  metric: t`A metric`,
   dashboard: t`A dashboard`,
   dataset: t`A model`,
 };

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

@@ -64,6 +64,11 @@ const PinnedQuestionCard = ({
     <CardActionMenuContainer>{actionMenu}</CardActionMenuContainer>
   );
 
+  const DEFAULT_DESCRIPTION: Record<string, string> = {
+    card: t`A question`,
+    metric: t`A metric`,
+  };
+
   return (
     <CardRoot
       to={item.getUrl()}
@@ -96,7 +101,9 @@ const PinnedQuestionCard = ({
       ) : (
         <CardStaticSkeleton
           name={item.name}
-          description={item.description ?? t`A question`}
+          description={
+            item.description || DEFAULT_DESCRIPTION[item.model] || ""
+          }
           icon={item.getIcon() as unknown as { name: IconName }}
           tooltip={getSkeletonTooltip(item)}
         />

frontend/src/metabase/collections/components/PinnedQuestionCard/PinnedQuestionCard.unit.spec.tsx

@@ -8,6 +8,7 @@ import { createMockEntitiesState } from "__support__/store";
 import { renderWithProviders, screen } from "__support__/ui";
 import { ROOT_COLLECTION } from "metabase/entities/collections";
 import registerVisualizations from "metabase/visualizations/register";
+import type { CollectionItem, CollectionItemModel } from "metabase-types/api";
 import {
   createMockCard,
   createMockCollection,
@@ -20,14 +21,18 @@ import PinnedQuestionCard from "./PinnedQuestionCard";
 
 registerVisualizations();
 
-function setup() {
+const defaultCardDetails: Partial<CollectionItem> = {
+  model: "card",
+  collection_preview: true,
+};
+
+function setup(cardDetails = defaultCardDetails) {
   const card = createMockCard({
     id: 1,
   });
   const collectionItem = createMockCollectionItem({
     id: card.id,
-    model: "card",
-    collection_preview: true,
+    ...cardDetails,
   });
   setupCardEndpoints(card);
   setupCardQueryEndpoints(card, createMockDataset());
@@ -57,3 +62,36 @@ describe("PinnedQuestionCard", () => {
     expect(fetchMock.calls("path:/api/card/1/query")).toHaveLength(1);
   });
 });
+
+describe("description", () => {
+  it.each<{ model: CollectionItemModel; description: string }>([
+    { model: "card", description: "A question" },
+    { model: "metric", description: "A metric" },
+  ])(
+    "should display the default description for the $model (metabase#45270)",
+    async ({ model, description }) => {
+      setup({ collection_preview: false, model });
+
+      expect(await screen.findByText(description)).toBeInTheDocument();
+    },
+  );
+
+  it.each<{ model: CollectionItemModel }>([
+    { model: "card" },
+    { model: "metric" },
+  ])(
+    "should display the correct item description when it is set for the $model",
+    async ({ model }) => {
+      setup({ collection_preview: false, model, description: "Foobar" });
+
+      expect(await screen.findByText("Foobar")).toBeInTheDocument();
+    },
+  );
+
+  it("should not display description with the preview enabled", async () => {
+    setup();
+
+    expect(await screen.findByTestId("visualization-root")).toBeInTheDocument();
+    expect(screen.queryByText("A question")).not.toBeInTheDocument();
+  });
+});