Adding markdown support to search result descriptions (#36360)

* Adding markdown support to search result descriptions

* adding e2e test

e2e/test/scenarios/onboarding/search/search.cy.spec.js

@@ -12,6 +12,7 @@ import {
   setActionsEnabledForDB,
   setTokenFeatures,
   summarize,
+  assertIsEllipsified,
 } from "e2e/support/helpers";
 import {
   ADMIN_USER_ID,
@@ -174,6 +175,38 @@ describe("scenarios > search", () => {
 
       cy.get("@search.all").should("have.length", 1);
     });
+
+    it("should render a preview of markdown descriptions", () => {
+      cy.createQuestion({
+        name: "Description Test",
+        query: { "source-table": ORDERS_ID },
+        description: `![alt](https://upload.wikimedia.org/wikipedia/commons/a/a2/Cat_outside.jpg)
+
+        Lorem ipsum dolor sit amet.
+        
+        ----
+        
+        ## Heading 1
+        
+        This is a [link](https://upload.wikimedia.org/wikipedia/commons/a/a2/Cat_outside.jpg).
+        
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. `,
+      }).then(() => {
+        cy.signInAsNormalUser();
+        cy.visit("/");
+        getSearchBar().type("Test");
+      });
+
+      //Enseure that text is ellipsified
+      cy.findByTestId("result-description")
+        .findByText(/Lorem ipsum dolor sit amet./)
+        .then(el => assertIsEllipsified(el[0]));
+
+      //Ensure that images are not being rendered in the descriptions
+      cy.findByTestId("result-description")
+        .findByRole("img")
+        .should("not.exist");
+    });
   });
   describe("accessing full page search with `Enter`", () => {
     it("should not render full page search if user has not entered a text query", () => {

frontend/src/metabase/search/components/SearchResult/SearchResult.styled.tsx

@@ -5,6 +5,7 @@ import type { AnchorHTMLAttributes, HTMLAttributes, RefObject } from "react";
 import { PLUGIN_MODERATION } from "metabase/plugins";
 import type { AnchorProps, BoxProps, ButtonProps } from "metabase/ui";
 import { Box, Divider, Stack, Anchor, Button } from "metabase/ui";
+import Markdown from "metabase/core/components/Markdown";
 
 const { ModerationStatusIcon } = PLUGIN_MODERATION;
 
@@ -111,3 +112,13 @@ export const DescriptionSection = styled(Box)`
 export const DescriptionDivider = styled(Divider)`
   border-radius: ${({ theme }) => theme.radius.xs};
 `;
+
+export const SearchResultDescription = styled(Markdown)`
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  white-space: pre-line;
+  font-size: 0.75rem;
+`;

frontend/src/metabase/search/components/SearchResult/SearchResult.tsx

@@ -4,7 +4,7 @@ import { useCallback } from "react";
 import { push } from "react-router-redux";
 
 import { useDispatch } from "metabase/lib/redux";
-import { Group, Text, Loader } from "metabase/ui";
+import { Group, Loader } from "metabase/ui";
 import { isSyncCompleted } from "metabase/lib/syncing";
 
 import type { WrappedResult } from "metabase/search/types";
@@ -20,6 +20,7 @@ import {
   ResultNameSection,
   ResultTitle,
   SearchResultContainer,
+  SearchResultDescription,
   XRayButton,
   XRaySection,
 } from "./SearchResult.styled";
@@ -124,21 +125,20 @@ export function SearchResult({
       )}
       {description && showDescription && (
         <DescriptionSection>
-          <Group noWrap spacing="sm">
+          <Group noWrap spacing="sm" data-testid="result-description">
             <DescriptionDivider
               size="md"
               color="focus.0"
               orientation="vertical"
             />
-            <Text
-              data-testid="result-description"
-              color="text.1"
-              align="left"
-              size="sm"
-              lineClamp={2}
+            <SearchResultDescription
+              dark
+              unwrapDisallowed
+              unstyleLinks
+              allowedElements={[]}
             >
               {description}
-            </Text>
+            </SearchResultDescription>
           </Group>
         </DescriptionSection>
       )}