Skip to content

Commit 66585f0

Browse files
aslilacaslilac
authored
feat: support markdown in update messages (#12273)
1 parent 7e6cb66 commit 66585f0

10 files changed

+246
-36
lines changed

‎site/src/modules/templates/TemplateUpdateMessage.tsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { type Interpolation, type Theme } from "@emotion/react";
2+
import { type FC } from "react";
3+
import { MemoizedMarkdown } from "components/Markdown/Markdown";
4+
5+
interface TemplateUpdateMessageProps {
6+
children: string;
7+
}
8+
9+
export const TemplateUpdateMessage: FC<TemplateUpdateMessageProps> = ({
10+
children,
11+
}) => {
12+
return (
13+
<MemoizedMarkdown css={styles.versionMessage}>{children}</MemoizedMarkdown>
14+
);
15+
};
16+
17+
const styles = {
18+
versionMessage: {
19+
fontSize: 14,
20+
lineHeight: 1.2,
21+
22+
"& h1, & h2, & h3, & h4, & h5, & h6": {
23+
margin: "0 0 0.75em",
24+
},
25+
"& h1": {
26+
fontSize: "1.2em",
27+
},
28+
"& h2": {
29+
fontSize: "1.15em",
30+
},
31+
"& h3": {
32+
fontSize: "1.1em",
33+
},
34+
"& h4": {
35+
fontSize: "1.05em",
36+
},
37+
"& h5": {
38+
fontSize: "1em",
39+
},
40+
"& h6": {
41+
fontSize: "0.95em",
42+
},
43+
},
44+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {
22
mockApiError,
33
MockTemplate,
44
MockTemplateVersion,
5+
MockTemplateVersionWithMarkdownMessage,
56
} from "testHelpers/entities";
67
import {
78
TemplateVersionPageView,
@@ -45,6 +46,12 @@ type Story = StoryObj<typeof TemplateVersionPageView>;
4546

4647
export const Default: Story = {};
4748

49+
export const LongVersionMessage: Story = {
50+
args: {
51+
currentVersion: MockTemplateVersionWithMarkdownMessage,
52+
},
53+
};
54+
4855
export const Error: Story = {
4956
args: {
5057
...defaultArgs,

‎site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { Margins } from "components/Margins/Margins";
88
import {
99
PageHeader,
1010
PageHeaderCaption,
11-
PageHeaderSubtitle,
1211
PageHeaderTitle,
1312
} from "components/PageHeader/PageHeader";
1413
import { Stack } from "components/Stack/Stack";
@@ -18,6 +17,7 @@ import type { TemplateVersion } from "api/typesGenerated";
1817
import { createDayString } from "utils/createDayString";
1918
import { TemplateVersionFiles } from "utils/templateVersion";
2019
import { ErrorAlert } from "components/Alert/ErrorAlert";
20+
import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
2121

2222
export interface TemplateVersionPageViewProps {
2323
versionName: string;
@@ -65,17 +65,17 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
6565
>
6666
<PageHeaderCaption>Version</PageHeaderCaption>
6767
<PageHeaderTitle>{versionName}</PageHeaderTitle>
68-
{currentVersion &&
69-
currentVersion.message &&
70-
currentVersion.message !== "" && (
71-
<PageHeaderSubtitle>{currentVersion.message}</PageHeaderSubtitle>
72-
)}
7368
</PageHeader>
7469

7570
{!currentFiles && !error && <Loader />}
7671

7772
<Stack spacing={4}>
7873
{Boolean(error) && <ErrorAlert error={error} />}
74+
{currentVersion?.message && (
75+
<TemplateUpdateMessage>
76+
{currentVersion.message}
77+
</TemplateUpdateMessage>
78+
)}
7979
{currentVersion && currentFiles && (
8080
<>
8181
<Stats>

‎site/src/pages/WorkspacePage/ChangeVersionDialog.stories.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import {
2+
MockTemplate,
3+
MockTemplateVersion,
4+
MockTemplateVersionWithMarkdownMessage,
5+
} from "testHelpers/entities";
6+
import type { Meta, StoryObj } from "@storybook/react";
7+
import { ChangeVersionDialog } from "./ChangeVersionDialog";
8+
9+
const noMessage = {
10+
...MockTemplateVersion,
11+
message: "",
12+
};
13+
14+
const meta: Meta<typeof ChangeVersionDialog> = {
15+
title: "pages/WorkspacePage/ChangeVersionDialog",
16+
component: ChangeVersionDialog,
17+
args: {
18+
open: true,
19+
template: MockTemplate,
20+
templateVersions: [
21+
MockTemplateVersion,
22+
MockTemplateVersionWithMarkdownMessage,
23+
noMessage,
24+
],
25+
},
26+
};
27+
28+
export default meta;
29+
type Story = StoryObj<typeof ChangeVersionDialog>;
30+
31+
export const NoVersionSelected: Story = {};
32+
33+
export const NoMessage: Story = {
34+
args: {
35+
defaultTemplateVersion: noMessage,
36+
},
37+
};
38+
39+
export const ShortMessage: Story = {
40+
args: {
41+
defaultTemplateVersion: MockTemplateVersion,
42+
},
43+
};
44+
45+
export const LongMessage: Story = {
46+
args: {
47+
defaultTemplateVersion: MockTemplateVersionWithMarkdownMessage,
48+
},
49+
};

‎site/src/pages/WorkspacePage/ChangeVersionDialog.tsx

+15-8
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import AlertTitle from "@mui/material/AlertTitle";
66
import InfoIcon from "@mui/icons-material/InfoOutlined";
77
import { css } from "@emotion/css";
88
import type { Template, TemplateVersion } from "api/typesGenerated";
9-
import { Alert, AlertDetail } from "components/Alert/Alert";
9+
import { Alert } from "components/Alert/Alert";
1010
import type { DialogProps } from "components/Dialogs/Dialog";
1111
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
1212
import { FormFields } from "components/Form/Form";
@@ -16,6 +16,7 @@ import { AvatarData } from "components/AvatarData/AvatarData";
1616
import { Pill } from "components/Pill/Pill";
1717
import { Avatar } from "components/Avatar/Avatar";
1818
import { createDayString } from "utils/createDayString";
19+
import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
1920

2021
export type ChangeVersionDialogProps = DialogProps & {
2122
template: Template | undefined;
@@ -34,7 +35,9 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
3435
...dialogProps
3536
}) => {
3637
const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false);
37-
const selectedTemplateVersion = useRef<TemplateVersion | undefined>();
38+
const selectedTemplateVersion = useRef<TemplateVersion | undefined>(
39+
defaultTemplateVersion,
40+
);
3841
const version = selectedTemplateVersion.current;
3942
const validTemplateVersions = templateVersions?.filter((version) => {
4043
return version.job.status === "succeeded";
@@ -138,14 +141,18 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
138141
/>
139142
</FormFields>
140143
{version && (
141-
<Alert severity="info">
142-
<AlertTitle>
143-
Published by {version.created_by.username}
144-
</AlertTitle>
144+
<>
145145
{version.message && (
146-
<AlertDetail>{version.message}</AlertDetail>
146+
<TemplateUpdateMessage>
147+
{version.message}
148+
</TemplateUpdateMessage>
147149
)}
148-
</Alert>
150+
<Alert severity="info">
151+
<AlertTitle>
152+
Published by {version.created_by.username}
153+
</AlertTitle>
154+
</Alert>
155+
</>
149156
)}
150157
</>
151158
) : (

‎site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,22 @@ type NotificationsProps = {
2222
items: NotificationItem[];
2323
severity: ThemeRole;
2424
icon: ReactNode;
25-
isDefaultOpen?: boolean;
2625
};
2726

2827
export const Notifications: FC<NotificationsProps> = ({
2928
items,
3029
severity,
3130
icon,
32-
isDefaultOpen,
3331
}) => {
3432
const theme = useTheme();
3533

3634
return (
37-
<Popover mode="hover" isDefaultOpen={isDefaultOpen}>
35+
<Popover mode="hover">
3836
<PopoverTrigger>
39-
<div css={styles.pillContainer}>
37+
<div
38+
css={styles.pillContainer}
39+
data-testid={`${severity}-notifications`}
40+
>
4041
<NotificationPill items={items} severity={severity} icon={icon} />
4142
</div>
4243
</PopoverTrigger>

0 commit comments

Comments
 (0)