test: Add storybook

BrunoQuaresma · BrunoQuaresma · commit b383a0f8b63a · 2022-07-01T13:21:00.000Z
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx
@@ -0,0 +1,117 @@
+import { Story } from "@storybook/react"
+import dayjs from "dayjs"
+import utc from "dayjs/plugin/utc"
+import * as Mocks from "../../testHelpers/entities"
+import { WorkspaceScheduleButton, WorkspaceScheduleButtonProps } from "./WorkspaceScheduleButton"
+
+dayjs.extend(utc)
+
+// REMARK: There's a known problem with storybook and using date libraries that
+//         call string.toLowerCase
+// SEE: https:github.com/storybookjs/storybook/issues/12208#issuecomment-697044557
+const ONE = 1
+const SEVEN = 7
+const THIRTY = 30
+
+export default {
+  title: "components/WorkspaceScheduleButton",
+  component: WorkspaceScheduleButton,
+}
+
+const Template: Story<WorkspaceScheduleButtonProps> = (args) => (
+  <WorkspaceScheduleButton {...args} />
+)
+
+export const NoScheduleNoTTL = Template.bind({})
+NoScheduleNoTTL.args = {
+  workspace: {
+    ...Mocks.MockWorkspace,
+
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      transition: "stop",
+    },
+    autostart_schedule: undefined,
+    ttl_ms: undefined,
+  },
+}
+
+export const NoTTL = Template.bind({})
+NoTTL.args = {
+  workspace: {
+    ...Mocks.MockWorkspace,
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      // a mannual shutdown has a deadline of '"0001-01-01T00:00:00Z"'
+      // SEE: #1834
+      deadline: "0001-01-01T00:00:00Z",
+    },
+    ttl_ms: undefined,
+  },
+}
+
+export const ShutdownRealSoon = Template.bind({})
+ShutdownRealSoon.args = {
+  workspace: {
+    ...Mocks.MockWorkspace,
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      deadline: dayjs().add(THIRTY, "minute").utc().format(),
+      transition: "start",
+    },
+    ttl_ms: 2 * 60 * 60 * 1000, // 2 hours
+  },
+}
+
+export const ShutdownSoon = Template.bind({})
+ShutdownSoon.args = {
+  workspace: {
+    ...Mocks.MockWorkspace,
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      deadline: dayjs().add(ONE, "hour").utc().format(),
+      transition: "start",
+    },
+    ttl_ms: 2 * 60 * 60 * 1000, // 2 hours
+  },
+}
+
+export const ShutdownLong = Template.bind({})
+ShutdownLong.args = {
+  workspace: {
+    ...Mocks.MockWorkspace,
+
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      deadline: dayjs().add(SEVEN, "days").utc().format(),
+      transition: "start",
+    },
+    ttl_ms: 7 * 24 * 60 * 60 * 1000, // 7 days
+  },
+}
+
+export const WorkspaceOffShort = Template.bind({})
+WorkspaceOffShort.args = {
+  workspace: {
+    ...Mocks.MockWorkspace,
+
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      transition: "stop",
+    },
+    ttl_ms: 2 * 60 * 60 * 1000, // 2 hours
+  },
+}
+
+export const WorkspaceOffLong = Template.bind({})
+WorkspaceOffLong.args = {
+  workspace: {
+    ...Mocks.MockWorkspace,
+
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      transition: "stop",
+    },
+    ttl_ms: 2 * 365 * 24 * 60 * 60 * 1000, // 2 years
+  },
+}
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
@@ -129,14 +129,14 @@ const WorkspaceScheduleLabel: React.FC<{ workspace: Workspace }> = ({ workspace
   )
 }
 
-interface WorkspaceScheduleProps {
+export interface WorkspaceScheduleButtonProps {
   workspace: Workspace
   onDeadlinePlus: () => void
   onDeadlineMinus: () => void
   now?: dayjs.Dayjs
 }
 
-export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleProps> = ({
+export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = ({
   workspace,
   onDeadlinePlus,
   onDeadlineMinus,
@@ -227,14 +227,16 @@ const useStyles = makeStyles((theme) => ({
     alignItems: "center",
     padding: "0 8px 0 16px",
     color: theme.palette.text.secondary,
+    // It is from the button props
+    minHeight: 42,
   },
 
   labelText: {
     marginRight: theme.spacing(2),
   },
 
   labelStrong: {
-    marginRight: theme.spacing(0.25),
+    marginRight: theme.spacing(0.5),
   },
 
   iconButton: {
