coder · aslilac · Feb 22, 2024 · Feb 22, 2024 · Feb 22, 2024 · Feb 22, 2024
diff --git a/site/src/modules/templates/TemplateUpdateMessage.tsx b/site/src/modules/templates/TemplateUpdateMessage.tsx
@@ -0,0 +1,44 @@
+import { type Interpolation, type Theme } from "@emotion/react";
+import { type FC } from "react";
+import { MemoizedMarkdown } from "components/Markdown/Markdown";
+
+interface TemplateUpdateMessageProps {
+  children: string;
+}
+
+export const TemplateUpdateMessage: FC<TemplateUpdateMessageProps> = ({
+  children,
+}) => {
+  return (
+    <MemoizedMarkdown css={styles.versionMessage}>{children}</MemoizedMarkdown>
+  );
+};
+
+const styles = {
+  versionMessage: {
+    fontSize: 14,
+    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>>;
diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx
@@ -2,6 +2,7 @@ import {
   mockApiError,
   MockTemplate,
   MockTemplateVersion,
+  MockTemplateVersionWithMarkdownMessage,
 } from "testHelpers/entities";
 import {
   TemplateVersionPageView,
@@ -45,6 +46,12 @@ type Story = StoryObj<typeof TemplateVersionPageView>;
 
 export const Default: Story = {};
 
+export const LongVersionMessage: Story = {
+  args: {
+    currentVersion: MockTemplateVersionWithMarkdownMessage,
+  },
+};
+
 export const Error: Story = {
   args: {
     ...defaultArgs,

diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx
@@ -8,7 +8,6 @@ import { Margins } from "components/Margins/Margins";
 import {
   PageHeader,
   PageHeaderCaption,
-  PageHeaderSubtitle,
   PageHeaderTitle,
 } from "components/PageHeader/PageHeader";
 import { Stack } from "components/Stack/Stack";
@@ -18,6 +17,7 @@ import type { TemplateVersion } from "api/typesGenerated";
 import { createDayString } from "utils/createDayString";
 import { TemplateVersionFiles } from "utils/templateVersion";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
 
 export interface TemplateVersionPageViewProps {
   versionName: string;
@@ -65,17 +65,17 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
       >
         <PageHeaderCaption>Version</PageHeaderCaption>
         <PageHeaderTitle>{versionName}</PageHeaderTitle>
-        {currentVersion &&
-          currentVersion.message &&
-          currentVersion.message !== "" && (
-            <PageHeaderSubtitle>{currentVersion.message}
8000
</PageHeaderSubtitle>
-          )}
       </PageHeader>
 
       {!currentFiles && !error && <Loader />}
 
       <Stack spacing={4}>
         {Boolean(error) && <ErrorAlert error={error} />}
+        {currentVersion?.message && (
+          <TemplateUpdateMessage>
+            {currentVersion.message}
+          </TemplateUpdateMessage>
+        )}
         {currentVersion && currentFiles && (
           <>
             <Stats>

diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.stories.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.stories.tsx
@@ -0,0 +1,49 @@
+import {
+  MockTemplate,
+  MockTemplateVersion,
+  MockTemplateVersionWithMarkdownMessage,
+} from "testHelpers/entities";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ChangeVersionDialog } from "./ChangeVersionDialog";
+
+const noMessage = {
+  ...MockTemplateVersion,
+  message: "",
+};
+
+const meta: Meta<typeof ChangeVersionDialog> = {
+  title: "pages/WorkspacePage/ChangeVersionDialog",
+  component: ChangeVersionDialog,
+  args: {
+    open: true,
+    template: MockTemplate,
+    templateVersions: [
+      MockTemplateVersion,
+      MockTemplateVersionWithMarkdownMessage,
+      noMessage,
+    ],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ChangeVersionDialog>;
+
+export const NoVersionSelected: Story = {};
+
+export const NoMessage: Story = {
+  args: {
+    defaultTemplateVersion: noMessage,
+  },
+};
+
+export const ShortMessage: Story = {
+  args: {
+    defaultTemplateVersion: MockTemplateVersion,
+  },
+};
+
+export const LongMessage: Story = {
+  args: {
+    defaultTemplateVersion: MockTemplateVersionWithMarkdownMessage,
+  },
+};
diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx
@@ -6,7 +6,7 @@ import AlertTitle from "@mui/material/AlertTitle";
 import InfoIcon from "@mui/icons-material/InfoOutlined";
 import { css } from "@emotion/css";
 import type { Template, TemplateVersion } from "api/typesGenerated";
-import { Alert, AlertDetail } from "components/Alert/Alert";
+import { Alert } from "components/Alert/Alert";
 import type { DialogProps } from "components/Dialogs/Dialog";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { FormFields } from "components/Form/Form";
@@ -16,6 +16,7 @@ import { AvatarData } from "components/AvatarData/AvatarData";
 import { Pill } from "components/Pill/Pill";
 import { Avatar } from "components/Avatar/Avatar";
 import { createDayString } from "utils/createDayString";
+import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
 
 export type ChangeVersionDialogProps = DialogProps & {
   template: Template | undefined;
@@ -34,7 +35,9 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
   ...dialogProps
 }) => {
   const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false);
-  const selectedTemplateVersion = useRef<TemplateVersion | undefined>();
+  const selectedTemplateVersion = useRef<TemplateVersion | undefined>(
+    defaultTemplateVersion,
+  );
   const version = selectedTemplateVersion.current;
   const validTemplateVersions = templateVersions?.filter((version) => {
     return version.job.status === "succeeded";
@@ -138,14 +141,18 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
                 />
               </FormFields>
               {version && (
-                <Alert severity="info">
-                  <AlertTitle>
-                    Published by {version.created_by.username}
-                  </AlertTitle>
+                <>
                   {version.message && (
-                    <AlertDetail>{version.message}</AlertDetail>
+                    <TemplateUpdateMessage>
+                      {version.message}
+                    </TemplateUpdateMessage>
                   )}
-                </Alert>
+                  <Alert severity="info">
+                    <AlertTitle>
+                      Published by {version.created_by.username}
+                    </AlertTitle>
+                  </Alert>
+                </>
               )}
             </>
           ) : (

diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
@@ -22,21 +22,22 @@ type NotificationsProps = {
   items: NotificationItem[];
   severity: ThemeRole;
   icon: ReactNode;
-  isDefaultOpen?: boolean;
 };
 
 export const Notifications: FC<NotificationsProps> = ({
   items,
   severity,
   icon,
-  isDefaultOpen,
 }) => {
   const theme = useTheme();
 
   return (
-    <Popover mode="hover" isDefaultOpen={isDefaultOpen}>
+    <Popover mode="hover">
       <PopoverTrigger>
-        <div css={styles.pillContainer}>
+        <div
+          css={styles.pillContainer}
+          data-testid={`${severity}-notifications`}
+        >
           <NotificationPill items={items} severity={severity} icon={icon} />
         </div>
       </PopoverTrigger>