improve storybook

BrunoQuaresma · BrunoQuaresma · commit 075d96eb1be0 · 2023-08-17T17:36:43.000Z
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.stories.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.stories.tsx
@@ -1,31 +1,48 @@
-import { ComponentMeta, Story } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react"
 import {
   MockFailedWorkspaceBuild,
   MockWorkspaceBuild,
   MockWorkspaceBuildLogs,
 } from "../../testHelpers/entities"
-import {
-  WorkspaceBuildPageView,
-  WorkspaceBuildPageViewProps,
-} from "./WorkspaceBuildPageView"
+import { WorkspaceBuildPageView } from "./WorkspaceBuildPageView"
+
+const defaultBuilds = [...Array(15).keys()].map((i) => ({
+  ...MockWorkspaceBuild,
+  id: `${i}`,
+  build_number: i,
+}))
 
-export default {
-  title: "pages/WorkspaceBuildPageView",
+const meta: Meta<typeof WorkspaceBuildPageView> = {
+  title: "components/WorkspaceBuildPageView",
   component: WorkspaceBuildPageView,
-} as ComponentMeta<typeof WorkspaceBuildPageView>
+  args: {
+    build: MockWorkspaceBuild,
+    logs: MockWorkspaceBuildLogs,
+    builds: defaultBuilds,
+    activeBuildNumber: defaultBuilds[0].build_number,
+  },
+}
 
-const Template: Story<WorkspaceBuildPageViewProps> = (args) => (
-  <WorkspaceBuildPageView {...args} />
-)
+export default meta
+type Story = StoryObj<typeof WorkspaceBuildPageView>
+
+export const Loaded: Story = {}
+
+export const LoadingBuildLogs: Story = {
+  args: {
+    builds: undefined,
+  },
+}
 
-export const Example = Template.bind({})
-Example.args = {
-  build: MockWorkspaceBuild,
-  logs: MockWorkspaceBuildLogs,
+const failedBuild = {
+  ...MockFailedWorkspaceBuild("delete"),
+  build_number: new Date().getDate(),
 }
 
-export const FailedDelete = Template.bind({})
-FailedDelete.args = {
-  build: MockFailedWorkspaceBuild("delete"),
-  logs: MockWorkspaceBuildLogs,
+export const FailedDelete: Story = {
+  args: {
+    build: failedBuild,
+    builds: [failedBuild, ...defaultBuilds],
+    activeBuildNumber: failedBuild.build_number,
+  },
 }
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
@@ -4,8 +4,7 @@ import { ProvisionerJobLog, WorkspaceBuild } from "../../api/typesGenerated"
 import { Loader } from "../../components/Loader/Loader"
 import { Stack } from "../../components/Stack/Stack"
 import { WorkspaceBuildLogs } from "../../components/WorkspaceBuildLogs/WorkspaceBuildLogs"
-import { WorkspaceBuildStateError } from "./WorkspaceBuildStateError"
-import { makeStyles, useTheme } from "@mui/styles"
+import { makeStyles } from "@mui/styles"
 import {
   FullWidthPageHeader,
   PageHeaderTitle,
@@ -26,6 +25,7 @@ import {
 } from "components/Sidebar/Sidebar"
 import { BuildIcon } from "components/BuildIcon/BuildIcon"
 import Skeleton from "@mui/material/Skeleton"
+import { Alert } from "components/Alert/Alert"
 
 const sortLogsByCreatedAt = (logs: ProvisionerJobLog[]) => {
   return [...logs].sort(
@@ -137,7 +137,33 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
 
         <Box sx={{ height: "100%", overflowY: "auto", width: "100%" }}>
           {build.transition === "delete" && build.job.status === "failed" && (
-            <WorkspaceBuildStateError build={build} />
+            <Alert
+              severity="error"
+              sx={{
+                borderRadius: 0,
+                border: 0,
+                background: (theme) => theme.palette.error.dark,
+                borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+              }}
+            >
+              <Box>
+                The workspace may have failed to delete due to a Terraform state
+                mismatch. A template admin may run{" "}
+                <Box
+                  component="code"
+                  display="inline-block"
+                  width="fit-content"
+                  fontWeight={600}
+                >
+                  `
+                  {`coder rm ${
+                    build.workspace_owner_name + "/" + build.workspace_name
+                  } --orphan`}
+                  `
+                </Box>{" "}
+                to delete the workspace skipping resource destruction.
+              </Box>
+            </Alert>
           )}
           {!logs && <Loader />}
           {logs && (
@@ -159,8 +185,6 @@ const BuildSidebarItem = ({
   build: WorkspaceBuild
   active: boolean
 }) => {
-  const theme = useTheme()
-
   return (
     <Link
       key={build.id}
@@ -173,7 +197,9 @@ const BuildSidebarItem = ({
             sx={{
               width: 16,
               height: 16,
-              color: getDisplayWorkspaceBuildStatus(theme, build).color,
+              color: (theme) =>
+                theme.palette[getDisplayWorkspaceBuildStatus(theme, build).type]
+                  .light,
             }}
           />
           <Box sx={{ overflow: "hidden" }}>
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildStateError.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildStateError.tsx
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -815,7 +815,7 @@ export const MockFailedWorkspaceBuild = (
   deadline: "2022-05-17T23:39:00.00Z",
   reason: "initiator",
   resources: [],
-  status: "running",
+  status: "failed",
   daily_cost: 20,
 })
 
