Fix "Add Staff Member" form errors on inputs (#2186)

* Fix input errors in staff member forms

* Remove unused import

src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx

@@ -19,7 +19,6 @@ import { commonMessages } from "@saleor/intl";
 import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import { FetchMoreProps, RelayToFlat, SearchPageProps } from "@saleor/types";
 import { getFormErrors } from "@saleor/utils/errors";
-import getStaffErrorMessage from "@saleor/utils/errors/staff";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -81,6 +80,14 @@ const StaffAddMemberDialog: React.FC<StaffAddMemberDialogProps> = props => {
     dialogErrors,
   );
 
+  const getFieldProps = (name: string) => ({
+    disabled: props.disabled,
+    error: !!formErrors[name],
+    helperText: formErrors[name]?.message,
+    label: intl.formatMessage(commonMessages[name]),
+    name,
+  });
+
   return (
     <Dialog onClose={onClose} open={open}>
       <Form initial={initialForm} onSubmit={onConfirm}>
@@ -96,25 +103,13 @@ const StaffAddMemberDialog: React.FC<StaffAddMemberDialogProps> = props => {
             <DialogContent>
               <div className={classes.textFieldGrid}>
                 <TextField
-                  error={!!formErrors.firstName}
+                  {...getFieldProps("firstName")}
-                  helperText={
-                    !!formErrors.firstName &&
-                    getStaffErrorMessage(formErrors.firstName, intl)
-                  }
-                  label={intl.formatMessage(commonMessages.firstName)}
-                  name="firstName"
                   type="text"
                   value={formData.firstName}
                   onChange={change}
                 />
                 <TextField
-                  error={!!formErrors.lastName}
+                  {...getFieldProps("lastName")}
-                  helperText={
-                    !!formErrors.lastName &&
-                    getStaffErrorMessage(formErrors.lastName, intl)
-                  }
-                  label={intl.formatMessage(commonMessages.lastName)}
-                  name="lastName"
                   type="text"
                   value={formData.lastName}
                   onChange={change}
@@ -122,14 +117,8 @@ const StaffAddMemberDialog: React.FC<StaffAddMemberDialogProps> = props => {
               </div>
               <FormSpacer />
               <TextField
-                error={!!formErrors.email}
                 fullWidth
-                helperText={
+                {...getFieldProps("email")}
-                  !!formErrors.email &&
-                  getStaffErrorMessage(formErrors.email, intl)
-                }
-                label={intl.formatMessage(commonMessages.email)}
-                name="email"
                 type="email"
                 value={formData.email}
                 onChange={change}

src/staff/components/StaffProperties/StaffProperties.tsx

@@ -128,10 +128,22 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
   const imgInputAnchor = React.createRef<HTMLInputElement>();
 
   const clickImgInput = () => imgInputAnchor.current.click();
-  const formErrors = getFormErrors(["id"], errors || []);
+  const formErrors = getFormErrors(
+    ["id", "firstName", "lastName", "email"],
+    errors || [],
+  );
 
   const hasAvatar = !!staffMember?.avatar?.url;
 
+  const getFieldProps = (name: string) => ({
+    disabled: props.disabled,
+    error: !!formErrors[name],
+    helperText: formErrors[name]?.message,
+    label: intl.formatMessage(commonMessages[name]),
+    name,
+    value: data[name],
+  });
+
   return (
     <Card className={className}>
       <CardTitle
@@ -197,27 +209,21 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
             <div className={classes.propGrid}>
               <div className={classes.prop}>
                 <TextField
-                  label={intl.formatMessage(commonMessages.firstName)}
+                  {...getFieldProps("firstName")}
-                  value={data.firstName}
-                  name="firstName"
                   onChange={onChange}
                   fullWidth
                 />
               </div>
               <div className={classes.prop}>
                 <TextField
-                  label={intl.formatMessage(commonMessages.lastName)}
+                  {...getFieldProps("lastName")}
-                  value={data.lastName}
-                  name="lastName"
                   onChange={onChange}
                   fullWidth
                 />
               </div>
               <div className={classes.prop}>
                 <TextField
-                  label={intl.formatMessage(commonMessages.email)}
+                  {...getFieldProps("email")}
-                  value={data.email}
-                  name="email"
                   onChange={onChange}
                   fullWidth
                 />

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -248304,17 +248304,18 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                         class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                       >
                         <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                           data-shrink="false"
                         >
                           First Name
                         </label>
                         <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                         >
                           <input
                             aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                            disabled=""
                             name="firstName"
                             type="text"
                             value=""
@@ -248341,17 +248342,18 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                         class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                       >
                         <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                           data-shrink="false"
                         >
                           Last Name
                         </label>
                         <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                         >
                           <input
                             aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                            disabled=""
                             name="lastName"
                             type="text"
                             value=""
@@ -248378,17 +248380,18 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                         class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                       >
                         <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                           data-shrink="false"
                         >
                           Email address
                         </label>
                         <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                         >
                           <input
                             aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                            disabled=""
                             name="email"
                             type="text"
                             value=""