feat: edit workspace schedule page

coder · greyscaled · May 26, 2022 · May 24, 2022 · May 24, 2022 · May 24, 2022
commit 58ecefa121312f085bb60a11dc77c9b306c058b6
diff --git a/site/src/components/WorkspaceStats/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceStats/WorkspaceScheduleForm.tsx
@@ -32,6 +32,8 @@ export const Language = {
 
 export interface WorkspaceScheduleFormProps {
   onCancel: () => void
+
+  // TODO(Grey): un-promisfy and adding isSubmitting prop
   onSubmit: (values: WorkspaceScheduleFormValues) => Promise<void>
 }
 
@@ -73,6 +75,7 @@ export const validationSchema = Yup.object({
   friday: Yup.boolean(),
   saturday: Yup.boolean(),
 
+  // TODO(Grey): Add validation that the string is "" or "HH:mm" (24 hours)
   startTime: Yup.string(),
   ttl: Yup.number().min(0).integer(),
 })

diff --git a/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
@@ -0,0 +1,88 @@
+import { useMachine } from "@xstate/react"
+import React, { useEffect } from "react"
+import { useNavigate, useParams } from "react-router-dom"
+import * as TypesGen from "../../api/typesGenerated"
+import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
+import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
+import {
+  WorkspaceScheduleForm,
+  WorkspaceScheduleFormValues,
+} from "../../components/WorkspaceStats/WorkspaceScheduleForm"
+import { firstOrItem } from "../../util/array"
+import { workspaceSchedule } from "../../xServices/workspaceSchedule/workspaceScheduleXService"
+
+// TODO(Grey): Test before opening PR from draft
+export const formValuesToAutoStartRequest = (
+  values: WorkspaceScheduleFormValues,
+): TypesGen.UpdateWorkspaceAutostartRequest => {
+  if (!values.startTime) {
+    return {
+      schedule: "",
+    }
+  }
+
+  // TODO(Grey): Fill in
+  return {
+    schedule: "9 30 * * 1-5",
+  }
+}
+
+export const formValuesToTTLRequest = (values: WorkspaceScheduleFormValues): TypesGen.UpdateWorkspaceTTLRequest => {
+  if (!values.ttl) {
+    return {
+      ttl: 0, // TODO(Grey): Verify with Cian whether 0 or null is better to send
+    }
+  }
+
+  // TODO(Grey): Fill in
+  return {
+    ttl: 0,
+  }
+}
+
+// TODO(Grey): React testing library for this
+export const WorkspaceSchedulePage: React.FC = () => {
+  const navigate = useNavigate()
+  const { workspace: workspaceQueryParam } = useParams()
+  const workspaceId = firstOrItem(workspaceQueryParam, null)
+
+  // TODO(Grey): Consume the formSubmissionErrors in WorkspaceScheduleForm
+  const [scheduleState, scheduleSend] = useMachine(workspaceSchedule)
+  const { getWorkspaceError, workspace } = scheduleState.context
+
+  /**
+   * Get workspace on mount and whenever workspaceId changes (scheduleSend
+   * should not change).
+   */
+  useEffect(() => {
+    workspaceId && scheduleSend({ type: "GET_WORKSPACE", workspaceId })
+  }, [workspaceId, scheduleSend])
+
+  if (!workspaceId) {
+    navigate("/workspaces")
+    return null
+  } else if (scheduleState.matches("error")) {
+    return <ErrorSummary error={getWorkspaceError} retry={() => scheduleSend({ type: "GET_WORKSPACE", workspaceId })} />
+  } else if (!workspace) {
+    return <FullScreenLoader />
+  } else {
+    return (
+      <WorkspaceScheduleForm
+        onCancel={() => {
+          navigate(`/workspaces/${workspaceId}`)
+        }}
+        onSubmit={(values) => {
+          scheduleSend({
+            type: "SUBMIT_SCHEDULE",
+            autoStart: formValuesToAutoStartRequest(values),
+            ttl: formValuesToTTLRequest(values),
+          })
+
+          // TODO(Grey): Remove this after onSubmit is un-promisified
+          // TODO(Grey): navigation logic
+          return Promise.resolve()
+        }}
+      />
+    )
+  }
+}
diff --git a/site/src/xServices/workspaceSchedule/workspaceScheduleXService.ts b/site/src/xServices/workspaceSchedule/workspaceScheduleXService.ts
@@ -0,0 +1,146 @@
+/**
+ * @fileoverview workspaceSchedule is an xstate machine backing a form to CRUD
+ * an individual workspace's schedule.
+ */
+import { assign, createMachine } from "xstate"
+import * as API from "../../api/api"
+import { ApiError, FieldErrors, mapApiErrorToFieldErrors } from "../../api/errors"
+import * as TypesGen from "../../api/typesGenerated"
+import { displayError, displaySuccess } from "../../components/GlobalSnackbar/utils"
+
+export const Language = {
+  errorSubmissionFailed: "Failed to update schedule",
+  errorWorkspaceFetch: "Failed to fetch workspace",
+  successMessage: "Successfully updated workspace schedule.",
+}
+
+export interface WorkspaceScheduleContext {
+  formErrors?: FieldErrors
+  getWorkspaceError?: Error | unknown
+  /**
+   * Each workspace has their own schedule (start and ttl). For this reason, we
+   * re-fetch the workspace to ensure we're up-to-date. As a result, this
+   * machine is partially influenced by workspaceXService.
+   */
+  workspace?: TypesGen.Workspace
+}
+
+export type WorkspaceScheduleEvent =
+  | { type: "GET_WORKSPACE"; workspaceId: string }
+  | {
+      type: "SUBMIT_SCHEDULE"
+      autoStart: TypesGen.UpdateWorkspaceAutostartRequest
+      ttl: TypesGen.UpdateWorkspaceTTLRequest
+    }
+
+export const workspaceSchedule = createMachine(
+  {
+    tsTypes: {} as import("./workspaceScheduleXService.typegen").Typegen0,
+    schema: {
+      context: {} as WorkspaceScheduleContext,
+      events: {} as WorkspaceScheduleEvent,
+      services: {} as {
+        getWorkspace: {
+          data: TypesGen.Workspace
+        }
+      },
+    },
+    id: "workspaceScheduleState",
+    initial: "idle",
+    on: {
+      GET_WORKSPACE: "gettingWorkspace",
+    },
+    states: {
+      idle: {
+        tags: "loading",
+      },
+      gettingWorkspace: {
+        entry: ["clearGetWorkspaceError", "clearContext"],
+        invoke: {
+          src: "getWorkspace",
+          id: "getWorkspace",
+          onDone: {
+            target: "presentForm",
+            actions: ["assignWorkspace"],
+          },
+          onError: {
+            target: "error",
+            actions: ["assignGetWorkspaceError", "displayWorkspaceError"],
+          },
+        },
+        tags: "loading",
+      },
+      presentForm: {
+        on: {
+          SUBMIT_SCHEDULE: "submittingSchedule",
+        },
+      },
+      submittingSchedule: {
+        invoke: {
+          src: "submitSchedule",
+          id: "submitSchedule",
+          onDone: {
+            target: "idle",
+            actions: "displaySuccess",
+          },
+          onError: {
+            target: "presentForm",
+            actions: ["assignSubmissionError", "displaySubmissionError"],
+          },
+        },
+        tags: "loading",
+      },
+      error: {
+        on: {
+          GET_WORKSPACE: "gettingWorkspace",
+        },
+      },
+    },
+  },
+  {
+    actions: {
+      assignSubmissionError: assign({
+        formErrors: (_, event) => mapApiErrorToFieldErrors((event.data as ApiError).response.data),
+      }),
+      assignWorkspace: assign({
+        workspace: (_, event) => event.data,
+      }),
+      assignGetWorkspaceError: assign({
+        getWorkspaceError: (_, event) => event.data,
+      }),
+      clearContext: () => {
+        assign({ workspace: undefined })
+      },
+      clearGetWorkspaceError: (context) => {
+        assign({ ...context, getWorkspaceError: undefined })
+      },
+      displayWorkspaceError: () => {
+        displayError(Language.errorWorkspaceFetch)
+      },
+      displaySubmissionError: () => {
+        displayError(Language.errorSubmissionFailed)
+      },
+      displaySuccess: () => {
+        displaySuccess(Language.successMessage)
+      },
+    },
+
+    services: {
+      getWorkspace: async (_, event) => {
+        return await API.getWorkspace(event.workspaceId)
+      },
+      submitSchedule: async (context, event) => {
+        if (!context.workspace?.id) {
+          // This state is theoretically impossible, but helps TS
+          throw new Error("failed to load workspace")
+        }
+
+        // REMARK: These calls are purposefully synchronous because if one
+        //         value contradicts the other, we don't want a race condition
+        //         on re-submission.
+        await API.putWorkspaceAutostart(context.workspace.id, event.autoStart)
+        await API.putWorkspaceAutostop(context.workspace.id, event.ttl)
+      },
+    },
+  },
+)