diff --git a/CHANGELOG.md b/CHANGELOG.md index 441a948ba..8859d3552 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,6 +29,7 @@ All notable, unreleased changes to this project will be documented in this file. - Add filtering to views - #361 by @dominik-zeglen - Do not render password change if authenticating - #378 by @dominik-zeglen - Fix crash when one product is selected - #391 by @dominik-zeglen +- Improve product update form error handling - #392 by @dominik-zeglen ## 2.0.0 diff --git a/src/components/VisibilityCard/VisibilityCard.tsx b/src/components/VisibilityCard/VisibilityCard.tsx index 6bca5b70d..061d00a66 100644 --- a/src/components/VisibilityCard/VisibilityCard.tsx +++ b/src/components/VisibilityCard/VisibilityCard.tsx @@ -8,7 +8,9 @@ import { useIntl } from "react-intl"; import CardTitle from "@saleor/components/CardTitle"; import RadioSwitchField from "@saleor/components/RadioSwitchField"; +import { FormErrors } from "@saleor/types"; import { DateContext } from "../Date/DateContext"; +import FormSpacer from "../FormSpacer"; const useStyles = makeStyles( theme => ({ @@ -50,7 +52,7 @@ interface VisibilityCardProps { isPublished: boolean; publicationDate: string; }; - errors: { [key: string]: string }; + errors: FormErrors<"isPublished" | "publicationDate">; disabled?: boolean; hiddenMessage: string; onChange: (event: React.ChangeEvent) => void; @@ -99,6 +101,7 @@ export const VisibilityCard: React.FC = props => {

@@ -157,6 +160,12 @@ export const VisibilityCard: React.FC = props => { )} )} + {errors.isPublished && ( + <> + + {errors.isPublished} + + )}

{children}
 diff --git a/src/products/views/ProductUpdate/ProductUpdate.tsx b/src/products/views/ProductUpdate/ProductUpdate.tsx index d1ca3dab0..cda0d29b6 100644 --- a/src/products/views/ProductUpdate/ProductUpdate.tsx +++ b/src/products/views/ProductUpdate/ProductUpdate.tsx @@ -206,10 +206,16 @@ export const ProductUpdate: React.FC = ({ id, params }) => { () => searchCollectionsOpts.data.search.edges, [] ).map(edge => edge.node); - const errors = maybe( - () => updateProduct.opts.data.productUpdate.errors, - [] - ); + const errors = [ + ...maybe( + () => updateProduct.opts.data.productUpdate.errors, + [] + ), + ...maybe( + () => updateSimpleProduct.opts.data.productUpdate.errors, + [] + ) + ]; return ( <> diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 2d8f82911..4490a2db0 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -78300,6 +78300,14 @@ Ctrl + K" > Set publication date +
+
+ Generic form error +
@@ -93637,6 +93645,1808 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
`; +exports[`Storyshots Views / Products / Product edit form errors 1`] = ` +
+
+
+
+
+ Ergonomic Plastic Bacon +
+
+
+
+
+
+
+
+
+ + General Informations + +
+
+
+
+
+
+ +
+ + +
+

+ Generic form error +

+
+
+
+
+
+ Description +
+
+ +
+
+
+
+
+
+ + + bold + + +
+
+
+
+ + + italic + + +
+
+
+
+ + + strikethrough + + +
+
+

+
+ + + h1 + + +
+

+

+
+ + + h2 + + +
+

+

+
+ + + h3 + + +
+

+
+
+ + + blockquote + + +
+
+
    +
  • +
    + + + ul + + +
    +
    • +
+
    +
  1. +
    + + + ol + + +
    +
    2. +
+
+
+ + + link + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Images + +
+ + +
+
+
+
+
+
+
+ + +
+ Drop here to upload +
+
+
+
+
+
+
+
+
+ Id sit dolores adipisci +
+
+
+
+
+ Id sit dolores adipisci +
+
+
+
+
+ Id sit dolores adipisci +
+
+
+
+
+ Id sit dolores adipisci +
+
+
+
+
+ Id sit dolores adipisci +
+
+
+
+
+
+
+
+ + Attributes + +
+
+
+
+
+
+
+
+ 2 Attributes +
+
+ +
+
+
+
+
+ Borders +
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ Legacy +
+
+
+
+
+ + +
+
+
+
+
+
+ Auto Loan Account +
+ +
+
+
+
+
+
+
+
+
+
+ + Pricing + +
+
+
+ +
+
+
+
+
+ +
+ +
+
+ NZD +
+
+ +
+
+
+
+
+
+
+
+ + Variants + +
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + Name + + Status + + SKU +
+ + + Cordoba Oro + +
+ Available +
+ 		+ 87192-94370 +
+ + + silver + +
+ Available +
+ 		+ 69055-15190 +
+
+
+
+
+
+ + Search Engine Preview + +
+ +
+
+
+
+
+
+ Add search engine title and description to make this product easier to find +
+
+
+
+
+
+
+ + Organize Product + +
+
+
+
+
+
+ Product Type +
+
+ Versatile +
+
+
+ Product Type +
+
+ Configurable +
+
+
+
+
+
+ + +

+ Generic form error +

+
+
+
+
+
+
+
+ + +

+ *Optional. Adding product to collection helps users find it. +

+
+
+
+
+
+
+ Winter sale +
+ +
+
+
+
+
+
+
+
+ + Visibility + +
+
+
+
+
+
+
+ + +
+
+
+
+ Generic form error +
+
+
+
+
+
+
+ +
+`; + exports[`Storyshots Views / Products / Product edit no product attributes 1`] = `
+ )) + .add("form errors", () => ( + ).map(formError)} + /> ));