fix: Storybook error on complex args (#2424)

BrunoQuaresma · web-flow · commit 9fdee5d3916c · 2022-06-17T09:19:41.000-03:00
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
@@ -1,56 +1,68 @@
 import { ComponentMeta, Story } from "@storybook/react"
 import { spawn } from "xstate"
-import { ProvisionerJobStatus, Workspace, WorkspaceTransition } from "../../api/typesGenerated"
+import { ProvisionerJobStatus, WorkspaceTransition } from "../../api/typesGenerated"
 import { MockWorkspace } from "../../testHelpers/entities"
 import { workspaceFilterQuery } from "../../util/workspace"
-import { workspaceItemMachine } from "../../xServices/workspaces/workspacesXService"
+import { workspaceItemMachine, WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService"
 import { WorkspacesPageView, WorkspacesPageViewProps } from "./WorkspacesPageView"
 
-export default {
-  title: "pages/WorkspacesPageView",
-  component: WorkspacesPageView,
-} as ComponentMeta<typeof WorkspacesPageView>
-
-const Template: Story<WorkspacesPageViewProps> = (args) => <WorkspacesPageView {...args} />
-
-const createWorkspaceWithStatus = (
+const createWorkspaceItemRef = (
   status: ProvisionerJobStatus,
   transition: WorkspaceTransition = "start",
   outdated = false,
-): Workspace => {
-  return {
-    ...MockWorkspace,
-    outdated,
-    latest_build: {
-      ...MockWorkspace.latest_build,
-      transition,
-      job: {
-        ...MockWorkspace.latest_build.job,
-        status: status,
+): WorkspaceItemMachineRef => {
+  return spawn(
+    workspaceItemMachine.withContext({
+      data: {
+        ...MockWorkspace,
+        outdated,
+        latest_build: {
+          ...MockWorkspace.latest_build,
+          transition,
+          job: {
+            ...MockWorkspace.latest_build.job,
+            status: status,
+          },
+        },
       },
-    },
-  }
+    }),
+  )
 }
 
 // This is type restricted to prevent future statuses from slipping
 // through the cracks unchecked!
-const workspaces: { [key in ProvisionerJobStatus]: Workspace } = {
-  canceled: createWorkspaceWithStatus("canceled"),
-  canceling: createWorkspaceWithStatus("canceling"),
-  failed: createWorkspaceWithStatus("failed"),
-  pending: createWorkspaceWithStatus("pending"),
-  running: createWorkspaceWithStatus("running"),
-  succeeded: createWorkspaceWithStatus("succeeded"),
+const workspaces: { [key in ProvisionerJobStatus]: WorkspaceItemMachineRef } = {
+  canceled: createWorkspaceItemRef("canceled"),
+  canceling: createWorkspaceItemRef("canceling"),
+  failed: createWorkspaceItemRef("failed"),
+  pending: createWorkspaceItemRef("pending"),
+  running: createWorkspaceItemRef("running"),
+  succeeded: createWorkspaceItemRef("succeeded"),
+}
+
+const additionalWorkspaces: Record<string, WorkspaceItemMachineRef> = {
+  runningAndStop: createWorkspaceItemRef("running", "stop"),
+  succeededAndStop: createWorkspaceItemRef("succeeded", "stop"),
+  runningAndDelete: createWorkspaceItemRef("running", "delete"),
+  outdated: createWorkspaceItemRef("running", "delete", true),
 }
 
+export default {
+  title: "pages/WorkspacesPageView",
+  component: WorkspacesPageView,
+  argTypes: {
+    workspaceRefs: {
+      options: [...Object.keys(workspaces), ...Object.keys(additionalWorkspaces)],
+      mapping: { ...workspaces, ...additionalWorkspaces },
+    },
+  },
+} as ComponentMeta<typeof WorkspacesPageView>
+
+const Template: Story<WorkspacesPageViewProps> = (args) => <WorkspacesPageView {...args} />
+
 export const AllStates = Template.bind({})
 AllStates.args = {
-  workspaceRefs: [
-    ...Object.values(workspaces),
-    createWorkspaceWithStatus("running", "stop"),
-    createWorkspaceWithStatus("succeeded", "stop"),
-    createWorkspaceWithStatus("running", "delete"),
-  ].map((data) => spawn(workspaceItemMachine.withContext({ data }))),
+  workspaceRefs: [...Object.values(workspaces), ...Object.values(additionalWorkspaces)],
 }
 
 export const OwnerHasNoWorkspaces = Template.bind({})
