coder · presleyp · Dec 21, 2022 · Dec 7, 2022 · Dec 7, 2022 · Dec 7, 2022
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -3,7 +3,7 @@ import { useMachine } from "@xstate/react"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
 import { FC, useEffect } from "react"
-import { useParams } from "react-router-dom"
+import { useLocation, useParams } from "react-router-dom"
 import { Loader } from "components/Loader/Loader"
 import { firstOrItem } from "util/array"
 import { workspaceMachine } from "xServices/workspace/workspaceXService"
@@ -15,6 +15,8 @@ export const WorkspacePage: FC = () => {
     useParams()
   const username = firstOrItem(usernameQueryParam, null)
   const workspaceName = firstOrItem(workspaceQueryParam, null)
+  const shouldRestartWorkspace =
+    useLocation().state?.shouldRestartWorkspace ?? false
   const [workspaceState, workspaceSend] = useMachine(workspaceMachine)
   const {
     workspace,
@@ -69,6 +71,7 @@ export const WorkspacePage: FC = () => {
           workspaceState={workspaceState}
           quotaState={quotaState}
           workspaceSend={workspaceSend}
+          shouldRestartWorkspace={shouldRestartWorkspace}
         />
       </Cond>
       <Cond>

diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -30,12 +30,14 @@ interface WorkspaceReadyPageProps {
   workspaceState: StateFrom<typeof workspaceMachine>
   quotaState: StateFrom<typeof quotaMachine>
   workspaceSend: (event: WorkspaceEvent) => void
+  shouldRestartWorkspace: boolean
 }
 
 export const WorkspaceReadyPage = ({
   workspaceState,
   quotaState,
   workspaceSend,
+  shouldRestartWorkspace,
 }: WorkspaceReadyPageProps): JSX.Element => {
   const [bannerState, bannerSend] = useActor(
     workspaceState.children["scheduleBannerMachine"],
@@ -71,6 +73,11 @@ export const WorkspaceReadyPage = ({
     bannerSend({ type: "REFRESH_WORKSPACE", workspace })
   }, [bannerSend, workspace])
 
+  useEffect(() => {
+    // workspaces can be started without being stopped first
+    shouldRestartWorkspace && workspaceSend({ type: "START" })
+  }, [shouldRestartWorkspace, workspaceSend])
+
   return (
     <>
       <Helmet>

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,
+  Language as PageLanguage,
+} from "./WorkspaceSchedulePage"
 
 const validValues: WorkspaceScheduleFormValues = {
   autoStartEnabled: true,
@@ -241,4 +255,42 @@ 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 dialog = await screen.findByText(PageLanguage.dialogTitle)
+      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 dialog = screen.queryByText(PageLanguage.dialogTitle)
+      expect(dialog).not.toBeInTheDocument()
+    })
+  })
 })
diff --git a/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
@@ -1,8 +1,9 @@
 import { useMachine } from "@xstate/react"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
+import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"
 import { scheduleToAutoStart } from "pages/WorkspaceSchedulePage/schedule"
 import { ttlMsToAutoStop } from "pages/WorkspaceSchedulePage/ttl"
-import React, { useEffect, useState } from "react"
+import React, { useEffect } from "react"
 import { Navigate, useNavigate, useParams } from "react-router-dom"
 import { scheduleChanged } from "util/schedule"
 import * as TypesGen from "../../api/typesGenerated"
@@ -15,13 +16,23 @@ import {
   formValuesToTTLRequest,
 } from "./formToRequest"
 
-const Language = {
+export 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.",
+  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",
 }
 
+const getAutoStart = (workspace?: TypesGen.Workspace) =>
+  scheduleToAutoStart(workspace?.autostart_schedule)
+const getAutoStop = (workspace?: TypesGen.Workspace) =>
+  ttlMsToAutoStop(workspace?.ttl_ms)
+
 export const WorkspaceSchedulePage: React.FC = () => {
   const { username: usernameQueryParam, workspace: workspaceQueryParam } =
     useParams()
@@ -35,6 +46,7 @@ export const WorkspaceSchedulePage: React.FC = () => {
     getWorkspaceError,
     permissions,
     workspace,
+    shouldRestartWorkspace,
   } = scheduleState.context
 
   // Get workspace on mount and whenever the args for getting a workspace change.
@@ -45,19 +57,6 @@ 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" />
   }
@@ -101,7 +100,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,16 +113,40 @@ 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")) {
-    return <Navigate to={`/@${username}/${workspaceName}`} />
+  if (scheduleState.matches("showingRestartDialog")) {
+    return (
+      <ConfirmDialog
+        open
+        title={Language.dialogTitle}
+        description={Language.dialogDescription}
+        confirmText={Language.restart}
+        cancelText={Language.applyLater}
+        hideCancel={false}
+        onConfirm={() => {
+          scheduleSend("RESTART_WORKSPACE")
+        }}
+        onClose={() => {
+          scheduleSend("APPLY_LATER")
+        }}
+      />
+    )
+  }
+
+  if (scheduleState.matches("done")) {
+    return (
+      <Navigate
+        to={`/@${username}/${workspaceName}`}
+        state={{ shouldRestartWorkspace }}
+      />
+    )
   }
 
   // Theoretically impossible - log and bail

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 {