coder · Kira-Pilot · May 18, 2023 · May 17, 2023 · May 17, 2023 · May 17, 2023
diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx
@@ -2,12 +2,12 @@ import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
 import { WatchAgentMetadataContext } from "components/Resources/AgentMetadata"
 import { ProvisionerJobLog } from "api/typesGenerated"
-import * as Mocks from "../../testHelpers/entities"
+import * as Mocks from "testHelpers/entities"
 import { Workspace, WorkspaceErrors, WorkspaceProps } from "./Workspace"
 import { withReactContext } from "storybook-react-context"
 import EventSource from "eventsourcemock"
 import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext"
-import { MockProxyLatencies } from "../../testHelpers/entities"
+import { DashboardProviderContext } from "components/Dashboard/DashboardProvider"
 
 export default {
   title: "components/Workspace",
@@ -24,21 +24,37 @@ export default {
   ],
 }
 
+const MockedAppearance = {
+  config: Mocks.MockAppearance,
+  preview: false,
+  setPreview: () => null,
+  save: () => null,
+}
+
 const Template: Story<WorkspaceProps> = (args) => (
-  <ProxyContext.Provider
+  <DashboardProviderContext.Provider
     value={{
-      proxyLatencies: MockProxyLatencies,
-      proxy: getPreferredProxy([], undefined),
-      proxies: [],
-      isLoading: false,
-      isFetched: true,
-      setProxy: () => {
-        return
-      },
+      buildInfo: Mocks.MockBuildInfo,
+      entitlements: Mocks.MockEntitlementsWithScheduling,
+      experiments: Mocks.MockExperiments,
+      appearance: MockedAppearance,
     }}
   >
-    <Workspace {...args} />
-  </ProxyContext.Provider>
+    <ProxyContext.Provider
+      value={{
+        proxyLatencies: Mocks.MockProxyLatencies,
+        proxy: getPreferredProxy([], undefined),
+        proxies: [],
+        isLoading: false,
+        isFetched: true,
+        setProxy: () => {
+          return
+        },
+      }}
+    >
+      <Workspace {...args} />
+    </ProxyContext.Provider>
+  </DashboardProviderContext.Provider>
 )
 
 export const Running = Template.bind({})

diff --git a/site/src/components/WorkspaceDeletion/ImpendingDeletionBadge.tsx b/site/src/components/WorkspaceDeletion/ImpendingDeletionBadge.tsx
@@ -0,0 +1,31 @@
+import { Workspace } from "api/typesGenerated"
+import { displayImpendingDeletion } from "./utils"
+import { useDashboard } from "components/Dashboard/DashboardProvider"
+import { Pill } from "components/Pill/Pill"
+import ErrorIcon from "@mui/icons-material/ErrorOutline"
+
+export const ImpendingDeletionBadge = ({
+  workspace,
+}: {
+  workspace: Workspace
+}): JSX.Element | null => {
+  const { entitlements, experiments } = useDashboard()
+  const allowAdvancedScheduling =
+    entitlements.features["advanced_template_scheduling"].enabled
+  // This check can be removed when https://github.com/coder/coder/milestone/19
+  // is merged up
+  const allowWorkspaceActions = experiments.includes("workspace_actions")
+  // return null
+
+  if (
+    !displayImpendingDeletion(
+      workspace,
+      allowAdvancedScheduling,
+      allowWorkspaceActions,
+    )
+  ) {
+    return null
+  }
+
+  return <Pill icon={<ErrorIcon />} text="Impending deletion" type="error" />
+}
diff --git a/site/src/components/WorkspaceDeletion/ImpendingDeletionBanner.tsx b/site/src/components/WorkspaceDeletion/ImpendingDeletionBanner.tsx
@@ -0,0 +1,40 @@
+import { Workspace } from "api/typesGenerated"
+import { displayImpendingDeletion } from "./utils"
+import { useDashboard } from "components/Dashboard/DashboardProvider"
+import { Maybe } from "components/Conditionals/Maybe"
+import { Alert } from "components/Alert/Alert"
+
+export const ImpendingDeletionBanner = ({
+  workspace,
+  onDismiss,
+  displayImpendingDeletionBanner,
+}: {
+  workspace?: Workspace
+  onDismiss: () => void
+  displayImpendingDeletionBanner: boolean
+}): JSX.Element | null => {
+  const { entitlements, experiments } = useDashboard()
+  const allowAdvancedScheduling =
+    entitlements.features["advanced_template_scheduling"].enabled
+  // This check can be removed when https://github.com/coder/coder/milestone/19
+  // is merged up
+  const allowWorkspaceActions = experiments.includes("workspace_actions")
+
+  return (
+    <Maybe
+      condition={Boolean(
+        workspace &&
+          displayImpendingDeletion(
+            workspace,
+            allowAdvancedScheduling,
+            allowWorkspaceActions,
+          ) &&
+          displayImpendingDeletionBanner,
+      )}
+    >
+      <Alert severity="info" onDismiss={onDismiss} dismissible>
+        You have workspaces that will be deleted soon.
+      </Alert>
+    </Maybe>
+  )
+}
diff --git a/site/src/components/WorkspaceDeletion/ImpendingDeletionStat.tsx b/site/src/components/WorkspaceDeletion/ImpendingDeletionStat.tsx
@@ -0,0 +1,59 @@
+import { Maybe } from "components/Conditionals/Maybe"
+import { StatsItem } from "components/Stats/Stats"
+import Link from "@mui/material/Link"
+import { Link as RouterLink } from "react-router-dom"
+import styled from "@emotion/styled"
+import { Workspace } from "api/typesGenerated"
+import { displayImpendingDeletion } from "./utils"
+import { useDashboard } from "components/Dashboard/DashboardProvider"
+
+export const ImpendingDeletionStat = ({
+  workspace,
+}: {
+  workspace: Workspace
+}): JSX.Element => {
+  const { entitlements, experiments } = useDashboard()
+  const allowAdvancedScheduling =
+    entitlements.features["advanced_template_scheduling"].enabled
+  // This check can be removed when https://github.com/coder/coder/milestone/19
+  // is merged up
+  const allowWorkspaceActions = experiments.includes("workspace_actions")
+
+  return (
+    <Maybe
+      condition={displayImpendingDeletion(
+        workspace,
+        allowAdvancedScheduling,
+        allowWorkspaceActions,
+      )}
+    >
+      <StyledStatsItem
+        label="Deletion on"
+        className="containerClass"
+        value={
+          <Link
+            component={RouterLink}
+            to={`/templates/${workspace.template_name}/settings/schedule`}
+            title="Schedule settings"
+          >
+            {/* We check for string existence in the conditional */}
+            {new Date(workspace.deleting_at as string).toLocaleString()}
+          </Link>
+        }
+      />
+    </Maybe>
+  )
+}
+
+const StyledStatsItem = styled(StatsItem)(() => ({
+  "&.containerClass": {
+    flexDirection: "column",
+    gap: 0,
+    padding: 0,
+
+    "& > span:first-of-type": {
+      fontSize: 12,
+      fontWeight: 500,
+    },
+  },
+}))
diff --git a/site/src/components/WorkspaceDeletion/ImpendingDeletionText.tsx b/site/src/components/WorkspaceDeletion/ImpendingDeletionText.tsx
@@ -0,0 +1,34 @@
+import { Workspace } from "api/typesGenerated"
+import { displayImpendingDeletion } from "./utils"
+import { useDashboard } from "components/Dashboard/DashboardProvider"
+import styled from "@emotion/styled"
+import { Theme as MaterialUITheme } from "@mui/material/styles"
+
+export const ImpendingDeletionText = ({
+  workspace,
+}: {
+  workspace: Workspace
+}): JSX.Element | null => {
+  const { entitlements, experiments } = useDashboard()
+  const allowAdvancedScheduling =
+    entitlements.features["advanced_template_scheduling"].enabled
+  // This check can be removed when https://github.com/coder/coder/milestone/19
+  // is merged up
+  const allowWorkspaceActions = experiments.includes("workspace_actions")
+
+  if (
+    !displayImpendingDeletion(
+      workspace,
+      allowAdvancedScheduling,
+      allowWorkspaceActions,
+    )
+  ) {
+    return null
+  }
+  return <StyledSpan role="status">Impending deletion</StyledSpan>
+}
+
+const StyledSpan = styled.span<{ theme?: MaterialUITheme }>`
+  color: ${(props) => props.theme.palette.warning.light};
+  font-weight: 600;
+`
diff --git a/site/src/components/WorkspaceDeletion/index.ts b/site/src/components/WorkspaceDeletion/index.ts
@@ -0,0 +1,4 @@
+export * from "./ImpendingDeletionStat"
+export * from "./ImpendingDeletionBadge"
+export * from "./ImpendingDeletionText"
+export * from "./ImpendingDeletionBanner"
diff --git a/site/src/components/WorkspaceDeletion/utils.test.ts b/site/src/components/WorkspaceDeletion/utils.test.ts
@@ -0,0 +1,56 @@
+import * as TypesGen from "api/typesGenerated"
+import * as Mocks from "testHelpers/entities"
+import { displayImpendingDeletion } from "./utils"
+
+describe("displayImpendingDeletion", () => {
+  const today = new Date()
+  it.each<[string, boolean, boolean, boolean]>([
+    [
+      new Date(new Date().setDate(today.getDate() + 15)).toISOString(),
+      true,
+      true,
+      false,
+    ], // today + 15 days out
+    [
+      new Date(new Date().setDate(today.getDate() + 14)).toISOString(),
+      true,
+      true,
+      true,
+    ], // today + 14
+    [
+      new Date(new Date().setDate(today.getDate() + 13)).toISOString(),
+      true,
+      true,
+      true,
+    ], // today + 13
+    [
+      new Date(new Date().setDate(today.getDate() + 1)).toISOString(),
+      true,
+      true,
+      true,
+    ], // today + 1
+    [new Date().toISOString(), true, true, true], // today + 0
+    [new Date().toISOString(), false, true, false], // Advanced Scheduling off
+    [new Date().toISOString(), true, false, false], // Workspace Actions off
+  ])(
+    `deleting_at=%p, allowAdvancedScheduling=%p, AllowWorkspaceActions=%p, shouldDisplay=%p`,
+    (
+      deleting_at,
+      allowAdvancedScheduling,
+      allowWorkspaceActions,
+      shouldDisplay,
+    ) => {
+      const workspace: TypesGen.Workspace = {
+        ...Mocks.MockWorkspace,
+        deleting_at,
+      }
+      expect(
+        displayImpendingDeletion(
+          workspace,
+          allowAdvancedScheduling,
+          allowWorkspaceActions,
+        ),
+      ).toBe(shouldDisplay)
+    },
+  )
+})
diff --git a/site/src/components/WorkspaceDeletion/utils.ts b/site/src/components/WorkspaceDeletion/utils.ts
@@ -0,0 +1,33 @@
+import { Workspace } from "api/typesGenerated"
+
+// This const dictates how far out we alert the user that a workspace
+// has an impending deletion (due to template.InactivityTTL being set)
+const IMPENDING_DELETION_DISPLAY_THRESHOLD = 14 // 14 days
+
+/**
+ * Returns a boolean indicating if an impending deletion indicator should be
+ * displayed in the UI. Impending deletions are configured by setting the
+ * Template.InactivityTTL
+ * @param {TypesGen.Workspace} workspace
+ * @returns {boolean}
+ */
+export const displayImpendingDeletion = (
+  workspace: Workspace,
+  allowAdvancedScheduling: boolean,
+  allowWorkspaceActions: boolean,
+) => {
+  const today = new Date()
+  if (
+    !workspace.deleting_at ||
+    !allowAdvancedScheduling ||
+    !allowWorkspaceActions
+  ) {
+    return false
+  }
+  return (
+    new Date(workspace.deleting_at) <=
+    new Date(
+      today.setDate(today.getDate() + IMPENDING_DELETION_DISPLAY_THRESHOLD),
+    )
+  )
+}
diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.stories.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.stories.tsx
@@ -1,17 +1,40 @@
 import { Story } from "@storybook/react"
-import { MockWorkspace } from "testHelpers/entities"
+import {
+  MockWorkspace,
+  MockAppearance,
+  MockBuildInfo,
+  MockEntitlementsWithScheduling,
+  MockExperiments,
+} from "testHelpers/entities"
 import {
   WorkspaceStats,
   WorkspaceStatsProps,
 } from "../WorkspaceStats/WorkspaceStats"
+import { DashboardProviderContext } from "components/Dashboard/DashboardProvider"
 
 export default {
   title: "components/WorkspaceStats",
   component: WorkspaceStats,
 }
 
+const MockedAppearance = {
+  config: MockAppearance,
+  preview: false,
+  setPreview: () => null,
+  save: () => null,
+}
+
 const Template: Story<WorkspaceStatsProps> = (args) => (
-  <WorkspaceStats {...args} />
+  <DashboardProviderContext.Provider
+    value={{
+      buildInfo: MockBuildInfo,
+      entitlements: MockEntitlementsWithScheduling,
+      experiments: MockExperiments,
+      appearance: MockedAppearance,
+    }}
+  >
+    <WorkspaceStats {...args} />
+  </DashboardProviderContext.Provider>
 )
 
 export const Example = Template.bind({})

diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx
@@ -20,6 +20,7 @@ import Popover from "@mui/material/Popover"
 import TextField from "@mui/material/TextField"
 import Button from "@mui/material/Button"
 import { WorkspaceStatusText } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
+import { ImpendingDeletionStat } from "components/WorkspaceDeletion"
 
 const Language = {
   workspaceDetails: "Workspace Details",
@@ -74,6 +75,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
           label="Status"
           value={<WorkspaceStatusText workspace={workspace} />}
         />
+        <ImpendingDeletionStat workspace={workspace} />
         <StatsItem
           className={styles.statsItem}
           label={Language.templateLabel}