Merge branch 'master' into add/order-filter-fields

CHANGELOG.md

@@ -29,6 +29,8 @@ 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
+- Fix column picker errors - #393 by @dominik-zeglen
 - Improve order filters - #396 by @dominik-zeglen
 
 ## 2.0.0

Dockerfile.dev

@@ -0,0 +1,15 @@
+FROM node:10
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+ARG APP_MOUNT_URI
+ARG API_URI
+ARG STATIC_URL
+ENV API_URI ${API_URI:-http://localhost:8000/graphql/}
+ENV APP_MOUNT_URI ${APP_MOUNT_URI:-/dashboard/}
+ENV STATIC_URL ${STATIC_URL:-/dashboard/}
+
+EXPOSE 9000
+CMD npm start -- --host 0.0.0.0

README.md

@@ -35,6 +35,24 @@ Enter the project directory:
 $ cd saleor-dashboard
 ```
 
+#### Using stable release
+
+To use the official stable release, checkout to a release tag:
+
+```
+$ git checkout v2.0.0
+```
+
+See the list of all releases here: https://github.com/mirumee/saleor-dashboard/releases/
+
+#### Using development version
+
+If you want to use the latest development version, checkout to the `master` branch:
+
+```
+$ git checkout master
+```
+
 Install NPM dependencies:
 
 ```

src/components/ColumnPicker/ColumnPicker.tsx

@@ -77,6 +77,7 @@ const ColumnPicker: React.FC<ColumnPickerProps> = props => {
   };
 
   return (
+    <ClickAwayListener onClickAway={() => setExpansionState(false)}>
       <div ref={anchor} className={className}>
         <ColumnPickerButton
           active={isExpanded}
@@ -97,10 +98,6 @@ const ColumnPicker: React.FC<ColumnPickerProps> = props => {
                 transformOrigin:
                   placement === "bottom" ? "right bottom" : "right top"
               }}
-          >
-            <ClickAwayListener
-              onClickAway={() => setExpansionState(false)}
-              mouseEvent="onClick"
             >
               <ColumnPickerContent
                 columns={columns}
@@ -114,11 +111,11 @@ const ColumnPicker: React.FC<ColumnPickerProps> = props => {
                 onReset={handleReset}
                 onSave={handleSave}
               />
-            </ClickAwayListener>
             </Grow>
           )}
         </Popper>
       </div>
+    </ClickAwayListener>
   );
 };
 

src/components/ColumnPicker/ColumnPickerContent.tsx

@@ -137,6 +137,7 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
                   name={column.value}
                   label={column.label}
                   onChange={() => onColumnToggle(column.value)}
+                  key={column.value}
                 />
               ))}
               {loading && (
@@ -160,6 +161,7 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
                 name={column.value}
                 label={column.label}
                 onChange={() => onColumnToggle(column.value)}
+                key={column.value}
               />
             ))}
           </div>

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(
+              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)}
+    />
   ));