coder · BrunoQuaresma · May 4, 2023 · May 3, 2023 · May 3, 2023 · May 4, 2023
diff --git a/site/src/api/errors.test.ts b/site/src/api/errors.test.ts
@@ -1,3 +1,4 @@
+import { mockApiError } from "testHelpers/entities"
 import {
   getValidationErrorMessage,
   isApiError,
@@ -7,17 +8,14 @@ import {
 describe("isApiError", () => {
   it("returns true when the object is an API Error", () => {
     expect(
-      isApiError({
-        isAxiosError: true,
-        response: {
-          data: {
-            message: "Invalid entry",
-            errors: [
-              { detail: "Username is already in use", field: "username" },
-            ],
-          },
-        },
-      }),
+      isApiError(
+        mockApiError({
+          message: "Invalid entry",
+          validations: [
+            { detail: "Username is already in use", field: "username" },
+          ],
+        }),
+      ),
     ).toBe(true)
   })
 
@@ -48,53 +46,40 @@ describe("mapApiErrorToFieldErrors", () => {
 describe("getValidationErrorMessage", () => {
   it("returns multiple validation messages", () => {
     expect(
-      getValidationErrorMessage({
-        response: {
-          data: {
-            message: "Invalid user search query.",
-            validations: [
-              {
-                field: "status",
-                detail: `Query param "status" has invalid value: "inactive" is not a valid user status`,
-              },
-              {
-                field: "q",
-                detail: `Query element "role:a:e" can only contain 1 ':'`,
-              },
-            ],
-          },
-        },
-        isAxiosError: true,
-      }),
+      getValidationErrorMessage(
+        mockApiError({
+          message: "Invalid user search query.",
+          validations: [
+            {
+              field: "status",
+              detail: `Query param "status" has invalid value: "inactive" is not a valid user status`,
+            },
+            {
+              field: "q",
+              detail: `Query element "role:a:e" can only contain 1 ':'`,
+            },
+          ],
+        }),
+      ),
     ).toEqual(
       `Query param "status" has invalid value: "inactive" is not a valid user status\nQuery element "role:a:e" can only contain 1 ':'`,
     )
   })
 
   it("non-API error returns empty validation message", () => {
     expect(
-      getValidationErrorMessage({
-        response: {
-          data: {
-            error: "Invalid user search query.",
-          },
-        },
-        isAxiosError: true,
-      }),
+      getValidationErrorMessage(new Error("Invalid user search query.")),
     ).toEqual("")
   })
 
   it("no validations field returns empty validation message", () => {
     expect(
-      getValidationErrorMessage({
-        response: {
-          data: {
-            message: "Invalid user search query.",
-            detail: `Query element "role:a:e" can only contain 1 ':'`,
-          },
-        },
-        isAxiosError: true,
-      }),
+      getValidationErrorMessage(
+        mockApiError({
+          message: "Invalid user search query.",
+          detail: `Query element "role:a:e" can only contain 1 ':'`,
+        }),
+      ),
     ).toEqual("")
   })
 })
diff --git a/site/src/api/errors.ts b/site/src/api/errors.ts
@@ -24,30 +24,16 @@ export type ApiError = AxiosError<ApiErrorResponse> & {
 }
 
 export const isApiError = (err: unknown): err is ApiError => {
-  if (axios.isAxiosError(err)) {
-    const response = err.response?.data
-    if (!response) {
-      return false
-    }
-
-    return (
-      typeof response.message === "string" &&
-      (typeof response.errors === "undefined" || Array.isArray(response.errors))
-    )
-  }
-
-  return false
+  return axios.isAxiosError(err) && err.response !== undefined
 }
 
-/**
- * ApiErrors contain useful error messages in their response body. They contain an overall message
- * and may also contain errors for specific form fields.
- * @param error ApiError
- * @returns true if the ApiError contains error messages for specific form fields.
- */
 export const hasApiFieldErrors = (error: ApiError): boolean =>
   Array.isArray(error.response.data.validations)
 
+export const isApiValidationError = (error: unknown): error is ApiError => {
+  return isApiError(error) && hasApiFieldErrors(error)
+}
+
 export const mapApiErrorToFieldErrors = (
   apiErrorResponse: ApiErrorResponse,
 ): FieldErrors => {
@@ -63,10 +49,6 @@ export const mapApiErrorToFieldErrors = (
   return result
 }
 
-export const isApiValidationError = (error: unknown): error is ApiError => {
-  return isApiError(error) && hasApiFieldErrors(error)
-}
-
 /**
  *
  * @param error

diff --git a/site/src/components/AlertBanner/AlertBanner.stories.tsx b/site/src/components/AlertBanner/AlertBanner.stories.tsx
@@ -1,7 +1,7 @@
 import { Story } from "@storybook/react"
 import { AlertBanner } from "./AlertBanner"
 import Button from "@material-ui/core/Button"
-import { makeMockApiError } from "testHelpers/entities"
+import { mockApiError } from "testHelpers/entities"
 import { AlertBannerProps } from "./alertTypes"
 import Link from "@material-ui/core/Link"
 
@@ -16,7 +16,7 @@ const ExampleAction = (
   </Button>
 )
 
-const mockError = makeMockApiError({
+const mockError = mockApiError({
   message: "Email or password was invalid",
   detail: "Password is invalid",
 })

diff --git a/site/src/components/CreateUserForm/CreateUserForm.stories.tsx b/site/src/components/CreateUserForm/CreateUserForm.stories.tsx
@@ -1,6 +1,7 @@
 import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
 import { CreateUserForm, CreateUserFormProps } from "./CreateUserForm"
+import { mockApiError } from "testHelpers/entities"
 
 export default {
   title: "components/CreateUserForm",
@@ -18,22 +19,14 @@ Ready.args = {
   isLoading: false,
 }
 
-export const UnknownError = Template.bind({})
-UnknownError.args = {
-  onCancel: action("cancel"),
-  onSubmit: action("submit"),
-  isLoading: false,
-  error: "Something went wrong",
-}
-
 export const FormError = Template.bind({})
 FormError.args = {
   onCancel: action("cancel"),
   onSubmit: action("submit"),
   isLoading: false,
-  formErrors: {
-    username: "Username taken",
-  },
+  error: mockApiError({
+    validations: [{ field: "username", detail: "Username taken" }],
+  }),
 }
 
 export const Loading = Template.bind({})

diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx
@@ -1,6 +1,5 @@
-import FormHelperText from "@material-ui/core/FormHelperText"
 import TextField from "@material-ui/core/TextField"
-import { FormikContextType, FormikErrors, useFormik } from "formik"
+import { FormikContextType, useFormik } from "formik"
 import { FC } from "react"
 import * as Yup from "yup"
 import * as TypesGen from "../../api/typesGenerated"
@@ -27,9 +26,8 @@ export const Language = {
 export interface CreateUserFormProps {
   onSubmit: (user: TypesGen.CreateUserRequest) => void
   onCancel: () => void
-  formErrors?: FormikErrors<TypesGen.CreateUserRequest>
+  error?: unknown
   isLoading: boolean
-  error?: string
   myOrgId: string
 }
 
@@ -44,7 +42,7 @@ const validationSchema = Yup.object({
 
 export const CreateUserForm: FC<
   React.PropsWithChildren<CreateUserFormProps>
-> = ({ onSubmit, onCancel, formErrors, isLoading, error, myOrgId }) => {
+> = ({ onSubmit, onCancel, error, isLoading, myOrgId }) => {
   const form: FormikContextType<TypesGen.CreateUserRequest> =
     useFormik<TypesGen.CreateUserRequest>({
       initialValues: {
@@ -58,7 +56,7 @@ export const CreateUserForm: FC<
     })
   const getFieldHelpers = getFormHelpers<TypesGen.CreateUserRequest>(
     form,
-    formErrors,
+    error,
   )
 
   return (
@@ -92,7 +90,6 @@ export const CreateUserForm: FC<
             variant="outlined"
           />
         </Stack>
-        {error && <FormHelperText error>{error}</FormHelperText>}
         <FormFooter onCancel={onCancel} isLoading={isLoading} />
       </form>
     </FullPageForm>

diff --git a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.stories.tsx b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.stories.tsx
@@ -4,6 +4,7 @@ import {
   SearchBarWithFilter,
   SearchBarWithFilterProps,
 } from "./SearchBarWithFilter"
+import { mockApiError } from "testHelpers/entities"
 
 export default {
   title: "components/SearchBarWithFilter",
@@ -34,18 +35,13 @@ WithError.args = {
     { query: userFilterQuery.active, name: "Active users" },
     { query: "random query", name: "Random query" },
   ],
-  error: {
-    response: {
-      data: {
-        message: "Invalid user search query.",
-        validations: [
-          {
-            field: "status",
-            detail: `Query param "status" has invalid value: "inactive" is not a valid user status`,
-          },
-        ],
+  error: mockApiError({
+    message: "Invalid user search query.",
+    validations: [
+      {
+        field: "status",
+        detail: `Query param "status" has invalid value: "inactive" is not a valid user status`,
       },
-    },
-    isAxiosError: true,
-  },
+    ],
+  }),
 }
diff --git a/site/src/components/SettingsAccountForm/SettingsAccountForm.stories.tsx b/site/src/components/SettingsAccountForm/SettingsAccountForm.stories.tsx
@@ -1,5 +1,6 @@
 import { Story } from "@storybook/react"
 import { AccountForm, AccountFormProps } from "./SettingsAccountForm"
+import { mockApiError } from "testHelpers/entities"
 
 export default {
   title: "components/SettingsAccountForm",
@@ -35,20 +36,15 @@ Loading.args = {
 export const WithError = Template.bind({})
 WithError.args = {
   ...Example.args,
-  updateProfileError: {
-    response: {
-      data: {
-        message: "Username is invalid",
-        validations: [
-          {
-            field: "username",
-            detail: "Username is too long.",
-          },
-        ],
+  updateProfileError: mockApiError({
+    message: "Username is invalid",
+    validations: [
+      {
+        field: "username",
+        detail: "Username is too long.",
       },
-    },
-    isAxiosError: true,
-  },
+    ],
+  }),
   initialTouched: {
     username: true,
   },

diff --git a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.stories.tsx b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.stories.tsx
@@ -1,5 +1,6 @@
 import { Story } from "@storybook/react"
 import { SecurityForm, SecurityFormProps } from "./SettingsSecurityForm"
+import { mockApiError } from "testHelpers/entities"
 
 export default {
   title: "components/SettingsSecurityForm",
@@ -36,20 +37,15 @@ Loading.args = {
 export const WithError = Template.bind({})
 WithError.args = {
   ...Example.args,
-  updateSecurityError: {
-    response: {
-      data: {
-        message: "Old password is incorrect",
-        validations: [
-          {
-            field: "old_password",
-            detail: "Old password is incorrect.",
-          },
-        ],
+  updateSecurityError: mockApiError({
+    message: "Old password is incorrect",
+    validations: [
+      {
+        field: "old_password",
+        detail: "Old password is incorrect.",
       },
-    },
-    isAxiosError: true,
-  },
+    ],
+  }),
   initialTouched: {
     old_password: true,
   },

diff --git a/site/src/components/SignInForm/SignInForm.stories.tsx b/site/src/components/SignInForm/SignInForm.stories.tsx
@@ -1,5 +1,5 @@
 import { Story } from "@storybook/react"
-import { makeMockApiError } from "testHelpers/entities"
+import { mockApiError } from "testHelpers/entities"
 import { SignInForm, SignInFormProps } from "./SignInForm"
 
 export default {
@@ -37,7 +37,7 @@ SigningIn.args = {
 export const WithError = Template.bind({})
 WithError.args = {
   ...SignedOut.args,
-  error: makeMockApiError({
+  error: mockApiError({
     message: "Email or password was invalid",
     validations: [
       {