Better form, error, stories

bug in formErrors story

site/src/components/CreateUserForm/CreateUserForm.stories.tsx

@@ -1,3 +1,4 @@
+import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
 import React from "react"
 import { CreateUserForm, CreateUserFormProps } from "./CreateUserForm"
@@ -5,18 +6,38 @@ import { CreateUserForm, CreateUserFormProps } from "./CreateUserForm"
 export default {
   title: "components/CreateUserForm",
   component: CreateUserForm,
-  argTypes: {
-    isLoading: "boolean",
-    authErrorMessage: "string",
-    onSubmit: { action: "Submit" },
-  },
 }
 
 const Template: Story<CreateUserFormProps> = (args: CreateUserFormProps) => <CreateUserForm {...args} />
 
-export const Example = Template.bind({})
-Example.args = {
-  onSubmit: () => {
-    return Promise.resolve()
-  },
+export const Ready = Template.bind({})
+Ready.args = {
+  onCancel: action('cancel'),
+  onSubmit: action('submit'),
+  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: {
+    email: "Bad email address"
+  }
+}
+
+export const Loading = Template.bind({})
+Loading.args = {
+  onCancel: action('cancel'),
+  onSubmit: action('submit'),
+  isLoading: true,
 }

site/src/components/CreateUserForm/CreateUserForm.tsx

@@ -1,11 +1,12 @@
-import Button from "@material-ui/core/Button"
+import FormHelperText from "@material-ui/core/FormHelperText"
 import TextField from "@material-ui/core/TextField"
 import { FormikContextType, FormikErrors, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
 import { CreateUserRequest } from "../../api/typesGenerated"
 import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
-import { LoadingButton } from "../LoadingButton/LoadingButton"
+import { FormFooter } from "../FormFooter/FormFooter"
+import { FullPageForm } from "../FullPageForm/FullPageForm"
 
 const Language = {
   emailLabel: "Email",
@@ -23,6 +24,8 @@ export interface CreateUserFormProps {
   onSubmit: (user: CreateUserRequest) => void
   onCancel: () => void
   formErrors?: FormikErrors<CreateUserRequest>
+  isLoading: boolean
+  error?: string
 }
 
 const validationSchema = Yup.object({
@@ -31,7 +34,7 @@ const validationSchema = Yup.object({
   username: Yup.string().required(),
 })
 
-export const CreateUserForm: React.FC<CreateUserFormProps> = ({ onSubmit, onCancel, formErrors }) => {
+export const CreateUserForm: React.FC<CreateUserFormProps> = ({ onSubmit, onCancel, formErrors, isLoading, error }) => {
   const form: FormikContextType<CreateUserRequest> = useFormik<CreateUserRequest>({
     initialValues: {
       email: "",
@@ -42,42 +45,39 @@ export const CreateUserForm: React.FC<CreateUserFormProps> = ({ onSubmit, onCanc
     onSubmit,
   })
   const getFieldHelpers = getFormHelpers<CreateUserRequest>(form, formErrors)
+  console.log(getFieldHelpers("email"))
 
   return (
-    <form onSubmit={form.handleSubmit}>
-      <TextField
-        {...getFieldHelpers("username")}
-        onChange={onChangeTrimmed(form)}
-        autoFocus
-        autoComplete="username"
-        fullWidth
-        label={Language.usernameLabel}
-        variant="outlined"
-      />
-      <TextField
-        {...getFieldHelpers("email")}
-        onChange={onChangeTrimmed(form)}
-        autoFocus
-        autoComplete="email"
-        fullWidth
-        label={Language.emailLabel}
-        variant="outlined"
-      />
-      <TextField
-        {...getFieldHelpers("password")}
-        autoComplete="current-password"
-        fullWidth
-        id="password"
-        label={Language.passwordLabel}
-        type="password"
-        variant="outlined"
-      />
-      <div>
-        <Button onClick={onCancel}>{Language.cancel}</Button>
-        <LoadingButton color="primary" type="submit" variant="contained">
-          {Language.createUser}
-        </LoadingButton>
-      </div>
-    </form>
+    <FullPageForm title="Create user" detail="" onCancel={onCancel}>
+      <form onSubmit={form.handleSubmit}>
+        <TextField
+          {...getFieldHelpers("username")}
+          onChange={onChangeTrimmed(form)}
+          autoComplete="username"
+          fullWidth
+          label={Language.usernameLabel}
+          variant="outlined"
+        />
+        <TextField
+          {...getFieldHelpers("email")}
+          onChange={onChangeTrimmed(form)}
+          autoComplete="email"
+          fullWidth
+          label={Language.emailLabel}
+          variant="outlined"
+        />
+        <TextField
+          {...getFieldHelpers("password")}
+          autoComplete="current-password"
+          fullWidth
+          id="password"
+          label={Language.passwordLabel}
+          type="password"
+          variant="outlined"
+        />
+        {error && <FormHelperText error>{error}</FormHelperText>}
+        <FormFooter onCancel={onCancel} isLoading={isLoading} />
+      </form>
+    </FullPageForm>
   )
 }

site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx

@@ -6,12 +6,17 @@ import { CreateUserRequest } from "../../../api/typesGenerated"
 import { CreateUserForm } from "../../../components/CreateUserForm/CreateUserForm"
 import { XServiceContext } from "../../../xServices/StateContext"
 
+const Language = {
+  unknownError: "Oops, an unknown error occurred.",
+}
+
 export const CreateUserPage = () => {
   const xServices = useContext(XServiceContext)
   const [usersState, usersSend] = useActor(xServices.usersXService)
   const { createUserError } = usersState.context
-  const formErrors =
-    createUserError && isApiError(createUserError) ? mapApiErrorToFieldErrors(createUserError.response.data) : undefined
+  const apiError = isApiError(createUserError)
+  const formErrors = apiError ? mapApiErrorToFieldErrors(createUserError.response.data) : undefined
+  const hasUnknownError = createUserError && !apiError
   const navigate = useNavigate()
 
   return (
@@ -19,6 +24,8 @@ export const CreateUserPage = () => {
       formErrors={formErrors}
       onSubmit={(user: CreateUserRequest) => usersSend({ type: "CREATE", user })}
       onCancel={() => navigate("/users")}
+      isLoading={usersState.hasTag("loading")}
+      error={hasUnknownError ? Language.unknownError : undefined}
     />
   )
 }