chore: organize ws stats, schedule stories

Resolves: #1681 Summary: - Moves WorkspaceSchedule out of WorkspaceStats - Adds WorkspaceScheduleForm directory - Adds meaningful stories for WorkspaceStats Impact: Improves breadth of our chromatic visual regression tests since the examples for WorkspaceStats were non-representative of the component
coder · greyscaled · May 26, 2022 · May 26, 2022 · May 26, 2022 · May 26, 2022
commit 10305fab7a30e601f5ea662ca6eb7fc44ca7e3cd
diff --git a/site/src/components/WorkspaceSchedule/WorkspaceSchedule.stories.tsx b/site/src/components/WorkspaceSchedule/WorkspaceSchedule.stories.tsx
@@ -1,6 +1,7 @@
 import { Story } from "@storybook/react"
+import dayjs from "dayjs"
 import React from "react"
-import { MockWorkspace } from "../../testHelpers/renderHelpers"
+import * as Mocks from "../../testHelpers/entities"
 import { WorkspaceSchedule, WorkspaceScheduleProps } from "./WorkspaceSchedule"
 
 export default {
@@ -11,7 +12,66 @@ export default {
 
 const Template: Story<WorkspaceScheduleProps> = (args) => <WorkspaceSchedule {...args} />
 
-export const Example = Template.bind({})
-Example.args = {
-  workspace: MockWorkspace,
+export const NoTTL = Template.bind({})
+NoTTL.args = {
+  workspace: {
+    ...Mocks.MockWorkspace,
+    ttl: undefined,
+  },
+}
+
+export const ShutdownSoon = Template.bind({})
+ShutdownSoon.args = {
+  workspace: {
+    ...Mocks.MockWorkspace,
+
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      transition: "start",
+      updated_at: dayjs().subtract(1, "hour").toString(), // 1 hour ago
+    },
+    ttl: 2 * 60 * 60 * 1000 * 1_000_000, // 2 hours
+  },
+}
+
+export const ShutdownLong = Template.bind({})
+ShutdownLong.args = {
+  workspace: {
+    ...Mocks.MockWorkspace,
+
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      transition: "start",
+      updated_at: dayjs().toString(),
+    },
+    ttl: 7 * 24 * 60 * 60 * 1000 * 1_000_000, // 7 days
+  },
+}
+
+export const WorkspaceOffShort = Template.bind({})
+WorkspaceOffShort.args = {
+  workspace: {
+    ...Mocks.MockWorkspace,
+
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      transition: "stop",
+      updated_at: dayjs().subtract(2, "days").toString(),
+    },
+    ttl: 2 * 60 * 60 * 1000 * 1_000_000, // 2 hours
+  },
+}
+
+export const WorkspaceOffLong = Template.bind({})
+WorkspaceOffLong.args = {
+  workspace: {
+    ...Mocks.MockWorkspace,
+
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      transition: "stop",
+      updated_at: dayjs().subtract(2, "days").toString(),
+    },
+    ttl: 2 * 365 * 24 * 60 * 60 * 1000 * 1_000_000, // 2 years
+  },
 }
diff --git a/...ceStats/WorkspaceScheduleForm.stories.tsx → ...uleForm/WorkspaceScheduleForm.stories.tsx b/...ceStats/WorkspaceScheduleForm.stories.tsx → ...uleForm/WorkspaceScheduleForm.stories.tsx
diff --git a/...kspaceStats/WorkspaceScheduleForm.test.ts → ...cheduleForm/WorkspaceScheduleForm.test.ts b/...kspaceStats/WorkspaceScheduleForm.test.ts → ...cheduleForm/WorkspaceScheduleForm.test.ts
diff --git a/.../WorkspaceStats/WorkspaceScheduleForm.tsx → ...aceScheduleForm/WorkspaceScheduleForm.tsx b/.../WorkspaceStats/WorkspaceScheduleForm.tsx → ...aceScheduleForm/WorkspaceScheduleForm.tsx
diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.stories.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.stories.tsx
@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import dayjs from "dayjs"
 import React from "react"
 import * as Mocks from "../../testHelpers/renderHelpers"
 import { WorkspaceStats, WorkspaceStatsProps } from "../WorkspaceStats/WorkspaceStats"
@@ -11,66 +10,36 @@ export default {
 
 const Template: Story<WorkspaceStatsProps> = (args) => <WorkspaceStats {...args} />
 
-export const NoTTL = Template.bind({})
-NoTTL.args = {
+export const Start = Template.bind({})
+Start.args = {
   workspace: {
     ...Mocks.MockWorkspace,
-    ttl: undefined,
-  },
-}
-
-export const ShutdownSoon = Template.bind({})
-ShutdownSoon.args = {
-  workspace: {
-    ...Mocks.MockWorkspace,
-
-    latest_build: {
-      ...Mocks.MockWorkspaceBuild,
-      transition: "start",
-      updated_at: dayjs().subtract(1, "hour").toString(), // 1 hour ago
-    },
-    ttl: 2 * 60 * 60 * 1000 * 1_000_000, // 2 hours
-  },
-}
-
-export const ShutdownLong = Template.bind({})
-ShutdownLong.args = {
-  workspace: {
-    ...Mocks.MockWorkspace,
-
     latest_build: {
       ...Mocks.MockWorkspaceBuild,
       transition: "start",
-      updated_at: dayjs().toString(),
     },
-    ttl: 7 * 24 * 60 * 60 * 1000 * 1_000_000, // 7 days
   },
 }
 
-export const WorkspaceOffShort = Template.bind({})
-WorkspaceOffShort.args = {
+export const Stop = Template.bind({})
+Stop.args = {
   workspace: {
     ...Mocks.MockWorkspace,
-
     latest_build: {
       ...Mocks.MockWorkspaceBuild,
       transition: "stop",
-      updated_at: dayjs().subtract(2, "days").toString(),
     },
-    ttl: 2 * 60 * 60 * 1000 * 1_000_000, // 2 hours
   },
 }
 
-export const WorkspaceOffLong = Template.bind({})
-WorkspaceOffLong.args = {
+export const Outdated = Template.bind({})
+Outdated.args = {
   workspace: {
     ...Mocks.MockWorkspace,
-
     latest_build: {
       ...Mocks.MockWorkspaceBuild,
-      transition: "stop",
-      updated_at: dayjs().subtract(2, "days").toString(),
+      transition: "start",
     },
-    ttl: 2 * 365 * 24 * 60 * 60 * 1000 * 1_000_000, // 2 years
+    outdated: true,
   },
 }
diff --git a/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
@@ -10,7 +10,7 @@ import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
 import {
   WorkspaceScheduleForm,
   WorkspaceScheduleFormValues,
-} from "../../components/WorkspaceStats/WorkspaceScheduleForm"
+} from "../../components/WorkspaceScheduleForm/WorkspaceScheduleForm"
 import { firstOrItem } from "../../util/array"
 import { dowToWeeklyFlag, extractTimezone, stripTimezone } from "../../util/schedule"
 import { workspaceSchedule } from "../../xServices/workspaceSchedule/workspaceScheduleXService"