feat: edit workspace schedule page (#1701)

Resolves: #1455 
Resolves: #1456

Summary:

Adds a page (accessible from Workspace Schedule section on a workspace) to edit a schedule.

Impact:

General parity with CLI for autostart/autostop: that is you can update your schedule from the UI

site/src/AppRouter.tsx

@@ -17,6 +17,7 @@ import { CreateUserPage } from "./pages/UsersPage/CreateUserPage/CreateUserPage"
 import { UsersPage } from "./pages/UsersPage/UsersPage"
 import { WorkspaceBuildPage } from "./pages/WorkspaceBuildPage/WorkspaceBuildPage"
 import { WorkspacePage } from "./pages/WorkspacePage/WorkspacePage"
+import { WorkspaceSchedulePage } from "./pages/WorkspaceSchedulePage/WorkspaceSchedulePage"
 import { WorkspaceSettingsPage } from "./pages/WorkspaceSettingsPage/WorkspaceSettingsPage"
 
 const TerminalPage = React.lazy(() => import("./pages/TerminalPage/TerminalPage"))
@@ -83,6 +84,14 @@ export const AppRouter: React.FC = () => (
                 </AuthAndFrame>
               }
             />
+            <Route
+              path="schedule"
+              element={
+                <RequireAuth>
+                  <WorkspaceSchedulePage />
+                </RequireAuth>
+              }
+            />
           </Route>
         </Route>
 

site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx

@@ -7,6 +7,7 @@ import dayjs from "dayjs"
 import duration from "dayjs/plugin/duration"
 import relativeTime from "dayjs/plugin/relativeTime"
 import React from "react"
+import { Link as RouterLink } from "react-router-dom"
 import { Workspace } from "../../api/typesGenerated"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { extractTimezone, stripTimezone } from "../../util/schedule"
@@ -78,7 +79,9 @@ export const WorkspaceSchedule: React.FC<WorkspaceScheduleProps> = ({ workspace
           <span className={styles.scheduleValue}>{Language.autoStopDisplay(workspace)}</span>
         </div>
         <div>
-          <Link className={styles.scheduleAction}>{Language.editScheduleLink}</Link>
+          <Link className={styles.scheduleAction} component={RouterLink} to={`/workspaces/${workspace.id}/schedule`}>
+            {Language.editScheduleLink}
+          </Link>
         </div>
       </Stack>
     </div>

site/src/components/WorkspaceStats/WorkspaceScheduleForm.stories.tsx

@@ -13,8 +13,5 @@ const Template: Story<WorkspaceScheduleFormProps> = (args) => <WorkspaceSchedule
 export const Example = Template.bind({})
 Example.args = {
   onCancel: () => action("onCancel"),
-  onSubmit: () => {
-    action("onSubmit")
-    return Promise.resolve()
-  },
+  onSubmit: () => action("onSubmit"),
 }

site/src/components/WorkspaceStats/WorkspaceScheduleForm.test.ts

@@ -10,6 +10,7 @@ const valid: WorkspaceScheduleFormValues = {
   saturday: false,
 
   startTime: "09:30",
+  timezone: "Canada/Eastern",
   ttl: 120,
 }
 
@@ -25,14 +26,15 @@ describe("validationSchema", () => {
       saturday: false,
 
       startTime: "",
+      timezone: "",
       ttl: 0,
     }
     const validate = () => validationSchema.validateSync(values)
     expect(validate).not.toThrow()
   })
 
   it("disallows ttl to be negative", () => {
-    const values = {
+    const values: WorkspaceScheduleFormValues = {
       ...valid,
       ttl: -1,
     }
@@ -41,7 +43,7 @@ describe("validationSchema", () => {
   })
 
   it("disallows all days-of-week to be false when startTime is set", () => {
-    const values = {
+    const values: WorkspaceScheduleFormValues = {
       ...valid,
       sunday: false,
       monday: false,
@@ -54,4 +56,58 @@ describe("validationSchema", () => {
     const validate = () => validationSchema.validateSync(values)
     expect(validate).toThrowError(Language.errorNoDayOfWeek)
   })
+
+  it("allows startTime 16:20", () => {
+    const values: WorkspaceScheduleFormValues = {
+      ...valid,
+      startTime: "16:20",
+    }
+    const validate = () => validationSchema.validateSync(values)
+    expect(validate).not.toThrow()
+  })
+
+  it("disallows startTime to be H:mm", () => {
+    const values: WorkspaceScheduleFormValues = {
+      ...valid,
+      startTime: "9:30",
+    }
+    const validate = () => validationSchema.validateSync(values)
+    expect(validate).toThrowError(Language.errorTime)
+  })
+
+  it("disallows startTime to be HH:m", () => {
+    const values: WorkspaceScheduleFormValues = {
+      ...valid,
+      startTime: "09:5",
+    }
+    const validate = () => validationSchema.validateSync(values)
+    expect(validate).toThrowError(Language.errorTime)
+  })
+
+  it("disallows an invalid startTime 24:01", () => {
+    const values: WorkspaceScheduleFormValues = {
+      ...valid,
+      startTime: "24:01",
+    }
+    const validate = () => validationSchema.validateSync(values)
+    expect(validate).toThrowError(Language.errorTime)
+  })
+
+  it("disallows an invalid startTime 09:60", () => {
+    const values: WorkspaceScheduleFormValues = {
+      ...valid,
+      startTime: "09:60",
+    }
+    const validate = () => validationSchema.validateSync(values)
+    expect(validate).toThrowError(Language.errorTime)
+  })
+
+  it("disallows an invalid timezone Canada/North", () => {
+    const values: WorkspaceScheduleFormValues = {
+      ...valid,
+      timezone: "Canada/North",
+    }
+    const validate = () => validationSchema.validateSync(values)
+    expect(validate).toThrowError(Language.errorTimezone)
+  })
 })