feat: support markdown in update messages

coder · aslilac · Feb 22, 2024 · Feb 22, 2024 · Feb 22, 2024 · Feb 22, 2024
commit 8a9c40dbeab57b97a1924045e9109fdd6a56919d
diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx
@@ -45,6 +45,23 @@ type Story = StoryObj<typeof TemplateVersionPageView>;
 
 export const Default: Story = {};
 
+export const LongVersionMessage: Story = {
+  args: {
+    currentVersion: {
+      ...MockTemplateVersion,
+      message: `
+# Abiding Grace
+## Enchantment
+At the beginning of your end step, choose one —
+
+- You gain 1 life.
+
+- Return target creature card with mana value 1 from your graveyard to the battlefield.
+`,
+    },
+  },
+};
+
 export const Error: Story = {
   args: {
     ...defaultArgs,

diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx
@@ -1,6 +1,7 @@
 import Button from "@mui/material/Button";
 import AddIcon from "@mui/icons-material/Add";
 import EditIcon from "@mui/icons-material/Edit";
+import { type Interpolation, type Theme } from "@emotion/react";
 import { type FC } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { Loader } from "components/Loader/Loader";
@@ -18,6 +19,7 @@ import type { TemplateVersion } from "api/typesGenerated";
 import { createDayString } from "utils/createDayString";
 import { TemplateVersionFiles } from "utils/templateVersion";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { MemoizedMarkdown } from "components/Markdown/Markdown";
 
 export interface TemplateVersionPageViewProps {
   versionName: string;
@@ -65,17 +67,17 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
       >
         <PageHeaderCaption>Version</PageHeaderCaption>
         <PageHeaderTitle>{versionName}</PageHeaderTitle>
-        {currentVersion &&
-          currentVersion.message &&
-          currentVersion.message !== "" && (
-            <PageHeaderSubtitle>{currentVersion.message}</PageHeaderSubtitle>
-          )}
       </PageHeader>
 
       {!currentFiles && !error && <Loader />}
 
       <Stack spacing={4}>
         {Boolean(error) && <ErrorAlert error={error} />}
+        {currentVersion?.message && (
+          <MemoizedMarkdown css={styles.versionMessage}>
+            {currentVersion.message}
+          </MemoizedMarkdown>
+        )}
         {currentVersion && currentFiles && (
           <>
             <Stats>
@@ -110,4 +112,33 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
   );
 };
 
+const styles = {
+  versionMessage: {
+    fontSize: "0.9em",
+    lineHeight: 1.2,
+
+    "& h1, & h2, & h3, & h4, & h5, & h6": {
+      margin: "0 0 0.75em",
+    },
+    "& h1": {
+      fontSize: "1.2em",
+    },
+    "& h2": {
+      fontSize: "1.15em",
+    },
+    "& h3": {
+      fontSize: "1.1em",
+    },
+    "& h4": {
+      fontSize: "1.05em",
+    },
+    "& h5": {
+      fontSize: "1em",
+    },
+    "& h6": {
+      fontSize: "0.95em",
+    },
+  },
+} satisfies Record<string, Interpolation<Theme>>;
+
 export default TemplateVersionPageView;
diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx
@@ -10,6 +10,7 @@ import { Alert, AlertDetail } from "components/Alert/Alert";
 import type { DialogProps } from "components/Dialogs/Dialog";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { FormFields } from "components/Form/Form";
+import { MemoizedMarkdown } from "components/Markdown/Markdown";
 import { Stack } from "components/Stack/Stack";
 import { Loader } from "components/Loader/Loader";
 import { AvatarData } from "components/AvatarData/AvatarData";
@@ -143,7 +144,9 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
                     Published by {version.created_by.username}
                   </AlertTitle>
                   {version.message && (
-                    <AlertDetail>{version.message}</AlertDetail>
+                    <AlertDetail>
+                      <MemoizedMarkdown>{version.message}</MemoizedMarkdown>
+                    </AlertDetail>
                   )}
                 </Alert>
               )}

diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
@@ -71,7 +71,11 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
       notifications.push({
         title: "An update is available for your workspace",
         severity: "info",
-        detail: latestVersion.message,
+        detail: (
+   
8000
       <MemoizedInlineMarkdown allowedElements={["ol", "ul", "li"]}>
+            {latestVersion.message}
+          </MemoizedInlineMarkdown>
+        ),
         actions,
       });
     }

diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -23,7 +23,7 @@ import {
   toggleFavorite,
   cancelBuild,
 } from "api/queries/workspaces";
-import { Alert } from "components/Alert/Alert";
+import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
 import { Stack } from "components/Stack/Stack";
 import {
   ConfirmDialog,
@@ -324,7 +324,9 @@ export const WorkspaceReadyPage: FC<WorkspaceReadyPageProps> = ({
               <strong>delete non-persistent data</strong>.
             </p>
             {latestVersion?.message && (
-              <Alert severity="info">{latestVersion.message}</Alert>
+              <MemoizedInlineMarkdown allowedElements={["ol", "ul", "li"]}>
+                {latestVersion.message}
+              </MemoizedInlineMarkdown>
             )}
           </Stack>
         }