Improve form error handling

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<any>) => void;
@@ -99,6 +101,7 @@ export const VisibilityCard: React.FC<VisibilityCardProps> = props => {
       <CardContent>
         <RadioSwitchField
           disabled={disabled}
+          error={!!errors.isPublished}
           firstOptionLabel={
             <>
               <p className={classes.label}>
@@ -157,6 +160,12 @@ export const VisibilityCard: React.FC<VisibilityCardProps> = props => {
             )}
           </>
         )}
+        {errors.isPublished && (
+          <>
+            <FormSpacer />
+            <Typography color="error">{errors.isPublished}</Typography>
+          </>
+        )}
         <div className={classes.children}>{children}</div>
       </CardContent>
     </Card>

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -206,10 +206,16 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ 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 (
                 <>

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", () => (
+    <ProductUpdatePage
+      {...props}
+      errors={([
+        "basePrice",
+        "category",
+        "chargeTaxes",
+        "collections",
+        "description",
+        "isPublished",
+        "name",
+        "publicationDate",
+        "seoDescription",
+        "seoTitle",
+        "sku",
+        "stockQuantity"
+      ] as Array<keyof ProductUpdatePageFormData>).map(formError)}
+    />
   ));