Use error codes in product types section

src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.tsx

@@ -30,6 +30,8 @@ import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
 import { maybe, renderCollection } from "@saleor/misc";
 import { FetchMoreProps } from "@saleor/types";
+import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
+import { getProductErrorMessage } from "@saleor/utils/errors";
 import { SearchAttributes_productType_availableAttributes_edges_node } from "../../hooks/useAvailableAttributeSearch/types/SearchAttributes";
 
 const useStyles = makeStyles(
@@ -61,7 +63,7 @@ const useStyles = makeStyles(
 
 export interface AssignAttributeDialogProps extends FetchMoreProps {
   confirmButtonState: ConfirmButtonTransitionState;
-  errors: string[];
+  errors: ProductErrorFragment[];
   open: boolean;
   attributes: SearchAttributes_productType_availableAttributes_edges_node[];
   selected: string[];
@@ -188,7 +190,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
         <DialogContent>
           {errors.map((error, errorIndex) => (
             <DialogContentText color="error" key={errorIndex}>
-              {error}
+              {getProductErrorMessage(error, intl)}
             </DialogContentText>
           ))}
         </DialogContent>

src/productTypes/components/ProductTypeAttributeEditDialog/ProductTypeAttributeEditDialog.tsx

@@ -1,112 +0,0 @@
-import Button from "@material-ui/core/Button";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import TextField from "@material-ui/core/TextField";
-import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
-
-import Form from "@saleor/components/Form";
-import { FormSpacer } from "@saleor/components/FormSpacer";
-import ListField from "@saleor/components/ListField";
-import { buttonMessages } from "@saleor/intl";
-import { UserError } from "@saleor/types";
-import { getFieldError } from "@saleor/utils/errors";
-
-export interface FormData {
-  name: string;
-  values: Array<{
-    label: string;
-    value: string;
-  }>;
-}
-
-export interface ProductTypeAttributeEditDialogProps {
-  disabled: boolean;
-  errors: UserError[];
-  name: string;
-  opened: boolean;
-  title: string;
-  values: Array<{
-    label: string;
-    value: string;
-  }>;
-  onClose: () => void;
-  onConfirm: (data: FormData) => void;
-}
-
-const ProductTypeAttributeEditDialog: React.FC<ProductTypeAttributeEditDialogProps> = ({
-  disabled,
-  errors,
-  name,
-  opened,
-  title,
-  values,
-  onClose,
-  onConfirm
-}) => {
-  const intl = useIntl();
-
-  const initialForm: FormData = {
-    name: name || "",
-    values: values || []
-  };
-  return (
-    <Dialog onClose={onClose} open={opened}>
-      <Form initial={initialForm} onSubmit={onConfirm}>
-        {({ change, data }) => (
-          <>
-            <DialogTitle>{title}</DialogTitle>
-            <DialogContent>
-              <TextField
-                disabled={disabled}
-                error={!!getFieldError(errors, "name")}
-                fullWidth
-                label={intl.formatMessage({
-                  defaultMessage: "Attribute name"
-                })}
-                helperText={getFieldError(errors, "name")?.message}
-                name="name"
-                value={data.name}
-                onChange={change}
-              />
-              <FormSpacer />
-              <ListField
-                autoComplete="off"
-                disabled={disabled}
-                error={
-                  !!getFieldError(errors, "values") ||
-                  !!getFieldError(errors, "addValues") ||
-                  !!getFieldError(errors, "removeValues")
-                }
-                fullWidth
-                name="values"
-                label={intl.formatMessage({
-                  defaultMessage: "Attribute values"
-                })}
-                helperText={
-                  getFieldError(errors, "values") ||
-                  getFieldError(errors, "addValues") ||
-                  getFieldError(errors, "removeValues")
-                }
-                values={data.values}
-                onChange={change}
-              />
-            </DialogContent>
-            <DialogActions>
-              <Button onClick={onClose}>
-                <FormattedMessage {...buttonMessages.back} />
-              </Button>
-              <Button color="primary" variant="contained" type="submit">
-                <FormattedMessage {...buttonMessages.confirm} />
-              </Button>
-            </DialogActions>
-          </>
-        )}
-      </Form>
-    </Dialog>
-  );
-};
-ProductTypeAttributeEditDialog.displayName = "ProductTypeAttributeEditDialog";
-export default ProductTypeAttributeEditDialog;

src/productTypes/components/ProductTypeAttributeEditDialog/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./ProductTypeAttributeEditDialog";
-export * from "./ProductTypeAttributeEditDialog";

src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx

@@ -13,8 +13,8 @@ import { ChangeEvent, FormChange } from "@saleor/hooks/useForm";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { sectionNames } from "@saleor/intl";
 import { ProductTypeDetails_taxTypes } from "@saleor/productTypes/types/ProductTypeDetails";
-import { UserError } from "@saleor/types";
 import { WeightUnitsEnum } from "@saleor/types/globalTypes";
+import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
 import ProductTypeDetails from "../ProductTypeDetails/ProductTypeDetails";
 import ProductTypeShipping from "../ProductTypeShipping/ProductTypeShipping";
 import ProductTypeTaxes from "../ProductTypeTaxes/ProductTypeTaxes";
@@ -27,7 +27,7 @@ export interface ProductTypeForm {
 }
 
 export interface ProductTypeCreatePageProps {
-  errors: UserError[];
+  errors: ProductErrorFragment[];
   defaultWeightUnit: WeightUnitsEnum;
   disabled: boolean;
   pageTitle: string;
@@ -106,6 +106,7 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
                 disabled={disabled}
                 data={data}
                 defaultWeightUnit={defaultWeightUnit}
+                errors={errors}
                 onChange={change}
               />
             </div>

src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx

@@ -7,8 +7,8 @@ import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import { commonMessages } from "@saleor/intl";
-import { UserError } from "@saleor/types";
+import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
-import { getFieldError } from "@saleor/utils/errors";
+import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors";
 
 const useStyles = makeStyles(
   {
@@ -24,16 +24,18 @@ interface ProductTypeDetailsProps {
     name: string;
   };
   disabled: boolean;
-  errors: UserError[];
+  errors: ProductErrorFragment[];
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
 const ProductTypeDetails: React.FC<ProductTypeDetailsProps> = props => {
   const { data, disabled, errors, onChange } = props;
-  const classes = useStyles(props);
 
+  const classes = useStyles(props);
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["name"], errors);
+
   return (
     <Card className={classes.root}>
       <CardTitle
@@ -42,9 +44,9 @@ const ProductTypeDetails: React.FC<ProductTypeDetailsProps> = props => {
       <CardContent>
         <TextField
           disabled={disabled}
-          error={!!getFieldError(errors, "name")}
+          error={!!formErrors.name}
           fullWidth
-          helperText={getFieldError(errors, "name")?.message}
+          helperText={getProductErrorMessage(formErrors.name, intl)}
           label={intl.formatMessage({
             defaultMessage: "Product Type Name"
           })}

src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx

@@ -14,8 +14,9 @@ import { ChangeEvent, FormChange } from "@saleor/hooks/useForm";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
-import { ListActions, ReorderEvent, UserError } from "@saleor/types";
+import { ListActions, ReorderEvent } from "@saleor/types";
 import { AttributeTypeEnum, WeightUnitsEnum } from "@saleor/types/globalTypes";
+import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
 import {
   ProductTypeDetails_productType,
   ProductTypeDetails_taxTypes
@@ -41,7 +42,7 @@ export interface ProductTypeForm {
 }
 
 export interface ProductTypeDetailsPageProps {
-  errors: UserError[];
+  errors: ProductErrorFragment[];
   productType: ProductTypeDetails_productType;
   defaultWeightUnit: WeightUnitsEnum;
   disabled: boolean;
@@ -200,6 +201,7 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
                 disabled={disabled}
                 data={data}
                 defaultWeightUnit={defaultWeightUnit}
+                errors={errors}
                 onChange={change}
               />
             </div>

src/productTypes/components/ProductTypeShipping/ProductTypeShipping.tsx

@@ -6,6 +6,8 @@ import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
+import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
+import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors";
 import { WeightUnitsEnum } from "../../../types/globalTypes";
 
 interface ProductTypeShippingProps {
@@ -15,6 +17,7 @@ interface ProductTypeShippingProps {
   };
   defaultWeightUnit: WeightUnitsEnum;
   disabled: boolean;
+  errors: ProductErrorFragment[];
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
@@ -22,10 +25,13 @@ const ProductTypeShipping: React.FC<ProductTypeShippingProps> = ({
   data,
   defaultWeightUnit,
   disabled,
+  errors,
   onChange
 }) => {
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["weight"], errors);
+
   return (
     <Card>
       <CardTitle
@@ -48,15 +54,19 @@ const ProductTypeShipping: React.FC<ProductTypeShippingProps> = ({
         {data.isShippingRequired && (
           <TextField
             disabled={disabled}
+            error={!!formErrors.weight}
             InputProps={{ endAdornment: defaultWeightUnit }}
             label={intl.formatMessage({
               defaultMessage: "Weight"
             })}
             name="weight"
-            helperText={intl.formatMessage({
+            helperText={
-              defaultMessage:
+              getProductErrorMessage(formErrors.weight, intl) ||
-                "Used to calculate rates for shipping for products of this product type, when specific weight is not given"
+              intl.formatMessage({
-            })}
+                defaultMessage:
+                  "Used to calculate rates for shipping for products of this product type, when specific weight is not given"
+              })
+            }
             type="number"
             value={data.weight}
             onChange={onChange}

src/productTypes/mutations.ts

@@ -1,5 +1,6 @@
 import gql from "graphql-tag";
 
+import { productErrorFragment } from "@saleor/attributes/mutations";
 import { TypedMutation } from "../mutations";
 import { productTypeDetailsFragment } from "./queries";
 import {
@@ -32,11 +33,11 @@ import {
 } from "./types/UnassignAttribute";
 
 export const productTypeDeleteMutation = gql`
+  ${productErrorFragment}
   mutation ProductTypeDelete($id: ID!) {
     productTypeDelete(id: $id) {
-      errors {
+      errors: productErrors {
-        field
+        ...ProductErrorFragment
-        message
       }
       productType {
         id
@@ -50,11 +51,11 @@ export const TypedProductTypeDeleteMutation = TypedMutation<
 >(productTypeDeleteMutation);
 
 export const productTypeBulkDeleteMutation = gql`
+  ${productErrorFragment}
   mutation ProductTypeBulkDelete($ids: [ID]!) {
     productTypeBulkDelete(ids: $ids) {
-      errors {
+      errors: productErrors {
-        field
+        ...ProductErrorFragment
-        message
       }
     }
   }
@@ -65,12 +66,12 @@ export const TypedProductTypeBulkDeleteMutation = TypedMutation<
 >(productTypeBulkDeleteMutation);
 
 export const productTypeUpdateMutation = gql`
+  ${productErrorFragment}
   ${productTypeDetailsFragment}
   mutation ProductTypeUpdate($id: ID!, $input: ProductTypeInput!) {
     productTypeUpdate(id: $id, input: $input) {
-      errors {
+      errors: productErrors {
-        field
+        ...ProductErrorFragment
-        message
       }
       productType {
         ...ProductTypeDetailsFragment
@@ -84,12 +85,12 @@ export const TypedProductTypeUpdateMutation = TypedMutation<
 >(productTypeUpdateMutation);
 
 export const assignAttributeMutation = gql`
+  ${productErrorFragment}
   ${productTypeDetailsFragment}
   mutation AssignAttribute($id: ID!, $operations: [AttributeAssignInput!]!) {
     attributeAssign(productTypeId: $id, operations: $operations) {
-      errors {
+      errors: productErrors {
-        field
+        ...ProductErrorFragment
-        message
       }
       productType {
         ...ProductTypeDetailsFragment
@@ -103,12 +104,12 @@ export const TypedAssignAttributeMutation = TypedMutation<
 >(assignAttributeMutation);
 
 export const unassignAttributeMutation = gql`
+  ${productErrorFragment}
   ${productTypeDetailsFragment}
   mutation UnassignAttribute($id: ID!, $ids: [ID]!) {
     attributeUnassign(productTypeId: $id, attributeIds: $ids) {
-      errors {
+      errors: productErrors {
-        field
+        ...ProductErrorFragment
-        message
       }
       productType {
         ...ProductTypeDetailsFragment
@@ -122,12 +123,12 @@ export const TypedUnassignAttributeMutation = TypedMutation<
 >(unassignAttributeMutation);
 
 export const productTypeCreateMutation = gql`
+  ${productErrorFragment}
   ${productTypeDetailsFragment}
   mutation ProductTypeCreate($input: ProductTypeInput!) {
     productTypeCreate(input: $input) {
-      errors {
+      errors: productErrors {
-        field
+        ...ProductErrorFragment
-        message
       }
       productType {
         ...ProductTypeDetailsFragment
@@ -141,6 +142,7 @@ export const TypedProductTypeCreateMutation = TypedMutation<
 >(productTypeCreateMutation);
 
 const productTypeAttributeReorder = gql`
+  ${productErrorFragment}
   ${productTypeDetailsFragment}
   mutation ProductTypeAttributeReorder(
     $move: ReorderInput!
@@ -152,9 +154,8 @@ const productTypeAttributeReorder = gql`
       productTypeId: $productTypeId
       type: $type
     ) {
-      errors {
+      errors: productErrors {
-        field
+        ...ProductErrorFragment
-        message
       }
       productType {
         ...ProductTypeDetailsFragment

src/productTypes/types/AssignAttribute.ts

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

src/productTypes/types/ProductTypeAttributeReorder.ts

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

src/productTypes/types/ProductTypeBulkDelete.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: ProductTypeBulkDelete
 // ====================================================
 
 export interface ProductTypeBulkDelete_productTypeBulkDelete_errors {
-  __typename: "Error";
+  __typename: "ProductError";
+  code: ProductErrorCode;
   field: string | null;
-  message: string | null;
 }
 
 export interface ProductTypeBulkDelete_productTypeBulkDelete {

src/productTypes/types/ProductTypeCreate.ts

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

src/productTypes/types/ProductTypeDelete.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: ProductTypeDelete
 // ====================================================
 
 export interface ProductTypeDelete_productTypeDelete_errors {
-  __typename: "Error";
+  __typename: "ProductError";
+  code: ProductErrorCode;
   field: string | null;
-  message: string | null;
 }
 
 export interface ProductTypeDelete_productTypeDelete_productType {

src/productTypes/types/ProductTypeUpdate.ts

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

src/productTypes/types/UnassignAttribute.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: UnassignAttribute
 // ====================================================
 
 export interface UnassignAttribute_attributeUnassign_errors {
-  __typename: "Error";
+  __typename: "ProductError";
+  code: ProductErrorCode;
   field: string | null;
-  message: string | null;
 }
 
 export interface UnassignAttribute_attributeUnassign_productType_taxType {

src/productTypes/views/ProductTypeCreate.tsx

@@ -57,10 +57,9 @@ export const ProductTypeCreate: React.FC = () => {
                 <ProductTypeCreatePage
                   defaultWeightUnit={maybe(() => data.shop.defaultWeightUnit)}
                   disabled={loading}
-                  errors={maybe(
+                  errors={
-                    () => createProductTypeOpts.data.productTypeCreate.errors,
+                    createProductTypeOpts.data?.productTypeCreate.errors || []
-                    []
+                  }
-                  )}
                   pageTitle={intl.formatMessage({
                     defaultMessage: "Create Product Type",
                     description: "header",

src/productTypes/views/ProductTypeUpdate/errors.tsx

@@ -1,19 +1,19 @@
 import React from "react";
 
-import { UserError } from "../../../types";
+import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
 
 interface ProductTypeUpdateErrorsState {
-  addAttributeErrors: UserError[];
+  addAttributeErrors: ProductErrorFragment[];
-  editAttributeErrors: UserError[];
+  editAttributeErrors: ProductErrorFragment[];
-  formErrors: UserError[];
+  formErrors: ProductErrorFragment[];
 }
 interface ProductTypeUpdateErrorsProps {
   children: (props: {
     errors: ProductTypeUpdateErrorsState;
     set: {
-      addAttributeErrors: (errors: UserError[]) => void;
+      addAttributeErrors: (errors: ProductErrorFragment[]) => void;
-      editAttributeErrors: (errors: UserError[]) => void;
+      editAttributeErrors: (errors: ProductErrorFragment[]) => void;
-      formErrors: (errors: UserError[]) => void;
+      formErrors: (errors: ProductErrorFragment[]) => void;
     };
   }) => React.ReactNode;
 }
@@ -32,11 +32,12 @@ export class ProductTypeUpdateErrors extends React.Component<
     return this.props.children({
       errors: this.state,
       set: {
-        addAttributeErrors: (addAttributeErrors: UserError[]) =>
+        addAttributeErrors: (addAttributeErrors: ProductErrorFragment[]) =>
           this.setState({ addAttributeErrors }),
-        editAttributeErrors: (editAttributeErrors: UserError[]) =>
+        editAttributeErrors: (editAttributeErrors: ProductErrorFragment[]) =>
           this.setState({ editAttributeErrors }),
-        formErrors: (formErrors: UserError[]) => this.setState({ formErrors })
+        formErrors: (formErrors: ProductErrorFragment[]) =>
+          this.setState({ formErrors })
       }
     });
   }

src/productTypes/views/ProductTypeUpdate/index.tsx

@@ -319,13 +319,10 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
                               )
                             )}
                             confirmButtonState={assignAttribute.opts.status}
-                            errors={maybe(
+                            errors={
-                              () =>
+                              assignAttribute.opts.data?.attributeAssign
-                                assignAttribute.opts.data.attributeAssign.errors.map(
+                                .errors || []
-                                  err => err.message
+                            }
-                                ),
-                              []
-                            )}
                             loading={result.loading}
                             onClose={closeModal}
                             onSubmit={handleAssignAttribute}

src/storybook/stories/components/AssignAttributeDialog.tsx

@@ -6,7 +6,7 @@ import { fetchMoreProps } from "@saleor/fixtures";
 import AssignAttributeDialog, {
   AssignAttributeDialogProps
 } from "@saleor/productTypes/components/AssignAttributeDialog";
-import { formError } from "@saleor/storybook/misc";
+import { ProductErrorCode } from "@saleor/types/globalTypes";
 import Decorator from "../../Decorator";
 
 const props: AssignAttributeDialogProps = {
@@ -30,5 +30,14 @@ storiesOf("Generics / Assign attributes dialog", module)
     <AssignAttributeDialog {...props} attributes={undefined} loading={true} />
   ))
   .add("errors", () => (
-    <AssignAttributeDialog {...props} errors={[formError("").message]} />
+    <AssignAttributeDialog
+      {...props}
+      errors={[
+        {
+          __typename: "ProductError" as "ProductError",
+          code: ProductErrorCode.INVALID,
+          field: null
+        }
+      ]}
+    />
   ));

src/storybook/stories/productTypes/ProductTypeAttributeEditDialog.tsx

@@ -1,38 +0,0 @@
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import { formError } from "@saleor/storybook/misc";
-import ProductTypeAttributeEditDialog, {
-  ProductTypeAttributeEditDialogProps
-} from "../../../productTypes/components/ProductTypeAttributeEditDialog";
-import { attributes } from "../../../productTypes/fixtures";
-import Decorator from "../../Decorator";
-
-const attribute = attributes[0];
-
-const props: ProductTypeAttributeEditDialogProps = {
-  disabled: false,
-  errors: [],
-  name: attribute.name,
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  opened: true,
-  title: "Add Attribute",
-  values: attribute.values.map(value => ({
-    label: value.name,
-    value: value.id
-  }))
-};
-
-storiesOf("Product types / Edit attribute", module)
-  .addDecorator(Decorator)
-  .add("default", () => <ProductTypeAttributeEditDialog {...props} />)
-  .add("loading", () => (
-    <ProductTypeAttributeEditDialog {...props} disabled={true} />
-  ))
-  .add("form errors", () => (
-    <ProductTypeAttributeEditDialog
-      {...props}
-      errors={["name", "values"].map(field => formError(field))}
-    />
-  ));

src/storybook/stories/productTypes/ProductTypeCreatePage.tsx

@@ -2,12 +2,11 @@ import { Omit } from "@material-ui/core";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { formError } from "@saleor/storybook/misc";
 import ProductTypeCreatePage, {
   ProductTypeCreatePageProps,
   ProductTypeForm
 } from "../../../productTypes/components/ProductTypeCreatePage";
-import { WeightUnitsEnum } from "../../../types/globalTypes";
+import { WeightUnitsEnum, ProductErrorCode } from "../../../types/globalTypes";
 import Decorator from "../../Decorator";
 
 const props: Omit<ProductTypeCreatePageProps, "classes"> = {
@@ -30,6 +29,10 @@ storiesOf("Views / Product types / Create product type", module)
   .add("form errors", () => (
     <ProductTypeCreatePage
       {...props}
-      errors={(["name"] as Array<keyof ProductTypeForm>).map(formError)}
+      errors={(["name"] as Array<keyof ProductTypeForm>).map(field => ({
+        __typename: "ProductError",
+        code: ProductErrorCode.INVALID,
+        field
+      }))}
     />
   ));

src/storybook/stories/productTypes/ProductTypeDetailsPage.tsx

@@ -3,13 +3,12 @@ import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { listActionsProps } from "@saleor/fixtures";
-import { formError } from "@saleor/storybook/misc";
 import ProductTypeDetailsPage, {
   ProductTypeDetailsPageProps,
   ProductTypeForm
 } from "../../../productTypes/components/ProductTypeDetailsPage";
 import { productType } from "../../../productTypes/fixtures";
-import { WeightUnitsEnum } from "../../../types/globalTypes";
+import { WeightUnitsEnum, ProductErrorCode } from "../../../types/globalTypes";
 import Decorator from "../../Decorator";
 
 const props: Omit<ProductTypeDetailsPageProps, "classes"> = {
@@ -55,6 +54,12 @@ storiesOf("Views / Product types / Product type details", module)
   .add("form errors", () => (
     <ProductTypeDetailsPage
       {...props}
-      errors={(["name"] as Array<keyof ProductTypeForm>).map(formError)}
+      errors={(["name", "weight"] as Array<keyof ProductTypeForm>).map(
+        field => ({
+          __typename: "ProductError",
+          code: ProductErrorCode.INVALID,
+          field
+        })
+      )}
     />
   ));