chore(site): add missing stories for templates (#12537)

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<typeof TemplateResourcesTable> = {
+  title: "modules/templates/TemplateResourcesTable",
+  component: TemplateResourcesTable,
+};
+
+export default meta;
+type Story = StoryObj<typeof TemplateResourcesTable>;
+
+const Default: Story = {
+  args: {
+    resources: [
+      MockWorkspaceResource,
+      MockWorkspaceVolumeResource,
+      MockWorkspaceImageResource,
+    ],
+  },
+};
+
+export const MultipleAgents: Story = {
+  args: {
+    resources: [
+      {
+        ...MockWorkspaceResource,
+        agents: [MockWorkspaceAgent, MockWorkspaceAgentConnecting],
+      },
+    ],
+  },
+};
+
+export { Default as TemplateResourcesTable };

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<typeof TemplateUpdateMessage> = {
+  title: "modules/templates/TemplateUpdateMessage",
+  component: TemplateUpdateMessage,
+  args: {
+    children: `### Update message\nSome message here.`,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TemplateUpdateMessage>;
+
+const Default: Story = {};
+
+export { Default as TemplateUpdateMessage };

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";

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: "pages/TemplateSettingsPage/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,
+  },
+};

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<TemplateScheduleAutostartProps> = ({
-  autostart_requirement_days_of_week,
+  value,
   isSubmitting,
-  allow_user_autostart,
+  enabled,
   onChange,
 }) => {
   return (
@@ -49,21 +52,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,25 +67,12 @@ 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>
   );
 };
 
-export const sortedDays = [
-  "monday",
-  "tuesday",
-  "wednesday",
-  "thursday",
-  "friday",
-  "saturday",
-  "sunday",
-] as TemplateAutostartRequirementDaysValue[];
-
 interface AutostartHelperTextProps {
   allowed?: boolean;
   days: TemplateAutostartRequirementDaysValue[];

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[],

site/src/utils/schedule.tsx

@@ -312,6 +312,16 @@ export type TemplateAutostopRequirementDaysValue =
   | "saturday"
   | "sunday";
 
+export const sortedDays = [
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+  "sunday",
+] as TemplateAutostartRequirementDaysValue[];
+
 export const calculateAutostopRequirementDaysValue = (
   value: TemplateAutostopRequirementDaysValue,
 ): Template["autostop_requirement"]["days_of_week"] => {