Use translated errors in categories section

src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx

@@ -11,7 +11,7 @@ import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import SeoForm from "@saleor/components/SeoForm";
 import { sectionNames } from "@saleor/intl";
-import { UserError } from "../../../types";
+import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
 import CategoryDetailsForm from "../../components/CategoryDetailsForm";
 
 interface FormData {
@@ -29,7 +29,7 @@ const initialData: FormData = {
 };
 
 export interface CategoryCreatePageProps {
-  errors: UserError[];
+  errors: ProductErrorFragment[];
   disabled: boolean;
   saveButtonBarState: ConfirmButtonTransitionState;
   onSubmit(data: FormData);

src/categories/components/CategoryDetailsForm/CategoryDetailsForm.tsx

@@ -9,8 +9,8 @@ import CardTitle from "@saleor/components/CardTitle";
 import FormSpacer from "@saleor/components/FormSpacer";
 import RichTextEditor from "@saleor/components/RichTextEditor";
 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 { maybe } from "../../../misc";
 import { CategoryDetails_category } from "../../types/CategoryDetails";
 
@@ -21,7 +21,7 @@ interface CategoryDetailsFormProps {
     description: RawDraftContentState;
   };
   disabled: boolean;
-  errors: UserError[];
+  errors: ProductErrorFragment[];
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
@@ -34,6 +34,8 @@ export const CategoryDetailsForm: React.FC<CategoryDetailsFormProps> = ({
 }) => {
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["name", "descriptionJson"], errors);
+
   return (
     <Card>
       <CardTitle
@@ -49,16 +51,16 @@ export const CategoryDetailsForm: React.FC<CategoryDetailsFormProps> = ({
             disabled={disabled}
             value={data && data.name}
             onChange={onChange}
-            error={!!getFieldError(errors, "name")}
+            error={!!formErrors.name}
-            helperText={getFieldError(errors, "name")?.message}
+            helperText={getProductErrorMessage(formErrors.name, intl)}
             fullWidth
           />
         </div>
         <FormSpacer />
         <RichTextEditor
           disabled={disabled}
-          error={!!getFieldError(errors, "descriptionJson")}
+          error={!!formErrors.descriptionJson}
-          helperText={getFieldError(errors, "descriptionJson")?.message}
+          helperText={getProductErrorMessage(formErrors.descriptionJson, intl)}
           label={intl.formatMessage({
             defaultMessage: "Category Description"
           })}

src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx

@@ -15,8 +15,9 @@ import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import SeoForm from "@saleor/components/SeoForm";
 import { Tab, TabContainer } from "@saleor/components/Tab";
 import { sectionNames } from "@saleor/intl";
+import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
 import { maybe } from "../../../misc";
-import { TabListActions, UserError } from "../../../types";
+import { TabListActions } from "../../../types";
 import CategoryDetailsForm from "../../components/CategoryDetailsForm";
 import CategoryList from "../../components/CategoryList";
 import {
@@ -44,7 +45,7 @@ export interface CategoryUpdatePageProps
   extends TabListActions<"productListToolbar" | "subcategoryListToolbar"> {
   changeTab: (index: CategoryPageTab) => void;
   currentTab: CategoryPageTab;
-  errors: UserError[];
+  errors: ProductErrorFragment[];
   disabled: boolean;
   category: CategoryDetails_category;
   products: CategoryDetails_category_products_edges_node[];

src/categories/mutations.ts

@@ -1,6 +1,7 @@
 import gql from "graphql-tag";
 
 import makeMutation from "@saleor/hooks/makeMutation";
+import { productErrorFragment } from "@saleor/attributes/mutations";
 import { categoryDetailsFragment } from "./queries";
 import {
   CategoryBulkDelete,
@@ -20,11 +21,11 @@ import {
 } from "./types/CategoryUpdate";
 
 export const categoryDeleteMutation = gql`
+  ${productErrorFragment}
   mutation CategoryDelete($id: ID!) {
     categoryDelete(id: $id) {
-      errors {
+      errors: productErrors {
-        field
+        ...ProductErrorFragment
-        message
       }
     }
   }
@@ -36,15 +37,15 @@ export const useCategoryDeleteMutation = makeMutation<
 
 export const categoryCreateMutation = gql`
   ${categoryDetailsFragment}
+  ${productErrorFragment}
   mutation CategoryCreate($parent: ID, $input: CategoryInput!) {
     categoryCreate(parent: $parent, input: $input) {
-      errors {
-        field
-        message
-      }
       category {
         ...CategoryDetailsFragment
       }
+      errors: productErrors {
+        ...ProductErrorFragment
+      }
     }
   }
 `;
@@ -55,15 +56,15 @@ export const useCategoryCreateMutation = makeMutation<
 
 export const categoryUpdateMutation = gql`
   ${categoryDetailsFragment}
+  ${productErrorFragment}
   mutation CategoryUpdate($id: ID!, $input: CategoryInput!) {
     categoryUpdate(id: $id, input: $input) {
-      errors {
-        field
-        message
-      }
       category {
         ...CategoryDetailsFragment
       }
+      errors: productErrors {
+        ...ProductErrorFragment
+      }
     }
   }
 `;
@@ -73,11 +74,11 @@ export const useCategoryUpdateMutation = makeMutation<
 >(categoryUpdateMutation);
 
 export const categoryBulkDeleteMutation = gql`
+  ${productErrorFragment}
   mutation CategoryBulkDelete($ids: [ID]!) {
     categoryBulkDelete(ids: $ids) {
-      errors {
+      errors: productErrors {
-        field
+        ...ProductErrorFragment
-        message
       }
     }
   }

src/categories/types/CategoryBulkDelete.ts

@@ -2,14 +2,16 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
+import { ProductErrorCode } from "./../../types/globalTypes";
+
 // ====================================================
 // GraphQL mutation operation: CategoryBulkDelete
 // ====================================================
 
 export interface CategoryBulkDelete_categoryBulkDelete_errors {
-  __typename: "Error";
+  __typename: "ProductError";
+  code: ProductErrorCode;
   field: string | null;
-  message: string | null;
 }
 
 export interface CategoryBulkDelete_categoryBulkDelete {

src/categories/types/CategoryCreate.ts

@@ -2,18 +2,12 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { CategoryInput } from "./../../types/globalTypes";
+import { CategoryInput, ProductErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: CategoryCreate
 // ====================================================
 
-export interface CategoryCreate_categoryCreate_errors {
-  __typename: "Error";
-  field: string | null;
-  message: string | null;
-}
-
 export interface CategoryCreate_categoryCreate_category_backgroundImage {
   __typename: "Image";
   alt: string | null;
@@ -36,10 +30,16 @@ export interface CategoryCreate_categoryCreate_category {
   parent: CategoryCreate_categoryCreate_category_parent | null;
 }
 
+export interface CategoryCreate_categoryCreate_errors {
+  __typename: "ProductError";
+  code: ProductErrorCode;
+  field: string | null;
+}
+
 export interface CategoryCreate_categoryCreate {
   __typename: "CategoryCreate";
-  errors: CategoryCreate_categoryCreate_errors[];
   category: CategoryCreate_categoryCreate_category | null;
+  errors: CategoryCreate_categoryCreate_errors[];
 }
 
 export interface CategoryCreate {

src/categories/types/CategoryDelete.ts

@@ -2,14 +2,16 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
+import { ProductErrorCode } from "./../../types/globalTypes";
+
 // ====================================================
 // GraphQL mutation operation: CategoryDelete
 // ====================================================
 
 export interface CategoryDelete_categoryDelete_errors {
-  __typename: "Error";
+  __typename: "ProductError";
+  code: ProductErrorCode;
   field: string | null;
-  message: string | null;
 }
 
 export interface CategoryDelete_categoryDelete {

src/categories/types/CategoryUpdate.ts

@@ -2,18 +2,12 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { CategoryInput } from "./../../types/globalTypes";
+import { CategoryInput, ProductErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: CategoryUpdate
 // ====================================================
 
-export interface CategoryUpdate_categoryUpdate_errors {
-  __typename: "Error";
-  field: string | null;
-  message: string | null;
-}
-
 export interface CategoryUpdate_categoryUpdate_category_backgroundImage {
   __typename: "Image";
   alt: string | null;
@@ -36,10 +30,16 @@ export interface CategoryUpdate_categoryUpdate_category {
   parent: CategoryUpdate_categoryUpdate_category_parent | null;
 }
 
+export interface CategoryUpdate_categoryUpdate_errors {
+  __typename: "ProductError";
+  code: ProductErrorCode;
+  field: string | null;
+}
+
 export interface CategoryUpdate_categoryUpdate {
   __typename: "CategoryUpdate";
-  errors: CategoryUpdate_categoryUpdate_errors[];
   category: CategoryUpdate_categoryUpdate_category | null;
+  errors: CategoryUpdate_categoryUpdate_errors[];
 }
 
 export interface CategoryUpdate {

src/categories/views/CategoryDetails.tsx

@@ -99,7 +99,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
       );
       if (backgroundImageError) {
         notify({
-          text: backgroundImageError.message
+          text: intl.formatMessage(commonMessages.somethingWentWrong)
         });
       }
     }