Merge pull request #4618 from mirumee/fix/bulk-action-event

Fix bulk actions
saleor · Aug 9, 2019 · 26cc2d7 · 26cc2d7
2 parents 1450650 + 9771650
commit 26cc2d7
Show file tree

Hide file tree

Showing 24 changed files with 39 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -48,6 +48,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Refetch attribute list after closing modal - #4615 by @dominik-zeglen
 - Add ability to toggle visible columns in product list - #4608 by @dominik-zeglen 
 - Serialize empty URL as string when creating menu items - #4616 by @maarcingebala
+- Fix bulk actions - #4618 by @dominik-zeglen
 
 ## 2.8.0
 

diff --git a/saleor/static/dashboard-next/attributes/components/AttributeList/AttributeList.tsx b/saleor/static/dashboard-next/attributes/components/AttributeList/AttributeList.tsx
@@ -133,6 +133,7 @@ const AttributeList: React.StatelessComponent<AttributeListProps> = ({
                   <Checkbox
                     checked={isSelected}
                     disabled={disabled}
+                    disableClickPropagation
                     onChange={() => toggle(attribute.id)}
                   />
                 </TableCell>

diff --git a/saleor/static/dashboard-next/categories/components/CategoryList/CategoryList.tsx b/saleor/static/dashboard-next/categories/components/CategoryList/CategoryList.tsx
@@ -151,6 +151,7 @@ const CategoryList = withStyles(styles, { name: "CategoryList" })(
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(category.id)}
                     />
                   </TableCell>

diff --git a/saleor/static/dashboard-next/collections/components/CollectionList/CollectionList.tsx b/saleor/static/dashboard-next/collections/components/CollectionList/CollectionList.tsx
@@ -123,6 +123,7 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(collection.id)}
                     />
                   </TableCell>

diff --git a/...or/static/dashboard-next/collections/components/CollectionProducts/CollectionProducts.tsx b/...or/static/dashboard-next/collections/components/CollectionProducts/CollectionProducts.tsx
@@ -159,6 +159,7 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(product.id)}
                     />
                   </TableCell>

diff --git a/saleor/static/dashboard-next/components/AppLayout/MenuList.tsx b/saleor/static/dashboard-next/components/AppLayout/MenuList.tsx
@@ -225,6 +225,7 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
                 className={classNames(classes.menuListItem, {
                   [classes.menuListItemActive]: isAnyChildActive
                 })}
+                key={menuItem.label}
               >
                 <div
                   className={classNames(classes.menuItemHover, {

diff --git a/saleor/static/dashboard-next/components/AppLayout/MenuNested.tsx b/saleor/static/dashboard-next/components/AppLayout/MenuNested.tsx
@@ -19,15 +19,6 @@ import { IMenuItem } from "./menuStructure";
 
 const styles = (theme: Theme) =>
   createStyles({
-    menuIcon: {
-      "& svg": {
-        height: 32,
-        width: 32
-      },
-      display: "inline-block",
-      position: "relative",
-      top: 8
-    },
     menuListNested: {
       background: theme.palette.background.paper,
       height: "100vh",
@@ -79,6 +70,7 @@ const styles = (theme: Theme) =>
         }
       },
       display: "block",
+      marginBottom: theme.spacing.unit * 2,
       padding: "0px 30px",
       textDecoration: "none"
     },
@@ -94,7 +86,8 @@ const styles = (theme: Theme) =>
     subHeader: {
       borderBottom: "solid 1px #EAEAEA",
       margin: "30px",
-      paddingBottom: 20
+      marginBottom: 39,
+      paddingBottom: 22
     },
     subHeaderDark: {
       borderBottom: "solid 1px #252728"
@@ -188,7 +181,6 @@ const MenuNested = withStyles(styles, { name: "MenuNested" })(
                 onClick={event => closeMenu(item.url, event)}
                 key={item.label}
               >
-                <SVG className={classes.menuIcon} src={item.icon} />
                 <Typography aria-label={item.ariaLabel}>
                   {item.label}
                 </Typography>

diff --git a/saleor/static/dashboard-next/components/Checkbox/Checkbox.tsx b/saleor/static/dashboard-next/components/Checkbox/Checkbox.tsx
@@ -18,7 +18,9 @@ export type CheckboxProps = Omit<
   | "indeterminateIcon"
   | "classes"
   | "onChange"
+  | "onClick"
 > & {
+  disableClickPropagation?: boolean;
   onChange?: (event: React.ChangeEvent<any>) => void;
 };
 
@@ -81,21 +83,31 @@ const Checkbox = withStyles(styles, { name: "Checkbox" })(
     className,
     classes,
     disabled,
+    disableClickPropagation,
     indeterminate,
     onChange,
-    onClick,
     value,
     name,
     ...props
   }: CheckboxProps & WithStyles<typeof styles>) => {
     const inputRef = React.useRef<HTMLInputElement>(null);
+    const handleClick = React.useCallback(
+      disableClickPropagation
+        ? event => {
+            event.stopPropagation();
+            inputRef.current.click();
+          }
+        : () => inputRef.current.click(),
+      []
+    );
+
     return (
       <ButtonBase
         {...props}
         centerRipple
         className={classNames(classes.root, className)}
         disabled={disabled}
-        onClick={() => inputRef.current.click()}
+        onClick={handleClick}
       >
         <input
           className={classNames(classes.box, {

diff --git a/saleor/static/dashboard-next/components/ControlledCheckbox.tsx b/saleor/static/dashboard-next/components/ControlledCheckbox.tsx
@@ -20,7 +20,7 @@ export const ControlledCheckbox: React.StatelessComponent<
       <Checkbox
         checked={checked}
         name={name}
-        onClick={() => onChange({ target: { name, value: !checked } })}
+        disableClickPropagation
         onChange={() => onChange({ target: { name, value: !checked } })}
       />
     }

diff --git a/saleor/static/dashboard-next/components/ProductList/ProductList.tsx b/saleor/static/dashboard-next/components/ProductList/ProductList.tsx
@@ -178,6 +178,7 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
                       <Checkbox
                         checked={isSelected}
                         disabled={disabled}
+                        disableClickPropagation
                         onChange={() => toggle(product.id)}
                       />
                     </TableCell>

diff --git a/saleor/static/dashboard-next/customers/components/CustomerList/CustomerList.tsx b/saleor/static/dashboard-next/customers/components/CustomerList/CustomerList.tsx
@@ -119,6 +119,7 @@ const CustomerList = withStyles(styles, { name: "CustomerList" })(
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(customer.id)}
                     />
                   </TableCell>

diff --git a/saleor/static/dashboard-next/discounts/components/DiscountCategories/DiscountCategories.tsx b/saleor/static/dashboard-next/discounts/components/DiscountCategories/DiscountCategories.tsx
@@ -131,6 +131,7 @@ const DiscountCategories = withStyles(styles, {
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(category.id)}
                     />
                   </TableCell>

diff --git a/...or/static/dashboard-next/discounts/components/DiscountCollections/DiscountCollections.tsx b/...or/static/dashboard-next/discounts/components/DiscountCollections/DiscountCollections.tsx
@@ -128,6 +128,7 @@ const DiscountCollections = withStyles(styles, {
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(collection.id)}
                     />
                   </TableCell>

diff --git a/saleor/static/dashboard-next/discounts/components/DiscountProducts/DiscountProducts.tsx b/saleor/static/dashboard-next/discounts/components/DiscountProducts/DiscountProducts.tsx
@@ -146,6 +146,7 @@ const DiscountProducts = withStyles(styles, {
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(product.id)}
                     />
                   </TableCell>

diff --git a/saleor/static/dashboard-next/discounts/components/SaleList/SaleList.tsx b/saleor/static/dashboard-next/discounts/components/SaleList/SaleList.tsx
@@ -145,6 +145,7 @@ const SaleList = withStyles(styles, {
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(sale.id)}
                     />
                   </TableCell>

diff --git a/saleor/static/dashboard-next/discounts/components/VoucherList/VoucherList.tsx b/saleor/static/dashboard-next/discounts/components/VoucherList/VoucherList.tsx
@@ -170,6 +170,7 @@ const VoucherList = withStyles(styles, {
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(voucher.id)}
                     />
                   </TableCell>

diff --git a/saleor/static/dashboard-next/navigation/components/MenuList/MenuList.tsx b/saleor/static/dashboard-next/navigation/components/MenuList/MenuList.tsx
@@ -115,6 +115,7 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(menu.id)}
                     />
                   </TableCell>

diff --git a/saleor/static/dashboard-next/orders/components/OrderDraftList/OrderDraftList.tsx b/saleor/static/dashboard-next/orders/components/OrderDraftList/OrderDraftList.tsx
@@ -141,6 +141,7 @@ export const OrderDraftList = withStyles(styles, { name: "OrderDraftList" })(
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(order.id)}
                     />
                   </TableCell>

diff --git a/saleor/static/dashboard-next/orders/components/OrderList/OrderList.tsx b/saleor/static/dashboard-next/orders/components/OrderList/OrderList.tsx
@@ -154,6 +154,7 @@ export const OrderList = withStyles(styles, { name: "OrderList" })(
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(order.id)}
                     />
                   </TableCell>

diff --git a/saleor/static/dashboard-next/pages/components/PageList/PageList.tsx b/saleor/static/dashboard-next/pages/components/PageList/PageList.tsx
@@ -117,6 +117,7 @@ const PageList = withStyles(styles, { name: "PageList" })(
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(page.id)}
                     />
                   </TableCell>

diff --git a/...ic/dashboard-next/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx b/...ic/dashboard-next/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
@@ -138,6 +138,7 @@ const ProductTypeAttributes = withStyles(styles, {
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(attribute.id)}
                     />
                   </TableCell>

diff --git a/saleor/static/dashboard-next/productTypes/components/ProductTypeList/ProductTypeList.tsx b/saleor/static/dashboard-next/productTypes/components/ProductTypeList/ProductTypeList.tsx
@@ -117,6 +117,7 @@ const ProductTypeList = withStyles(styles, { name: "ProductTypeList" })(
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(productType.id)}
                     />
                   </TableCell>

diff --git a/saleor/static/dashboard-next/products/components/ProductVariants/ProductVariants.tsx b/saleor/static/dashboard-next/products/components/ProductVariants/ProductVariants.tsx
@@ -148,6 +148,7 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(variant.id)}
                     />
                   </TableCell>

diff --git a/saleor/static/dashboard-next/shipping/components/ShippingZonesList/ShippingZonesList.tsx b/saleor/static/dashboard-next/shipping/components/ShippingZonesList/ShippingZonesList.tsx
@@ -136,6 +136,7 @@ const ShippingZonesList = withStyles(styles, { name: "ShippingZonesList" })(
                     <Checkbox
                       checked={isSelected}
                       disabled={disabled}
+                      disableClickPropagation
                       onChange={() => toggle(shippingZone.id)}
                     />
                   </TableCell>