coder · presleyp · Aug 10, 2022 · Jul 29, 2022 · Jul 29, 2022 · Jul 29, 2022
diff --git a/site/src/components/Section/Section.tsx b/site/src/components/Section/Section.tsx
@@ -30,7 +30,7 @@ export const Section: SectionFC = ({
 }) => {
   const styles = useStyles({ layout })
   return (
-    <div className={combineClasses([styles.root, className])}>
+    <section className={combineClasses([styles.root, className])}>
       <div className={styles.inner}>
         {(title || description) && (
           <div className={styles.header}>
@@ -49,7 +49,7 @@ export const Section: SectionFC = ({
         {alert && <div className={styles.alert}>{alert}</div>}
         {children}
       </div>
-    </div>
+    </section>
   )
 }
 
@@ -63,6 +63,7 @@ const useStyles = makeStyles((theme) => ({
     marginBottom: theme.spacing(1),
     padding: theme.spacing(6),
     borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${theme.palette.divider}`,
 
     [theme.breakpoints.down("sm")]: {
       padding: theme.spacing(4, 3, 4, 3),

diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.stories.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.stories.tsx
@@ -3,12 +3,10 @@ import dayjs from "dayjs"
 import advancedFormat from "dayjs/plugin/advancedFormat"
 import timezone from "dayjs/plugin/timezone"
 import utc from "dayjs/plugin/utc"
+import { defaultSchedule, emptySchedule } from "pages/WorkspaceSchedulePage/schedule"
+import { defaultTTL, emptyTTL } from "pages/WorkspaceSchedulePage/ttl"
 import { makeMockApiError } from "testHelpers/entities"
-import {
-  defaultWorkspaceSchedule,
-  WorkspaceScheduleForm,
-  WorkspaceScheduleFormProps,
-} from "./WorkspaceScheduleForm"
+import { WorkspaceScheduleForm, WorkspaceScheduleFormProps } from "./WorkspaceScheduleForm"
 
 dayjs.extend(advancedFormat)
 dayjs.extend(utc)
@@ -29,51 +27,60 @@ export default {
 
 const Template: Story<WorkspaceScheduleFormProps> = (args) => <WorkspaceScheduleForm {...args} />
 
-export const WorkspaceWillNotShutDown = Template.bind({})
-WorkspaceWillNotShutDown.args = {
+const defaultInitialValues = {
+  autoStartEnabled: true,
+  ...defaultSchedule(),
+  autoStopEnabled: true,
+  ttl: defaultTTL,
+}
+
+export const AllDisabled = Template.bind({})
+AllDisabled.args = {
   initialValues: {
-    ...defaultWorkspaceSchedule(5),
-    ttl: 0,
+    autoStartEnabled: false,
+    ...emptySchedule,
+    autoStopEnabled: false,
+    ttl: emptyTTL,
   },
 }
 
-export const WorkspaceWillShutdownInAnHour = Template.bind({})
-WorkspaceWillShutdownInAnHour.args = {
+export const AutoStart = Template.bind({})
+AutoStart.args = {
   initialValues: {
-    ...defaultWorkspaceSchedule(5),
-    ttl: 1,
+    autoStartEnabled: true,
+    ...defaultSchedule(),
+    autoStopEnabled: false,
+    ttl: emptyTTL,
   },
 }
 
 export const WorkspaceWillShutdownInTwoHours = Template.bind({})
 WorkspaceWillShutdownInTwoHours.args = {
-  initialValues: {
-    ...defaultWorkspaceSchedule(2),
-    ttl: 2,
-  },
+  initialValues: { ...defaultInitialValues, ttl: 2 },
 }
 
 export const WorkspaceWillShutdownInADay = Template.bind({})
 WorkspaceWillShutdownInADay.args = {
-  initialValues: {
-    ...defaultWorkspaceSchedule(2),
-    ttl: 24,
-  },
+  initialValues: { ...defaultInitialValues, ttl: 24 },
 }
 
 export const WorkspaceWillShutdownInTwoDays = Template.bind({})
 WorkspaceWillShutdownInTwoDays.args = {
-  initialValues: {
-    ...defaultWorkspaceSchedule(2),
-    ttl: 48,
-  },
+  initialValues: { ...defaultInitialValues, ttl: 48 },
 }
 
 export const WithError = Template.bind({})
 WithError.args = {
+  initialValues: { ...defaultInitialValues, ttl: 100 },
   initialTouched: { ttl: true },
   submitScheduleError: makeMockApiError({
     message: "Something went wrong.",
     validations: [{ field: "ttl_ms", detail: "Invalid time until shutdown." }],
   }),
 }
+
+export const Loading = Template.bind({})
+Loading.args = {
+  initialValues: defaultInitialValues,
+  isLoading: true,
+}
diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.test.ts b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.test.ts
@@ -7,32 +7,36 @@ import {
 import { zones } from "./zones"
 
 const valid: WorkspaceScheduleFormValues = {
+  autoStartEnabled: true,
   sunday: false,
   monday: true,
   tuesday: true,
   wednesday: true,
   thursday: true,
   friday: true,
   saturday: false,
-
   startTime: "09:30",
   timezone: "Canada/Eastern",
+
+  autoStopEnabled: true,
   ttl: 120,
 }
 
 describe("validationSchema", () => {
-  it("allows everything to be falsy", () => {
+  it("allows everything to be falsy when switches are off", () => {
     const values: WorkspaceScheduleFormValues = {
+      autoStartEnabled: false,
       sunday: false,
       monday: false,
       tuesday: false,
       wednesday: false,
       thursday: false,
       friday: false,
       saturday: false,
-
       startTime: "",
       timezone: "",
+
+      autoStopEnabled: false,
       ttl: 0,
     }
     const validate = () => validationSchema.validateSync(values)
@@ -48,7 +52,7 @@ describe("validationSchema", () => {
     expect(validate).toThrow()
   })
 
-  it("disallows all days-of-week to be false when startTime is set", () => {
+  it("disallows all days-of-week to be false when auto-start is enabled", () => {
     const values: WorkspaceScheduleFormValues = {
       ...valid,
       sunday: false,
@@ -63,7 +67,7 @@ describe("validationSchema", () => {
     expect(validate).toThrowError(Language.errorNoDayOfWeek)
   })
 
-  it("disallows empty startTime when at least one day is set", () => {
+  it("disallows empty startTime when auto-start is enabled", () => {
     const values: WorkspaceScheduleFormValues = {
       ...valid,
       sunday: false,