Add stories for TemplateScheduleAutostart and move it to where it is used

BrunoQuaresma · BrunoQuaresma · commit 4842ffa01541 · 2024-03-11T17:45:42.000Z
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -18,7 +18,7 @@ import {
   FormFooter,
 } from "components/Form/Form";
 import { IconField } from "components/IconField/IconField";
-import { sortedDays } from "modules/templates/TemplateScheduleAutostart/TemplateScheduleAutostart";
+import { sortedDays } from "pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart/TemplateScheduleAutostart";
 import { SelectedTemplate } from "pages/CreateWorkspacePage/SelectedTemplate";
 import {
   nameValidator,
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.stories.tsx 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<typeof TemplateScheduleAutostart> = {
+  title: "modules/templates/TemplateScheduleAutostart",
+  component: TemplateScheduleAutostart,
+  args: {
+    value: [],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TemplateScheduleAutostart>;
+
+export const AllowAutoStart: Story = {
+  args: {
+    enabled: true,
+  },
+  render: function TemplateScheduleAutost(args) {
+    const [value, setValue] = useState<TemplateAutostartRequirementDaysValue[]>(
+      args.value,
+    );
+    return (
+      <TemplateScheduleAutostart {...args} value={value} onChange={setValue} />
+    );
+  },
+  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/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.tsx
@@ -5,16 +5,16 @@ import { Stack } from "components/Stack/Stack";
 import 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<TemplateScheduleAutostartProps> = ({
-  autostart_requirement_days_of_week,
+  value,
   isSubmitting,
-  allow_user_autostart,
+  enabled,
   onChange,
 }) => {
   return (
@@ -49,21 +49,13 @@ export const TemplateScheduleAutostart: FC<TemplateScheduleAutostartProps> = ({
             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,10 +64,7 @@ export const TemplateScheduleAutostart: FC<TemplateScheduleAutostartProps> = ({
         ))}
       </Stack>
       <FormHelperText>
-        <AutostartHelperText
-          allowed={allow_user_autostart}
-          days={autostart_requirement_days_of_week}
-        />
+        <AutostartHelperText allowed={enabled} days={value} />
       </FormHelperText>
     </Stack>
   );
diff --git 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<TemplateScheduleForm> = ({
           </Stack>
           {allowAdvancedScheduling && (
             <TemplateScheduleAutostart
-              allow_user_autostart={form.values.allow_user_autostart}
-              autostart_requirement_days_of_week={
-                form.values.autostart_requirement_days_of_week
-              }
+              enabled={Boolean(form.values.allow_user_autostart)}
+              value={form.values.autostart_requirement_days_of_week}
               isSubmitting={isSubmitting}
               onChange={async (
                 newDaysOfWeek: TemplateAutostartRequirementDaysValue[],
