djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* Fix input errors in staff member forms

* Remove unused import
This commit is contained in:
Wojciech Mista 2022-08-04 08:40:14 +02:00 committed by GitHub
parent 2c97b2da41
commit b0d7342e1f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
View file

@ -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}
helperText={
!!formErrors.firstName &&
getStaffErrorMessage(formErrors.firstName, intl)
}
label={intl.formatMessage(commonMessages.firstName)}
name="firstName"
{...getFieldProps("firstName")}
type="text"
value={formData.firstName}
onChange={change}
/>
<TextField
error={!!formErrors.lastName}
helperText={
!!formErrors.lastName &&
getStaffErrorMessage(formErrors.lastName, intl)
}
label={intl.formatMessage(commonMessages.lastName)}
name="lastName"
{...getFieldProps("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={
!!formErrors.email &&
getStaffErrorMessage(formErrors.email, intl)
}
label={intl.formatMessage(commonMessages.email)}
name="email"
{...getFieldProps("email")}
type="email"
value={formData.email}
onChange={change}

26
src/staff/components/StaffProperties/StaffProperties.tsx
View file

@ -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)}
value={data.firstName}
name="firstName"
{...getFieldProps("firstName")}
onChange={onChange}
fullWidth
/>
</div>
<div className={classes.prop}>
<TextField
label={intl.formatMessage(commonMessages.lastName)}
value={data.lastName}
name="lastName"
{...getFieldProps("lastName")}
onChange={onChange}
fullWidth
/>
</div>
<div className={classes.prop}>
<TextField
label={intl.formatMessage(commonMessages.email)}
value={data.email}
name="email"
{...getFieldProps("email")}
onChange={onChange}
fullWidth
/>

21
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -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=""