diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml new file mode 100644 index 000000000..604b8ce84 --- /dev/null +++ b/.github/workflows/codeql-analysis.yml @@ -0,0 +1,54 @@ +name: "CodeQL" + +on: + push: + branches: [master, ] + pull_request: + # The branches below must be a subset of the branches above + branches: [master] + schedule: + - cron: '0 10 * * 5' + +jobs: + analyze: + name: Analyze + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v2 + with: + # We must fetch at least the immediate parents so that if this is + # a pull request then we can checkout the head. + fetch-depth: 2 + + # If this run was triggered by a pull request event, then checkout + # the head of the pull request instead of the merge commit. + - run: git checkout HEAD^2 + if: ${{ github.event_name == 'pull_request' }} + + # Initializes the CodeQL tools for scanning. + - name: Initialize CodeQL + uses: github/codeql-action/init@v1 + # Override language selection by uncommenting this and choosing your languages + # with: + # languages: go, javascript, csharp, python, cpp, java + + # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). + # If this step fails, then you should remove it and run the build manually (see below) + - name: Autobuild + uses: github/codeql-action/autobuild@v1 + + # ℹī¸ Command-line programs to run using the OS shell. + # 📚 https://git.io/JvXDl + + # ✏ī¸ If the Autobuild fails above, remove it and uncomment the following three lines + # and modify them (or add more) to build your code if your project + # uses a compiled language + + #- run: | + # make bootstrap + # make release + + - name: Perform CodeQL Analysis + uses: github/codeql-action/analyze@v1 diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 52f3bd4bd..e01508e62 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -79,7 +79,10 @@ jobs: - name: Cypress run uses: cypress-io/github-action@v2 env: - API_URI: https://pwa.demo.saleor.rocks/graphql/ + API_URI: ${{ secrets.API_URI }} + APP_MOUNT_URI: ${{ secrets.APP_MOUNT_URI }} + CYPRESS_USER_NAME: ${{ secrets.CYPRESS_USER_NAME }} + CYPRESS_USER_PASSWORD: ${{ secrets.CYPRESS_USER_PASSWORD }} with: build: npm run build start: npx http-server -a localhost -p 9000 build/dashboard diff --git a/CHANGELOG.md b/CHANGELOG.md index 0492b0d2d..346aa6dfa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,10 @@ 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 +- Update checkbox design - #651 by @dominik-zeglen +- Add warehouse choice - #646 by @dominik-zeglen +- Fix user management modal actions - #637 by @eaglesemanation - Fix navigator button rendering on safari browser - #656 by @dominik-zeglen ## 2.10.1 diff --git a/cypress/elements/account/login-selectors.js b/cypress/elements/account/login-selectors.js new file mode 100644 index 000000000..884b83dbd --- /dev/null +++ b/cypress/elements/account/login-selectors.js @@ -0,0 +1,7 @@ +export const LOGIN_SELECTORS = { + emailAddressInput: "input[name='email']", + emailPasswordInput: "input[name='password']", + signInButton: "[data-test=submit]", + warningCredentialMessage: "[data-test=loginErrorMessage]", + welcomePage: "[data-test=welcomeHeader]" +}; diff --git a/cypress/integration/login_form.js b/cypress/integration/login_form.js index d799c6912..812a852a5 100644 --- a/cypress/integration/login_form.js +++ b/cypress/integration/login_form.js @@ -1,3 +1,5 @@ +import { LOGIN_SELECTORS } from "../elements/account/login-selectors"; + // describe("User authorization", () => { beforeEach(() => { @@ -7,14 +9,19 @@ describe("User authorization", () => { describe("Login", () => { it("should successfully log in an user", () => { cy.visit("/"); - cy.loginUser("admin@example.com", "admin"); - cy.get("[data-test=welcomeHeader]").contains("Hello there"); + cy.loginUser(); + cy.get(LOGIN_SELECTORS.welcomePage); }); it("should fail for wrong password", () => { - cy.visit("/"); - cy.loginUser("admin@example.com", "wrong-password"); - cy.get("[data-test=loginErrorMessage]"); + cy.visit("/") + .get(LOGIN_SELECTORS.emailAddressInput) + .type("admin@example.com") + .get(LOGIN_SELECTORS.emailPasswordInput) + .type("wrong-password") + .get(LOGIN_SELECTORS.signInButton) + .click() + .get(LOGIN_SELECTORS.warningCredentialMessage); }); }); @@ -24,7 +31,7 @@ describe("User authorization", () => { win.sessionStorage.clear(); }); cy.visit("/"); - cy.loginUser("admin@example.com", "admin"); + cy.loginUser(); cy.get("[data-test=userMenu]") .click() .get("[data-test=accountSettingsButton]") diff --git a/cypress/integration/warehouse.js b/cypress/integration/warehouse.js index 94bc2a771..7ed06c295 100644 --- a/cypress/integration/warehouse.js +++ b/cypress/integration/warehouse.js @@ -2,22 +2,19 @@ describe("Warehouse settings", () => { beforeEach(() => { cy.clearSessionData(); - cy.loginUser("admin@example.com", "admin"); - - // Wait for log in - cy.get("[data-test=welcomeHeader]").contains("Hello there"); }); - it("Warehouse section visible in the configuration", () => { + xit("Warehouse section visible in the configuration", () => { cy.visit("/configuration/") + .loginUser() .get("[data-testid=warehouses][data-test=settingsSubsection]") .click(); cy.location("pathname").should("eq", "/warehouses/"); }); - it("Editing warehouse is available", () => { + xit("Editing warehouse is available", () => { cy.visit(`/warehouses`) - .get("[data-testid=defaultwarehouse]") + .loginUser() .get("[data-test=editButton]") .first() .click() diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js new file mode 100644 index 000000000..d72976627 --- /dev/null +++ b/cypress/plugins/index.js @@ -0,0 +1,21 @@ +// / +// *********************************************************** +// This example plugins/index.js can be used to load plugins +// +// You can change the location of this file or turn off loading +// the plugins file with the 'pluginsFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/plugins-guide +// *********************************************************** + +// This function is called when a project is opened or re-opened (e.g. due to +// the project's config changing) + +/** + * @type {Cypress.PluginConfig} + */ +module.exports = (on, config) => { + // `on` is used to hook into various events Cypress emits + // `config` is the resolved Cypress config +}; diff --git a/cypress/support/index.js b/cypress/support/index.js index 6d2a8111f..531b8aab9 100644 --- a/cypress/support/index.js +++ b/cypress/support/index.js @@ -1,12 +1,4 @@ -Cypress.Commands.add("loginUser", (email, password) => - cy - .get("input[name='email']") - .type(email) - .get("input[name='password']") - .type(password) - .get("[data-test=submit]") - .click() -); +import "./user"; Cypress.Commands.add("clearSessionData", () => { // Because of known cypress bug, not all local storage data are cleared. diff --git a/cypress/support/user/index.js b/cypress/support/user/index.js new file mode 100644 index 000000000..4889d7d41 --- /dev/null +++ b/cypress/support/user/index.js @@ -0,0 +1,11 @@ +import { LOGIN_SELECTORS } from "../../elements/account/login-selectors"; + +Cypress.Commands.add("loginUser", () => + cy + .get(LOGIN_SELECTORS.emailAddressInput) + .type(Cypress.env("USER_NAME")) + .get(LOGIN_SELECTORS.emailPasswordInput) + .type(Cypress.env("USER_PASSWORD"), { log: false }) + .get(LOGIN_SELECTORS.signInButton) + .click() +); diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 7a0da553b..f5faf5e7b 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -205,6 +205,62 @@ "context": "vat not included in order price", "string": "does not apply" }, + "productExportFieldCategory": { + "context": "product field", + "string": "Category" + }, + "productExportFieldCollections": { + "context": "product field", + "string": "Collections" + }, + "productExportFieldDescription": { + "context": "product field", + "string": "Description" + }, + "productExportFieldName": { + "context": "product field", + "string": "Name" + }, + "productExportFieldPrice": { + "context": "product field", + "string": "Cost Price" + }, + "productExportFieldProductImages": { + "context": "product field", + "string": "Product Images" + }, + "productExportFieldProductWeight": { + "context": "product field", + "string": "Export Product Weight" + }, + "productExportFieldTaxes": { + "context": "product field", + "string": "Charge Taxes" + }, + "productExportFieldType": { + "context": "product field", + "string": "Type" + }, + "productExportFieldVariantImages": { + "context": "product field", + "string": "Variant Images" + }, + "productExportFieldVariantPrice": { + "context": "product field", + "string": "Variant Price" + }, + "productExportFieldVariantSku": { + "context": "product field", + "string": "Export Variant SKU" + }, + "productExportFieldVariantWeight": { + "context": "product field", + "string": "Export Variant Weight" + }, + "productExportFieldVisibility": { + "context": "product field", + "string": "Visibility" + }, "productStatusLabel": { "context": "product", "string": "Published" @@ -3928,34 +3984,22 @@ "context": "product name", "string": "Name" }, + "src_dot_products_dot_components_dot_ProductExportDialog_dot_1004476569": { + "context": "option", + "string": "Export stock for all warehouses" + }, "src_dot_products_dot_components_dot_ProductExportDialog_dot_108342258": { "context": "button", "string": "Load More" }, - "src_dot_products_dot_components_dot_ProductExportDialog_dot_1459686496": { - "context": "product field", - "string": "Visibility" - }, "src_dot_products_dot_components_dot_ProductExportDialog_dot_1547327218": { "context": "there are more elements of list that are hidden", "string": "and {number} more" }, - "src_dot_products_dot_components_dot_ProductExportDialog_dot_1755013298": { - "context": "product field", - "string": "Category" - }, "src_dot_products_dot_components_dot_ProductExportDialog_dot_1890035856": { "context": "informations about product organization, header", "string": "Product Organization" }, - "src_dot_products_dot_components_dot_ProductExportDialog_dot_1952810469": { - "context": "product field", - "string": "Type" - }, - "src_dot_products_dot_components_dot_ProductExportDialog_dot_2051669917": { - "context": "product field", - "string": "Cost Price" - }, "src_dot_products_dot_components_dot_ProductExportDialog_dot_2119710854": { "context": "informations about product seo, header", "string": "SEO Information" @@ -3964,10 +4008,6 @@ "context": "export selected products to csv file", "string": "Selected products ({number})" }, - "src_dot_products_dot_components_dot_ProductExportDialog_dot_222873645": { - "context": "product field", - "string": "Collections" - }, "src_dot_products_dot_components_dot_ProductExportDialog_dot_2318723509": { "context": "export products to csv file, choice field label", "string": "Export information for:" @@ -3976,6 +4016,10 @@ "context": "export all products to csv file", "string": "All products ({number})" }, + "src_dot_products_dot_components_dot_ProductExportDialog_dot_2474350154": { + "context": "list of warehouses", + "string": "Warehouses A to Z" + }, "src_dot_products_dot_components_dot_ProductExportDialog_dot_2659464408": { "context": "product export to csv file, header", "string": "Information exported" @@ -3988,10 +4032,6 @@ "context": "export products to csv file, button", "string": "export products" }, - "src_dot_products_dot_components_dot_ProductExportDialog_dot_2949617129": { - "context": "product field", - "string": "Product Images" - }, "src_dot_products_dot_components_dot_ProductExportDialog_dot_3012202273": { "context": "export products to csv file, dialog header", "string": "Export Information" @@ -4000,14 +4040,6 @@ "context": "product export to csv file, header", "string": "Export Settings" }, - "src_dot_products_dot_components_dot_ProductExportDialog_dot_3374163063": { - "context": "product field", - "string": "Description" - }, - "src_dot_products_dot_components_dot_ProductExportDialog_dot_3441755345": { - "context": "product field", - "string": "Charge Taxes" - }, "src_dot_products_dot_components_dot_ProductExportDialog_dot_3443345452": { "context": "selectt all options", "string": "Select All" @@ -4016,13 +4048,12 @@ "context": "export products as spreadsheet", "string": "Spreadsheet for Excel, Numbers etc." }, - "src_dot_products_dot_components_dot_ProductExportDialog_dot_3544554440": { - "context": "product field", - "string": "Variant Weight" - }, "src_dot_products_dot_components_dot_ProductExportDialog_dot_3599582104": { "string": "Search Atrtibuttes" }, + "src_dot_products_dot_components_dot_ProductExportDialog_dot_3902059658": { + "string": "Export Product Stock Quantity to CSV" + }, "src_dot_products_dot_components_dot_ProductExportDialog_dot_3919525499": { "context": "informations about product stock, header", "string": "Inventory Information" @@ -4031,10 +4062,6 @@ "context": "export products as csv file", "string": "Plain CSV file" }, - "src_dot_products_dot_components_dot_ProductExportDialog_dot_4160582036": { - "context": "product field", - "string": "Variant Price" - }, "src_dot_products_dot_components_dot_ProductExportDialog_dot_472026385": { "context": "select product informations to be exported", "string": "Information exported:" @@ -4043,14 +4070,6 @@ "context": "input helper text, search attributes", "string": "Search by attribute name" }, - "src_dot_products_dot_components_dot_ProductExportDialog_dot_636461959": { - "context": "product field", - "string": "Name" - }, - "src_dot_products_dot_components_dot_ProductExportDialog_dot_693960049": { - "context": "product field", - "string": "SKU" - }, "src_dot_products_dot_components_dot_ProductExportDialog_dot_700651641": { "context": "export filtered products to csv file", "string": "Current search ({number})" @@ -4059,14 +4078,6 @@ "context": "informations about product prices etc, header", "string": "Financial Information" }, - "src_dot_products_dot_components_dot_ProductExportDialog_dot_746695941": { - "context": "product field", - "string": "Weight" - }, - "src_dot_products_dot_components_dot_ProductExportDialog_dot_897437458": { - "context": "product field", - "string": "Variant Images" - }, "src_dot_products_dot_components_dot_ProductImageNavigation_dot_3060635772": { "context": "section header", "string": "All Photos" diff --git a/src/attributes/views/AttributeList/filters.ts b/src/attributes/views/AttributeList/filters.ts index 74c89a557..ac8a3a961 100644 --- a/src/attributes/views/AttributeList/filters.ts +++ b/src/attributes/views/AttributeList/filters.ts @@ -17,7 +17,7 @@ import { AttributeListUrlQueryParams } from "../../urls"; -export const PRODUCT_FILTERS_KEY = "productFilters"; +export const ATTRIBUTE_FILTERS_KEY = "attributeFilters"; export function getFilterOpts( params: AttributeListUrlFilters @@ -130,7 +130,7 @@ export const { deleteFilterTab, getFilterTabs, saveFilterTab -} = createFilterTabUtils(PRODUCT_FILTERS_KEY); +} = createFilterTabUtils(ATTRIBUTE_FILTERS_KEY); export const { areFiltersApplied, getActiveFilters } = createFilterUtils< AttributeListUrlQueryParams, diff --git a/src/auth/errors.ts b/src/auth/errors.ts index 4ced5f7a0..092f745d2 100644 --- a/src/auth/errors.ts +++ b/src/auth/errors.ts @@ -8,7 +8,14 @@ export enum JWTError { } export function isJwtError(error: GraphQLError): boolean { - return !!findValueInEnum(error.extensions.exception.code, JWTError); + let jwtError: boolean; + try { + jwtError = !!findValueInEnum(error.extensions.exception.code, JWTError); + } catch (e) { + jwtError = false; + } + + return jwtError; } export function isTokenExpired(error: GraphQLError): boolean { 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))} + + )} ); 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/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/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 new file mode 100644 index 000000000..174c99378 --- /dev/null +++ b/src/icons/Checkbox.tsx @@ -0,0 +1,18 @@ +import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; +import React from "react"; + +const Checkbox = createSvgIcon( + <> + + , + "Checkbox" +); + +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/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" > > { const initialForm: ExportProductsInput = { exportInfo: { attributes: [], - fields: [] + fields: [], + warehouses: [] }, fileType: FileTypesEnum.CSV, scope: ExportScope.ALL @@ -78,6 +81,7 @@ export interface ProductExportDialogProps extends DialogProps, FetchMoreProps { errors: ExportErrorFragment[]; productQuantity: ProductQuantity; selectedProducts: number; + warehouses: WarehouseList_warehouses_edges_node[]; onFetch: (query: string) => void; onSubmit: (data: ExportProductsInput) => void; } @@ -91,6 +95,7 @@ const ProductExportDialog: React.FC = ({ onSubmit, open, selectedProducts, + warehouses, ...fetchMoreProps }) => { const [step, { next, prev, set: setStep }] = useWizard( @@ -114,6 +119,7 @@ const ProductExportDialog: React.FC = ({ }); const attributeChoices = mapNodeToChoice(attributes); + const warehouseChoices = mapNodeToChoice(warehouses); const handleAttributeSelect: FormChange = event => { const id = event.target.name.substr(attributeNamePrefix.length); @@ -135,6 +141,35 @@ const ProductExportDialog: React.FC = ({ ); }; + const handleWarehouseSelect: FormChange = event => + change({ + target: { + name: "exportInfo", + value: { + ...data.exportInfo, + warehouses: toggle( + event.target.name.substr(warehouseNamePrefix.length), + data.exportInfo.warehouses, + (a, b) => a === b + ) + } + } + }); + + const handleToggleAllWarehouses: FormChange = () => + change({ + target: { + name: "exportInfo", + value: { + ...data.exportInfo, + warehouses: + data.exportInfo.warehouses.length === warehouses.length + ? [] + : warehouses.map(warehouse => warehouse.id) + } + } + }); + return ( <> @@ -156,7 +191,10 @@ const ProductExportDialog: React.FC = ({ data={data} selectedAttributes={selectedAttributes} onAttrtibuteSelect={handleAttributeSelect} + onWarehouseSelect={handleWarehouseSelect} onChange={change} + warehouses={warehouseChoices} + onSelectAllWarehouses={handleToggleAllWarehouses} {...fetchMoreProps} /> )} diff --git a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx index 23e60815e..c1cae4bb8 100644 --- a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx +++ b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx @@ -1,15 +1,15 @@ 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"; -import { ChangeEvent } from "@saleor/hooks/useForm"; +import { ChangeEvent, FormChange } from "@saleor/hooks/useForm"; import useSearchQuery from "@saleor/hooks/useSearchQuery"; import { sectionNames } from "@saleor/intl"; import { FetchMoreProps } from "@saleor/types"; @@ -22,9 +22,18 @@ import React from "react"; import { useIntl } from "react-intl"; import { FormattedMessage } from "react-intl"; +import useProductExportFieldMessages from "./messages"; + export const attributeNamePrefix = "attribute-"; +export const warehouseNamePrefix = "warehouse-"; const maxChips = 4; +const inventoryFields = [ + ProductFieldEnum.PRODUCT_WEIGHT, + ProductFieldEnum.VARIANT_SKU, + ProductFieldEnum.VARIANT_WEIGHT +]; + const useStyles = makeStyles( theme => ({ accordion: { @@ -45,12 +54,23 @@ const useStyles = makeStyles( marginBottom: theme.spacing(3), marginTop: theme.spacing(3) }, + hrWarehouses: { + marginBottom: theme.spacing(3), + marginTop: theme.spacing(1) + }, label: { "&&": { overflow: "visible" }, + "&:first-of-type": { + paddingTop: 0 + }, + "&:not(:last-of-type)": { + borderBottom: `1px solid ${theme.palette.divider}` + }, justifyContent: "space-between", margin: theme.spacing(0), + padding: theme.spacing(1, 0), width: "100%" }, loadMoreContainer: { @@ -62,8 +82,14 @@ const useStyles = makeStyles( display: "inline-block", marginBottom: theme.spacing() }, + optionLabel: { + marginLeft: 0 + }, quickPeekContainer: { marginBottom: theme.spacing(-1) + }, + warehousesLabel: { + marginBottom: theme.spacing(2) } }), { @@ -80,12 +106,14 @@ const Option: React.FC<{ return ( @@ -104,66 +132,7 @@ const FieldAccordion: React.FC void; }> = ({ data, fields, onChange, onToggleAll, ...props }) => { const classes = useStyles({}); - const intl = useIntl(); - - const fieldNames: Record = { - [ProductFieldEnum.CATEGORY]: intl.formatMessage({ - defaultMessage: "Category", - description: "product field" - }), - [ProductFieldEnum.CHARGE_TAXES]: intl.formatMessage({ - defaultMessage: "Charge Taxes", - description: "product field" - }), - [ProductFieldEnum.COLLECTIONS]: intl.formatMessage({ - defaultMessage: "Collections", - description: "product field" - }), - [ProductFieldEnum.COST_PRICE]: intl.formatMessage({ - defaultMessage: "Cost Price", - description: "product field" - }), - [ProductFieldEnum.DESCRIPTION]: intl.formatMessage({ - defaultMessage: "Description", - description: "product field" - }), - [ProductFieldEnum.NAME]: intl.formatMessage({ - defaultMessage: "Name", - description: "product field" - }), - [ProductFieldEnum.PRODUCT_IMAGES]: intl.formatMessage({ - defaultMessage: "Product Images", - description: "product field" - }), - [ProductFieldEnum.PRODUCT_TYPE]: intl.formatMessage({ - defaultMessage: "Type", - description: "product field" - }), - [ProductFieldEnum.PRODUCT_WEIGHT]: intl.formatMessage({ - defaultMessage: "Weight", - description: "product field" - }), - [ProductFieldEnum.VARIANT_IMAGES]: intl.formatMessage({ - defaultMessage: "Variant Images", - description: "product field" - }), - [ProductFieldEnum.VARIANT_PRICE]: intl.formatMessage({ - defaultMessage: "Variant Price", - description: "product field" - }), - [ProductFieldEnum.VARIANT_SKU]: intl.formatMessage({ - defaultMessage: "SKU", - description: "product field" - }), - [ProductFieldEnum.VARIANT_WEIGHT]: intl.formatMessage({ - defaultMessage: "Variant Weight", - description: "product field" - }), - [ProductFieldEnum.VISIBLE]: intl.formatMessage({ - defaultMessage: "Visibility", - description: "product field" - }) - }; + const getFieldLabel = useProductExportFieldMessages(); const selectedAll = fields.every(field => data.exportInfo.fields.includes(field) @@ -181,7 +150,7 @@ const FieldAccordion: React.FC ( onChange({ target: { @@ -226,7 +195,7 @@ const FieldAccordion: React.FC - {fieldNames[field]} + {getFieldLabel(field)} ))} @@ -235,11 +204,14 @@ const FieldAccordion: React.FC void; - onChange: (event: ChangeEvent) => void; + onAttrtibuteSelect: FormChange; + onWarehouseSelect: FormChange; + onChange: FormChange; onFetch: (query: string) => void; + onSelectAllWarehouses: FormChange; } const ProductExportDialogInfo: React.FC = ({ @@ -248,14 +220,18 @@ const ProductExportDialogInfo: React.FC = ({ hasMore, selectedAttributes, loading, + warehouses, onAttrtibuteSelect, + onWarehouseSelect, onChange, onFetch, - onFetchMore + onFetchMore, + onSelectAllWarehouses }) => { const classes = useStyles({}); const intl = useIntl(); const [query, onQueryChange] = useSearchQuery(onFetch); + const getFieldLabel = useProductExportFieldMessages(); const handleFieldChange = (event: ChangeEvent) => onChange({ @@ -290,6 +266,12 @@ const ProductExportDialogInfo: React.FC = ({ } }); + const selectedInventoryFields = data.exportInfo.fields.filter(field => + inventoryFields.includes(field) + ); + const selectedAllInventoryFields = + selectedInventoryFields.length === inventoryFields.length; + return ( <> @@ -410,22 +392,134 @@ const ProductExportDialogInfo: React.FC = ({ onToggleAll={handleToggleAllFields} data-test="financial" /> - 0 || + selectedInventoryFields.length > 0) && ( +
+ {selectedInventoryFields.slice(0, maxChips).map(field => ( + + onChange({ + target: { + name: field, + value: false + } + }) + } + /> + ))} + {data.exportInfo.warehouses + .slice(0, maxChips - selectedInventoryFields.length) + .map(warehouseId => ( + warehouse.value === warehouseId + ).label + } + onClose={() => + onWarehouseSelect({ + target: { + name: warehouseNamePrefix + warehouseId, + value: undefined + } + }) + } + /> + ))} + {data.exportInfo.warehouses.length + + selectedInventoryFields.length > + maxChips && ( + + + + )} +
+ ) + } data-test="inventory" - /> + > +
+ + {inventoryFields.map(field => ( + + ))} +
+
+ + + +
+ +
+
+ + + + {warehouses.map(warehouse => ( + + ))} + messages[field]; +} + +export default useProductExportFieldMessages; 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 ( diff --git a/src/products/views/ProductList/ProductList.tsx b/src/products/views/ProductList/ProductList.tsx index 8e9089ed3..0f55ed6c0 100644 --- a/src/products/views/ProductList/ProductList.tsx +++ b/src/products/views/ProductList/ProductList.tsx @@ -39,6 +39,7 @@ import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; import { getSortUrlVariables } from "@saleor/utils/sort"; +import { useWarehouseList } from "@saleor/warehouses/queries"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -124,6 +125,11 @@ export const ProductList: React.FC = ({ params }) => { first: 10 } }); + const warehouses = useWarehouseList({ + variables: { + first: 100 + } + }); React.useEffect( () => @@ -551,6 +557,11 @@ export const ProductList: React.FC = ({ params }) => { filter: data?.products.totalCount }} selectedProducts={listElements.length} + warehouses={ + warehouses.data?.warehouses.edges.map( + edge => edge.node + ) || [] + } onClose={closeModal} onSubmit={data => exportProducts({ diff --git a/src/staff/components/StaffProperties/StaffProperties.tsx b/src/staff/components/StaffProperties/StaffProperties.tsx index 1fa153f4d..1a2b10f63 100644 --- a/src/staff/components/StaffProperties/StaffProperties.tsx +++ b/src/staff/components/StaffProperties/StaffProperties.tsx @@ -35,7 +35,7 @@ const useStyles = makeStyles( width: 120 }, avatarDefault: { - "& p": { + "& div": { color: "#fff", fontSize: 35, fontWeight: "bold", 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`] = `