From 35d433f7ca54b550ca8f517935d01ea3d25c2d35 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Fri, 31 Jan 2020 14:48:39 +0100 Subject: [PATCH 1/3] Improve form error handling --- .../VisibilityCard/VisibilityCard.tsx | 11 +++++++++- .../views/ProductUpdate/ProductUpdate.tsx | 14 +++++++++---- .../stories/products/ProductUpdatePage.tsx | 21 +++++++++++++++++++ 3 files changed, 41 insertions(+), 5 deletions(-) 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/stories/products/ProductUpdatePage.tsx b/src/storybook/stories/products/ProductUpdatePage.tsx index 84c5b0952..a3c0b2d74 100644 --- a/src/storybook/stories/products/ProductUpdatePage.tsx +++ b/src/storybook/stories/products/ProductUpdatePage.tsx @@ -8,6 +8,8 @@ import ProductUpdatePage, { ProductUpdatePageProps } from "@saleor/products/components/ProductUpdatePage"; import { product as productFixture } from "@saleor/products/fixtures"; +import { ProductUpdatePageFormData } from "@saleor/products/utils/data"; +import { formError } from "@saleor/storybook/misc"; import Decorator from "../../Decorator"; const product = productFixture(placeholderImage); @@ -83,4 +85,23 @@ storiesOf("Views / Products / Product edit", module) attributes: [] }} /> + )) + .add("form errors", () => ( + ).map(formError)} + /> )); From 7f71269856b89f7dcfc74af38a97e6119f2c34df Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Fri, 31 Jan 2020 14:51:43 +0100 Subject: [PATCH 2/3] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d8ebcf167..09e63e8b6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,7 @@ All notable, unreleased changes to this project will be documented in this file. - Fix variant stock input - #377 by @dominik-zeglen - Add filtering to views - #361 by @dominik-zeglen - Do not render password change if authenticating - #378 by @dominik-zeglen +- Improve product update form error handling - #392 by @dominik-zeglen ## 2.0.0 From d5cb6523fd815cba0398d4fe31c3c111df937fe9 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Fri, 31 Jan 2020 15:01:26 +0100 Subject: [PATCH 3/3] Update snapshots --- .../__snapshots__/Stories.test.ts.snap | 1810 +++++++++++++++++ 1 file changed, 1810 insertions(+) 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`] = `