Add update

coder · presleyp · May 16, 2022 · May 5, 2022 · May 5, 2022 · May 5, 2022
commit be867500bcc2000fe85b2a51aaf4f488670a1501
diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx
@@ -1,7 +1,7 @@
 import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
 import React from "react"
-import { MockOrganization, MockTemplate, MockWorkspace } from "../../testHelpers"
+import { MockOrganization, MockOutdatedWorkspace, MockTemplate, MockWorkspace } from "../../testHelpers"
 import { Workspace, WorkspaceProps } from "./Workspace"
 
 export default {
@@ -37,3 +37,6 @@ Error.args = { ...Started.args, workspaceStatus: "error" }
 
 export const NoBreadcrumb = Template.bind({})
 NoBreadcrumb.args = { ...Started.args, template: undefined }
+
+export const Outdated = Template.bind({})
+Outdated.args = { ...Started.args, workspace: MockOutdatedWorkspace }
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -14,6 +14,7 @@ export interface WorkspaceProps {
   handleStart: () => void
   handleStop: () => void
   handleRetry: () => void
+  handleUpdate: () => void
   workspaceStatus: WorkspaceStatus
 }
 
@@ -27,6 +28,7 @@ export const Workspace: React.FC<WorkspaceProps> = ({
   handleStart,
   handleStop,
   handleRetry,
+  handleUpdate,
   workspaceStatus,
 }) => {
   const styles = useStyles()
@@ -41,6 +43,7 @@ export const Workspace: React.FC<WorkspaceProps> = ({
           handleStart={handleStart}
           handleStop={handleStop}
           handleRetry={handleRetry}
+          handleUpdate={handleUpdate}
           workspaceStatus={workspaceStatus}
         />
         <div className={styles.horizontal}>

diff --git a/site/src/components/WorkspaceStatusBar/WorkspaceStatusBar.tsx b/site/src/components/WorkspaceStatusBar/WorkspaceStatusBar.tsx
@@ -32,6 +32,7 @@ export interface WorkspaceStatusBarProps {
   handleStart: () => void
   handleStop: () => void
   handleRetry: () => void
+  handleUpdate: () => void
   workspaceStatus: WorkspaceStatus
 }
 
@@ -45,6 +46,7 @@ export const WorkspaceStatusBar: React.FC<WorkspaceStatusBarProps> = ({
   handleStart,
   handleStop,
   handleRetry,
+  handleUpdate,
   workspaceStatus,
 }) => {
   const styles = useStyles()
@@ -102,7 +104,12 @@ export const WorkspaceStatusBar: React.FC<WorkspaceStatusBarProps> = ({
               </Button>
             )}
 
-            {workspace.outdated && <Button color="primary">{Language.update}</Button>}
+            {/* Workspace will not update while another job is in progress so hide the button until it's usable */}
+            {workspace.outdated && ["started", "stopped", "error"].includes(workspaceStatus) && (
+              <Button onClick={handleUpdate} color="primary">
+                {Language.update}
+              </Button>
+            )}
           </div>
         </div>
       </Stack>

diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx
@@ -3,6 +3,7 @@ import { rest } from "msw"
 import React from "react"
 import {
   MockFailedWorkspace,
+  MockOutdatedWorkspace,
   MockStoppedWorkspace,
   MockTemplate,
   MockWorkspace,
@@ -62,4 +63,16 @@ describe("Workspace Page", () => {
     const laterStatus = await screen.findByText("Building")
     expect(laterStatus).toBeDefined()
   })
+  it("restarts the workspace when the user presses Update", async () => {
+    renderWithAuth(<WorkspacePage />, { route: `/workspaces/${MockWorkspace.id}`, path: "/workspaces/:workspace" })
+    server.use(
+      rest.get(`/api/v2/workspaces/${MockWorkspace.id}`, (req, res, ctx) => {
+        return res(ctx.status(200), ctx.json(MockOutdatedWorkspace))
+      }),
+    )
+    const updateButton = await screen.findByText("Update")
+    updateButton.click()
+    const status = await screen.findByText("Building")
+    expect(status).toBeDefined()
+  })
 })
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -54,6 +54,7 @@ export const WorkspacePage: React.FC = () => {
             handleStart={() => workspaceSend("START")}
             handleStop={() => workspaceSend("STOP")}
             handleRetry={() => workspaceSend("RETRY")}
+            handleUpdate={() => workspaceSend("UPDATE")}
             workspaceStatus={workspaceStatus}
           />
         </Stack>

diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -167,31 +167,11 @@ export const MockWorkspace: Workspace = {
   latest_build: MockWorkspaceBuild,
 }
 
-export const MockStoppedWorkspace: Workspace = {
-  id: "test-workspace",
-  name: "Test-Workspace",
-  created_at: "",
-  updated_at: "",
-  template_id: MockTemplate.id,
-  outdated: false,
-  owner_id: MockUser.id,
-  autostart_schedule: MockWorkspaceAutostartEnabled.schedule,
-  autostop_schedule: MockWorkspaceAutostopEnabled.schedule,
-  latest_build: MockWorkspaceBuildStop,
-}
+export const MockStoppedWorkspace: Workspace = { ...MockWorkspace, latest_build: MockWorkspaceBuildStop }
 
-export const MockFailedWorkspace: Workspace = {
-  id: "test-workspace",
-  name: "Test-Workspace",
-  created_at: "",
-  updated_at: "",
-  template_id: MockTemplate.id,
-  outdated: false,
-  owner_id: MockUser.id,
-  autostart_schedule: MockWorkspaceAutostartEnabled.schedule,
-  autostop_schedule: MockWorkspaceAutostopEnabled.schedule,
-  latest_build: MockFailedWorkspaceBuild,
-}
+export const MockFailedWorkspace: Workspace = { ...MockWorkspace, latest_build: MockFailedWorkspaceBuild }
+
+export const MockOutdatedWorkspace: Workspace = { ...MockWorkspace, outdated: true }
 
 export const MockWorkspaceAgent: WorkspaceAgent = {
   id: "test-workspace-agent",

diff --git a/site/src/xServices/workspace/workspaceXService.ts b/site/src/xServices/workspace/workspaceXService.ts
@@ -7,20 +7,25 @@ interface WorkspaceContext {
   workspace?: Types.Workspace
   template?: Types.Template
   organization?: Types.Organization
+  build?: TypesGen.WorkspaceBuild
   getWorkspaceError?: Error | unknown
   getTemplateError?: Error | unknown
   getOrganizationError?: Error | unknown
   // error enqueuing a ProvisionerJob to create a new WorkspaceBuild
   jobError?: Error | unknown
   // error creating a new WorkspaceBuild
   buildError?: Error | unknown
+  // these are separate from get X errors because they don't make the page unusable
+  refreshWorkspaceError: Error | unknown
+  refreshTemplateError: Error | unknown
 }
 
 type WorkspaceEvent =
   | { type: "GET_WORKSPACE"; workspaceId: string }
   | { type: "START" }
   | { type: "STOP" }
   | { type: "RETRY" }
+  | { type: "UPDATE" }
   | { type: "REFRESH_WORKSPACE" }
 
 export const workspaceMachine = createMachine(
@@ -60,12 +65,13 @@ export const workspaceMachine = createMachine(
         tags: "loading",
       },
       gettingWorkspace: {
+        entry: ["clearGetWorkspaceError", "clearContext"],
         invoke: {
           src: "getWorkspace",
           id: "getWorkspace",
           onDone: {
             target: "ready",
-            actions: ["assignWorkspace", "clearGetWorkspaceError"],
+            actions: ["assignWorkspace"],
           },
           onError: {
             target: "error",
@@ -116,6 +122,9 @@ export const workspaceMachine = createMachine(
           },
           build: {
             initial: "dispatch",
+            on: {
+              UPDATE: "#workspaceState.ready.build.refreshingTemplate",
+            },
             states: {
               dispatch: {
                 always: [
@@ -156,7 +165,7 @@ export const workspaceMachine = createMachine(
                   src: "startWorkspace",
                   onDone: {
                     target: "buildingStart",
-                    actions: "clearJobError",
+                    actions: ["assignBuild", "clearJobError"],
                   },
                   onError: {
                     target: "error",
@@ -169,7 +178,7 @@ export const workspaceMachine = createMachine(
                 invoke: {
                   id: "stopWorkspace",
                   src: "stopWorkspace",
-                  onDone: { target: "buildingStop", actions: "clearJobError" },
+                  onDone: { target: "buildingStop", actions: ["assignBuild", "clearJobError"] },
                   onError: {
                     target: "error",
                     actions: "assignJobError",
@@ -239,6 +248,15 @@ export const workspaceMachine = createMachine(
                 },
                 tags: ["buildLoading", "stopping"],
               },
+              refreshingTemplate: {
+                entry: "clearRefreshTemplateError",
+                invoke: {
+                  id: "refreshTemplate",
+                  src: "getTemplate",
+                  onDone: { target: "#workspaceState.ready.build.requestingStart", actions: "assignTemplate" },
+                  onError: { target: "error", actions: "assignRefreshTemplateError" },
+                },
+              },
               error: {
                 on: {
                   RETRY: [
@@ -266,6 +284,14 @@ export const workspaceMachine = createMachine(
   },
   {
     actions: {
+      // Clear data about an old workspace when looking at a new one
+      clearContext: () =>
+        assign({
+          workspace: undefined,
+          template: undefined,
+          organization: undefined,
+          build: undefined,
+        }),
       assignWorkspace: assign({
         workspace: (_, event) => event.data,
       }),
@@ -287,6 +313,10 @@ export const workspaceMachine = createMachine(
         getOrganizationError: (_, event) => event.data,
       }),
       clearGetOrganizationError: (context) => assign({ ...context, getOrganizationError: undefined }),
+      assignBuild: (_, event) =>
+        assign({
+          build: event.data,
+        }),
       assignJobError: (_, event) =>
         assign({
           jobError: event.data,
@@ -311,6 +341,14 @@ export const workspaceMachine = createMachine(
         assign({
           refreshWorkspaceError: undefined,
         }),
+      assignRefreshTemplateError: (_, event) =>
+        assign({
+          refreshTemplateError: event.data,
+        }),
+      clearRefreshTemplateError: (_) =>
+        assign({
+          refreshTemplateError: undefined,
+        }),
     },
     guards: {
       workspaceIsStarted: (context) =>