Skip to content

Commit e45d511

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore(site): add missing stories for templates (#12537)
1 parent 301c60d commit e45d511

File tree

7 files changed

+135
-42
lines changed

7 files changed

+135
-42
lines changed

‎site/src/modules/templates/TemplateResourcesTable/TemplateResourcesTable.stories.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import {
3+
MockWorkspaceAgent,
4+
MockWorkspaceAgentConnecting,
5+
MockWorkspaceImageResource,
6+
MockWorkspaceResource,
7+
MockWorkspaceVolumeResource,
8+
} from "testHelpers/entities";
9+
import { TemplateResourcesTable } from "./TemplateResourcesTable";
10+
11+
const meta: Meta<typeof TemplateResourcesTable> = {
12+
title: "modules/templates/TemplateResourcesTable",
13+
component: TemplateResourcesTable,
14+
};
15+
16+
export default meta;
17+
type Story = StoryObj<typeof TemplateResourcesTable>;
18+
19+
const Default: Story = {
20+
args: {
21+
resources: [
22+
MockWorkspaceResource,
23+
MockWorkspaceVolumeResource,
24+
MockWorkspaceImageResource,
25+
],
26+
},
27+
};
28+
29+
export const MultipleAgents: Story = {
30+
args: {
31+
resources: [
32+
{
33+
...MockWorkspaceResource,
34+
agents: [MockWorkspaceAgent, MockWorkspaceAgentConnecting],
35+
},
36+
],
37+
},
38+
};
39+
40+
export { Default as TemplateResourcesTable };

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { TemplateUpdateMessage } from "./TemplateUpdateMessage";
3+
4+
const meta: Meta<typeof TemplateUpdateMessage> = {
5+
title: "modules/templates/TemplateUpdateMessage",
6+
component: TemplateUpdateMessage,
7+
args: {
8+
children: `### Update message\nSome message here.`,
9+
},
10+
};
11+
12+
export default meta;
13+
type Story = StoryObj<typeof TemplateUpdateMessage>;
14+
15+
const Default: Story = {};
16+
17+
export { Default as TemplateUpdateMessage };

‎site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,17 @@ import {
1818
FormFooter,
1919
} from "components/Form/Form";
2020
import { IconField } from "components/IconField/IconField";
21-
import { sortedDays } from "modules/templates/TemplateScheduleAutostart/TemplateScheduleAutostart";
2221
import { SelectedTemplate } from "pages/CreateWorkspacePage/SelectedTemplate";
2322
import {
2423
nameValidator,
2524
getFormHelpers,
2625
onChangeTrimmed,
2726
templateDisplayNameValidator,
2827
} from "utils/formUtils";
29-
import type {
30-
TemplateAutostartRequirementDaysValue,
31-
TemplateAutostopRequirementDaysValue,
28+
import {
29+
sortedDays,
30+
type TemplateAutostartRequirementDaysValue,
31+
type TemplateAutostopRequirementDaysValue,
3232
} from "utils/schedule";
3333
import { TemplateUpload, type TemplateUploadProps } from "./TemplateUpload";
3434
import { VariableInput } from "./VariableInput";

‎site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.stories.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { userEvent, within } from "@storybook/test";
3+
import { useState } from "react";
4+
import type { TemplateAutostartRequirementDaysValue } from "utils/schedule";
5+
import { TemplateScheduleAutostart } from "./TemplateScheduleAutostart";
6+
7+
const meta: Meta<typeof TemplateScheduleAutostart> = {
8+
title: "pages/TemplateSettingsPage/TemplateScheduleAutostart",
9+
component: TemplateScheduleAutostart,
10+
args: {
11+
value: [],
12+
},
13+
};
14+
15+
export default meta;
16+
type Story = StoryObj<typeof TemplateScheduleAutostart>;
17+
18+
export const AllowAutoStart: Story = {
19+
args: {
20+
enabled: true,
21+
},
22+
render: function TemplateScheduleAutost(args) {
23+
const [value, setValue] = useState<TemplateAutostartRequirementDaysValue[]>(
24+
args.value,
25+
);
26+
return (
27+
<TemplateScheduleAutostart {...args} value={value} onChange={setValue} />
28+
);
29+
},
30+
play: async ({ canvasElement, step }) => {
31+
const canvas = within(canvasElement);
32+
33+
await step("select days of week", async () => {
34+
const daysToSelect = ["Mon", "Tue", "Wed", "Thu", "Fri"];
35+
for (const day of daysToSelect) {
36+
await userEvent.click(canvas.getByRole("button", { name: day }));
37+
}
38+
});
39+
},
40+
};
41+
42+
export const DisabledAutoStart: Story = {
43+
args: {
44+
enabled: false,
45+
},
46+
};

‎site/src/modules/templates/TemplateScheduleAutostart/TemplateScheduleAutostart.tsx renamed to ‎site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.tsx

Lines changed: 15 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,22 @@ import Button from "@mui/material/Button";
22
import FormHelperText from "@mui/material/FormHelperText";
33
import type { FC } from "react";
44
import { Stack } from "components/Stack/Stack";
5-
import type { TemplateAutostartRequirementDaysValue } from "utils/schedule";
5+
import {
6+
sortedDays,
7+
type TemplateAutostartRequirementDaysValue,
8+
} from "utils/schedule";
69

710
export interface TemplateScheduleAutostartProps {
8-
allow_user_autostart?: boolean;
9-
autostart_requirement_days_of_week: TemplateAutostartRequirementDaysValue[];
11+
enabled: boolean;
12+
value: TemplateAutostartRequirementDaysValue[];
1013
isSubmitting: boolean;
11-
onChange: (newDaysOfWeek: TemplateAutostartRequirementDaysValue[]) => void;
14+
onChange: (value: TemplateAutostartRequirementDaysValue[]) => void;
1215
}
1316

1417
export const TemplateScheduleAutostart: FC<TemplateScheduleAutostartProps> = ({
15-
autostart_requirement_days_of_week,
18+
value,
1619
isSubmitting,
17-
allow_user_autostart,
20+
enabled,
1821
onChange,
1922
}) => {
2023
return (
@@ -49,21 +52,13 @@ export const TemplateScheduleAutostart: FC<TemplateScheduleAutostartProps> = ({
4952
key={day.key}
5053
css={{ borderRadius: 0 }}
5154
// TODO: Adding a background color would also help
52-
color={
53-
autostart_requirement_days_of_week.includes(day.value)
54-
? "primary"
55-
: "secondary"
56-
}
57-
disabled={isSubmitting || !allow_user_autostart}
55+
color={value.includes(day.value) ? "primary" : "secondary"}
56+
disabled={isSubmitting || !enabled}
5857
onClick={() => {
59-
if (!autostart_requirement_days_of_week.includes(day.value)) {
60-
onChange(autostart_requirement_days_of_week.concat(day.value));
58+
if (!value.includes(day.value)) {
59+
onChange(value.concat(day.value));
6160
} else {
62-
onChange(
63-
autostart_requirement_days_of_week.filter(
64-
(obj) => obj !== day.value,
65-
),
66-
);
61+
onChange(value.filter((obj) => obj !== day.value));
6762
}
6863
}}
6964
>
@@ -72,25 +67,12 @@ export const TemplateScheduleAutostart: FC<TemplateScheduleAutostartProps> = ({
7267
))}
7368
</Stack>
7469
<FormHelperText>
75-
<AutostartHelperText
76-
allowed={allow_user_autostart}
77-
days={autostart_requirement_days_of_week}
78-
/>
70+
<AutostartHelperText allowed={enabled} days={value} />
7971
</FormHelperText>
8072
</Stack>
8173
);
8274
};
8375

84-
export const sortedDays = [
85-
"monday",
86-
"tuesday",
87-
"wednesday",
88-
"thursday",
89-
"friday",
90-
"saturday",
91-
"sunday",
92-
] as TemplateAutostartRequirementDaysValue[];
93-
9476
interface AutostartHelperTextProps {
9577
allowed?: boolean;
9678
days: TemplateAutostartRequirementDaysValue[];

‎site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
FormFields,
1616
} from "components/Form/Form";
1717
import { Stack } from "components/Stack/Stack";
18-
import { TemplateScheduleAutostart } from "modules/templates/TemplateScheduleAutostart/TemplateScheduleAutostart";
1918
import { docs } from "utils/docs";
2019
import { getFormHelpers } from "utils/formUtils";
2120
import {
@@ -32,6 +31,7 @@ import {
3231
type TemplateScheduleFormValues,
3332
} from "./formHelpers";
3433
import { ScheduleDialog } from "./ScheduleDialog";
34+
import { TemplateScheduleAutostart } from "./TemplateScheduleAutostart";
3535
import {
3636
ActivityBumpHelperText,
3737
DefaultTTLHelperText,
@@ -535,10 +535,8 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
535535
</Stack>
536536
{allowAdvancedScheduling && (
537537
<TemplateScheduleAutostart
538-
allow_user_autostart={form.values.allow_user_autostart}
539-
autostart_requirement_days_of_week={
540-
form.values.autostart_requirement_days_of_week
541-
}
538+
enabled={Boolean(form.values.allow_user_autostart)}
539+
value={form.values.autostart_requirement_days_of_week}
542540
isSubmitting={isSubmitting}
543541
onChange={async (
544542
newDaysOfWeek: TemplateAutostartRequirementDaysValue[],

‎site/src/utils/schedule.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,16 @@ export type TemplateAutostopRequirementDaysValue =
312312
| "saturday"
313313
| "sunday";
314314

315+
export const sortedDays = [
316+
"monday",
317+
"tuesday",
318+
"wednesday",
319+
"thursday",
320+
"friday",
321+
"saturday",
322+
"sunday",
323+
] as TemplateAutostartRequirementDaysValue[];
324+
315325
export const calculateAutostopRequirementDaysValue = (
316326
value: TemplateAutostopRequirementDaysValue,
317327
): Template["autostop_requirement"]["days_of_week"] => {

0 commit comments

Comments
 (0)