feat: WorkspaceScheduleForm: show shutdown time when editing workspac…

…e TTL
coder · johnstcn · Jun 9, 2022 · Jun 7, 2022 · Jun 7, 2022 · Jun 8, 2022
commit daa9a5febfdf1e0e61521a23c52231b2a1df267b
diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.stories.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.stories.tsx
@@ -1,6 +1,19 @@
 import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
-import { WorkspaceScheduleForm, WorkspaceScheduleFormProps } from "./WorkspaceScheduleForm"
+import dayjs from "dayjs"
+import advancedFormat from "dayjs/plugin/advancedFormat"
+import timezone from "dayjs/plugin/timezone"
+import utc from "dayjs/plugin/utc"
+import * as Mocks from "../../testHelpers/entities"
+import {
+  WorkspaceScheduleForm,
+  WorkspaceScheduleFormInitialValues,
+  WorkspaceScheduleFormProps,
+} from "./WorkspaceScheduleForm"
+
+dayjs.extend(advancedFormat)
+dayjs.extend(utc)
+dayjs.extend(timezone)
 
 export default {
   title: "components/WorkspaceScheduleForm",
@@ -9,8 +22,96 @@ export default {
 
 const Template: Story<WorkspaceScheduleFormProps> = (args) => <WorkspaceScheduleForm {...args} />
 
-export const Example = Template.bind({})
-Example.args = {
+export const WorkspaceNotRunning = Template.bind({})
+WorkspaceNotRunning.args = {
+  now: dayjs("2022-05-17T17:40:00Z"),
+  initialValues: {
+    ...WorkspaceScheduleFormInitialValues,
+    timezone: "UTC",
+  },
+  workspace: {
+    ...Mocks.MockWorkspace,
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      transition: "stop",
+      updated_at: "2022-05-17T17:39:00Z",
+    },
+  },
+  onCancel: () => action("onCancel"),
+  onSubmit: () => action("onSubmit"),
+}
+
+export const WorkspaceWillNotShutDown = Template.bind({})
+WorkspaceWillNotShutDown.args = {
+  now: dayjs("2022-05-17T17:40:00Z"),
+  initialValues: {
+    ...WorkspaceScheduleFormInitialValues,
+    timezone: "UTC",
+    ttl: 0,
+  },
+  workspace: {
+    ...Mocks.MockWorkspace,
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      updated_at: "2022-05-17T17:39:00Z",
+    },
+  },
+  onCancel: () => action("onCancel"),
+  onSubmit: () => action("onSubmit"),
+}
+
+export const WorkspaceWillShutdown = Template.bind({})
+WorkspaceWillShutdown.args = {
+  now: dayjs("2022-05-17T17:40:00Z"),
+  initialValues: {
+    ...WorkspaceScheduleFormInitialValues,
+    timezone: "UTC",
+  },
+  workspace: {
+    ...Mocks.MockWorkspace,
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      updated_at: "2022-05-17T17:39:00Z",
+    },
+  },
+  onCancel: () => action("onCancel"),
+  onSubmit: () => action("onSubmit"),
+}
+
+export const WorkspaceWillShutdownSoon = Template.bind({})
+WorkspaceWillShutdownSoon.args = {
+  now: dayjs("2022-05-17T18:10:00Z"),
+  initialValues: {
+    ...WorkspaceScheduleFormInitialValues,
+    timezone: "UTC",
+    ttl: 1,
+  },
+  workspace: {
+    ...Mocks.MockWorkspace,
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      updated_at: "2022-05-17T17:39:00Z",
+    },
+  },
+  onCancel: () => action("onCancel"),
+  onSubmit: () => action("onSubmit"),
+}
+
+export const WorkspaceWillShutdownImmediately = Template.bind({})
+WorkspaceWillShutdownImmediately.args = {
+  now: dayjs("2022-05-17T18:40:00Z"),
+  initialValues: {
+    ...WorkspaceScheduleFormInitialValues,
+    timezone: "UTC",
+    ttl: 1,
+  },
+  workspace: {
+    ...Mocks.MockWorkspace,
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      updated_at: "2022-05-17T17:39:00Z",
+    },
+  },
   onCancel: () => action("onCancel"),
   onSubmit: () => action("onSubmit"),
 }
diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
@@ -8,12 +8,14 @@ import MenuItem from "@material-ui/core/MenuItem"
 import makeStyles from "@material-ui/core/styles/makeStyles"
 import TextField from "@material-ui/core/TextField"
 import dayjs from "dayjs"
+import advancedFormat from "dayjs/plugin/advancedFormat"
 import timezone from "dayjs/plugin/timezone"
 import utc from "dayjs/plugin/utc"
 import { useFormik } from "formik"
 import { FC } from "react"
 import * as Yup from "yup"
 import { FieldErrors } from "../../api/errors"
+import { Workspace, WorkspaceBuild } from "../../api/typesGenerated"
 import { getFormHelpers } from "../../util/formUtils"
 import { FormFooter } from "../FormFooter/FormFooter"
 import { FullPageForm } from "../FullPageForm/FullPageForm"
@@ -23,6 +25,7 @@ import { zones } from "./zones"
 // REMARK: timezone plugin depends on UTC
 //
 // SEE: https://day.js.org/docs/en/timezone/timezone
+dayjs.extend(advancedFormat)
 dayjs.extend(utc)
 dayjs.extend(timezone)
 
@@ -44,14 +47,21 @@ export const Language = {
   timezoneLabel: "Timezone",
   ttlLabel: "Time until shutdown (hours)",
   ttlHelperText: "Your workspace will automatically shut down after this amount of time has elapsed.",
+  ttlCausesShutdownHelperText: "Your workspace will shut down ",
+  ttlCausesShutdownAt: "at ",
+  ttlCausesShutdownImmediately: "immediately!",
+  ttlCausesShutdownSoon: "within 30 minutes.",
+  ttlCausesNoShutdownHelperText: "Your workspace will not automatically shut down.",
 }
 
 export interface WorkspaceScheduleFormProps {
   fieldErrors?: FieldErrors
   initialValues?: WorkspaceScheduleFormValues
   isLoading: boolean
+  now: dayjs.Dayjs
-  now: dayjs.Dayjs
+  now?: dayjs.Dayjs
-  now: dayjs.Dayjs
+  now?: dayjs.Dayjs
   onCancel: () => void
   onSubmit: (values: WorkspaceScheduleFormValues) => void
+  workspace: Workspace
 }
 
 export interface WorkspaceScheduleFormValues {
@@ -68,6 +78,20 @@ export interface WorkspaceScheduleFormValues {
   ttl: number
 }
 
+export const WorkspaceScheduleFormInitialValues = {
+  sunday: false,
+  monday: true,
+  tuesday: true,
+  wednesday: true,
+  thursday: true,
+  friday: true,
+  saturday: false,
+
+  startTime: "09:30",
+  timezone: "",
+  ttl: 5,
+}
+
 export const validationSchema = Yup.object({
   sunday: Yup.boolean(),
   monday: Yup.boolean().test("at-least-one-day", Language.errorNoDayOfWeek, function (value) {
@@ -154,21 +178,13 @@ export const validationSchema = Yup.object({
 export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
   fieldErrors,
   initialValues = {
-    sunday: false,
-    monday: true,
-    tuesday: true,
-    wednesday: true,
-    thursday: true,
-    friday: true,
-    saturday: false,
-
-    startTime: "09:30",
-    timezone: "",
-    ttl: 5,
+    ...WorkspaceScheduleFormInitialValues,
   },
   isLoading,
+  now: now,
   onCancel,
   onSubmit,
+  workspace,
 }) => {
   const styles = useStyles()
 
@@ -248,7 +264,7 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
           </FormControl>
 
           <TextField
-            {...formHelpers("ttl", Language.ttlHelperText)}
+            {...formHelpers("ttl", ttlShutdownAt(now, workspace, form.values.timezone, form.values.ttl))}
             disabled={isLoading}
             inputProps={{ min: 0, step: 1 }}
             label={Language.ttlLabel}
@@ -262,6 +278,23 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
   )
 }
 
+const ttlShutdownAt = (now: dayjs.Dayjs, workspace: Workspace, tz: string, newTTL: number): string => {
+  if (workspace.latest_build.transition !== "start") {
+    return Language.ttlHelperText
+  }
+  if (newTTL === 0) {
+    return Language.ttlCausesNoShutdownHelperText
+  }
+  const newDeadline = dayjs(workspace.latest_build.updated_at).add(newTTL, "hour")
+  if (newDeadline.isBefore(now)) {
+    return Language.ttlCausesShutdownHelperText + Language.ttlCausesShutdownImmediately
+  }
+  if (newDeadline.isBefore(now.add(30, "minute"))) {
+    return Language.ttlCausesShutdownHelperText + Language.ttlCausesShutdownSoon
+  }
+  return Language.ttlCausesShutdownHelperText + Language.ttlCausesShutdownAt + newDeadline.tz(tz).format("hh:mm A z")
+}
+
 const useStyles = makeStyles({
   form: {
     "& input": {

diff --git a/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
@@ -170,6 +170,8 @@ export const WorkspaceSchedulePage: React.FC = () => {
   } else if (scheduleState.matches("presentForm") || scheduleState.matches("submittingSchedule")) {
     return (
       <WorkspaceScheduleForm
+        workspace={workspace}
+        now={dayjs()}
         fieldErrors={formErrors}
         initialValues={workspaceToInitialValues(workspace, dayjs.tz.guess())}
         isLoading={scheduleState.tags.has("loading")}