From 12cdd47a8534ecff3746f4eb86e192bdd1688d1b Mon Sep 17 00:00:00 2001
From: Abhineet Jain <abhineet@coder.com>
Date: Mon, 1 Aug 2022 16:01:11 +0000
Subject: [PATCH 1/8] fix: handle workspace errors

---
 site/src/api/errors.ts                        |  3 ++
 site/src/components/Resources/Resources.tsx   |  3 +-
 site/src/components/Workspace/Workspace.tsx   | 28 +++++++++++--
 .../src/pages/WorkspacePage/WorkspacePage.tsx | 41 ++++++++++++++++---
 .../xServices/workspace/workspaceXService.ts  | 16 +++-----
 5 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/site/src/api/errors.ts b/site/src/api/errors.ts
index 56f385b19959d..ddc70792b0089 100644
--- a/site/src/api/errors.ts
+++ b/site/src/api/errors.ts
@@ -86,3 +86,6 @@ export const getValidationErrorMessage = (error: Error | ApiError | unknown): st
 
 export const getErrorDetail = (error: Error | ApiError | unknown): string | undefined | null =>
   isApiError(error) ? error.response.data.detail : error instanceof Error ? error.stack : null
+
+export const getErrorIfErrorType = (error: Error | unknown): Error | undefined =>
+  error instanceof Error ? error : undefined
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
index debbf2bfe45d7..fa88a9553f754 100644
--- a/site/src/components/Resources/Resources.tsx
+++ b/site/src/components/Resources/Resources.tsx
@@ -6,6 +6,7 @@ import TableContainer from "@material-ui/core/TableContainer"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import useTheme from "@material-ui/styles/useTheme"
+import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
 import { FC } from "react"
 import { Workspace, WorkspaceResource } from "../../api/typesGenerated"
 import { AvatarData } from "../../components/AvatarData/AvatarData"
@@ -45,7 +46,7 @@ export const Resources: FC<ResourcesProps> = ({
   return (
     <div aria-label={Language.resources} className={styles.wrapper}>
       {getResourcesError ? (
-        { getResourcesError }
+        <ErrorSummary error={getResourcesError} />
       ) : (
         <TableContainer className={styles.tableContainer}>
           <Table>
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index de4b4eb131daf..d72fc551f9224 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -1,4 +1,5 @@
 import { makeStyles } from "@material-ui/core/styles"
+import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
 import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
 import { FC } from "react"
 import { useNavigate } from "react-router-dom"
@@ -15,6 +16,13 @@ import { WorkspaceScheduleButton } from "../WorkspaceScheduleButton/WorkspaceSch
 import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 import { WorkspaceStats } from "../WorkspaceStats/WorkspaceStats"
 
+export enum WorkspaceErrors {
+  GET_RESOURCES_ERROR = "getResourcesError",
+  GET_BUILDS_ERROR = "getBuildsError",
+  BUILD_ERROR = "buildError",
+  CANCELLATION_MESSAGE = "cancellationMessage",
+}
+
 export interface WorkspaceProps {
   bannerProps: {
     isLoading?: boolean
@@ -31,9 +39,9 @@ export interface WorkspaceProps {
   handleCancel: () => void
   workspace: TypesGen.Workspace
   resources?: TypesGen.WorkspaceResource[]
-  getResourcesError?: Error
   builds?: TypesGen.WorkspaceBuild[]
   canUpdateWorkspace: boolean
+  workspaceErrors: Partial<Record<WorkspaceErrors, Error>>
 }
 
 /**
@@ -49,15 +57,23 @@ export const Workspace: FC<WorkspaceProps> = ({
   handleCancel,
   workspace,
   resources,
-  getResourcesError,
   builds,
   canUpdateWorkspace,
+  workspaceErrors,
 }) => {
   const styles = useStyles()
   const navigate = useNavigate()
 
   return (
     <Margins>
+      <Stack spacing={1}>
+        {workspaceErrors[WorkspaceErrors.BUILD_ERROR] && (
+          <ErrorSummary error={workspaceErrors[WorkspaceErrors.BUILD_ERROR]} dismissible />
+        )}
+        {workspaceErrors[WorkspaceErrors.CANCELLATION_MESSAGE] && (
+          <ErrorSummary error={workspaceErrors[WorkspaceErrors.CANCELLATION_MESSAGE]} dismissible />
+        )}
+      </Stack>
       <PageHeader
         actions={
           <Stack direction="row" spacing={1} className={styles.actions}>
@@ -101,14 +117,18 @@ export const Workspace: FC<WorkspaceProps> = ({
           {!!resources && !!resources.length && (
             <Resources
               resources={resources}
-              getResourcesError={getResourcesError}
+              getResourcesError={workspaceErrors[WorkspaceErrors.GET_RESOURCES_ERROR]}
               workspace={workspace}
               canUpdateWorkspace={canUpdateWorkspace}
             />
           )}
 
           <WorkspaceSection title="Logs" contentsProps={{ className: styles.timelineContents }}>
-            <BuildsTable builds={builds} className={styles.timelineTable} />
+            {workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR] ? (
+              <ErrorSummary error={workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR]} />
+            ) : (
+              <BuildsTable builds={builds} className={styles.timelineTable} />
+            )}
           </WorkspaceSection>
         </Stack>
       </Stack>
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
index 9a87398707711..eae3ff24a7a06 100644
--- a/site/src/pages/WorkspacePage/WorkspacePage.tsx
+++ b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -1,4 +1,6 @@
+import { makeStyles } from "@material-ui/core/styles"
 import { useMachine, useSelector } from "@xstate/react"
+import { getErrorIfErrorType } from "api/errors"
 import dayjs from "dayjs"
 import minMax from "dayjs/plugin/minMax"
 import React, { useContext, useEffect } from "react"
@@ -7,7 +9,7 @@ import { useParams } from "react-router-dom"
 import { DeleteWorkspaceDialog } from "../../components/DeleteWorkspaceDialog/DeleteWorkspaceDialog"
 import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
-import { Workspace } from "../../components/Workspace/Workspace"
+import { Workspace, WorkspaceErrors } from "../../components/Workspace/Workspace"
 import { firstOrItem } from "../../util/array"
 import { pageTitle } from "../../util/page"
 import { getFaviconByStatus } from "../../util/workspace"
@@ -31,13 +33,26 @@ export const WorkspacePage: React.FC = () => {
       userId: me?.id,
     },
   })
-  const { workspace, resources, getWorkspaceError, getResourcesError, builds, permissions } =
-    workspaceState.context
+  const {
+    workspace,
+    getWorkspaceError,
+    resources,
+    getResourcesError,
+    builds,
+    getBuildsError,
+    permissions,
+    checkPermissionsError,
+    buildError,
+    cancellationMessage,
+  } = workspaceState.context
 
+  console.log(cancellationMessage)
   const canUpdateWorkspace = !!permissions?.updateWorkspace
 
   const [bannerState, bannerSend] = useMachine(workspaceScheduleBannerMachine)
 
+  const styles = useStyles()
+
   /**
    * Get workspace, template, and organization on mount and whenever workspaceId changes.
    * workspaceSend should not change.
@@ -47,7 +62,12 @@ export const WorkspacePage: React.FC = () => {
   }, [username, workspaceName, workspaceSend])
 
   if (workspaceState.matches("error")) {
-    return <ErrorSummary error={getWorkspaceError} />
+    return (
+      <div className={styles.error}>
+        {getWorkspaceError && <ErrorSummary error={getWorkspaceError} />}
+        {checkPermissionsError && <ErrorSummary error={checkPermissionsError} />}
+      </div>
+    )
   } else if (!workspace) {
     return <FullScreenLoader />
   } else {
@@ -100,9 +120,14 @@ export const WorkspacePage: React.FC = () => {
           handleUpdate={() => workspaceSend("UPDATE")}
           handleCancel={() => workspaceSend("CANCEL")}
           resources={resources}
-          getResourcesError={getResourcesError instanceof Error ? getResourcesError : undefined}
           builds={builds}
           canUpdateWorkspace={canUpdateWorkspace}
+          workspaceErrors={{
+            [WorkspaceErrors.GET_RESOURCES_ERROR]: getErrorIfErrorType(getResourcesError),
+            [WorkspaceErrors.GET_BUILDS_ERROR]: getErrorIfErrorType(getBuildsError),
+            [WorkspaceErrors.BUILD_ERROR]: getErrorIfErrorType(buildError),
+            [WorkspaceErrors.CANCELLATION_MESSAGE]: getErrorIfErrorType(cancellationMessage),
+          }}
         />
         <DeleteWorkspaceDialog
           isOpen={workspaceState.matches({ ready: { build: "askingDelete" } })}
@@ -121,3 +146,9 @@ export const boundedDeadline = (newDeadline: dayjs.Dayjs, now: dayjs.Dayjs): day
   const maxDeadline = now.add(24, "hours")
   return dayjs.min(dayjs.max(minDeadline, newDeadline), maxDeadline)
 }
+
+const useStyles = makeStyles((theme) => ({
+  error: {
+    margin: theme.spacing(2),
+  },
+}))
diff --git a/site/src/xServices/workspace/workspaceXService.ts b/site/src/xServices/workspace/workspaceXService.ts
index a6db5a6d61498..071060ea37a81 100644
--- a/site/src/xServices/workspace/workspaceXService.ts
+++ b/site/src/xServices/workspace/workspaceXService.ts
@@ -35,7 +35,7 @@ export interface WorkspaceContext {
   builds?: TypesGen.WorkspaceBuild[]
   getBuildsError?: Error | unknown
   loadMoreBuildsError?: Error | unknown
-  cancellationMessage: string
+  cancellationMessage: Types.Message
   // permissions
   permissions?: Permissions
   checkPermissionsError?: Error | unknown
@@ -213,7 +213,7 @@ export const workspaceMachine = createMachine(
                   },
                   onError: {
                     target: "idle",
-                    actions: ["assignBuildError", "displayBuildError"],
+                    actions: ["assignBuildError"],
                   },
                 },
               },
@@ -228,7 +228,7 @@ export const workspaceMachine = createMachine(
                   },
                   onError: {
                     target: "idle",
-                    actions: ["assignBuildError", "displayBuildError"],
+                    actions: ["assignBuildError"],
                   },
                 },
               },
@@ -243,7 +243,7 @@ export const workspaceMachine = createMachine(
                   },
                   onError: {
                     target: "idle",
-                    actions: ["assignBuildError", "displayBuildError"],
+                    actions: ["assignBuildError"],
                   },
                 },
               },
@@ -258,7 +258,7 @@ export const workspaceMachine = createMachine(
                   },
                   onError: {
                     target: "idle",
-                    actions: ["assignCancellationMessage", "displayCancellationError"],
+                    actions: ["assignCancellationMessage"],
                   },
                 },
               },
@@ -395,9 +395,6 @@ export const workspaceMachine = createMachine(
         assign({
           buildError: event.data,
         }),
-      displayBuildError: () => {
-        displayError(Language.buildError)
-      },
       clearBuildError: (_) =>
         assign({
           buildError: undefined,
@@ -410,9 +407,6 @@ export const workspaceMachine = createMachine(
         assign({
           cancellationMessage: undefined,
         }),
-      displayCancellationError: (context) => {
-        displayError(context.cancellationMessage)
-      },
       assignRefreshWorkspaceError: (_, event) =>
         assign({
           refreshWorkspaceError: event.data,

From 2b905e76f3de3de7d196b4b7f3c1f06f90586e53 Mon Sep 17 00:00:00 2001
From: Abhineet Jain <abhineet@coder.com>
Date: Mon, 1 Aug 2022 16:22:42 +0000
Subject: [PATCH 2/8] add stories

---
 .../Workspace/Workspace.stories.tsx           | 32 ++++++++++++++++++-
 site/src/components/Workspace/Workspace.tsx   |  4 +--
 .../src/pages/WorkspacePage/WorkspacePage.tsx |  1 -
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx
index c94da97054640..35dbef0629399 100644
--- 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 * as Mocks from "../../testHelpers/entities"
-import { Workspace, WorkspaceProps } from "./Workspace"
+import { Workspace, WorkspaceErrors, WorkspaceProps } from "./Workspace"
 
 export default {
   title: "components/Workspace",
@@ -71,6 +71,11 @@ Error.args = {
       transition: "start",
     },
   },
+  workspaceErrors: {
+    [WorkspaceErrors.BUILD_ERROR]: Mocks.makeMockApiError({
+      message: "A workspace build is already active.",
+    }),
+  }
 }
 
 export const Deleting = Template.bind({})
@@ -95,6 +100,11 @@ export const Canceled = Template.bind({})
 Canceled.args = {
   ...Started.args,
   workspace: Mocks.MockCanceledWorkspace,
+  workspaceErrors: {
+    [WorkspaceErrors.CANCELLATION_MESSAGE]: Mocks.makeMockApiError({
+      message: "Job has been marked as canceled...",
+    }),
+  }
 }
 
 export const Outdated = Template.bind({})
@@ -102,3 +112,23 @@ Outdated.args = {
   ...Started.args,
   workspace: Mocks.MockOutdatedWorkspace,
 }
+
+export const GetBuildsError = Template.bind({})
+GetBuildsError.args = {
+  ...Started.args,
+  workspaceErrors: {
+    [WorkspaceErrors.GET_BUILDS_ERROR]: Mocks.makeMockApiError({
+      message: "There is a problem fetching builds.",
+    }),
+  }
+}
+
+export const GetResourcesError = Template.bind({})
+GetResourcesError.args = {
+  ...Started.args,
+  workspaceErrors: {
+    [WorkspaceErrors.GET_RESOURCES_ERROR]: Mocks.makeMockApiError({
+      message: "There is a problem fetching workspace resources.",
+    }),
+  }
+}
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index d72fc551f9224..bd1b7fcec8ae5 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -41,7 +41,7 @@ export interface WorkspaceProps {
   resources?: TypesGen.WorkspaceResource[]
   builds?: TypesGen.WorkspaceBuild[]
   canUpdateWorkspace: boolean
-  workspaceErrors: Partial<Record<WorkspaceErrors, Error>>
+  workspaceErrors: Partial<Record<WorkspaceErrors, Error | unknown>>
 }
 
 /**
@@ -117,7 +117,7 @@ export const Workspace: FC<WorkspaceProps> = ({
           {!!resources && !!resources.length && (
             <Resources
               resources={resources}
-              getResourcesError={workspaceErrors[WorkspaceErrors.GET_RESOURCES_ERROR]}
+              getResourcesError={workspaceErrors[WorkspaceErrors.GET_RESOURCES_ERROR] as Error}
               workspace={workspace}
               canUpdateWorkspace={canUpdateWorkspace}
             />
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
index eae3ff24a7a06..9457cbed81ea6 100644
--- a/site/src/pages/WorkspacePage/WorkspacePage.tsx
+++ b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -46,7 +46,6 @@ export const WorkspacePage: React.FC = () => {
     cancellationMessage,
   } = workspaceState.context
 
-  console.log(cancellationMessage)
   const canUpdateWorkspace = !!permissions?.updateWorkspace
 
   const [bannerState, bannerSend] = useMachine(workspaceScheduleBannerMachine)

From 94640e43dc9822b1bc77fa75f2fe190eb1294a4a Mon Sep 17 00:00:00 2001
From: Abhineet Jain <abhineet@coder.com>
Date: Mon, 1 Aug 2022 16:30:18 +0000
Subject: [PATCH 3/8] fix error types

---
 site/src/api/errors.ts                         | 3 ---
 site/src/components/Resources/Resources.tsx    | 2 +-
 site/src/components/Workspace/Workspace.tsx    | 2 +-
 site/src/pages/WorkspacePage/WorkspacePage.tsx | 9 ++++-----
 4 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/site/src/api/errors.ts b/site/src/api/errors.ts
index ddc70792b0089..56f385b19959d 100644
--- a/site/src/api/errors.ts
+++ b/site/src/api/errors.ts
@@ -86,6 +86,3 @@ export const getValidationErrorMessage = (error: Error | ApiError | unknown): st
 
 export const getErrorDetail = (error: Error | ApiError | unknown): string | undefined | null =>
   isApiError(error) ? error.response.data.detail : error instanceof Error ? error.stack : null
-
-export const getErrorIfErrorType = (error: Error | unknown): Error | undefined =>
-  error instanceof Error ? error : undefined
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
index fa88a9553f754..989ddda75dab6 100644
--- a/site/src/components/Resources/Resources.tsx
+++ b/site/src/components/Resources/Resources.tsx
@@ -29,7 +29,7 @@ const Language = {
 
 interface ResourcesProps {
   resources?: WorkspaceResource[]
-  getResourcesError?: Error
+  getResourcesError?: Error | unknown
   workspace: Workspace
   canUpdateWorkspace: boolean
 }
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index bd1b7fcec8ae5..910110e85bb17 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -117,7 +117,7 @@ export const Workspace: FC<WorkspaceProps> = ({
           {!!resources && !!resources.length && (
             <Resources
               resources={resources}
-              getResourcesError={workspaceErrors[WorkspaceErrors.GET_RESOURCES_ERROR] as Error}
+              getResourcesError={workspaceErrors[WorkspaceErrors.GET_RESOURCES_ERROR]}
               workspace={workspace}
               canUpdateWorkspace={canUpdateWorkspace}
             />
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
index 9457cbed81ea6..5fdcccee672bb 100644
--- a/site/src/pages/WorkspacePage/WorkspacePage.tsx
+++ b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -1,6 +1,5 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { useMachine, useSelector } from "@xstate/react"
-import { getErrorIfErrorType } from "api/errors"
 import dayjs from "dayjs"
 import minMax from "dayjs/plugin/minMax"
 import React, { useContext, useEffect } from "react"
@@ -122,10 +121,10 @@ export const WorkspacePage: React.FC = () => {
           builds={builds}
           canUpdateWorkspace={canUpdateWorkspace}
           workspaceErrors={{
-            [WorkspaceErrors.GET_RESOURCES_ERROR]: getErrorIfErrorType(getResourcesError),
-            [WorkspaceErrors.GET_BUILDS_ERROR]: getErrorIfErrorType(getBuildsError),
-            [WorkspaceErrors.BUILD_ERROR]: getErrorIfErrorType(buildError),
-            [WorkspaceErrors.CANCELLATION_MESSAGE]: getErrorIfErrorType(cancellationMessage),
+            [WorkspaceErrors.GET_RESOURCES_ERROR]: getResourcesError,
+            [WorkspaceErrors.GET_BUILDS_ERROR]: getBuildsError,
+            [WorkspaceErrors.BUILD_ERROR]: buildError,
+            [WorkspaceErrors.CANCELLATION_MESSAGE]: cancellationMessage,
           }}
         />
         <DeleteWorkspaceDialog

From 6f8c20d32df4551b0f8fcae0f6f5acc53929b0e7 Mon Sep 17 00:00:00 2001
From: Abhineet Jain <abhineet@coder.com>
Date: Mon, 1 Aug 2022 16:32:46 +0000
Subject: [PATCH 4/8] fix lint

---
 site/src/components/Workspace/Workspace.stories.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx
index 35dbef0629399..8855bb2154a6e 100644
--- a/site/src/components/Workspace/Workspace.stories.tsx
+++ b/site/src/components/Workspace/Workspace.stories.tsx
@@ -75,7 +75,7 @@ Error.args = {
     [WorkspaceErrors.BUILD_ERROR]: Mocks.makeMockApiError({
       message: "A workspace build is already active.",
     }),
-  }
+  },
 }
 
 export const Deleting = Template.bind({})
@@ -104,7 +104,7 @@ Canceled.args = {
     [WorkspaceErrors.CANCELLATION_MESSAGE]: Mocks.makeMockApiError({
       message: "Job has been marked as canceled...",
     }),
-  }
+  },
 }
 
 export const Outdated = Template.bind({})
@@ -120,7 +120,7 @@ GetBuildsError.args = {
     [WorkspaceErrors.GET_BUILDS_ERROR]: Mocks.makeMockApiError({
       message: "There is a problem fetching builds.",
     }),
-  }
+  },
 }
 
 export const GetResourcesError = Template.bind({})
@@ -130,5 +130,5 @@ GetResourcesError.args = {
     [WorkspaceErrors.GET_RESOURCES_ERROR]: Mocks.makeMockApiError({
       message: "There is a problem fetching workspace resources.",
     }),
-  }
+  },
 }

From 965eb323acd426fe5bbbf9cb15ad436269840ac2 Mon Sep 17 00:00:00 2001
From: Abhineet Jain <abhineet@coder.com>
Date: Mon, 1 Aug 2022 17:12:21 +0000
Subject: [PATCH 5/8] fix stories

---
 site/src/components/Workspace/Workspace.stories.tsx | 1 +
 site/src/xServices/workspace/workspaceXService.ts   | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx
index 8855bb2154a6e..f212a23fa1859 100644
--- a/site/src/components/Workspace/Workspace.stories.tsx
+++ b/site/src/components/Workspace/Workspace.stories.tsx
@@ -31,6 +31,7 @@ Started.args = {
   resources: [Mocks.MockWorkspaceResource, Mocks.MockWorkspaceResource2],
   builds: [Mocks.MockWorkspaceBuild],
   canUpdateWorkspace: true,
+  workspaceErrors: {},
 }
 
 export const WithoutUpdateAccess = Template.bind({})
diff --git a/site/src/xServices/workspace/workspaceXService.ts b/site/src/xServices/workspace/workspaceXService.ts
index 071060ea37a81..ba5e22ea41c94 100644
--- a/site/src/xServices/workspace/workspaceXService.ts
+++ b/site/src/xServices/workspace/workspaceXService.ts
@@ -35,7 +35,7 @@ export interface WorkspaceContext {
   builds?: TypesGen.WorkspaceBuild[]
   getBuildsError?: Error | unknown
   loadMoreBuildsError?: Error | unknown
-  cancellationMessage: Types.Message
+  cancellationMessage: Error | unknown
   // permissions
   permissions?: Permissions
   checkPermissionsError?: Error | unknown

From 50ee56951852a46b3ae9da4296a6cd51d2a9eee3 Mon Sep 17 00:00:00 2001
From: Abhineet Jain <abhineet@coder.com>
Date: Tue, 2 Aug 2022 05:53:55 +0000
Subject: [PATCH 6/8] fix: chromatic workflow filter

---
 .github/workflows/coder.yaml | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/.github/workflows/coder.yaml b/.github/workflows/coder.yaml
index ca09ef2629607..f25857fbb09bf 100644
--- a/.github/workflows/coder.yaml
+++ b/.github/workflows/coder.yaml
@@ -68,10 +68,7 @@ jobs:
             sh:
               - "**.sh"
             ts:
-              - "**.tsx?"
-              - "**.jsx?"
-              - "**.lock"
-              - "**.json"
+              - 'site/**'
       - id: debug
         run: |
           echo "${{ toJSON(steps.filter )}}"

From 66910aba4c33f268029e67116d4d4b1b20c8afee Mon Sep 17 00:00:00 2001
From: Abhineet Jain <abhineet@coder.com>
Date: Wed, 3 Aug 2022 18:26:11 +0000
Subject: [PATCH 7/8] fix workflow context assignment

---
 .../Workspace/Workspace.stories.tsx           |  15 ++-
 site/src/components/Workspace/Workspace.tsx   |   6 +-
 .../src/pages/WorkspacePage/WorkspacePage.tsx |   4 +-
 .../xServices/workspace/workspaceXService.ts  | 102 +++++++++---------
 4 files changed, 68 insertions(+), 59 deletions(-)

diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx
index f212a23fa1859..7a64657d4d5dd 100644
--- a/site/src/components/Workspace/Workspace.stories.tsx
+++ b/site/src/components/Workspace/Workspace.stories.tsx
@@ -101,11 +101,6 @@ export const Canceled = Template.bind({})
 Canceled.args = {
   ...Started.args,
   workspace: Mocks.MockCanceledWorkspace,
-  workspaceErrors: {
-    [WorkspaceErrors.CANCELLATION_MESSAGE]: Mocks.makeMockApiError({
-      message: "Job has been marked as canceled...",
-    }),
-  },
 }
 
 export const Outdated = Template.bind({})
@@ -133,3 +128,13 @@ GetResourcesError.args = {
     }),
   },
 }
+
+export const CancellationError = Template.bind({})
+CancellationError.args = {
+  ...Error.args,
+  workspaceErrors: {
+    [WorkspaceErrors.CANCELLATION_ERROR]: Mocks.makeMockApiError({
+      message: "Job could not be canceled.",
+    }),
+  },
+}
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index 910110e85bb17..e52099fac1d16 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -20,7 +20,7 @@ export enum WorkspaceErrors {
   GET_RESOURCES_ERROR = "getResourcesError",
   GET_BUILDS_ERROR = "getBuildsError",
   BUILD_ERROR = "buildError",
-  CANCELLATION_MESSAGE = "cancellationMessage",
+  CANCELLATION_ERROR = "cancellationError",
 }
 
 export interface WorkspaceProps {
@@ -70,8 +70,8 @@ export const Workspace: FC<WorkspaceProps> = ({
         {workspaceErrors[WorkspaceErrors.BUILD_ERROR] && (
           <ErrorSummary error={workspaceErrors[WorkspaceErrors.BUILD_ERROR]} dismissible />
         )}
-        {workspaceErrors[WorkspaceErrors.CANCELLATION_MESSAGE] && (
-          <ErrorSummary error={workspaceErrors[WorkspaceErrors.CANCELLATION_MESSAGE]} dismissible />
+        {workspaceErrors[WorkspaceErrors.CANCELLATION_ERROR] && (
+          <ErrorSummary error={workspaceErrors[WorkspaceErrors.CANCELLATION_ERROR]} dismissible />
         )}
       </Stack>
       <PageHeader
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
index 5fdcccee672bb..99a25f994a813 100644
--- a/site/src/pages/WorkspacePage/WorkspacePage.tsx
+++ b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -42,7 +42,7 @@ export const WorkspacePage: React.FC = () => {
     permissions,
     checkPermissionsError,
     buildError,
-    cancellationMessage,
+    cancellationError,
   } = workspaceState.context
 
   const canUpdateWorkspace = !!permissions?.updateWorkspace
@@ -124,7 +124,7 @@ export const WorkspacePage: React.FC = () => {
             [WorkspaceErrors.GET_RESOURCES_ERROR]: getResourcesError,
             [WorkspaceErrors.GET_BUILDS_ERROR]: getBuildsError,
             [WorkspaceErrors.BUILD_ERROR]: buildError,
-            [WorkspaceErrors.CANCELLATION_MESSAGE]: cancellationMessage,
+            [WorkspaceErrors.CANCELLATION_ERROR]: cancellationError,
           }}
         />
         <DeleteWorkspaceDialog
diff --git a/site/src/xServices/workspace/workspaceXService.ts b/site/src/xServices/workspace/workspaceXService.ts
index ba5e22ea41c94..93f8f7e25eebf 100644
--- a/site/src/xServices/workspace/workspaceXService.ts
+++ b/site/src/xServices/workspace/workspaceXService.ts
@@ -3,7 +3,7 @@ import { pure } from "xstate/lib/actions"
 import * as API from "../../api/api"
 import * as Types from "../../api/types"
 import * as TypesGen from "../../api/typesGenerated"
-import { displayError } from "../../components/GlobalSnackbar/utils"
+import { displayError, displaySuccess } from "../../components/GlobalSnackbar/utils"
 
 const latestBuild = (builds: TypesGen.WorkspaceBuild[]) => {
   // Cloning builds to not change the origin object with the sort()
@@ -35,7 +35,8 @@ export interface WorkspaceContext {
   builds?: TypesGen.WorkspaceBuild[]
   getBuildsError?: Error | unknown
   loadMoreBuildsError?: Error | unknown
-  cancellationMessage: Error | unknown
+  cancellationMessage?: Types.Message
+  cancellationError?: Error | unknown
   // permissions
   permissions?: Permissions
   checkPermissionsError?: Error | unknown
@@ -97,6 +98,9 @@ export const workspaceMachine = createMachine(
         stopWorkspace: {
           data: TypesGen.WorkspaceBuild
         }
+        deleteWorkspace: {
+          data: TypesGen.WorkspaceBuild
+        }
         cancelWorkspace: {
           data: Types.Message
         }
@@ -248,17 +252,17 @@ export const workspaceMachine = createMachine(
                 },
               },
               requestingCancel: {
-                entry: "clearCancellationMessage",
+                entry: ["clearCancellationMessage", "clearCancellationError"],
                 invoke: {
                   id: "cancelWorkspace",
                   src: "cancelWorkspace",
                   onDone: {
                     target: "idle",
-                    actions: ["assignCancellationMessage", "refreshTimeline"],
+                    actions: ["assignCancellationMessage", "displayCancellationMessage", "refreshTimeline"],
                   },
                   onError: {
                     target: "idle",
-                    actions: ["assignCancellationMessage"],
+                    actions: ["assignCancellationError"],
                   },
                 },
               },
@@ -387,57 +391,57 @@ export const workspaceMachine = createMachine(
       clearGetPermissionsError: assign({
         checkPermissionsError: (_) => undefined,
       }),
-      assignBuild: (_, event) =>
-        assign({
-          build: event.data,
-        }),
-      assignBuildError: (_, event) =>
-        assign({
-          buildError: event.data,
-        }),
-      clearBuildError: (_) =>
-        assign({
-          buildError: undefined,
-        }),
-      assignCancellationMessage: (_, event) =>
-        assign({
-          cancellationMessage: event.data,
-        }),
-      clearCancellationMessage: (_) =>
-        assign({
-          cancellationMessage: undefined,
-        }),
-      assignRefreshWorkspaceError: (_, event) =>
-        assign({
-          refreshWorkspaceError: event.data,
-        }),
-      clearRefreshWorkspaceError: (_) =>
-        assign({
-          refreshWorkspaceError: undefined,
-        }),
-      assignRefreshTemplateError: (_, event) =>
-        assign({
-          refreshTemplateError: event.data,
-        }),
+      assignBuild: assign({
+        build: (_, event) => event.data,
+      }),
+      assignBuildError: assign({
+        buildError: (_, event) => event.data,
+      }),
+      clearBuildError: assign({
+        buildError: (_) => undefined,
+      }),
+      assignCancellationMessage: assign({
+        cancellationMessage: (_, event) => event.data,
+      }),
+      clearCancellationMessage: assign({
+        cancellationMessage: (_) => undefined,
+      }),
+      displayCancellationMessage: (context) => {
+        if (context.cancellationMessage) {
+          displaySuccess(context.cancellationMessage.message)
+        }
+      },
+      assignCancellationError: assign({
+        cancellationError: (_, event) => event.data,
+      }),
+      clearCancellationError: assign({
+        cancellationError: (_) => undefined,
+      }),
+      assignRefreshWorkspaceError: assign({
+        refreshWorkspaceError: (_, event) => event.data,
+      }),
+      clearRefreshWorkspaceError: assign({
+        refreshWorkspaceError: (_) => undefined,
+      }),
+      assignRefreshTemplateError: assign({
+        refreshTemplateError: (_, event) => event.data,
+      }),
       displayRefreshTemplateError: () => {
         displayError(Language.refreshTemplateError)
       },
-      clearRefreshTemplateError: (_) =>
-        assign({
-          refreshTemplateError: undefined,
-        }),
+      clearRefreshTemplateError: assign({
+        refreshTemplateError: (_) => undefined,
+      }),
       // Resources
       assignResources: assign({
         resources: (_, event) => event.data,
       }),
-      assignGetResourcesError: (_, event) =>
-        assign({
-          getResourcesError: event.data,
-        }),
-      clearGetResourcesError: (_) =>
-        assign({
-          getResourcesError: undefined,
-        }),
+      assignGetResourcesError: assign({
+        getResourcesError: (_, event) => event.data,
+      }),
+      clearGetResourcesError: assign({
+        getResourcesError: (_) => undefined,
+      }),
       // Timeline
       assignBuilds: assign({
         builds: (_, event) => event.data,

From dfd346b2709782ad32d509462fe82ae3d575021b Mon Sep 17 00:00:00 2001
From: Abhineet Jain <abhineet@coder.com>
Date: Wed, 3 Aug 2022 18:31:22 +0000
Subject: [PATCH 8/8] fix lint

---
 site/src/xServices/workspace/workspaceXService.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/site/src/xServices/workspace/workspaceXService.ts b/site/src/xServices/workspace/workspaceXService.ts
index 93f8f7e25eebf..acdb7b0987cbe 100644
--- a/site/src/xServices/workspace/workspaceXService.ts
+++ b/site/src/xServices/workspace/workspaceXService.ts
@@ -258,7 +258,11 @@ export const workspaceMachine = createMachine(
                   src: "cancelWorkspace",
                   onDone: {
                     target: "idle",
-                    actions: ["assignCancellationMessage", "displayCancellationMessage", "refreshTimeline"],
+                    actions: [
+                      "assignCancellationMessage",
+                      "displayCancellationMessage",
+                      "refreshTimeline",
+                    ],
                   },
                   onError: {
                     target: "idle",

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/3341.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/3341.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/3341.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/3341.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>