Skip to content

Commit 4b48bfd

Browse files
aslilacaslilac
committed
update WorkspaceNotifications 
1 parent e0a1abd commit 4b48bfd

File tree

5 files changed

+119
-31
lines changed

5 files changed

+119
-31
lines changed

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

Lines changed: 2 additions & 12 deletions
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,
@@ -47,18 +48,7 @@ export const Default: Story = {};
4748

4849
export const LongVersionMessage: Story = {
4950
args: {
50-
currentVersion: {
51-
...MockTemplateVersion,
52-
message: `
53-
# Abiding Grace
54-
## Enchantment
55-
At the beginning of your end step, choose one —
56-
57-
- You gain 1 life.
58-
59-
- Return target creature card with mana value 1 from your graveyard to the battlefield.
60-
`,
61-
},
51+
currentVersion: MockTemplateVersionWithMarkdownMessage,
6252
},
6353
};
6454

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

Lines changed: 5 additions & 4 deletions
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>

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

Lines changed: 98 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { expect, userEvent, waitFor, within } from "@storybook/test";
13
import {
24
MockOutdatedWorkspace,
35
MockTemplate,
46
MockTemplateVersion,
7+
MockTemplateVersionWithMarkdownMessage,
58
MockWorkspace,
69
} from "testHelpers/entities";
7-
import { WorkspaceNotifications } from "./WorkspaceNotifications";
8-
import type { Meta, StoryObj } from "@storybook/react";
9-
import { withDashboardProvider } from "testHelpers/storybook";
1010
import { getWorkspaceResolveAutostartQueryKey } from "api/queries/workspaceQuota";
11+
import { withDashboardProvider } from "testHelpers/storybook";
12+
import { WorkspaceNotifications } from "./WorkspaceNotifications";
1113

1214
const defaultPermissions = {
1315
readWorkspace: true,
@@ -17,7 +19,7 @@ const defaultPermissions = {
1719
};
1820

1921
const meta: Meta<typeof WorkspaceNotifications> = {
20-
title: "components/WorkspaceNotifications",
22+
title: "pages/WorkspacePage/WorkspaceNotifications",
2123
component: WorkspaceNotifications,
2224
args: {
2325
latestVersion: MockTemplateVersion,
@@ -45,7 +47,37 @@ type Story = StoryObj<typeof WorkspaceNotifications>;
4547
export const Outdated: Story = {
4648
args: {
4749
workspace: MockOutdatedWorkspace,
48-
defaultOpen: "info",
50+
},
51+
52+
play: async ({ canvasElement, step }) => {
53+
const screen = within(canvasElement);
54+
55+
await step("activate hover trigger", async () => {
56+
await userEvent.hover(screen.getByTestId("info-notifications"));
57+
await waitFor(() =>
58+
expect(
59+
screen.getByText(MockTemplateVersion.message),
60+
).toBeInTheDocument(),
61+
);
62+
});
63+
},
64+
};
65+
66+
export const OutdatedWithMarkdownMessage: Story = {
67+
args: {
68+
workspace: MockOutdatedWorkspace,
69+
latestVersion: MockTemplateVersionWithMarkdownMessage,
70+
},
71+
72+
play: async ({ canvasElement, step }) => {
73+
const screen = within(canvasElement);
74+
75+
await step("activate hover trigger", async () => {
76+
await userEvent.hover(screen.getByTestId("info-notifications"));
77+
await waitFor(() =>
78+
expect(screen.getByText(/an update is available/i)).toBeInTheDocument(),
79+
);
80+
});
4981
},
5082
};
5183

@@ -56,7 +88,6 @@ export const RequiresManualUpdate: Story = {
5688
automatic_updates: "always",
5789
autostart_schedule: "daily",
5890
},
59-
defaultOpen: "warning",
6091
},
6192
parameters: {
6293
queries: [
@@ -68,6 +99,19 @@ export const RequiresManualUpdate: Story = {
6899
},
69100
],
70101
},
102+
103+
play: async ({ canvasElement, step }) => {
104+
const screen = within(canvasElement);
105+
106+
await step("activate hover trigger", async () => {
107+
await userEvent.hover(screen.getByTestId("warning-notifications"));
108+
await waitFor(() =>
109+
expect(
110+
screen.getByText(/unable to automatically update/i),
111+
).toBeInTheDocument(),
112+
);
113+
});
114+
},
71115
};
72116

73117
export const Unhealthy: Story = {
@@ -83,7 +127,17 @@ export const Unhealthy: Story = {
83127
status: "running",
84128
},
85129
},
86-
defaultOpen: "warning",
130+
},
131+
132+
play: async ({ canvasElement, step }) => {
133+
const screen = within(canvasElement);
134+
135+
await step("activate hover trigger", async () => {
136+
await userEvent.hover(screen.getByTestId("warning-notifications"));
137+
await waitFor(() =>
138+
expect(screen.getByText(/workspace is unhealthy/i)).toBeInTheDocument(),
139+
);
140+
});
87141
},
88142
};
89143

@@ -95,6 +149,8 @@ export const UnhealthyWithoutUpdatePermission: Story = {
95149
updateWorkspace: false,
96150
},
97151
},
152+
153+
play: Unhealthy.play,
98154
};
99155

100156
const DormantWorkspace = {
@@ -104,9 +160,19 @@ const DormantWorkspace = {
104160

105161
export const Dormant: Story = {
106162
args: {
107-
defaultOpen: "warning",
108163
workspace: DormantWorkspace,
109164
},
165+
166+
play: async ({ canvasElement, step }) => {
167+
const screen = within(canvasElement);
168+
169+
await step("activate hover trigger", async () => {
170+
await userEvent.hover(screen.getByTestId("warning-notifications"));
171+
await waitFor(() =>
172+
expect(screen.getByText(/workspace is dormant/i)).toBeInTheDocument(),
173+
);
174+
});
175+
},
110176
};
111177

112178
export const DormantWithDeletingDate: Story = {
@@ -117,6 +183,8 @@ export const DormantWithDeletingDate: Story = {
117183
deleting_at: new Date("2020-10-01T00:00:00Z").toISOString(),
118184
},
119185
},
186+
187+
play: Dormant.play,
120188
};
121189

122190
export const PendingInQueue: Story = {
@@ -133,7 +201,17 @@ export const PendingInQueue: Story = {
133201
},
134202
},
135203
},
136-
defaultOpen: "info",
204+
},
205+
206+
play: async ({ canvasElement, step }) => {
207+
const screen = within(canvasElement);
208+
209+
await step("activate hover trigger", async () => {
210+
await userEvent.hover(await screen.findByTestId("info-notifications"));
211+
await waitFor(() =>
212+
expect(screen.getByText(/build is pending/i)).toBeInTheDocument(),
213+
);
214+
});
137215
},
138216
};
139217

@@ -145,6 +223,16 @@ export const TemplateDeprecated: Story = {
145223
deprecation_message:
146224
"Template deprecated due to reasons. [Learn more](#)",
147225
},
148-
defaultOpen: "warning",
226+
},
227+
228+
play: async ({ canvasElement, step }) => {
229+
const screen = within(canvasElement);
230+
231+
await step("activate hover trigger", async () => {
232+
await userEvent.hover(screen.getByTestId("warning-notifications"));
233+
await waitFor(() =>
234+
expect(screen.getByText(/deprecated template/i)).toBeInTheDocument(),
235+
);
236+
});
149237
},
150238
};

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,13 @@ type WorkspaceNotificationsProps = {
2424
onUpdateWorkspace: () => void;
2525
onActivateWorkspace: () => void;
2626
latestVersion?: TemplateVersion;
27-
// Used for storybook
28-
defaultOpen?: "info" | "warning";
2927
};
3028

3129
export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
3230
workspace,
3331
template,
3432
latestVersion,
3533
permissions,
36-
defaultOpen,
3734
onRestartWorkspace,
3835
onUpdateWorkspace,
3936
onActivateWorkspace,
@@ -227,7 +224,6 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
227224
<div css={styles.notificationsGroup}>
228225
{infoNotifications.length > 0 && (
229226
<Notifications
230-
isDefaultOpen={defaultOpen === "info"}
231227
items={infoNotifications}
232228
severity="info"
233229
icon={<InfoOutlined />}
@@ -236,7 +232,6 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
236232

237233
{warningNotifications.length > 0 && (
238234
<Notifications
239-
isDefaultOpen={defaultOpen === "warning"}
240235
items={warningNotifications}
241236
severity="warning"
242237
icon={<WarningRounded />}

‎site/src/testHelpers/entities.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -434,6 +434,20 @@ You can add instructions here
434434
archived: false,
435435
};
436436

437+
export const MockTemplateVersionWithMarkdownMessage: TypesGen.TemplateVersion =
438+
{
439+
...MockTemplateVersion,
440+
message: `
441+
# Abiding Grace
442+
## Enchantment
443+
At the beginning of your end step, choose one —
444+
445+
- You gain 1 life.
446+
447+
- Return target creature card with mana value 1 from your graveyard to the battlefield.
448+
`,
449+
};
450+
437451
export const MockTemplate: TypesGen.Template = {
438452
id: "test-template",
439453
created_at: "2022-05-17T17:39:01.382927298Z",

0 commit comments

Comments
 (0)