From b78f0b5f1da1b92df128c2e9c401a00a056591ba Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Tue, 7 Jun 2022 18:31:13 +0000
Subject: [PATCH 1/6] added deleted workspace banner

---
 site/src/api/api.ts                           |  5 ++-
 site/src/components/Workspace/Workspace.tsx   | 12 +++++-
 .../WorkspaceDeletedBanner.tsx                | 41 +++++++++++++++++++
 .../src/pages/WorkspacePage/WorkspacePage.tsx |  4 +-
 site/src/util/workspace.ts                    |  2 +-
 .../xServices/workspace/workspaceXService.ts  |  2 +
 6 files changed, 58 insertions(+), 8 deletions(-)
 create mode 100644 site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 4e06ccc5306e8..31280e379b584 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -107,8 +107,9 @@ export const getTemplateVersionResources = async (versionId: string): Promise<Ty
   return response.data
 }
 
-export const getWorkspace = async (workspaceId: string): Promise<TypesGen.Workspace> => {
-  const response = await axios.get<TypesGen.Workspace>(`/api/v2/workspaces/${workspaceId}`)
+export const getWorkspace = async (workspaceId: string, params?: any): Promise<TypesGen.Workspace> => {
+  console.log("in here", params)
+  const response = await axios.get<TypesGen.Workspace>(`/api/v2/workspaces/${workspaceId}`, { params })
   return response.data
 }
 
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index 3903dcdd2a1c6..fc7f24ca07e19 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -3,10 +3,12 @@ import Typography from "@material-ui/core/Typography"
 import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
+import { getWorkspaceStatus, succeededToStatus } from "../../util/workspace"
 import { BuildsTable } from "../BuildsTable/BuildsTable"
 import { Resources } from "../Resources/Resources"
 import { Stack } from "../Stack/Stack"
 import { WorkspaceActions } from "../WorkspaceActions/WorkspaceActions"
+import { WorkspaceDeletedBanner } from "../WorkspaceDeletedBanner/WorkspaceDeletedBanner"
 import { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
 import { WorkspaceScheduleBanner } from "../WorkspaceScheduleBanner/WorkspaceScheduleBanner"
 import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
@@ -44,7 +46,9 @@ export const Workspace: FC<WorkspaceProps> = ({
   builds,
 }) => {
   const styles = useStyles()
-
+  console.log("workspace", workspace)
+  const isDeleted = getWorkspaceStatus(workspace.latest_build) === succeededToStatus["delete"]
+  console.log("isDeleted", isDeleted)
   return (
     <div className={styles.root}>
       <Stack direction="row" spacing={3}>
@@ -82,9 +86,13 @@ export const Workspace: FC<WorkspaceProps> = ({
             workspace={workspace}
           />
 
+          {isDeleted && <WorkspaceDeletedBanner />}
+
           <WorkspaceStats workspace={workspace} />
 
-          <Resources resources={resources} getResourcesError={getResourcesError} workspace={workspace} />
+          {!!resources && !!resources.length && (
+            <Resources resources={resources} getResourcesError={getResourcesError} workspace={workspace} />
+          )}
 
           <WorkspaceSection title="Timeline" contentsProps={{ className: styles.timelineContents }}>
             <BuildsTable builds={builds} className={styles.timelineTable} />
diff --git a/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx b/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx
new file mode 100644
index 0000000000000..23abfe4cc86ea
--- /dev/null
+++ b/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx
@@ -0,0 +1,41 @@
+import Button from "@material-ui/core/Button"
+import { makeStyles } from "@material-ui/core/styles"
+import Alert from "@material-ui/lab/Alert"
+import AlertTitle from "@material-ui/lab/AlertTitle"
+import { FC } from "react"
+import { useNavigate } from "react-router-dom"
+
+const Language = {
+  bannerTitle: "This workspace has been deleted and cannot be edited.",
+  createWorkspaceCta: "Create new workspace",
+}
+
+export const WorkspaceDeletedBanner: FC = () => {
+  const styles = useStyles()
+  const navigate = useNavigate()
+
+  return (
+    <Alert
+      className={styles.root}
+      action={
+        <Button color="inherit" onClick={() => navigate(`/workspaces/new`)} size="small">
+          {Language.createWorkspaceCta}
+        </Button>
+      }
+      severity="warning"
+    >
+      <AlertTitle>{Language.bannerTitle}</AlertTitle>
+    </Alert>
+  )
+}
+
+export const useStyles = makeStyles(() => {
+  return {
+    root: {
+      alignItems: "center",
+      "& .MuiAlertTitle-root": {
+        marginBottom: "0px",
+      },
+    },
+  }
+})
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
index 5dced78ba09e1..9f3762565867f 100644
--- a/site/src/pages/WorkspacePage/WorkspacePage.tsx
+++ b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -1,6 +1,6 @@
 import { useMachine } from "@xstate/react"
 import React, { useEffect } from "react"
-import { useNavigate, useParams } from "react-router-dom"
+import { useParams } from "react-router-dom"
 import { DeleteWorkspaceDialog } from "../../components/DeleteWorkspaceDialog/DeleteWorkspaceDialog"
 import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
@@ -13,7 +13,6 @@ import { workspaceScheduleBannerMachine } from "../../xServices/workspaceSchedul
 
 export const WorkspacePage: React.FC = () => {
   const { workspace: workspaceQueryParam } = useParams()
-  const navigate = useNavigate()
   const workspaceId = firstOrItem(workspaceQueryParam, null)
 
   const [workspaceState, workspaceSend] = useMachine(workspaceMachine)
@@ -60,7 +59,6 @@ export const WorkspacePage: React.FC = () => {
               handleCancel={() => workspaceSend("CANCEL_DELETE")}
               handleConfirm={() => {
                 workspaceSend("DELETE")
-                navigate("/workspaces")
               }}
             />
           </>
diff --git a/site/src/util/workspace.ts b/site/src/util/workspace.ts
index f717e262a4587..3af7a71a7c69c 100644
--- a/site/src/util/workspace.ts
+++ b/site/src/util/workspace.ts
@@ -25,7 +25,7 @@ const inProgressToStatus: Record<WorkspaceBuildTransition, WorkspaceStatus> = {
   delete: "deleting",
 }
 
-const succeededToStatus: Record<WorkspaceBuildTransition, WorkspaceStatus> = {
+export const succeededToStatus: Record<WorkspaceBuildTransition, WorkspaceStatus> = {
   start: "started",
   stop: "stopped",
   delete: "deleted",
diff --git a/site/src/xServices/workspace/workspaceXService.ts b/site/src/xServices/workspace/workspaceXService.ts
index a41ddb578cf27..eedac5871967f 100644
--- a/site/src/xServices/workspace/workspaceXService.ts
+++ b/site/src/xServices/workspace/workspaceXService.ts
@@ -431,6 +431,7 @@ export const workspaceMachine = createMachine(
     },
     services: {
       getWorkspace: async (_, event) => {
+        // { deleted: true }
         return await API.getWorkspace(event.workspaceId)
       },
       getTemplate: async (context) => {
@@ -470,6 +471,7 @@ export const workspaceMachine = createMachine(
       },
       refreshWorkspace: async (context) => {
         if (context.workspace) {
+          // need to add {deleted: true} here but there is a BE bug rn
           return await API.getWorkspace(context.workspace.id)
         } else {
           throw Error("Cannot refresh workspace without id")

From 2931b60bf0625907e25df8fa94790d9f579b3cd1 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Wed, 8 Jun 2022 11:29:02 +0000
Subject: [PATCH 2/6] x state pass

---
 site/src/api/api.ts                           |  7 ++--
 site/src/components/Workspace/Workspace.tsx   |  2 --
 .../WorkspaceScheduleBanner.tsx               |  2 +-
 .../src/pages/WorkspacePage/WorkspacePage.tsx |  4 +--
 .../xServices/workspace/workspaceXService.ts  | 32 +++++++++++++++++--
 5 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 70c3445289115..cc1a906ae2991 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -108,8 +108,11 @@ export const getTemplateVersionResources = async (versionId: string): Promise<Ty
   return response.data
 }
 
-export const getWorkspace = async (workspaceId: string, params?: any): Promise<TypesGen.Workspace> => {
-  console.log("in here", params)
+export const getWorkspace = async (
+  workspaceId: string,
+  params?: TypesGen.WorkspaceOptions,
+): Promise<TypesGen.Workspace> => {
+  console.log("in get Workspace API method", params)
   const response = await axios.get<TypesGen.Workspace>(`/api/v2/workspaces/${workspaceId}`, { params })
   return response.data
 }
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index 2cb2ca176013d..1113f2f4599e2 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -46,9 +46,7 @@ export const Workspace: FC<WorkspaceProps> = ({
   builds,
 }) => {
   const styles = useStyles()
-  console.log("workspace", workspace)
   const isDeleted = getWorkspaceStatus(workspace.latest_build) === succeededToStatus["delete"]
-  console.log("isDeleted", isDeleted)
   return (
     <Margins>
       <PageHeader
diff --git a/site/src/components/WorkspaceScheduleBanner/WorkspaceScheduleBanner.tsx b/site/src/components/WorkspaceScheduleBanner/WorkspaceScheduleBanner.tsx
index 65c64fc75f37e..100bc502023a6 100644
--- a/site/src/components/WorkspaceScheduleBanner/WorkspaceScheduleBanner.tsx
+++ b/site/src/components/WorkspaceScheduleBanner/WorkspaceScheduleBanner.tsx
@@ -26,7 +26,7 @@ export const shouldDisplay = (workspace: TypesGen.Workspace): boolean => {
   if (!isWorkspaceOn(workspace)) {
     return false
   } else {
-    // a mannual shutdown has a deadline of '"0001-01-01T00:00:00Z"'
+    // a manual shutdown has a deadline of '"0001-01-01T00:00:00Z"'
     // SEE: #1834
     const deadline = dayjs(workspace.latest_build.deadline).utc()
     const hasDeadline = deadline.year() > 1
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
index f33b1c31cf8ab..7584c8d193a4e 100644
--- a/site/src/pages/WorkspacePage/WorkspacePage.tsx
+++ b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -1,7 +1,7 @@
 import { useMachine } from "@xstate/react"
 import React, { useEffect } from "react"
 import { Helmet } from "react-helmet"
-import { useNavigate, useParams } from "react-router-dom"
+import { useParams } from "react-router-dom"
 import { DeleteWorkspaceDialog } from "../../components/DeleteWorkspaceDialog/DeleteWorkspaceDialog"
 import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
@@ -13,7 +13,6 @@ import { workspaceScheduleBannerMachine } from "../../xServices/workspaceSchedul
 
 export const WorkspacePage: React.FC = () => {
   const { username: usernameQueryParam, workspace: workspaceQueryParam } = useParams()
-  const navigate = useNavigate()
   const username = firstOrItem(usernameQueryParam, null)
   const workspaceName = firstOrItem(workspaceQueryParam, null)
 
@@ -63,7 +62,6 @@ export const WorkspacePage: React.FC = () => {
           handleCancel={() => workspaceSend("CANCEL_DELETE")}
           handleConfirm={() => {
             workspaceSend("DELETE")
-            navigate("/workspaces")
           }}
         />
       </>
diff --git a/site/src/xServices/workspace/workspaceXService.ts b/site/src/xServices/workspace/workspaceXService.ts
index d552e961a6b65..9d7e9a2757f34 100644
--- a/site/src/xServices/workspace/workspaceXService.ts
+++ b/site/src/xServices/workspace/workspaceXService.ts
@@ -58,6 +58,9 @@ export const workspaceMachine = createMachine(
         getWorkspace: {
           data: TypesGen.Workspace
         }
+        getDeletedWorkspace: {
+          data: TypesGen.Workspace
+        }
         getTemplate: {
           data: TypesGen.Template
         }
@@ -93,6 +96,9 @@ export const workspaceMachine = createMachine(
       idle: {
         tags: "loading",
       },
+      deleted: {
+        tags: "deleted",
+      },
       gettingWorkspace: {
         entry: ["clearGetWorkspaceError", "clearContext"],
         invoke: {
@@ -183,10 +189,10 @@ export const workspaceMachine = createMachine(
               requestingDelete: {
                 entry: "clearBuildError",
                 invoke: {
-                  id: "deleteWorkspace",
+                  id: "deleteWorkspace", // delete the workspace
                   src: "deleteWorkspace",
                   onDone: {
-                    target: "idle",
+                    target: "gettingDeletedWorkspace",
                     actions: ["assignBuild", "refreshTimeline"],
                   },
                   onError: {
@@ -195,6 +201,21 @@ export const workspaceMachine = createMachine(
                   },
                 },
               },
+              gettingDeletedWorkspace: {
+                entry: ["clearGetWorkspaceError", "clearContext"],
+                invoke: {
+                  id: "getDeletedWorkspace", // request deleted workspace
+                  src: "getDeletedWorkspace",
+                  onDone: {
+                    target: "idle",
+                    actions: ["assignBuild", "refreshTimeline"],
+                  },
+                  onError: {
+                    target: "idle", // error
+                    actions: ["assignBuildError", "displayBuildError"],
+                  },
+                },
+              },
               requestingCancel: {
                 entry: "clearCancellationMessage",
                 invoke: {
@@ -433,6 +454,13 @@ export const workspaceMachine = createMachine(
       getWorkspace: async (_, event) => {
         return await API.getWorkspaceByOwnerAndName(event.username, event.workspaceName)
       },
+      getDeletedWorkspace: async (context) => {
+        if (context.workspace) {
+          return await API.getWorkspace(context.workspace.id, { deleted: true })
+        } else {
+          throw Error("Cannot get workspace without id")
+        }
+      },
       getTemplate: async (context) => {
         if (context.workspace) {
           return await API.getTemplate(context.workspace.template_id)

From e48cc71f0f7949b7aa55add354da907dbfdf3bed Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Thu, 9 Jun 2022 13:31:23 +0000
Subject: [PATCH 3/6] added include_deleted param

---
 site/src/api/api.ts                               |  6 ++++--
 site/src/xServices/workspace/workspaceXService.ts | 12 +++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index cc1a906ae2991..39de3d7aff046 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -112,7 +112,6 @@ export const getWorkspace = async (
   workspaceId: string,
   params?: TypesGen.WorkspaceOptions,
 ): Promise<TypesGen.Workspace> => {
-  console.log("in get Workspace API method", params)
   const response = await axios.get<TypesGen.Workspace>(`/api/v2/workspaces/${workspaceId}`, { params })
   return response.data
 }
@@ -145,8 +144,11 @@ export const getWorkspaces = async (filter?: TypesGen.WorkspaceFilter): Promise<
 export const getWorkspaceByOwnerAndName = async (
   username = "me",
   workspaceName: string,
+  params?: TypesGen.WorkspaceByOwnerAndNameParams,
 ): Promise<TypesGen.Workspace> => {
-  const response = await axios.get<TypesGen.Workspace>(`/api/v2/users/${username}/workspace/${workspaceName}`)
+  const response = await axios.get<TypesGen.Workspace>(`/api/v2/users/${username}/workspace/${workspaceName}`, {
+    params,
+  })
   return response.data
 }
 
diff --git a/site/src/xServices/workspace/workspaceXService.ts b/site/src/xServices/workspace/workspaceXService.ts
index 9d7e9a2757f34..6caf0bced3a48 100644
--- a/site/src/xServices/workspace/workspaceXService.ts
+++ b/site/src/xServices/workspace/workspaceXService.ts
@@ -189,7 +189,7 @@ export const workspaceMachine = createMachine(
               requestingDelete: {
                 entry: "clearBuildError",
                 invoke: {
-                  id: "deleteWorkspace", // delete the workspace
+                  id: "deleteWorkspace",
                   src: "deleteWorkspace",
                   onDone: {
                     target: "gettingDeletedWorkspace",
@@ -204,14 +204,14 @@ export const workspaceMachine = createMachine(
               gettingDeletedWorkspace: {
                 entry: ["clearGetWorkspaceError", "clearContext"],
                 invoke: {
-                  id: "getDeletedWorkspace", // request deleted workspace
+                  id: "getDeletedWorkspace",
                   src: "getDeletedWorkspace",
                   onDone: {
                     target: "idle",
                     actions: ["assignBuild", "refreshTimeline"],
                   },
                   onError: {
-                    target: "idle", // error
+                    target: "idle",
                     actions: ["assignBuildError", "displayBuildError"],
                   },
                 },
@@ -452,7 +452,7 @@ export const workspaceMachine = createMachine(
     },
     services: {
       getWorkspace: async (_, event) => {
-        return await API.getWorkspaceByOwnerAndName(event.username, event.workspaceName)
+        return await API.getWorkspaceByOwnerAndName(event.username, event.workspaceName, { include_deleted: true })
       },
       getDeletedWorkspace: async (context) => {
         if (context.workspace) {
@@ -498,7 +498,9 @@ export const workspaceMachine = createMachine(
       },
       refreshWorkspace: async (context) => {
         if (context.workspace) {
-          return await API.getWorkspaceByOwnerAndName(context.workspace.owner_name, context.workspace.name)
+          return await API.getWorkspaceByOwnerAndName(context.workspace.owner_name, context.workspace.name, {
+            include_deleted: true,
+          })
         } else {
           throw Error("Cannot refresh workspace without id")
         }

From aa0101ee3537800132c51ec74596a5d5147e7eb7 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Thu, 9 Jun 2022 13:52:56 +0000
Subject: [PATCH 4/6] clean up x state

---
 .../xServices/workspace/workspaceXService.ts  | 25 -------------------
 1 file changed, 25 deletions(-)

diff --git a/site/src/xServices/workspace/workspaceXService.ts b/site/src/xServices/workspace/workspaceXService.ts
index 6caf0bced3a48..db47ad17d7a5a 100644
--- a/site/src/xServices/workspace/workspaceXService.ts
+++ b/site/src/xServices/workspace/workspaceXService.ts
@@ -96,9 +96,6 @@ export const workspaceMachine = createMachine(
       idle: {
         tags: "loading",
       },
-      deleted: {
-        tags: "deleted",
-      },
       gettingWorkspace: {
         entry: ["clearGetWorkspaceError", "clearContext"],
         invoke: {
@@ -191,21 +188,6 @@ export const workspaceMachine = createMachine(
                 invoke: {
                   id: "deleteWorkspace",
                   src: "deleteWorkspace",
-                  onDone: {
-                    target: "gettingDeletedWorkspace",
-                    actions: ["assignBuild", "refreshTimeline"],
-                  },
-                  onError: {
-                    target: "idle",
-                    actions: ["assignBuildError", "displayBuildError"],
-                  },
-                },
-              },
-              gettingDeletedWorkspace: {
-                entry: ["clearGetWorkspaceError", "clearContext"],
-                invoke: {
-                  id: "getDeletedWorkspace",
-                  src: "getDeletedWorkspace",
                   onDone: {
                     target: "idle",
                     actions: ["assignBuild", "refreshTimeline"],
@@ -454,13 +436,6 @@ export const workspaceMachine = createMachine(
       getWorkspace: async (_, event) => {
         return await API.getWorkspaceByOwnerAndName(event.username, event.workspaceName, { include_deleted: true })
       },
-      getDeletedWorkspace: async (context) => {
-        if (context.workspace) {
-          return await API.getWorkspace(context.workspace.id, { deleted: true })
-        } else {
-          throw Error("Cannot get workspace without id")
-        }
-      },
       getTemplate: async (context) => {
         if (context.workspace) {
           return await API.getTemplate(context.workspace.template_id)

From da40d492fc117265e8eaf90ed3d27d2f6a2f8ffe Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Thu, 9 Jun 2022 15:24:20 +0000
Subject: [PATCH 5/6] added teests

---
 site/src/components/Workspace/Workspace.tsx   |  7 ++--
 .../WorkspaceDeletedBanner.stories.tsx        | 28 +++++++++++++
 .../WorkspaceDeletedBanner.tsx                | 17 ++++++--
 site/src/util/workspace.test.ts               | 40 ++++++++++++++++++-
 site/src/util/workspace.ts                    |  4 ++
 5 files changed, 88 insertions(+), 8 deletions(-)
 create mode 100644 site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.stories.tsx

diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index 1113f2f4599e2..e607017341687 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { FC } from "react"
+import { useNavigate } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
-import { getWorkspaceStatus, succeededToStatus } from "../../util/workspace"
 import { BuildsTable } from "../BuildsTable/BuildsTable"
 import { Margins } from "../Margins/Margins"
 import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "../PageHeader/PageHeader"
@@ -46,7 +46,8 @@ export const Workspace: FC<WorkspaceProps> = ({
   builds,
 }) => {
   const styles = useStyles()
-  const isDeleted = getWorkspaceStatus(workspace.latest_build) === succeededToStatus["delete"]
+  const navigate = useNavigate()
+
   return (
     <Margins>
       <PageHeader
@@ -74,7 +75,7 @@ export const Workspace: FC<WorkspaceProps> = ({
             workspace={workspace}
           />
 
-          {isDeleted && <WorkspaceDeletedBanner />}
+          <WorkspaceDeletedBanner workspace={workspace} handleClick={() => navigate(`/workspaces/new`)} />
 
           <WorkspaceStats workspace={workspace} />
 
diff --git a/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.stories.tsx b/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.stories.tsx
new file mode 100644
index 0000000000000..a53d234579332
--- /dev/null
+++ b/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.stories.tsx
@@ -0,0 +1,28 @@
+import { action } from "@storybook/addon-actions"
+import { Story } from "@storybook/react"
+import * as Mocks from "../../testHelpers/entities"
+import { WorkspaceDeletedBanner, WorkspaceDeletedBannerProps } from "./WorkspaceDeletedBanner"
+
+export default {
+  title: "components/WorkspaceDeletedBanner",
+  component: WorkspaceDeletedBanner,
+}
+
+const Template: Story<WorkspaceDeletedBannerProps> = (args) => <WorkspaceDeletedBanner {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  handleClick: action("extend"),
+  workspace: {
+    ...Mocks.MockWorkspace,
+
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      job: {
+        ...Mocks.MockProvisionerJob,
+        status: "succeeded",
+      },
+      transition: "delete",
+    },
+  },
+}
diff --git a/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx b/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx
index 23abfe4cc86ea..310a18fac95f1 100644
--- a/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx
+++ b/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx
@@ -3,22 +3,31 @@ import { makeStyles } from "@material-ui/core/styles"
 import Alert from "@material-ui/lab/Alert"
 import AlertTitle from "@material-ui/lab/AlertTitle"
 import { FC } from "react"
-import { useNavigate } from "react-router-dom"
+import * as TypesGen from "../../api/typesGenerated"
+import { isWorkspaceDeleted } from "../../util/workspace"
 
 const Language = {
   bannerTitle: "This workspace has been deleted and cannot be edited.",
   createWorkspaceCta: "Create new workspace",
 }
 
-export const WorkspaceDeletedBanner: FC = () => {
+export interface WorkspaceDeletedBannerProps {
+  workspace: TypesGen.Workspace
+  handleClick: () => void
+}
+
+export const WorkspaceDeletedBanner: FC<WorkspaceDeletedBannerProps> = ({ workspace, handleClick }) => {
   const styles = useStyles()
-  const navigate = useNavigate()
+
+  if (!isWorkspaceDeleted(workspace)) {
+    return null
+  }
 
   return (
     <Alert
       className={styles.root}
       action={
-        <Button color="inherit" onClick={() => navigate(`/workspaces/new`)} size="small">
+        <Button color="inherit" onClick={handleClick} size="small">
           {Language.createWorkspaceCta}
         </Button>
       }
diff --git a/site/src/util/workspace.test.ts b/site/src/util/workspace.test.ts
index 7c139b72d0ea1..a7789dfbf8285 100644
--- a/site/src/util/workspace.test.ts
+++ b/site/src/util/workspace.test.ts
@@ -1,7 +1,7 @@
 import dayjs from "dayjs"
 import * as TypesGen from "../api/typesGenerated"
 import * as Mocks from "../testHelpers/entities"
-import { defaultWorkspaceExtension, isWorkspaceOn, workspaceQueryToFilter } from "./workspace"
+import { defaultWorkspaceExtension, isWorkspaceDeleted, isWorkspaceOn, workspaceQueryToFilter } from "./workspace"
 
 describe("util > workspace", () => {
   describe("isWorkspaceOn", () => {
@@ -42,6 +42,44 @@ describe("util > workspace", () => {
     })
   })
 
+  describe("isWorkspaceDeleted", () => {
+    it.each<[TypesGen.WorkspaceTransition, TypesGen.ProvisionerJobStatus, boolean]>([
+      ["delete", "canceled", false],
+      ["delete", "canceling", false],
+      ["delete", "failed", false],
+      ["delete", "pending", false],
+      ["delete", "running", false],
+      ["delete", "succeeded", true],
+
+      ["stop", "canceled", false],
+      ["stop", "canceling", false],
+      ["stop", "failed", false],
+      ["stop", "pending", false],
+      ["stop", "running", false],
+      ["stop", "succeeded", false],
+
+      ["start", "canceled", false],
+      ["start", "canceling", false],
+      ["start", "failed", false],
+      ["start", "pending", false],
+      ["start", "running", false],
+      ["start", "succeeded", false],
+    ])(`transition=%p, status=%p, isWorkspaceDeleted=%p`, (transition, status, isDeleted) => {
+      const workspace: TypesGen.Workspace = {
+        ...Mocks.MockWorkspace,
+        latest_build: {
+          ...Mocks.MockWorkspaceBuild,
+          job: {
+            ...Mocks.MockProvisionerJob,
+            status,
+          },
+          transition,
+        },
+      }
+      expect(isWorkspaceDeleted(workspace)).toBe(isDeleted)
+    })
+  })
+
   describe("defaultWorkspaceExtension", () => {
     it.each<[string, TypesGen.PutExtendWorkspaceRequest]>([
       [
diff --git a/site/src/util/workspace.ts b/site/src/util/workspace.ts
index f4446e9ba9c59..a8ebade57ab28 100644
--- a/site/src/util/workspace.ts
+++ b/site/src/util/workspace.ts
@@ -249,6 +249,10 @@ export const isWorkspaceOn = (workspace: TypesGen.Workspace): boolean => {
   return transition === "start" && status === "succeeded"
 }
 
+export const isWorkspaceDeleted = (workspace: TypesGen.Workspace): boolean => {
+  return getWorkspaceStatus(workspace.latest_build) === succeededToStatus["delete"]
+}
+
 export const defaultWorkspaceExtension = (__startDate?: dayjs.Dayjs): TypesGen.PutExtendWorkspaceRequest => {
   const now = __startDate ? dayjs(__startDate) : dayjs()
   const fourHoursFromNow = now.add(4, "hours").utc()

From b4391e3863e669e4c91cd87fba502cb11241881b Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Thu, 9 Jun 2022 15:29:51 +0000
Subject: [PATCH 6/6] cleaning up unneeded xstate service

---
 site/src/util/workspace.ts                        | 2 +-
 site/src/xServices/workspace/workspaceXService.ts | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/site/src/util/workspace.ts b/site/src/util/workspace.ts
index a8ebade57ab28..94758aebd00d7 100644
--- a/site/src/util/workspace.ts
+++ b/site/src/util/workspace.ts
@@ -25,7 +25,7 @@ const inProgressToStatus: Record<WorkspaceBuildTransition, WorkspaceStatus> = {
   delete: "deleting",
 }
 
-export const succeededToStatus: Record<WorkspaceBuildTransition, WorkspaceStatus> = {
+const succeededToStatus: Record<WorkspaceBuildTransition, WorkspaceStatus> = {
   start: "started",
   stop: "stopped",
   delete: "deleted",
diff --git a/site/src/xServices/workspace/workspaceXService.ts b/site/src/xServices/workspace/workspaceXService.ts
index db47ad17d7a5a..c24c5b968c8de 100644
--- a/site/src/xServices/workspace/workspaceXService.ts
+++ b/site/src/xServices/workspace/workspaceXService.ts
@@ -58,9 +58,6 @@ export const workspaceMachine = createMachine(
         getWorkspace: {
           data: TypesGen.Workspace
         }
-        getDeletedWorkspace: {
-          data: TypesGen.Workspace
-        }
         getTemplate: {
           data: TypesGen.Template
         }

<!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/2208.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/2208.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/2208.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/2208.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>