Jun 9, 2022 · Jun 7, 2022 · Jun 7, 2022 · Jun 8, 2022 · Jun 9, 2022 · Jun 9, 2022
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
 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"
  builds,
 }) => {
  const styles = useStyles()
  const isDeleted = getWorkspaceStatus(workspace.latest_build) === succeededToStatus["delete"]
  const navigate = useNavigate()

  return (
    <Margins>
      <PageHeader
            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
 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
 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
 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", () => {
    })
  })

  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
  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()
Original file line number	Diff line number	Diff line change
		@@ -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"
Expand DownExpand Up		@@ -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
Expand DownExpand Up		@@ -74,7 +75,7 @@ export const Workspace: FC<WorkspaceProps> = ({
		workspace={workspace}
		/>

		{isDeleted && <WorkspaceDeletedBanner />}
		<WorkspaceDeletedBanner workspace={workspace} handleClick={() => navigate(`/workspaces/new`)} />

		<WorkspaceStats workspace={workspace} />

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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",
		},
		},
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>
		}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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", () => {
Expand DownExpand Up		@@ -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]>([
		[
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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()
Expand Down