From 1480a4478c0194620e972907cdfbda281bc36c90 Mon Sep 17 00:00:00 2001 From: Vladimir Romashchenko Date: Tue, 11 Aug 2020 04:03:39 -0400 Subject: [PATCH 01/16] Added fix in changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b23aec6e6..f3e977d50 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ All notable, unreleased changes to this project will be documented in this file. - create Apps - #599 by @AlicjaSzu - Refactor authorization - #624 by @dominik-zeglen - Fix minor bugs - #628 by @dominik-zeglen +- Removed confirm button in MembersErrorDialog - #498 by @eaglesemanation ## 2.10.1 From d0422323ba4c542c7821fac21dc5525828bce73d Mon Sep 17 00:00:00 2001 From: Vladimir Romashchenko Date: Tue, 11 Aug 2020 04:04:16 -0400 Subject: [PATCH 02/16] Added "info" variant for Action Dialog Info messages should not require any kind of confirmation, so I added option to disable ConfirmButton by providing "info" as a variant --- src/components/ActionDialog/ActionDialog.tsx | 32 +++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/src/components/ActionDialog/ActionDialog.tsx b/src/components/ActionDialog/ActionDialog.tsx index e11e6da01..c4b41cfb2 100644 --- a/src/components/ActionDialog/ActionDialog.tsx +++ b/src/components/ActionDialog/ActionDialog.tsx @@ -33,7 +33,7 @@ interface ActionDialogProps extends DialogProps { confirmButtonState: ConfirmButtonTransitionState; maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false; title: string; - variant?: "default" | "delete"; + variant?: "default" | "delete" | "info"; onConfirm(); } @@ -61,20 +61,22 @@ const ActionDialog: React.FC = props => { - - {confirmButtonLabel || - (variant === "delete" - ? intl.formatMessage(buttonMessages.delete) - : intl.formatMessage(buttonMessages.confirm))} - + {variant !== "info" && ( + + {confirmButtonLabel || + (variant === "delete" + ? intl.formatMessage(buttonMessages.delete) + : intl.formatMessage(buttonMessages.confirm))} + + )} ); From 3451d58879af84299e177f79078a5dde3155086e Mon Sep 17 00:00:00 2001 From: Vladimir Romashchenko Date: Tue, 11 Aug 2020 04:10:32 -0400 Subject: [PATCH 03/16] Changed MemberErrorDialog variant to "info" --- .../components/MembersErrorDialog/MembersErrorDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/permissionGroups/components/MembersErrorDialog/MembersErrorDialog.tsx b/src/permissionGroups/components/MembersErrorDialog/MembersErrorDialog.tsx index d92b9bd9c..496f637ae 100644 --- a/src/permissionGroups/components/MembersErrorDialog/MembersErrorDialog.tsx +++ b/src/permissionGroups/components/MembersErrorDialog/MembersErrorDialog.tsx @@ -29,7 +29,7 @@ const MembersErrorDialog: React.FC = ({ defaultMessage: "Unassign users", description: "dialog title" })} - variant="default" + variant="info" > Date: Tue, 11 Aug 2020 20:08:06 -0400 Subject: [PATCH 04/16] Reverted changes to changelog.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f3e977d50..6b68a94ec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,7 +15,7 @@ All notable, unreleased changes to this project will be documented in this file. - create Apps - #599 by @AlicjaSzu - Refactor authorization - #624 by @dominik-zeglen - Fix minor bugs - #628 by @dominik-zeglen -- Removed confirm button in MembersErrorDialog - #498 by @eaglesemanation +- Add navigator button - #635 by @dominik-zeglen ## 2.10.1 From cc2fb0ae4e7be93a8592c247cf11264d418e6237 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 18 Aug 2020 16:09:01 +0200 Subject: [PATCH 05/16] Fix updating product that has no variants (#649) * Fix updating product that has no variants * Update changelog --- CHANGELOG.md | 1 + .../ProductUpdatePage/ProductUpdatePage.tsx | 42 ++++++++++++------- 2 files changed, 27 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 98ed08838..e33100e36 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ All notable, unreleased changes to this project will be documented in this file. - Reset modal state after closing - #644 by @dominik-zeglen - Fix incorrect messages - #643 by @dominik-zeglen - Do not use devserver to run cypress tests - #650 by @dominik-zeglen +- Fix updating product that has no variants - #649 by @dominik-zeglen ## 2.10.1 diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx index 00cd8e1ce..f0efcfd24 100644 --- a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx +++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx @@ -167,23 +167,33 @@ export const ProductUpdatePage: React.FC = ({ const hasVariants = maybe(() => product.productType.hasVariants, false); const handleSubmit = (data: ProductUpdatePageFormData) => { - const dataStocks = stocks.map(stock => stock.id); - const variantStocks = product.variants[0].stocks.map( - stock => stock.warehouse.id - ); - const stockDiff = diff(variantStocks, dataStocks); + if (product.productType.hasVariants) { + onSubmit({ + ...data, + addStocks: [], + attributes, + removeStocks: [], + updateStocks: [] + }); + } else { + const dataStocks = stocks.map(stock => stock.id); + const variantStocks = product.variants[0]?.stocks.map( + stock => stock.warehouse.id + ); + const stockDiff = diff(variantStocks, dataStocks); - onSubmit({ - ...data, - addStocks: stocks.filter(stock => - stockDiff.added.some(addedStock => addedStock === stock.id) - ), - attributes, - removeStocks: stockDiff.removed, - updateStocks: stocks.filter( - stock => !stockDiff.added.some(addedStock => addedStock === stock.id) - ) - }); + onSubmit({ + ...data, + addStocks: stocks.filter(stock => + stockDiff.added.some(addedStock => addedStock === stock.id) + ), + attributes, + removeStocks: stockDiff.removed, + updateStocks: stocks.filter( + stock => !stockDiff.added.some(addedStock => addedStock === stock.id) + ) + }); + } }; return ( From 88168cb157bf7cb405561518927774d843573663 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 17 Aug 2020 13:42:37 +0200 Subject: [PATCH 06/16] wip --- src/components/ControlledCheckbox.tsx | 4 +--- src/icons/Checkbox.tsx | 11 +++++++++++ src/theme.ts | 5 +++++ 3 files changed, 17 insertions(+), 3 deletions(-) create mode 100644 src/icons/Checkbox.tsx diff --git a/src/components/ControlledCheckbox.tsx b/src/components/ControlledCheckbox.tsx index ebace41f9..fd4d57b45 100644 --- a/src/components/ControlledCheckbox.tsx +++ b/src/components/ControlledCheckbox.tsx @@ -1,8 +1,7 @@ +import Checkbox from "@material-ui/core/Checkbox"; import FormControlLabel from "@material-ui/core/FormControlLabel"; import React from "react"; -import Checkbox from "./Checkbox"; - interface ControlledCheckboxProps { className?: string; name: string; @@ -27,7 +26,6 @@ export const ControlledCheckbox: React.FC = ({ checked={checked} disabled={disabled} name={name} - disableClickPropagation onChange={() => onChange({ target: { name, value: !checked } })} /> } diff --git a/src/icons/Checkbox.tsx b/src/icons/Checkbox.tsx new file mode 100644 index 000000000..e9ea53fea --- /dev/null +++ b/src/icons/Checkbox.tsx @@ -0,0 +1,11 @@ +import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; +import React from "react"; + +const ArrowSort = createSvgIcon( + <> + + , + "ArrowSort" +); + +export default ArrowSort; diff --git a/src/theme.ts b/src/theme.ts index bddcd3d94..78398b8f6 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -1,4 +1,5 @@ import Card from "@material-ui/core/Card"; +import Checkbox from "@material-ui/core/Checkbox"; import { createMuiTheme, Theme } from "@material-ui/core/styles"; import { darken, fade } from "@material-ui/core/styles/colorManipulator"; import TextField from "@material-ui/core/TextField"; @@ -562,3 +563,7 @@ Card.defaultProps = { Typography.defaultProps = { component: "div" }; + +Checkbox.defaultProps = { + color: "primary" +}; From 09fd02ddec9c2a545c203554a28cb636d59234c4 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 17 Aug 2020 16:44:40 +0200 Subject: [PATCH 07/16] Update checkboxes to newest design --- src/components/Checkbox/Checkbox.tsx | 131 ++---------------- src/components/TableHead/TableHead.tsx | 22 +-- src/icons/Checkbox.tsx | 15 +- src/icons/CheckboxChecked.tsx | 17 +++ src/icons/CheckboxIndeterminate.tsx | 19 +++ src/misc.ts | 4 +- .../ProductExportDialogInfo.tsx | 3 +- src/theme.ts | 9 +- 8 files changed, 69 insertions(+), 151 deletions(-) create mode 100644 src/icons/CheckboxChecked.tsx create mode 100644 src/icons/CheckboxIndeterminate.tsx diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 529aef513..772800f6b 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -1,136 +1,25 @@ -import ButtonBase from "@material-ui/core/ButtonBase"; -import { CheckboxProps as MuiCheckboxProps } from "@material-ui/core/Checkbox"; -import { makeStyles } from "@material-ui/core/styles"; -import { fade } from "@material-ui/core/styles/colorManipulator"; -import classNames from "classnames"; +import MuiCheckbox, { + CheckboxProps as MuiCheckboxProps +} from "@material-ui/core/Checkbox"; import React from "react"; export type CheckboxProps = Omit< MuiCheckboxProps, - | "checkedIcon" - | "color" - | "icon" - | "indeterminateIcon" - | "classes" - | "onChange" - | "onClick" + "checkedIcon" | "color" | "icon" | "indeterminateIcon" | "classes" | "onClick" > & { disableClickPropagation?: boolean; - onChange?: (event: React.ChangeEvent) => void; }; -const useStyles = makeStyles( - theme => ({ - box: { - "&$checked": { - "&:before": { - background: theme.palette.primary.main, - color: theme.palette.background.paper, - content: '"\\2713"', - fontWeight: "bold", - textAlign: "center" - }, - borderColor: theme.palette.primary.main - }, - "&$disabled": { - borderColor: theme.palette.grey[200] - }, - "&$indeterminate": { - "&:before": { - background: theme.palette.primary.main, - height: 2, - top: 5 - }, - borderColor: theme.palette.primary.main - }, - "&:before": { - background: "rgba(0, 0, 0, 0)", - content: '""', - height: 14, - left: -1, - position: "absolute", - top: -1, - transition: theme.transitions.duration.short + "ms", - width: 14 - }, - - WebkitAppearance: "none", - border: `1px solid ${theme.palette.action.active}`, - boxSizing: "border-box", - cursor: "pointer", - height: 14, - outline: "0", - position: "relative", - userSelect: "none", - width: 14 - }, - checked: {}, - disabled: {}, - indeterminate: {}, - root: { - "&:hover": { - background: fade(theme.palette.primary.main, 0.1) - }, - alignSelf: "start", - borderRadius: "100%", - cursor: "pointer", - display: "flex", - height: 30, - justifyContent: "center", - margin: "5px 9px", - width: 30 - } - }), - { name: "Checkbox" } -); const Checkbox: React.FC = props => { - const { - checked, - className, - - disabled, - disableClickPropagation, - indeterminate, - onChange, - value, - name, - ...rest - } = props; - const classes = useStyles(props); - - const inputRef = React.useRef(null); - const handleClick = React.useCallback( - disableClickPropagation - ? event => { - event.stopPropagation(); - inputRef.current.click(); - } - : () => inputRef.current.click(), - [] - ); + const { disableClickPropagation, ...rest } = props; return ( - - - + onClick={ + disableClickPropagation ? event => event.stopPropagation() : undefined + } + /> ); }; Checkbox.displayName = "Checkbox"; diff --git a/src/components/TableHead/TableHead.tsx b/src/components/TableHead/TableHead.tsx index 1a1d39602..f382fa1c7 100644 --- a/src/components/TableHead/TableHead.tsx +++ b/src/components/TableHead/TableHead.tsx @@ -28,23 +28,6 @@ const useStyles = makeStyles( cell: { padding: 0 }, - checkboxPartialSelect: { - "& input": { - "&:before": { - background: [theme.palette.background.paper, "!important"] as any, - border: `solid 1px ${theme.palette.primary.main}`, - content: "''" - }, - background: theme.palette.background.paper - }, - "&:after": { - background: theme.palette.primary.main, - content: "''", - height: 2, - position: "absolute", - width: 6 - } - }, checkboxSelected: { backgroundColor: fade(theme.palette.primary.main, 0.05) }, @@ -113,10 +96,7 @@ const TableHead: React.FC = props => { })} > selected && selected > 0 - })} + indeterminate={items && items.length > selected && selected > 0} checked={selected === 0 ? false : true} disabled={disabled} onChange={() => toggleAll(items, selected)} diff --git a/src/icons/Checkbox.tsx b/src/icons/Checkbox.tsx index e9ea53fea..174c99378 100644 --- a/src/icons/Checkbox.tsx +++ b/src/icons/Checkbox.tsx @@ -1,11 +1,18 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -const ArrowSort = createSvgIcon( +const Checkbox = createSvgIcon( <> - + , - "ArrowSort" + "Checkbox" ); -export default ArrowSort; +export default Checkbox; diff --git a/src/icons/CheckboxChecked.tsx b/src/icons/CheckboxChecked.tsx new file mode 100644 index 000000000..63170dac3 --- /dev/null +++ b/src/icons/CheckboxChecked.tsx @@ -0,0 +1,17 @@ +import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; +import React from "react"; + +const CheckboxChecked = createSvgIcon( + <> + + + , + "CheckboxChecked" +); + +export default CheckboxChecked; diff --git a/src/icons/CheckboxIndeterminate.tsx b/src/icons/CheckboxIndeterminate.tsx new file mode 100644 index 000000000..8079e9b24 --- /dev/null +++ b/src/icons/CheckboxIndeterminate.tsx @@ -0,0 +1,19 @@ +import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; +import React from "react"; + +const CheckboxIndeterminate = createSvgIcon( + <> + + + , + "CheckboxIndeterminate" +); + +export default CheckboxIndeterminate; diff --git a/src/misc.ts b/src/misc.ts index 933fcc916..6ab1a53d5 100644 --- a/src/misc.ts +++ b/src/misc.ts @@ -306,10 +306,10 @@ export function createHref(url: string) { interface AnyEvent { stopPropagation: () => void; } -export function stopPropagation(cb: () => void) { +export function stopPropagation(cb: (event?: AnyEvent) => void) { return (event: AnyEvent) => { event.stopPropagation(); - cb(); + cb(event); }; } diff --git a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx index 23e60815e..02654101f 100644 --- a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx +++ b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx @@ -1,11 +1,11 @@ import Button from "@material-ui/core/Button"; -import Checkbox from "@material-ui/core/Checkbox"; import CircularProgress from "@material-ui/core/CircularProgress"; import FormControlLabel from "@material-ui/core/FormControlLabel"; import makeStyles from "@material-ui/core/styles/makeStyles"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import Accordion, { AccordionProps } from "@saleor/components/Accordion"; +import Checkbox from "@saleor/components/Checkbox"; import Chip from "@saleor/components/Chip"; import Hr from "@saleor/components/Hr"; import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField"; @@ -85,7 +85,6 @@ const Option: React.FC<{ diff --git a/src/theme.ts b/src/theme.ts index 78398b8f6..7c1b87451 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -4,8 +4,12 @@ import { createMuiTheme, Theme } from "@material-ui/core/styles"; import { darken, fade } from "@material-ui/core/styles/colorManipulator"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; +import { createElement } from "react"; import { IThemeColors } from "./components/Theme/themes"; +import CheckboxIcon from "./icons/Checkbox"; +import CheckboxCheckedIcon from "./icons/CheckboxChecked"; +import CheckboxIndeterminateIcon from "./icons/CheckboxIndeterminate"; const createShadow = (pv, pb, ps, uv, ub, us, av, ab, as) => [ @@ -565,5 +569,8 @@ Typography.defaultProps = { }; Checkbox.defaultProps = { - color: "primary" + checkedIcon: createElement(CheckboxCheckedIcon), + color: "primary", + icon: createElement(CheckboxIcon), + indeterminateIcon: createElement(CheckboxIndeterminateIcon) }; From ff41fb48450f94cbb4873216448329549271cba2 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 17 Aug 2020 16:52:43 +0200 Subject: [PATCH 08/16] Update snapshots --- .../__snapshots__/Stories.test.ts.snap | 22312 ++++++++++++---- 1 file changed, 16579 insertions(+), 5733 deletions(-) diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index b7a93b524..085d7b826 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -1329,18 +1329,43 @@ exports[`Storyshots Generics / Checkbox checked 1`] = `
- + + + + +
@@ -1357,20 +1382,39 @@ exports[`Storyshots Generics / Checkbox disabled 1`] = `
- + + + + +
@@ -1388,18 +1432,37 @@ exports[`Storyshots Generics / Checkbox interactive 1`] = ` class="MuiCardContent-root-id" >
- + + + + +
@@ -1417,18 +1480,37 @@ exports[`Storyshots Generics / Checkbox unchecked 1`] = `
- + + + + +
@@ -1445,18 +1527,44 @@ exports[`Storyshots Generics / Checkbox undeterminate 1`] = `
- + + + + +
@@ -1899,17 +2007,42 @@ exports[`Storyshots Generics / Filter default 1`] = `