Add mock error and use in storybook

coder · presleyp · Jul 28, 2022 · Jul 27, 2022 · Jul 27, 2022 · Jul 27, 2022
commit a1b8f9f9581e62d2e9d33b884447aba4b36567e8
diff --git a/site/src/api/errors.ts b/site/src/api/errors.ts
@@ -6,7 +6,7 @@ export const Language = {
   },
 }
 
-interface FieldError {
+export interface FieldError {
   field: string
   detail: string
 }

diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.stories.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.stories.tsx
@@ -1,9 +1,9 @@
-import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
 import dayjs from "dayjs"
 import advancedFormat from "dayjs/plugin/advancedFormat"
 import timezone from "dayjs/plugin/timezone"
 import utc from "dayjs/plugin/utc"
+import { makeMockApiError } from "testHelpers/entities"
 import {
   defaultWorkspaceSchedule,
   WorkspaceScheduleForm,
@@ -17,6 +17,14 @@ dayjs.extend(timezone)
 export default {
   title: "components/WorkspaceScheduleForm",
   component: WorkspaceScheduleForm,
+  argTypes: {
+    onCancel: {
+      action: "onCancel"
+    },
+    onSubmit: {
+      action: "onSubmit"
+    }
+  }
 }
 
 const Template: Story<WorkspaceScheduleFormProps> = (args) => <WorkspaceScheduleForm {...args} />
@@ -27,8 +35,6 @@ WorkspaceWillNotShutDown.args = {
     ...defaultWorkspaceSchedule(5),
     ttl: 0,
   },
-  onCancel: () => action("onCancel"),
-  onSubmit: () => action("onSubmit"),
 }
 
 export const WorkspaceWillShutdownInAnHour = Template.bind({})
@@ -37,8 +43,6 @@ WorkspaceWillShutdownInAnHour.args = {
     ...defaultWorkspaceSchedule(5),
     ttl: 1,
   },
-  onCancel: () => action("onCancel"),
-  onSubmit: () => action("onSubmit"),
 }
 
 export const WorkspaceWillShutdownInTwoHours = Template.bind({})
@@ -47,8 +51,6 @@ WorkspaceWillShutdownInTwoHours.args = {
     ...defaultWorkspaceSchedule(2),
     ttl: 2,
   },
-  onCancel: () => action("onCancel"),
-  onSubmit: () => action("onSubmit"),
 }
 
 export const WorkspaceWillShutdownInADay = Template.bind({})
@@ -57,8 +59,6 @@ WorkspaceWillShutdownInADay.args = {
     ...defaultWorkspaceSchedule(2),
     ttl: 24,
   },
-  onCancel: () => action("onCancel"),
-  onSubmit: () => action("onSubmit"),
 }
 
 export const WorkspaceWillShutdownInTwoDays = Template.bind({})
@@ -67,6 +67,13 @@ WorkspaceWillShutdownInTwoDays.args = {
     ...defaultWorkspaceSchedule(2),
     ttl: 48,
   },
-  onCancel: () => action("onCancel"),
-  onSubmit: () => action("onSubmit"),
+}
+
+export const WithError = Template.bind({})
+WithError.args = {
+  initialTouched: { ttl: true },
+  submitScheduleError: makeMockApiError({
+    message: "Something went wrong.",
+    validations: [{ field: "ttl_ms", detail: "Invalid time until shutdown." }]
+  })
 }
diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
@@ -14,7 +14,7 @@ import duration from "dayjs/plugin/duration"
 import relativeTime from "dayjs/plugin/relativeTime"
 import timezone from "dayjs/plugin/timezone"
 import utc from "dayjs/plugin/utc"
-import { useFormik } from "formik"
+import { FormikTouched, useFormik } from "formik"
 import { FC } from "react"
 import * as Yup from "yup"
 import { getFormHelpersWithError } from "../../util/formUtils"
@@ -59,6 +59,8 @@ export interface WorkspaceScheduleFormProps {
   isLoading: boolean
   onCancel: () => void
   onSubmit: (values: WorkspaceScheduleFormValues) => void
+  // for storybook
+  initialTouched?: FormikTouched<WorkspaceScheduleFormValues>
 }
 
 export interface WorkspaceScheduleFormValues {
@@ -183,13 +185,15 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
   isLoading,
   onCancel,
   onSubmit,
+  initialTouched
 }) => {
   const styles = useStyles()
 
   const form = useFormik<WorkspaceScheduleFormValues>({
     initialValues,
     onSubmit,
     validationSchema,
+    initialTouched
   })
   const formHelpers = getFormHelpersWithError<WorkspaceScheduleFormValues>(
     form,

diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -1,3 +1,4 @@
+import { FieldError } from "api/errors"
 import * as Types from "../api/types"
 import * as TypesGen from "../api/typesGenerated"
 
@@ -584,3 +585,17 @@ export const MockWorkspaceBuildLogs: TypesGen.ProvisionerJobLog[] = [
 export const MockCancellationMessage = {
   message: "Job successfully canceled",
 }
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const makeMockApiError = ({ message, detail, validations }: { message?: string, detail?: string, validations?: FieldError[] }) => (
+  {
+    response: {
+      data: {
+        message: message ?? "Something went wrong.",
+        detail: detail ?? undefined,
+        validations: validations ?? undefined,
+      },
+    },
+    isAxiosError: true,
+  }
+)