From 0f28c8f4f5253bdf21392ee9815d588b4b3de528 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Tue, 10 Mar 2020 12:38:01 +0100 Subject: [PATCH] Use error codes in product types section --- .../AssignAttributeDialog.tsx | 6 +- .../ProductTypeAttributeEditDialog.tsx | 112 ------------------ .../ProductTypeAttributeEditDialog/index.ts | 2 - .../ProductTypeCreatePage.tsx | 5 +- .../ProductTypeDetails/ProductTypeDetails.tsx | 14 ++- .../ProductTypeDetailsPage.tsx | 6 +- .../ProductTypeShipping.tsx | 18 ++- src/productTypes/mutations.ts | 43 +++---- src/productTypes/types/AssignAttribute.ts | 6 +- .../types/ProductTypeAttributeReorder.ts | 6 +- .../types/ProductTypeBulkDelete.ts | 6 +- src/productTypes/types/ProductTypeCreate.ts | 6 +- src/productTypes/types/ProductTypeDelete.ts | 6 +- src/productTypes/types/ProductTypeUpdate.ts | 6 +- src/productTypes/types/UnassignAttribute.ts | 6 +- src/productTypes/views/ProductTypeCreate.tsx | 7 +- .../views/ProductTypeUpdate/errors.tsx | 21 ++-- .../views/ProductTypeUpdate/index.tsx | 11 +- .../components/AssignAttributeDialog.tsx | 13 +- .../ProductTypeAttributeEditDialog.tsx | 38 ------ .../productTypes/ProductTypeCreatePage.tsx | 9 +- .../productTypes/ProductTypeDetailsPage.tsx | 11 +- 22 files changed, 122 insertions(+), 236 deletions(-) delete mode 100644 src/productTypes/components/ProductTypeAttributeEditDialog/ProductTypeAttributeEditDialog.tsx delete mode 100644 src/productTypes/components/ProductTypeAttributeEditDialog/index.ts delete mode 100644 src/storybook/stories/productTypes/ProductTypeAttributeEditDialog.tsx diff --git a/src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.tsx b/src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.tsx index 96f392455..6398d6d84 100644 --- a/src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.tsx +++ b/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 = ({ {errors.map((error, errorIndex) => ( - {error} + {getProductErrorMessage(error, intl)} ))} diff --git a/src/productTypes/components/ProductTypeAttributeEditDialog/ProductTypeAttributeEditDialog.tsx b/src/productTypes/components/ProductTypeAttributeEditDialog/ProductTypeAttributeEditDialog.tsx deleted file mode 100644 index 6a444d2f8..000000000 --- a/src/productTypes/components/ProductTypeAttributeEditDialog/ProductTypeAttributeEditDialog.tsx +++ /dev/null @@ -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 = ({ - disabled, - errors, - name, - opened, - title, - values, - onClose, - onConfirm -}) => { - const intl = useIntl(); - - const initialForm: FormData = { - name: name || "", - values: values || [] - }; - return ( - -
- {({ change, data }) => ( - <> - {title} - - - - - - - - - - - )} -
- - ); -}; -ProductTypeAttributeEditDialog.displayName = "ProductTypeAttributeEditDialog"; -export default ProductTypeAttributeEditDialog; diff --git a/src/productTypes/components/ProductTypeAttributeEditDialog/index.ts b/src/productTypes/components/ProductTypeAttributeEditDialog/index.ts deleted file mode 100644 index 6344b380f..000000000 --- a/src/productTypes/components/ProductTypeAttributeEditDialog/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from "./ProductTypeAttributeEditDialog"; -export * from "./ProductTypeAttributeEditDialog"; diff --git a/src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx b/src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx index 6616baebd..9d9220f29 100644 --- a/src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx +++ b/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 = ({ disabled={disabled} data={data} defaultWeightUnit={defaultWeightUnit} + errors={errors} onChange={change} /> diff --git a/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx b/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx index 758fd36e6..515e8f2de 100644 --- a/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx +++ b/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 { getFieldError } from "@saleor/utils/errors"; +import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment"; +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) => void; } const ProductTypeDetails: React.FC = props => { const { data, disabled, errors, onChange } = props; - const classes = useStyles(props); + const classes = useStyles(props); const intl = useIntl(); + const formErrors = getFormErrors(["name"], errors); + return ( = props => { = ({ disabled={disabled} data={data} defaultWeightUnit={defaultWeightUnit} + errors={errors} onChange={change} /> diff --git a/src/productTypes/components/ProductTypeShipping/ProductTypeShipping.tsx b/src/productTypes/components/ProductTypeShipping/ProductTypeShipping.tsx index afb146aca..0e5ea818e 100644 --- a/src/productTypes/components/ProductTypeShipping/ProductTypeShipping.tsx +++ b/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) => void; } @@ -22,10 +25,13 @@ const ProductTypeShipping: React.FC = ({ data, defaultWeightUnit, disabled, + errors, onChange }) => { const intl = useIntl(); + const formErrors = getFormErrors(["weight"], errors); + return ( = ({ {data.isShippingRequired && ( (productTypeDeleteMutation); export const productTypeBulkDeleteMutation = gql` + ${productErrorFragment} mutation ProductTypeBulkDelete($ids: [ID]!) { productTypeBulkDelete(ids: $ids) { - errors { - field - message + errors: productErrors { + ...ProductErrorFragment } } } @@ -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 { - field - message + errors: productErrors { + ...ProductErrorFragment } 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 { - field - message + errors: productErrors { + ...ProductErrorFragment } 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 { - field - message + errors: productErrors { + ...ProductErrorFragment } 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 { - field - message + errors: productErrors { + ...ProductErrorFragment } 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 { - field - message + errors: productErrors { + ...ProductErrorFragment } productType { ...ProductTypeDetailsFragment diff --git a/src/productTypes/types/AssignAttribute.ts b/src/productTypes/types/AssignAttribute.ts index 2e9d3fb4a..2f24d922a 100644 --- a/src/productTypes/types/AssignAttribute.ts +++ b/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 { diff --git a/src/productTypes/types/ProductTypeAttributeReorder.ts b/src/productTypes/types/ProductTypeAttributeReorder.ts index 6d4ca443d..7d765230d 100644 --- a/src/productTypes/types/ProductTypeAttributeReorder.ts +++ b/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 { diff --git a/src/productTypes/types/ProductTypeBulkDelete.ts b/src/productTypes/types/ProductTypeBulkDelete.ts index 034d3e909..7727f11a3 100644 --- a/src/productTypes/types/ProductTypeBulkDelete.ts +++ b/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 { diff --git a/src/productTypes/types/ProductTypeCreate.ts b/src/productTypes/types/ProductTypeCreate.ts index 5993bbb02..d95f672f1 100644 --- a/src/productTypes/types/ProductTypeCreate.ts +++ b/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 { diff --git a/src/productTypes/types/ProductTypeDelete.ts b/src/productTypes/types/ProductTypeDelete.ts index ea5c2a1b0..b3e87d735 100644 --- a/src/productTypes/types/ProductTypeDelete.ts +++ b/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 { diff --git a/src/productTypes/types/ProductTypeUpdate.ts b/src/productTypes/types/ProductTypeUpdate.ts index 58c66afe2..bd1156234 100644 --- a/src/productTypes/types/ProductTypeUpdate.ts +++ b/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 { diff --git a/src/productTypes/types/UnassignAttribute.ts b/src/productTypes/types/UnassignAttribute.ts index b042fc6e3..631052cbe 100644 --- a/src/productTypes/types/UnassignAttribute.ts +++ b/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 { diff --git a/src/productTypes/views/ProductTypeCreate.tsx b/src/productTypes/views/ProductTypeCreate.tsx index f116699ca..3355ac13f 100644 --- a/src/productTypes/views/ProductTypeCreate.tsx +++ b/src/productTypes/views/ProductTypeCreate.tsx @@ -57,10 +57,9 @@ export const ProductTypeCreate: React.FC = () => { data.shop.defaultWeightUnit)} disabled={loading} - errors={maybe( - () => createProductTypeOpts.data.productTypeCreate.errors, - [] - )} + errors={ + createProductTypeOpts.data?.productTypeCreate.errors || [] + } pageTitle={intl.formatMessage({ defaultMessage: "Create Product Type", description: "header", diff --git a/src/productTypes/views/ProductTypeUpdate/errors.tsx b/src/productTypes/views/ProductTypeUpdate/errors.tsx index 5e2c83535..4eaa4ab40 100644 --- a/src/productTypes/views/ProductTypeUpdate/errors.tsx +++ b/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[]; - editAttributeErrors: UserError[]; - formErrors: UserError[]; + addAttributeErrors: ProductErrorFragment[]; + editAttributeErrors: ProductErrorFragment[]; + formErrors: ProductErrorFragment[]; } interface ProductTypeUpdateErrorsProps { children: (props: { errors: ProductTypeUpdateErrorsState; set: { - addAttributeErrors: (errors: UserError[]) => void; - editAttributeErrors: (errors: UserError[]) => void; - formErrors: (errors: UserError[]) => void; + addAttributeErrors: (errors: ProductErrorFragment[]) => void; + editAttributeErrors: (errors: ProductErrorFragment[]) => 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 }) } }); } diff --git a/src/productTypes/views/ProductTypeUpdate/index.tsx b/src/productTypes/views/ProductTypeUpdate/index.tsx index 492320261..eaa9f99f2 100644 --- a/src/productTypes/views/ProductTypeUpdate/index.tsx +++ b/src/productTypes/views/ProductTypeUpdate/index.tsx @@ -319,13 +319,10 @@ export const ProductTypeUpdate: React.FC = ({ ) )} confirmButtonState={assignAttribute.opts.status} - errors={maybe( - () => - assignAttribute.opts.data.attributeAssign.errors.map( - err => err.message - ), - [] - )} + errors={ + assignAttribute.opts.data?.attributeAssign + .errors || [] + } loading={result.loading} onClose={closeModal} onSubmit={handleAssignAttribute} diff --git a/src/storybook/stories/components/AssignAttributeDialog.tsx b/src/storybook/stories/components/AssignAttributeDialog.tsx index 9cb0462e5..2d75970fc 100644 --- a/src/storybook/stories/components/AssignAttributeDialog.tsx +++ b/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) )) .add("errors", () => ( - + )); diff --git a/src/storybook/stories/productTypes/ProductTypeAttributeEditDialog.tsx b/src/storybook/stories/productTypes/ProductTypeAttributeEditDialog.tsx deleted file mode 100644 index 8da8e9d68..000000000 --- a/src/storybook/stories/productTypes/ProductTypeAttributeEditDialog.tsx +++ /dev/null @@ -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", () => ) - .add("loading", () => ( - - )) - .add("form errors", () => ( - formError(field))} - /> - )); diff --git a/src/storybook/stories/productTypes/ProductTypeCreatePage.tsx b/src/storybook/stories/productTypes/ProductTypeCreatePage.tsx index e4e2b6ac0..e2cbe7064 100644 --- a/src/storybook/stories/productTypes/ProductTypeCreatePage.tsx +++ b/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 = { @@ -30,6 +29,10 @@ storiesOf("Views / Product types / Create product type", module) .add("form errors", () => ( ).map(formError)} + errors={(["name"] as Array).map(field => ({ + __typename: "ProductError", + code: ProductErrorCode.INVALID, + field + }))} /> )); diff --git a/src/storybook/stories/productTypes/ProductTypeDetailsPage.tsx b/src/storybook/stories/productTypes/ProductTypeDetailsPage.tsx index da2c83493..1a2065ba1 100644 --- a/src/storybook/stories/productTypes/ProductTypeDetailsPage.tsx +++ b/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 = { @@ -55,6 +54,12 @@ storiesOf("Views / Product types / Product type details", module) .add("form errors", () => ( ).map(formError)} + errors={(["name", "weight"] as Array).map( + field => ({ + __typename: "ProductError", + code: ProductErrorCode.INVALID, + field + }) + )} /> ));