coder · presleyp · Dec 21, 2022 · Dec 7, 2022 · Dec 7, 2022 · Dec 7, 2022
diff --git a/site/src/i18n/en/index.ts b/site/src/i18n/en/index.ts
@@ -12,6 +12,7 @@ import templateSettingsPage from "./templateSettingsPage.json"
 import templateVersionPage from "./templateVersionPage.json"
 import loginPage from "./loginPage.json"
 import workspaceChangeVersionPage from "./workspaceChangeVersionPage.json"
+import workspaceSchedulePage from "./workspaceSchedulePage.json"
 import serviceBannerSettings from "./serviceBannerSettings.json"
 
 export const en = {
@@ -29,5 +30,6 @@ export const en = {
   templateVersionPage,
   loginPage,
   workspaceChangeVersionPage,
+  workspaceSchedulePage,
   serviceBannerSettings,
 }
diff --git a/site/src/i18n/en/workspaceSchedulePage.json b/site/src/i18n/en/workspaceSchedulePage.json
@@ -0,0 +1,7 @@
+{
+  "forbiddenError": "You don't have permissions to update the schedule for this workspace.",
+  "dialogTitle": "Restart workspace?",
+  "dialogDescription": "Would you like to restart your workspace now to apply your new auto-stop setting, or let it apply after your next workspace start?",
+  "restart": "Restart workspace now",
+  "applyLater": "Apply update later"
+}
diff --git a/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.test.tsx b/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.test.tsx
@@ -1,3 +1,10 @@
+import {
+  MockUser,
+  MockWorkspace,
+  renderWithAuth,
+} from "testHelpers/renderHelpers"
+import userEvent from "@testing-library/user-event"
+import { screen } from "@testing-library/react"
 import {
   formValuesToAutoStartRequest,
   formValuesToTTLRequest,
@@ -8,7 +15,14 @@ import {
 } from "pages/WorkspaceSchedulePage/schedule"
 import { AutoStop, ttlMsToAutoStop } from "pages/WorkspaceSchedulePage/ttl"
 import * as TypesGen from "../../api/typesGenerated"
-import { WorkspaceScheduleFormValues } from "../../components/WorkspaceScheduleForm/WorkspaceScheduleForm"
+import {
+  WorkspaceScheduleFormValues,
+  Language as FormLanguage,
+} from "components/WorkspaceScheduleForm/WorkspaceScheduleForm"
+import { WorkspaceSchedulePage } from "./WorkspaceSchedulePage"
+import i18next from "i18next"
+
+const { t } = i18next
 
 const validValues: WorkspaceScheduleFormValues = {
   autoStartEnabled: true,
@@ -241,4 +255,44 @@ describe("WorkspaceSchedulePage", () => {
       expect(ttlMsToAutoStop(ttlMs)).toEqual(autoStop)
     })
   })
+
+  describe("autoStop change dialog", () => {
+    it("shows if autoStop is changed", async () => {
+      renderWithAuth(<WorkspaceSchedulePage />, {
+        route: `/@${MockUser.username}/${MockWorkspace.name}/schedule`,
+        path: "/@:username/:workspace/schedule",
+      })
+      const user = userEvent.setup()
+      const autoStopToggle = await screen.findByLabelText(
+        FormLanguage.stopSwitch,
+      )
+      await user.click(autoStopToggle)
+      const submitButton = await screen.findByRole("button", {
+        name: /submit/i,
+      })
+      await user.click(submitButton)
+      const title = t("dialogTitle", { ns: "workspaceSchedulePage" })
+      const dialog = await screen.findByText(title)
+      expect(dialog).toBeInTheDocument()
+    })
+
+    it("doesn't show if autoStop is not changed", async () => {
+      renderWithAuth(<WorkspaceSchedulePage />, {
+        route: `/@${MockUser.username}/${MockWorkspace.name}/schedule`,
+        path: "/@:username/:workspace/schedule",
+      })
+      const user = userEvent.setup()
+      const autoStartToggle = await screen.findByLabelText(
+        FormLanguage.startSwitch,
+      )
+      await user.click(autoStartToggle)
+      const submitButton = await screen.findByRole("button", {
+        name: /submit/i,
+      })
+      await user.click(submitButton)
+      const title = t("dialogTitle", { ns: "workspaceSchedulePage" })
+      const dialog = screen.queryByText(title)
+      expect(dialog).not.toBeInTheDocument()
+    })
+  })
 })
diff --git a/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
@@ -1,8 +1,12 @@
+import { makeStyles } from "@material-ui/core/styles"
 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 { scheduleToAutoStart } from "pages/WorkspaceSchedulePage/schedule"
 import { ttlMsToAutoStop } from "pages/WorkspaceSchedulePage/ttl"
-import React, { useEffect, useState } from "react"
+import React, { useEffect } from "react"
+import { useTranslation } from "react-i18next"
 import { Navigate, useNavigate, useParams } from "react-router-dom"
 import { scheduleChanged } from "util/schedule"
 import * as TypesGen from "../../api/typesGenerated"
@@ -15,14 +19,20 @@ import {
   formValuesToTTLRequest,
 } from "./formToRequest"
 
-const Language = {
-  forbiddenError:
-    "You don't have permissions to update the schedule for this workspace.",
-  getWorkspaceError: "Failed to fetch workspace.",
-  checkPermissionsError: "Failed to fetch permissions.",
-}
+const getAutoStart = (workspace?: TypesGen.Workspace) =>
+  scheduleToAutoStart(workspace?.autostart_schedule)
+const getAutoStop = (workspace?: TypesGen.Workspace) =>
+  ttlMsToAutoStop(workspace?.ttl_ms)
+
+const useStyles = makeStyles((theme) => ({
+  topMargin: {
+    marginTop: `${theme.spacing(3)}px`,
+  },
+}))
 
 export const WorkspaceSchedulePage: React.FC = () => {
+  const { t } = useTranslation("workspaceSchedulePage")
+  const styles = useStyles()
   const { username: usernameQueryParam, workspace: workspaceQueryParam } =
     useParams()
   const navigate = useNavigate()
@@ -33,6 +43,7 @@ export const WorkspaceSchedulePage: React.FC = () => {
     checkPermissionsError,
     submitScheduleError,
     getWorkspaceError,
+    getTemplateError,
     permissions,
     workspace,
   } = scheduleState.context
@@ -45,52 +56,39 @@ export const WorkspaceSchedulePage: React.FC = () => {
       scheduleSend({ type: "GET_WORKSPACE", username, workspaceName })
   }, [username, workspaceName, scheduleSend])
 
-  const getAutoStart = (workspace?: TypesGen.Workspace) =>
-    scheduleToAutoStart(workspace?.autostart_schedule)
-  const getAutoStop = (workspace?: TypesGen.Workspace) =>
-    ttlMsToAutoStop(workspace?.ttl_ms)
-
-  const [autoStart, setAutoStart] = useState(getAutoStart(workspace))
-  const [autoStop, setAutoStop] = useState(getAutoStop(workspace))
-
-  useEffect(() => {
-    setAutoStart(getAutoStart(workspace))
-    setAutoStop(getAutoStop(workspace))
-  }, [workspace])
-
   if (!username || !workspaceName) {
     return <Navigate to="/workspaces" />
   }
 
-  if (
-    scheduleState.matches("idle") ||
-    scheduleState.matches("gettingWorkspace") ||
-    scheduleState.matches("gettingPermissions") ||
-    !workspace
-  ) {
+  if (scheduleState.hasTag("loading")) {
     return <FullScreenLoader />
   }
 
   if (scheduleState.matches("error")) {
     return (
-      <AlertBanner
-        severity="error"
-        error={getWorkspaceError || checkPermissionsError}
-        text={
-          getWorkspaceError
-            ? Language.getWorkspaceError
-            : Language.checkPermissionsError
-        }
-        retry={() =>
-          scheduleSend({ type: "GET_WORKSPACE", username, workspaceName })
-        }
-      />
+      <Margins>
+        <div className={styles.topMargin}>
+          <AlertBanner
+            severity="error"
+            error={
+              getWorkspaceError || checkPermissionsError || getTemplateError
+            }
+            retry={() =>
+              scheduleSend({ type: "GET_WORKSPACE", username, workspaceName })
+            }
+          />
+        </div>
+      </Margins>
     )
   }
 
   if (!permissions?.updateWorkspace) {
     return (
-      <AlertBanner severity="error" error={Error(Language.forbiddenError)} />
+      <Margins>
+        <div className={styles.topMargin}>
+          <AlertBanner severity="error" error={Error(t("forbiddenError"))} />
+        </div>
+      </Margins>
     )
   }
 
@@ -101,7 +99,10 @@ export const WorkspaceSchedulePage: React.FC = () => {
     return (
       <WorkspaceScheduleForm
         submitScheduleError={submitScheduleError}
-        initialValues={{ ...autoStart, ...autoStop }}
+        initialValues={{
+          ...getAutoStart(workspace),
+          ...getAutoStop(workspace),
+        }}
         isLoading={scheduleState.tags.has("loading")}
         onCancel={() => {
           navigate(`/@${username}/${workspaceName}`)
@@ -111,15 +112,34 @@ export const WorkspaceSchedulePage: React.FC = () => {
             type: "SUBMIT_SCHEDULE",
             autoStart: formValuesToAutoStartRequest(values),
             ttl: formValuesToTTLRequest(values),
-            autoStartChanged: scheduleChanged(autoStart, values),
-            autoStopChanged: scheduleChanged(autoStop, values),
+            autoStartChanged: scheduleChanged(getAutoStart(workspace), values),
+            autoStopChanged: scheduleChanged(getAutoStop(workspace), values),
           })
         }}
       />
     )
   }
 
-  if (scheduleState.matches("submitSuccess")) {
+  if (scheduleState.matches("showingRestartDialog")) {
+    return (
+      <ConfirmDialog
+        open
+        title={t("dialogTitle")}
+        description={t("dialogDescription")}
+        confirmText={t("restart")}
+        cancelText={t("applyLater")}
+        hideCancel={false}
+        onConfirm={() => {
+          scheduleSend("RESTART_WORKSPACE")
+        }}
+        onClose={() => {
+          scheduleSend("APPLY_LATER")
+        }}
+      />
+    )
+  }
+
+  if (scheduleState.matches("done")) {
     return <Navigate to={`/@${username}/${workspaceName}`} />
   }
 

diff --git a/site/src/testHelpers/handlers.ts b/site/src/testHelpers/handlers.ts
@@ -131,6 +131,7 @@ export const handlers = [
     const permissions = [
       ...Object.keys(permissionsToCheck),
       "canUpdateTemplate",
+      "updateWorkspace",
     ]
     const response = permissions.reduce((obj, permission) => {
       return {