validation

greyscaled · greyscaled · commit 2ee8d87e682c · 2022-05-20T19:25:47.000Z
diff --git a/site/src/components/WorkspaceStats/WorkspaceScheduleForm.test.ts b/site/src/components/WorkspaceStats/WorkspaceScheduleForm.test.ts
@@ -0,0 +1,57 @@
+import { Language, validationSchema, WorkspaceScheduleFormValues } from "./WorkspaceScheduleForm"
+
+const valid: WorkspaceScheduleFormValues = {
+  sunday: false,
+  monday: true,
+  tuesday: true,
+  wednesday: true,
+  thursday: true,
+  friday: true,
+  saturday: false,
+
+  startTime: "09:30",
+  ttl: 120,
+}
+
+describe("validationSchema", () => {
+  it("allows everything to be falsy", () => {
+    const values: WorkspaceScheduleFormValues = {
+      sunday: false,
+      monday: false,
+      tuesday: false,
+      wednesday: false,
+      thursday: false,
+      friday: false,
+      saturday: false,
+
+      startTime: "",
+      ttl: 0,
+    }
+    const validate = () => validationSchema.validateSync(values)
+    expect(validate).not.toThrow()
+  })
+
+  it("disallows ttl to be negative", () => {
+    const values = {
+      ...valid,
+      ttl: -1,
+    }
+    const validate = () => validationSchema.validateSync(values)
+    expect(validate).toThrow()
+  })
+
+  it("disallows all days-of-week to be false when startTime is set", () => {
+    const values = {
+      ...valid,
+      sunday: false,
+      monday: false,
+      tuesday: false,
+      wednesday: false,
+      thursday: false,
+      friday: false,
+      saturday: false,
+    }
+    const validate = () => validationSchema.validateSync(values)
+    expect(validate).toThrowError(Language.errorNoDayOfWeek)
+  })
+})
diff --git a/site/src/components/WorkspaceStats/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceStats/WorkspaceScheduleForm.tsx
@@ -7,12 +7,14 @@ import makeStyles from "@material-ui/core/styles/makeStyles"
 import TextField from "@material-ui/core/TextField"
 import { useFormik } from "formik"
 import React from "react"
+import * as Yup from "yup"
 import { getFormHelpers } from "../../util/formUtils"
 import { FormFooter } from "../FormFooter/FormFooter"
 import { FullPageForm } from "../FullPageForm/FullPageForm"
 import { Stack } from "../Stack/Stack"
 
 export const Language = {
+  errorNoDayOfWeek: "Must set at least one day of week",
   daysOfWeekLabel: "Days of Week",
   daySundayLabel: "Sunday",
   dayMondayLabel: "Monday",
@@ -44,6 +46,35 @@ export interface WorkspaceScheduleFormValues {
   ttl: number
 }
 
+export const validationSchema = Yup.object({
+  sunday: Yup.boolean(),
+  monday: Yup.boolean().test("at-least-one-day", Language.errorNoDayOfWeek, function (value) {
+    const parent = this.parent as WorkspaceScheduleFormValues
+
+    if (!parent.startTime) {
+      return true
+    } else {
+      return ![
+        parent.sunday,
+        value,
+        parent.tuesday,
+        parent.wednesday,
+        parent.thursday,
+        parent.friday,
+        parent.saturday,
+      ].every((day) => day === false)
+    }
+  }),
+  tuesday: Yup.boolean(),
+  wednesday: Yup.boolean(),
+  thursday: Yup.boolean(),
+  friday: Yup.boolean(),
+  saturday: Yup.boolean(),
+
+  startTime: Yup.string(),
+  ttl: Yup.number().min(0).integer(),
+})
+
 export const WorkspaceScheduleForm: React.FC<WorkspaceScheduleFormProps> = ({ onCancel, onSubmit }) => {
   const styles = useStyles()
 
@@ -61,6 +92,7 @@ export const WorkspaceScheduleForm: React.FC<WorkspaceScheduleFormProps> = ({ on
       ttl: 0,
     },
     onSubmit,
+    validationSchema,
   })
   const formHelpers = getFormHelpers<WorkspaceScheduleFormValues>(form)
 
@@ -85,31 +117,80 @@ export const WorkspaceScheduleForm: React.FC<WorkspaceScheduleFormProps> = ({ on
 
             <FormGroup>
               <FormControlLabel
-                control={<Checkbox checked={form.values.sunday} onChange={form.handleChange} name="sunday" />}
+                control={
+                  <Checkbox
+                    checked={form.values.sunday}
+                    disabled={!form.values.startTime}
+                    onChange={form.handleChange}
+                    name="sunday"
+                  />
+                }
                 label={Language.daySundayLabel}
               />
               <FormControlLabel
-                control={<Checkbox checked={form.values.monday} onChange={form.handleChange} name="monday" />}
+                control={
+                  <Checkbox
+                    checked={form.values.monday}
+                    disabled={!form.values.startTime}
+                    onChange={form.handleChange}
+                    name="monday"
+                  />
+                }
                 label={Language.dayMondayLabel}
               />
               <FormControlLabel
-                control={<Checkbox checked={form.values.tuesday} onChange={form.handleChange} name="tuesday" />}
+                control={
+                  <Checkbox
+                    checked={form.values.tuesday}
+                    disabled={!form.values.startTime}
+                    onChange={form.handleChange}
+                    name="tuesday"
+                  />
+                }
                 label={Language.dayTuesdayLabel}
               />
               <FormControlLabel
-                control={<Checkbox checked={form.values.wednesday} onChange={form.handleChange} name="wednesday" />}
+                control={
+                  <Checkbox
+                    checked={form.values.wednesday}
+                    disabled={!form.values.startTime}
+                    onChange={form.handleChange}
+                    name="wednesday"
+                  />
+                }
                 label={Language.dayWednesdayLabel}
               />
               <FormControlLabel
-                control={<Checkbox checked={form.values.thursday} onChange={form.handleChange} name="thursday" />}
+                control={
+                  <Checkbox
+                    checked={form.values.thursday}
+                    disabled={!form.values.startTime}
+                    onChange={form.handleChange}
+                    name="thursday"
+                  />
+                }
                 label={Language.dayThursdayLabel}
               />
               <FormControlLabel
-                control={<Checkbox checked={form.values.friday} onChange={form.handleChange} name="friday" />}
+                control={
+                  <Checkbox
+                    checked={form.values.friday}
+                    disabled={!form.values.startTime}
+                    onChange={form.handleChange}
+                    name="friday"
+                  />
+                }
                 label={Language.dayFridayLabel}
               />
               <FormControlLabel
-                control={<Checkbox checked={form.values.saturday} onChange={form.handleChange} name="saturday" />}
+                control={
+                  <Checkbox
+                    checked={form.values.saturday}
+                    disabled={!form.values.startTime}
+                    onChange={form.handleChange}
+                    name="saturday"
+                  />
+                }
                 label={Language.daySaturdayLabel}
               />
             </FormGroup>
