fix: use template default ttl when enabling auto-stop (#5494)

* Fetch default ttl - wip

* Convert ms to hours

* Format

* Fix story

* Add test

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

@@ -7,7 +7,7 @@ import {
   defaultSchedule,
   emptySchedule,
 } from "pages/WorkspaceSchedulePage/schedule"
-import { defaultTTL, emptyTTL } from "pages/WorkspaceSchedulePage/ttl"
+import { emptyTTL } from "pages/WorkspaceSchedulePage/ttl"
 import { makeMockApiError } from "testHelpers/entities"
 import {
   WorkspaceScheduleForm,
@@ -39,7 +39,7 @@ const defaultInitialValues = {
   autoStartEnabled: true,
   ...defaultSchedule(),
   autoStopEnabled: true,
-  ttl: defaultTTL,
+  ttl: 24,
 }
 
 export const AllDisabled = Template.bind({})

site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx

@@ -21,7 +21,6 @@ import {
   defaultSchedule,
   emptySchedule,
 } from "pages/WorkspaceSchedulePage/schedule"
-import { defaultTTL } from "pages/WorkspaceSchedulePage/ttl"
 import { ChangeEvent, FC } from "react"
 import * as Yup from "yup"
 import { getFormHelpers } from "../../util/formUtils"
@@ -81,6 +80,7 @@ export interface WorkspaceScheduleFormProps {
   onSubmit: (values: WorkspaceScheduleFormValues) => void
   // for storybook
   initialTouched?: FormikTouched<WorkspaceScheduleFormValues>
+  defaultTTL: number
 }
 
 export interface WorkspaceScheduleFormValues {
@@ -192,6 +192,7 @@ export const WorkspaceScheduleForm: FC<
   onCancel,
   onSubmit,
   initialTouched,
+  defaultTTL,
 }) => {
   const styles = useStyles()
 

site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.test.tsx

@@ -21,6 +21,8 @@ import {
 } from "components/WorkspaceScheduleForm/WorkspaceScheduleForm"
 import { WorkspaceSchedulePage } from "./WorkspaceSchedulePage"
 import i18next from "i18next"
+import { server } from "testHelpers/server"
+import { rest } from "msw"
 
 const { t } = i18next
 
@@ -295,4 +297,37 @@ describe("WorkspaceSchedulePage", () => {
       expect(dialog).not.toBeInTheDocument()
     })
   })
+
+  describe("autostop", () => {
+    it("uses template default ttl when first enabled", async () => {
+      // have auto-stop disabled
+      server.use(
+        rest.get(
+          "/api/v2/users/:userId/workspace/:workspaceName",
+          (req, res, ctx) => {
+            return res(
+              ctx.status(200),
+              ctx.json({ ...MockWorkspace, ttl_ms: 0 }),
+            )
+          },
+        ),
+      )
+      renderWithAuth(<WorkspaceSchedulePage />, {
+        route: `/@${MockUser.username}/${MockWorkspace.name}/schedule`,
+        path: "/@:username/:workspace/schedule",
+      })
+      const user = userEvent.setup()
+      const autoStopToggle = await screen.findByLabelText(
+        FormLanguage.stopSwitch,
+      )
+      // enable auto-stop
+      await user.click(autoStopToggle)
+      // find helper text that describes the mock template's 24 hour default
+      const autoStopHelperText = await screen.findByText(
+        "Your workspace will shut down a day after",
+        { exact: false },
+      )
+      expect(autoStopHelperText).toBeDefined()
+    })
+  })
 })

site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx

@@ -3,6 +3,7 @@ import { useMachine } from "@xstate/react"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"
 import { Margins } from "components/Margins/Margins"
+import dayjs from "dayjs"
 import { scheduleToAutoStart } from "pages/WorkspaceSchedulePage/schedule"
 import { ttlMsToAutoStop } from "pages/WorkspaceSchedulePage/ttl"
 import React, { useEffect } from "react"
@@ -46,6 +47,7 @@ export const WorkspaceSchedulePage: React.FC = () => {
     getTemplateError,
     permissions,
     workspace,
+    template,
   } = scheduleState.context
 
   // Get workspace on mount and whenever the args for getting a workspace change.
@@ -60,7 +62,7 @@ export const WorkspaceSchedulePage: React.FC = () => {
     return <Navigate to="/workspaces" />
   }
 
-  if (scheduleState.hasTag("loading")) {
+  if (scheduleState.hasTag("loading") || !template) {
     return <FullScreenLoader />
   }
 
@@ -104,6 +106,7 @@ export const WorkspaceSchedulePage: React.FC = () => {
           ...getAutoStop(workspace),
         }}
         isLoading={scheduleState.tags.has("loading")}
+        defaultTTL={dayjs.duration(template.default_ttl_ms, "ms").asHours()}
         onCancel={() => {
           navigate(`/@${username}/${workspaceName}`)
         }}

site/src/pages/WorkspaceSchedulePage/ttl.ts

@@ -5,8 +5,6 @@ export interface AutoStop {
 
 export const emptyTTL = 0
 
-export const defaultTTL = 12
-
 const msToHours = (ms: number) => Math.round(ms / (1000 * 60 * 60))
 
 export const ttlMsToAutoStop = (ttl_ms?: number): AutoStop =>