From e45d511f2800513b347618980a6c492a4b78b6fa Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Tue, 12 Mar 2024 17:54:37 -0300 Subject: [PATCH] chore(site): add missing stories for templates (#12537) --- .../TemplateResourcesTable.stories.tsx | 40 ++++++++++++++++ .../TemplateUpdateMessage.stories.tsx | 17 +++++++ .../CreateTemplatePage/CreateTemplateForm.tsx | 8 ++-- .../TemplateScheduleAutostart.stories.tsx | 46 ++++++++++++++++++ .../TemplateScheduleAutostart.tsx | 48 ++++++------------- .../TemplateScheduleForm.tsx | 8 ++-- site/src/utils/schedule.tsx | 10 ++++ 7 files changed, 135 insertions(+), 42 deletions(-) create mode 100644 site/src/modules/templates/TemplateResourcesTable/TemplateResourcesTable.stories.tsx create mode 100644 site/src/modules/templates/TemplateUpdateMessage.stories.tsx create mode 100644 site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.stories.tsx rename site/src/{modules/templates/TemplateScheduleAutostart => pages/TemplateSettingsPage/TemplateSchedulePage}/TemplateScheduleAutostart.tsx (68%) diff --git a/site/src/modules/templates/TemplateResourcesTable/TemplateResourcesTable.stories.tsx b/site/src/modules/templates/TemplateResourcesTable/TemplateResourcesTable.stories.tsx new file mode 100644 index 0000000000..d8609fd63e --- /dev/null +++ b/site/src/modules/templates/TemplateResourcesTable/TemplateResourcesTable.stories.tsx @@ -0,0 +1,40 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { + MockWorkspaceAgent, + MockWorkspaceAgentConnecting, + MockWorkspaceImageResource, + MockWorkspaceResource, + MockWorkspaceVolumeResource, +} from "testHelpers/entities"; +import { TemplateResourcesTable } from "./TemplateResourcesTable"; + +const meta: Meta = { + title: "modules/templates/TemplateResourcesTable", + component: TemplateResourcesTable, +}; + +export default meta; +type Story = StoryObj; + +const Default: Story = { + args: { + resources: [ + MockWorkspaceResource, + MockWorkspaceVolumeResource, + MockWorkspaceImageResource, + ], + }, +}; + +export const MultipleAgents: Story = { + args: { + resources: [ + { + ...MockWorkspaceResource, + agents: [MockWorkspaceAgent, MockWorkspaceAgentConnecting], + }, + ], + }, +}; + +export { Default as TemplateResourcesTable }; diff --git a/site/src/modules/templates/TemplateUpdateMessage.stories.tsx b/site/src/modules/templates/TemplateUpdateMessage.stories.tsx new file mode 100644 index 0000000000..2b3046b453 --- /dev/null +++ b/site/src/modules/templates/TemplateUpdateMessage.stories.tsx @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { TemplateUpdateMessage } from "./TemplateUpdateMessage"; + +const meta: Meta = { + title: "modules/templates/TemplateUpdateMessage", + component: TemplateUpdateMessage, + args: { + children: `### Update message\nSome message here.`, + }, +}; + +export default meta; +type Story = StoryObj; + +const Default: Story = {}; + +export { Default as TemplateUpdateMessage }; diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx index d687fe5e25..3a470e0115 100644 --- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx +++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx @@ -18,7 +18,6 @@ import { FormFooter, } from "components/Form/Form"; import { IconField } from "components/IconField/IconField"; -import { sortedDays } from "modules/templates/TemplateScheduleAutostart/TemplateScheduleAutostart"; import { SelectedTemplate } from "pages/CreateWorkspacePage/SelectedTemplate"; import { nameValidator, @@ -26,9 +25,10 @@ import { onChangeTrimmed, templateDisplayNameValidator, } from "utils/formUtils"; -import type { - TemplateAutostartRequirementDaysValue, - TemplateAutostopRequirementDaysValue, +import { + sortedDays, + type TemplateAutostartRequirementDaysValue, + type TemplateAutostopRequirementDaysValue, } from "utils/schedule"; import { TemplateUpload, type TemplateUploadProps } from "./TemplateUpload"; import { VariableInput } from "./VariableInput"; diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.stories.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.stories.tsx new file mode 100644 index 0000000000..35a5218c5e --- /dev/null +++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.stories.tsx @@ -0,0 +1,46 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { userEvent, within } from "@storybook/test"; +import { useState } from "react"; +import type { TemplateAutostartRequirementDaysValue } from "utils/schedule"; +import { TemplateScheduleAutostart } from "./TemplateScheduleAutostart"; + +const meta: Meta = { + title: "pages/TemplateSettingsPage/TemplateScheduleAutostart", + component: TemplateScheduleAutostart, + args: { + value: [], + }, +}; + +export default meta; +type Story = StoryObj; + +export const AllowAutoStart: Story = { + args: { + enabled: true, + }, + render: function TemplateScheduleAutost(args) { + const [value, setValue] = useState( + args.value, + ); + return ( + + ); + }, + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + await step("select days of week", async () => { + const daysToSelect = ["Mon", "Tue", "Wed", "Thu", "Fri"]; + for (const day of daysToSelect) { + await userEvent.click(canvas.getByRole("button", { name: day })); + } + }); + }, +}; + +export const DisabledAutoStart: Story = { + args: { + enabled: false, + }, +}; diff --git a/site/src/modules/templates/TemplateScheduleAutostart/TemplateScheduleAutostart.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.tsx similarity index 68% rename from site/src/modules/templates/TemplateScheduleAutostart/TemplateScheduleAutostart.tsx rename to site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.tsx index 35d26499f8..697aab9c37 100644 --- a/site/src/modules/templates/TemplateScheduleAutostart/TemplateScheduleAutostart.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.tsx @@ -2,19 +2,22 @@ import Button from "@mui/material/Button"; import FormHelperText from "@mui/material/FormHelperText"; import type { FC } from "react"; import { Stack } from "components/Stack/Stack"; -import type { TemplateAutostartRequirementDaysValue } from "utils/schedule"; +import { + sortedDays, + type TemplateAutostartRequirementDaysValue, +} from "utils/schedule"; export interface TemplateScheduleAutostartProps { - allow_user_autostart?: boolean; - autostart_requirement_days_of_week: TemplateAutostartRequirementDaysValue[]; + enabled: boolean; + value: TemplateAutostartRequirementDaysValue[]; isSubmitting: boolean; - onChange: (newDaysOfWeek: TemplateAutostartRequirementDaysValue[]) => void; + onChange: (value: TemplateAutostartRequirementDaysValue[]) => void; } export const TemplateScheduleAutostart: FC = ({ - autostart_requirement_days_of_week, + value, isSubmitting, - allow_user_autostart, + enabled, onChange, }) => { return ( @@ -49,21 +52,13 @@ export const TemplateScheduleAutostart: FC = ({ key={day.key} css={{ borderRadius: 0 }} // TODO: Adding a background color would also help - color={ - autostart_requirement_days_of_week.includes(day.value) - ? "primary" - : "secondary" - } - disabled={isSubmitting || !allow_user_autostart} + color={value.includes(day.value) ? "primary" : "secondary"} + disabled={isSubmitting || !enabled} onClick={() => { - if (!autostart_requirement_days_of_week.includes(day.value)) { - onChange(autostart_requirement_days_of_week.concat(day.value)); + if (!value.includes(day.value)) { + onChange(value.concat(day.value)); } else { - onChange( - autostart_requirement_days_of_week.filter( - (obj) => obj !== day.value, - ), - ); + onChange(value.filter((obj) => obj !== day.value)); } }} > @@ -72,25 +67,12 @@ export const TemplateScheduleAutostart: FC = ({ ))} - + ); }; -export const sortedDays = [ - "monday", - "tuesday", - "wednesday", - "thursday", - "friday", - "saturday", - "sunday", -] as TemplateAutostartRequirementDaysValue[]; - interface AutostartHelperTextProps { allowed?: boolean; days: TemplateAutostartRequirementDaysValue[]; diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx index 9dcee449e0..33b600273d 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx @@ -15,7 +15,6 @@ import { FormFields, } from "components/Form/Form"; import { Stack } from "components/Stack/Stack"; -import { TemplateScheduleAutostart } from "modules/templates/TemplateScheduleAutostart/TemplateScheduleAutostart"; import { docs } from "utils/docs"; import { getFormHelpers } from "utils/formUtils"; import { @@ -32,6 +31,7 @@ import { type TemplateScheduleFormValues, } from "./formHelpers"; import { ScheduleDialog } from "./ScheduleDialog"; +import { TemplateScheduleAutostart } from "./TemplateScheduleAutostart"; import { ActivityBumpHelperText, DefaultTTLHelperText, @@ -535,10 +535,8 @@ export const TemplateScheduleForm: FC = ({ {allowAdvancedScheduling && ( {