Bring markdown support to collection descriptions

e2e/test/scenarios/collections/collections.cy.spec.js

@@ -178,12 +178,28 @@ describe("scenarios > collection defaults", () => {
     });
   });
 
-  describe("render last edited by when names are null", () => {
-    beforeEach(() => {
-      restore();
-      cy.signInAsAdmin();
+  it("should support markdown in collection description", () => {
+    cy.request("PUT", "/api/collection/9", {
+      description: "# header",
+    });
+
+    visitRootCollection();
+
+    cy.get("table").within(() => {
+      cy.findByText("First collection")
+        .closest("tr")
+        .within(() => {
+          cy.icon("info").trigger("mouseenter");
+        });
+    });
+
+    popover().within(() => {
+      cy.findByRole("heading").contains("header");
+      cy.findByRole("heading").should("not.include.text", "# header");
     });
+  });
 
+  describe("render last edited by when names are null", () => {
     it("should render short value without tooltip", () => {
       cy.intercept(
         "GET",

frontend/src/metabase/collections/components/BaseItemsTable.unit.spec.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Route } from "react-router";
 import userEvent from "@testing-library/user-event";
 import moment from "moment-timezone";
-import { renderWithProviders, screen } from "__support__/ui";
+import { renderWithProviders, screen, getIcon } from "__support__/ui";
 
 import {
   DEFAULT_DATE_STYLE,
@@ -117,6 +117,38 @@ describe("Collections BaseItemsTable", () => {
     expect(screen.queryByLabelText("Select all items")).not.toBeInTheDocument();
   });
 
+  describe("description", () => {
+    it("shows description on hover", () => {
+      const DESCRIPTION = "My collection";
+      const ITEM = getCollectionItem({ description: DESCRIPTION });
+
+      setup({ items: [ITEM] });
+
+      const icon = getIcon("info");
+      userEvent.hover(icon);
+
+      const tooltip = screen.getByRole("tooltip");
+
+      expect(tooltip).toBeInTheDocument();
+      expect(tooltip).toHaveTextContent(DESCRIPTION);
+    });
+
+    it("shows markdown in description on hover", () => {
+      const DESCRIPTION = "**important** text";
+      const ITEM = getCollectionItem({ description: DESCRIPTION });
+
+      setup({ items: [ITEM] });
+
+      const icon = getIcon("info");
+      userEvent.hover(icon);
+
+      const tooltip = screen.getByRole("tooltip");
+
+      expect(tooltip).toBeInTheDocument();
+      expect(tooltip).toHaveTextContent("important text");
+    });
+  });
+
   describe("models", () => {
     const model = getCollectionItem({
       id: 1,

frontend/src/metabase/collections/components/BaseTableItem.jsx

@@ -10,6 +10,7 @@ import Ellipsified from "metabase/core/components/Ellipsified";
 import EntityItem from "metabase/components/EntityItem";
 import DateTime from "metabase/components/DateTime";
 import Tooltip from "metabase/core/components/Tooltip";
+import Markdown from "metabase/core/components/Markdown";
 import ActionMenu from "metabase/collections/components/ActionMenu";
 
 import { color } from "metabase/lib/colors";
@@ -125,7 +126,7 @@ export function BaseTableItem({
               <DescriptionIcon
                 name="info"
                 size={16}
-                tooltip={item.description}
+                tooltip={<Markdown>{item.description}</Markdown>}
               />
             )}
           </ItemLink>