Refactor stories

coder · BrunoQuaresma · May 3, 2023 · May 2, 2023 · May 2, 2023 · May 2, 2023
commit 747a9a8633b97dd9bdc1c836191d604314558754
@@ -19,15 +19,17 @@ import {
   WorkspaceBuildParameter,
 } from "api/typesGenerated"
 
-export type FormValues = { rich_parameter_values: WorkspaceBuildParameter[] }
+export type WorkspaceParametersFormValues = {
+  rich_parameter_values: WorkspaceBuildParameter[]
+}
 
 export const WorkspaceParametersForm: FC<{
   isSubmitting: boolean
   templateVersionRichParameters: TemplateVersionParameter[]
   buildParameters: WorkspaceBuildParameter[]
   error: unknown
   onCancel: () => void
-  onSubmit: (values: FormValues) => void
+  onSubmit: (values: WorkspaceParametersFormValues) => void
 }> = ({
   onCancel,
   onSubmit,
@@ -43,7 +45,7 @@ export const WorkspaceParametersForm: FC<{
   const immutableParameters = templateVersionRichParameters.filter(
     (param) => param.mutable === false,
   )
-  const form = useFormik<FormValues>({
+  const form = useFormik<WorkspaceParametersFormValues>({
     onSubmit,
     initialValues: {
       rich_parameter_values: mutableParameters.map((parameter) => {
@@ -67,7 +69,10 @@ export const WorkspaceParametersForm: FC<{
       ),
     }),
   })
-  const getFieldHelpers = getFormHelpers<FormValues>(form, error)
+  const getFieldHelpers = getFormHelpers<WorkspaceParametersFormValues>(
+    form,
+    error,
+  )
 
   return (
     <HorizontalForm onSubmit={form.handleSubmit} data-testid="form">

@@ -0,0 +1,46 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import {
+  WorkspaceParametersPageView,
+  WorkspaceParametersPageViewProps,
+} from "./WorkspaceParametersPage"
+import { action } from "@storybook/addon-actions"
+import {
+  MockWorkspaceBuildParameter1,
+  MockWorkspaceBuildParameter2,
+  MockTemplateVersionParameter1,
+  MockTemplateVersionParameter2,
+  MockTemplateVersionParameter3,
+  MockWorkspaceBuildParameter3,
+} from "testHelpers/entities"
+
+export default {
+  title: "pages/WorkspaceParametersPageView",
+  component: WorkspaceParametersPageView,
+  args: {
+    submitError: undefined,
+    isSubmitting: false,
+    onCancel: action("cancel"),
+    data: {
+      buildParameters: [
+        MockWorkspaceBuildParameter1,
+        MockWorkspaceBuildParameter2,
+        MockWorkspaceBuildParameter3,
+      ],
+      templateVersionRichParameters: [
+        MockTemplateVersionParameter1,
+        MockTemplateVersionParameter2,
+        {
+          ...MockTemplateVersionParameter3,
+          mutable: false,
+        },
+      ],
+    },
+  },
+} as ComponentMeta<typeof WorkspaceParametersPageView>
+
+const Template: Story<WorkspaceParametersPageViewProps> = (args) => (
+  <WorkspaceParametersPageView {...args} />
+)
+
+export const Example = Template.bind({})
+Example.args = {}
@@ -9,11 +9,15 @@ import { pageTitle } from "utils/page"
 import { useWorkspaceSettingsContext } from "../WorkspaceSettingsLayout"
 import { useMutation, useQuery } from "@tanstack/react-query"
 import { Loader } from "components/Loader/Loader"
-import { FormValues, WorkspaceParametersForm } from "./WorkspaceParametersForm"
+import {
+  WorkspaceParametersFormValues,
+  WorkspaceParametersForm,
+} from "./WorkspaceParametersForm"
 import { useNavigate } from "react-router-dom"
 import { makeStyles } from "@material-ui/core/styles"
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"
 import { displaySuccess } from "components/GlobalSnackbar/utils"
+import { FC } from "react"
 
 const getWorkspaceParameters = async (workspace: Workspace) => {
   const latestBuild = workspace.latest_build
@@ -22,7 +26,6 @@ const getWorkspaceParameters = async (workspace: Workspace) => {
     getWorkspaceBuildParameters(latestBuild.id),
   ])
   return {
-    workspace,
     templateVersionRichParameters,
     buildParameters,
   }
@@ -35,9 +38,8 @@ const WorkspaceParametersPage = () => {
     queryFn: () => getWorkspaceParameters(workspace),
   })
   const navigate = useNavigate()
-  const styles = useStyles()
   const mutation = useMutation({
-    mutationFn: (formValues: FormValues) =>
+    mutationFn: (formValues: WorkspaceParametersFormValues) =>
       postWorkspaceBuild(workspace.id, {
         transition: "start",
         rich_parameter_values: formValues.rich_parameter_values,
@@ -56,22 +58,46 @@ const WorkspaceParametersPage = () => {
         <title>{pageTitle([workspace.name, "Parameters"])}</title>
       </Helmet>
 
+      <WorkspaceParametersPageView
+        data={query.data}
+        submitError={mutation.error}
+        isSubmitting={mutation.isLoading}
+        onSubmit={mutation.mutate}
+        onCancel={() => {
+          navigate("../..")
+        }}
+      />
+    </>
+  )
+}
+
+export type WorkspaceParametersPageViewProps = {
+  data: Awaited<ReturnType<typeof getWorkspaceParameters>> | undefined
+  submitError: unknown
+  isSubmitting: boolean
+  onSubmit: (formValues: WorkspaceParametersFormValues) => void
+  onCancel: () => void
+}
+
+export const WorkspaceParametersPageView: FC<
+  WorkspaceParametersPageViewProps
+> = ({ data, submitError, isSubmitting, onSubmit, onCancel }) => {
+  const styles = useStyles()
+
+  return (
+    <>
       <PageHeader className={styles.pageHeader}>
         <PageHeaderTitle>Workspace parameters</PageHeaderTitle>
       </PageHeader>
 
-      {query.data ? (
+      {data ? (
         <WorkspaceParametersForm
-          buildParameters={query.data.buildParameters}
-          templateVersionRichParameters={
-            query.data.templateVersionRichParameters
-          }
-          error={mutation.error}
-          isSubmitting={mutation.isLoading}
-          onSubmit={mutation.mutate}
-          onCancel={() => {
-            navigate("../..")
-          }}
+          buildParameters={data.buildParameters}
+          templateVersionRichParameters={data.templateVersionRichParameters}
+          error={submitError}
+          isSubmitting={isSubmitting}
+          onSubmit={onSubmit}
+          onCancel={onCancel}
         />
       ) : (
         <Loader />

@@ -1,35 +1,19 @@
 import { ComponentMeta, Story } from "@storybook/react"
-import {
-  MockTemplateVersionParameter1,
-  MockTemplateVersionParameter2,
-  MockWorkspace,
-  MockWorkspaceBuildParameter1,
-  MockWorkspaceBuildParameter2,
-} from "testHelpers/entities"
+import { MockWorkspace } from "testHelpers/entities"
 import {
   WorkspaceSettingsPageView,
   WorkspaceSettingsPageViewProps,
 } from "./WorkspaceSettingsPageView"
+import { action } from "@storybook/addon-actions"
 
 export default {
   title: "pages/WorkspaceSettingsPageView",
   component: WorkspaceSettingsPageView,
   args: {
-    formError: undefined,
-    loadingError: undefined,
-    isLoading: false,
+    error: undefined,
     isSubmitting: false,
-    settings: {
-      workspace: MockWorkspace,
-      buildParameters: [
-        MockWorkspaceBuildParameter1,
-        MockWorkspaceBuildParameter2,
-      ],
-      templateVersionRichParameters: [
-        MockTemplateVersionParameter1,
-        MockTemplateVersionParameter2,
-      ],
-    },
+    workspace: MockWorkspace,
+    onCancel: action("cancel"),
   },
 } as ComponentMeta<typeof WorkspaceSettingsPageView>
 

@@ -1532,6 +1532,11 @@ export const MockWorkspaceBuildParameter2: TypesGen.WorkspaceBuildParameter = {
   value: "3",
 }
 
+export const MockWorkspaceBuildParameter3: TypesGen.WorkspaceBuildParameter = {
+  name: MockTemplateVersionParameter3.name,
+  value: "my-database",
+}
+
 export const MockWorkspaceBuildParameter5: TypesGen.WorkspaceBuildParameter = {
   name: MockTemplateVersionParameter5.name,
   value: "5",