Add basic markdown support to events (#21214)

frontend/src/metabase/core/components/Markdown/Markdown.stories.tsx

+import React from "react";
+import { ComponentStory } from "@storybook/react";
+import Markdown from "./Markdown";
+
+export default {
+  title: "Core/Markdown",
+  component: Markdown,
+};
+
+const Template: ComponentStory<typeof Markdown> = args => {
+  return <Markdown {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  children: `
+Our first email blast to the mailing list not directly linked to the release
+of a new version. We wanted to see if this would effect visits to landing pages
+for the features in 0.41.
+
+Here’s a [doc](https://metabase.test) with the findings.`,
+};

frontend/src/metabase/core/components/Markdown/Markdown.styled.tsx

+import { FC, ReactElement } from "react";
+import ReactMarkdown from "react-markdown";
+import styled from "@emotion/styled";
+import { color } from "metabase/lib/colors";
+
+export const MarkdownRoot = styled(getComponent(ReactMarkdown))`
+  p {
+    margin: 0;
+    line-height: 1.57em;
+  }
+
+  p:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+
+  a {
+    cursor: pointer;
+    text-decoration: none;
+    color: ${color("brand")};
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+`;
+
+function getComponent<P>(component: (props: P) => ReactElement): FC<P> {
+  return component;
+}

frontend/src/metabase/core/components/Markdown/Markdown.tsx

+import React from "react";
+import remarkGfm from "remark-gfm";
+import { MarkdownRoot } from "./Markdown.styled";
+
+const REMARK_PLUGINS = [remarkGfm];
+
+export interface MarkdownProps {
+  className?: string;
+  children?: string;
+}
+
+const Markdown = ({ className, children = "" }: MarkdownProps): JSX.Element => {
+  return (
+    <MarkdownRoot className={className} remarkPlugins={REMARK_PLUGINS}>
+      {children}
+    </MarkdownRoot>
+  );
+};
+
+export default Markdown;

frontend/src/metabase/core/components/Markdown/index.ts

+export { default } from "./Markdown";

frontend/src/metabase/timelines/collections/components/EventCard/EventCard.styled.tsx

 import styled from "@emotion/styled";
 import { color } from "metabase/lib/colors";
 import Icon from "metabase/components/Icon";
+import Markdown from "metabase/core/components/Markdown";
 
 export const CardRoot = styled.div`
   display: flex;
@@ -50,7 +51,7 @@ export const CardTitle = styled.div`
   word-wrap: break-word;
 `;
 
-export const CardDescription = styled.div`
+export const CardDescription = styled(Markdown)`
   color: ${color("text-dark")};
   margin-top: 0.25rem;
   word-wrap: break-word;

frontend/src/metabase/timelines/collections/components/TimelineCard/TimelineCard.styled.tsx

@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import { color } from "metabase/lib/colors";
 import Link from "metabase/core/components/Link";
 import Icon from "metabase/components/Icon";
+import Markdown from "metabase/core/components/Markdown";
 
 export const CardIcon = styled(Icon)`
   color: ${color("text-light")};
@@ -24,7 +25,7 @@ export const CardTitle = styled.span`
   word-wrap: break-word;
 `;
 
-export const CardDescription = styled.span`
+export const CardDescription = styled(Markdown)`
   display: block;
   color: ${color("text-dark")};
   word-wrap: break-word;

frontend/src/metabase/timelines/collections/components/TimelineCard/TimelineCard.tsx

@@ -28,7 +28,9 @@ const TimelineCard = ({
       <CardIcon name={timeline.icon} />
       <CardBody>
         <CardTitle>{timeline.name}</CardTitle>
-        <CardDescription>{timeline.description}</CardDescription>
+        {timeline.description && (
+          <CardDescription>{timeline.description}</CardDescription>
+        )}
       </CardBody>
       {eventsCount != null && (
         <CardAside isTopAligned={hasDescription}>

frontend/src/metabase/timelines/questions/components/EventCard/EventCard.styled.tsx

 import styled from "@emotion/styled";
 import { alpha, color } from "metabase/lib/colors";
 import Icon from "metabase/components/Icon";
+import Markdown from "metabase/core/components/Markdown";
 
 export interface CardRootProps {
   isSelected?: boolean;
@@ -46,7 +47,7 @@ export const CardTitle = styled.div`
   word-wrap: break-word;
 `;
 
-export const CardDescription = styled.div`
+export const CardDescription = styled(Markdown)`
   color: ${color("text-dark")};
   margin-top: 0.25rem;
   word-wrap: break-word;

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

@@ -235,6 +235,39 @@ describe("scenarios > collections > timelines", () => {
       cy.findByText("RC1");
       cy.findByText("RC2");
     });
+
+    it("should support markdown in timeline description", () => {
+      cy.createTimeline({
+        name: "Releases",
+        description: "[Release notes](https://metabase.test)",
+      });
+
+      cy.createTimeline({
+        name: "Holidays",
+        description: "[Holiday list](https://metabase.test)",
+      });
+
+      cy.visit("/collection/root/timelines");
+      cy.findByText("Release notes").should("be.visible");
+      cy.findByText("Holiday list").should("be.visible");
+    });
+
+    it("should support markdown in event description", () => {
+      cy.createTimelineWithEvents({
+        timeline: {
+          name: "Releases",
+        },
+        events: [
+          {
+            name: "RC1",
+            description: "[Release notes](https://metabase.test)",
+          },
+        ],
+      });
+
+      cy.visit("/collection/root/timelines");
+      cy.findByText("Release notes").should("be.visible");
+    });
   });
 
   describe("as readonly user", () => {

frontend/test/metabase/scenarios/question/timelines.cy.spec.js

@@ -99,6 +99,26 @@ describe("scenarios > collections > timelines", () => {
       cy.wait("@putTimelineEvent");
       cy.findByText("RC1");
     });
+
+    it("should support markdown in event description", () => {
+      cy.createTimelineWithEvents({
+        timeline: {
+          name: "Releases",
+        },
+        events: [
+          {
+            name: "RC1",
+            description: "[Release notes](https://metabase.test)",
+          },
+        ],
+      });
+
+      visitQuestion(3);
+      cy.findByLabelText("calendar icon").click();
+
+      cy.findByText("Releases").should("be.visible");
+      cy.findByText("Release notes").should("be.visible");
+    });
   });
 
   describe("as readonly user", () => {