Store errors in variable

src/attributes/components/AttributeDetails/AttributeDetails.tsx

@@ -11,7 +11,7 @@ import FormSpacer from "@saleor/components/FormSpacer";
 import SingleSelectField from "@saleor/components/SingleSelectField";
 import { commonMessages } from "@saleor/intl";
 import { AttributeInputTypeEnum } from "@saleor/types/globalTypes";
-import { getFieldError, getProductErrorMessage } from "@saleor/utils/errors";
+import { getProductErrorMessage, getFormErrors } from "@saleor/utils/errors";
 import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
 import { AttributePageFormData } from "../AttributePage";
 import { getAttributeSlugErrorMessage } from "../../errors";
@@ -49,6 +49,8 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({
     }
   ];
 
+  const formErrors = getFormErrors(["name", "slug", "inputType"], errors);
+
   return (
     <Card>
       <CardTitle
@@ -57,24 +59,21 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({
       <CardContent>
         <TextField
           disabled={disabled}
-          error={!!getFieldError(errors, "name")}
+          error={!!formErrors.name}
           label={intl.formatMessage({
             defaultMessage: "Default Label",
             description: "attribute's label"
           })}
           name={"name" as keyof AttributePageFormData}
           fullWidth
-          helperText={getProductErrorMessage(
+          helperText={getProductErrorMessage(formErrors.name, intl)}
-            getFieldError(errors, "name"),
-            intl
-          )}
           value={data.name}
           onChange={onChange}
         />
         <FormSpacer />
         <TextField
           disabled={disabled}
-          error={!!getFieldError(errors, "slug")}
+          error={!!formErrors.slug}
           label={intl.formatMessage({
             defaultMessage: "Attribute Code",
             description: "attribute's slug short code label"
@@ -83,7 +82,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({
           placeholder={slugify(data.name).toLowerCase()}
           fullWidth
           helperText={
-            getAttributeSlugErrorMessage(getFieldError(errors, "slug"), intl) ||
+            getAttributeSlugErrorMessage(formErrors.slug, intl) ||
             intl.formatMessage({
               defaultMessage:
                 "This is used internally. Make sure you don’t use spaces",
@@ -97,11 +96,8 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({
         <SingleSelectField
           choices={inputTypeChoices}
           disabled={disabled || !canChangeType}
-          error={!!getFieldError(errors, "inputType")}
+          error={!!formErrors.inputType}
-          hint={getProductErrorMessage(
+          hint={getProductErrorMessage(formErrors.inputType, intl)}
-            getFieldError(errors, "inputType"),
-            intl
-          )}
           label={intl.formatMessage({
             defaultMessage: "Catalog Input type for Store Owner",
             description: "attribute's editor component"

src/attributes/components/AttributeProperties/AttributeProperties.tsx

@@ -11,14 +11,14 @@ import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
 import { commonMessages } from "@saleor/intl";
-import { UserError } from "@saleor/types";
+import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors";
-import { getFieldError } from "@saleor/utils/errors";
+import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
 import { AttributePageFormData } from "../AttributePage";
 
 export interface AttributePropertiesProps {
   data: AttributePageFormData;
   disabled: boolean;
-  errors: UserError[];
+  errors: ProductErrorFragment[];
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
@@ -30,6 +30,8 @@ const AttributeProperties: React.FC<AttributePropertiesProps> = ({
 }) => {
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["storefrontSearchPosition"], errors);
+
   return (
     <Card>
       <CardTitle title={intl.formatMessage(commonMessages.properties)} />
@@ -86,11 +88,12 @@ const AttributeProperties: React.FC<AttributePropertiesProps> = ({
         {data.filterableInStorefront && (
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "storefrontSearchPosition")}
+            error={!!formErrors.storefrontSearchPosition}
             fullWidth
-            helperText={
+            helperText={getProductErrorMessage(
-              getFieldError(errors, "storefrontSearchPosition")?.message
+              formErrors.storefrontSearchPosition,
-            }
+              intl
+            )}
             name={"storefrontSearchPosition" as keyof AttributePageFormData}
             label={intl.formatMessage({
               defaultMessage: "Position in faceted navigation",

src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx

@@ -14,7 +14,7 @@ import Form from "@saleor/components/Form";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import { buttonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
-import { getFieldError } from "@saleor/utils/errors";
+import { getFormErrors } from "@saleor/utils/errors";
 import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
 import { getAttributeValueErrorMessage } from "@saleor/attributes/errors";
 import { AttributeDetails_attribute_values } from "../../types/AttributeDetails";
@@ -46,6 +46,7 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
     name: maybe(() => attributeValue.name, "")
   };
   const errors = useModalDialogErrors(apiErrors, open);
+  const formErrors = getFormErrors(["name"], errors);
 
   return (
     <Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
@@ -69,10 +70,10 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
               <TextField
                 autoFocus
                 disabled={disabled}
-                error={!!getFieldError(errors, "name")}
+                error={!!formErrors.name}
                 fullWidth
                 helperText={getAttributeValueErrorMessage(
-                  getFieldError(errors, "name"),
+                  formErrors.name,
                   intl
                 )}
                 name={"name" as keyof AttributeValueEditDialogFormData}

src/utils/errors/index.ts

@@ -13,4 +13,14 @@ export function getErrors(errors: UserError[]): string[] {
     .map(err => err.message);
 }
 
+export function getFormErrors<TField extends string, TError extends UserError>(
+  fields: TField[],
+  errors: TError[]
+): Record<TField, TError> {
+  return fields.reduce((errs, field) => {
+    errs[field] = getFieldError(errors, field);
+    return errs;
+  }, ({} as unknown) as Record<TField, TError>);
+}
+
 export { default as getProductErrorMessage } from "./product";