coder · AbhineetJain · Jul 26, 2022 · Jul 25, 2022 · Jul 25, 2022 · Jul 25, 2022
diff --git a/site/src/components/ErrorSummary/ErrorSummary.tsx b/site/src/components/ErrorSummary/ErrorSummary.tsx
@@ -9,7 +9,7 @@ import { ApiError, getErrorDetail, getErrorMessage } from "api/errors"
 import { Stack } from "components/Stack/Stack"
 import { FC, useState } from "react"
 
-const Language = {
+export const Language = {
   retryMessage: "Retry",
   unknownErrorMessage: "An unknown error has occurred",
   moreDetails: "More",
@@ -91,7 +91,6 @@ interface StyleProps {
 const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   root: {
     background: darken(theme.palette.error.main, 0.6),
-    margin: `${theme.spacing(2)}px`,
     padding: `${theme.spacing(2)}px`,
     borderRadius: theme.shape.borderRadius,
     gap: 0,

diff --git a/site/src/components/SettingsAccountForm/SettingsAccountForm.stories.tsx b/site/src/components/SettingsAccountForm/SettingsAccountForm.stories.tsx
@@ -0,0 +1,53 @@
+import { Story } from "@storybook/react"
+import { AccountForm, AccountFormProps } from "./SettingsAccountForm"
+
+export default {
+  title: "components/SettingsAccountForm",
+  component: AccountForm,
+  argTypes: {
+    onSubmit: { action: "Submit" },
+  },
+}
+
+const Template: Story<AccountFormProps> = (args: AccountFormProps) => <AccountForm {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  email: "test-user@org.com",
+  isLoading: false,
+  initialValues: {
+    username: "test-user",
+  },
+  updateProfileError: undefined,
+  onSubmit: () => {
+    return Promise.resolve()
+  },
+}
+
+export const Loading = Template.bind({})
+Loading.args = {
+  ...Example.args,
+  isLoading: true,
+}
+
+export const WithError = Template.bind({})
+WithError.args = {
+  ...Example.args,
+  updateProfileError: {
+    response: {
+      data: {
+        message: "Username is invalid",
+        validations: [
+          {
+            field: "username",
+            detail: "Username is too long.",
+          },
+        ],
+      },
+    },
+    isAxiosError: true,
+  },
+  initialTouched: {
+    username: true,
+  },
+}
diff --git a/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx b/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx
@@ -1,9 +1,9 @@
-import FormHelperText from "@material-ui/core/FormHelperText"
 import TextField from "@material-ui/core/TextField"
-import { FormikContextType, FormikErrors, useFormik } from "formik"
+import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
+import { FormikContextType, FormikTouched, useFormik } from "formik"
 import { FC } from "react"
 import * as Yup from "yup"
-import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
+import { getFormHelpersWithError, nameValidator, onChangeTrimmed } from "../../util/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
 
@@ -21,36 +21,37 @@ const validationSchema = Yup.object({
   username: nameValidator(Language.usernameLabel),
 })
 
-export type AccountFormErrors = FormikErrors<AccountFormValues>
-
 export interface AccountFormProps {
   email: string
   isLoading: boolean
   initialValues: AccountFormValues
   onSubmit: (values: AccountFormValues) => void
-  formErrors?: AccountFormErrors
-  error?: string
+  updateProfileError?: Error | unknown
+  // initialTouched is only used for testing the error state of the form.
+  initialTouched?: FormikTouched<AccountFormValues>
 }
 
 export const AccountForm: FC<AccountFormProps> = ({
   email,
   isLoading,
   onSubmit,
   initialValues,
-  formErrors = {},
-  error,
+  updateProfileError,
+  initialTouched,
 }) => {
   const form: FormikContextType<AccountFormValues> = useFormik<AccountFormValues>({
     initialValues,
     validationSchema,
     onSubmit,
+    initialTouched,
   })
-  const getFieldHelpers = getFormHelpers<AccountFormValues>(form, formErrors)
+  const getFieldHelpers = getFormHelpersWithError<AccountFormValues>(form, updateProfileError)
 
   return (
     <>
       <form onSubmit={form.handleSubmit}>
         <Stack>
+          {updateProfileError && <ErrorSummary error={updateProfileError} />}
           <TextField
             disabled
             fullWidth
@@ -67,8 +68,6 @@ export const AccountForm: FC<AccountFormProps> = ({
             variant="outlined"
           />
 
-          {error && <FormHelperText error>{error}</FormHelperText>}
-
           <div>
             <LoadingButton loading={isLoading} type="submit" variant="contained">
               {isLoading ? "" : Language.updateSettings}

diff --git a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.stories.tsx b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.stories.tsx
@@ -0,0 +1,54 @@
+import { Story } from "@storybook/react"
+import { SecurityForm, SecurityFormProps } from "./SettingsSecurityForm"
+
+export default {
+  title: "components/SettingsSecurityForm",
+  component: SecurityForm,
+  argTypes: {
+    onSubmit: { action: "Submit" },
+  },
+}
+
+const Template: Story<SecurityFormProps> = (args: SecurityFormProps) => <SecurityForm {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  isLoading: false,
+  initialValues: {
+    old_password: "",
+    password: "",
+    confirm_password: "",
+  },
+  updateSecurityError: undefined,
+  onSubmit: () => {
+    return Promise.resolve()
+  },
+}
+
+export const Loading = Template.bind({})
+Loading.args = {
+  ...Example.args,
+  isLoading: true,
+}
+
+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.",
+          },
+        ],
+      },
+    },
+    isAxiosError: true,
+  },
+  initialTouched: {
+    old_password: true,
+  },
+}
diff --git a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx
@@ -1,9 +1,9 @@
-import FormHelperText from "@material-ui/core/FormHelperText"
 import TextField from "@material-ui/core/TextField"
-import { FormikContextType, FormikErrors, useFormik } from "formik"
+import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
+import { FormikContextType, FormikTouched, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
-import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
+import { getFormHelpersWithError, onChangeTrimmed } from "../../util/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
 
@@ -40,33 +40,35 @@ const validationSchema = Yup.object({
     }),
 })
 
-export type SecurityFormErrors = FormikErrors<SecurityFormValues>
 export interface SecurityFormProps {
   isLoading: boolean
   initialValues: SecurityFormValues
   onSubmit: (values: SecurityFormValues) => void
-  formErrors?: SecurityFormErrors
-  error?: string
+  updateSecurityError?: Error | unknown
+  // initialTouched is only used for testing the error state of the form.
+  initialTouched?: FormikTouched<SecurityFormValues>
 }
 
 export const SecurityForm: React.FC<SecurityFormProps> = ({
   isLoading,
   onSubmit,
   initialValues,
-  formErrors = {},
-  error,
+  updateSecurityError,
+  initialTouched,
 }) => {
   const form: FormikContextType<SecurityFormValues> = useFormik<SecurityFormValues>({
     initialValues,
     validationSchema,
     onSubmit,
+    initialTouched,
   })
-  const getFieldHelpers = getFormHelpers<SecurityFormValues>(form, formErrors)
+  const getFieldHelpers = getFormHelpersWithError<SecurityFormValues>(form, updateSecurityError)
 
   return (
     <>
       <form onSubmit={form.handleSubmit}>
         <Stack>
+          {updateSecurityError && <ErrorSummary error={updateSecurityError} />}
           <TextField
             {...getFieldHelpers("old_password")}
             onChange={onChangeTrimmed(form)}
@@ -95,8 +97,6 @@ export const SecurityForm: React.FC<SecurityFormProps> = ({
             type="password"
           />
 
-          {error && <FormHelperText error>{error}</FormHelperText>}
-
           <div>
             <LoadingButton loading={isLoading} type="submit" variant="contained">
               {isLoading ? "" : Language.updatePassword}

diff --git a/site/src/components/SignInForm/SignInForm.stories.tsx b/site/src/components/SignInForm/SignInForm.stories.tsx
@@ -6,7 +6,6 @@ export default {
   component: SignInForm,
   argTypes: {
     isLoading: "boolean",
-    authErrorMessage: "string",
     onSubmit: { action: "Submit" },
   },
 }
@@ -16,7 +15,7 @@ const Template: Story<SignInFormProps> = (args: SignInFormProps) => <SignInForm
 export const SignedOut = Template.bind({})
 SignedOut.args = {
   isLoading: false,
-  authErrorMessage: undefined,
+  authError: undefined,
   onSubmit: () => {
     return Promise.resolve()
   },
@@ -33,12 +32,31 @@ Loading.args = {
 }
 
 export const WithLoginError = Template.bind({})
-WithLoginError.args = { ...SignedOut.args, authErrorMessage: "Email or password was invalid" }
+WithLoginError.args = {
+  ...SignedOut.args,
+  authError: {
+    response: {
+      data: {
+        message: "Email or password was invalid",
+        validations: [
+          {
+            field: "password",
+            detail: "Password is invalid.",
+          },
+        ],
+      },
+    },
+    isAxiosError: true,
+  },
+  initialTouched: {
+    password: true,
+  },
+}
 
 export const WithAuthMethodsError = Template.bind({})
 WithAuthMethodsError.args = {
   ...SignedOut.args,
-  methodsErrorMessage: "Failed to fetch auth methods",
+  methodsError: new Error("Failed to fetch auth methods"),
 }
 
 export const WithGithub = Template.bind({})