From c5a25f9cb60bdd9976f440aebdfe18a43ba0ad40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Tue, 28 Feb 2023 13:15:25 +0100 Subject: [PATCH] Remove double submenus from the sidebar (#3218) --- locale/defaultMessages.json | 50 +++++----- package-lock.json | 14 +-- package.json | 2 +- .../Navigator/modes/default/views.ts | 2 +- src/components/Sidebar/menu/ItemGroup.tsx | 93 +++++++++++-------- .../Sidebar/menu/useMenuStructure.tsx | 54 +---------- src/components/Sidebar/menu/utils.ts | 10 +- .../SaleCreatePage/SaleCreatePage.tsx | 4 +- .../components/SaleListPage/SaleListPage.tsx | 16 ++-- src/discounts/views/SaleCreate/SaleCreate.tsx | 15 ++- .../views/SaleDetails/SaleDetails.tsx | 52 +++++------ src/discounts/views/SaleList/SaleList.tsx | 23 ++--- src/intl.ts | 5 + .../components/PageListPage/PageListPage.tsx | 6 +- .../PageListPage/PageListSearchAndFilters.tsx | 21 ++--- src/pages/components/PageListPage/messages.ts | 6 +- src/pages/index.tsx | 2 +- 17 files changed, 176 insertions(+), 199 deletions(-) diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 002b48e53..4a8e436bf 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -39,6 +39,10 @@ "context": "tax class for a product type", "string": "Tax class" }, + "+MJW+8": { + "context": "button", + "string": "Create Discount" + }, "+NUzaQ": { "context": "check to mark this account as active", "string": "User account active" @@ -562,10 +566,6 @@ "context": "CreateVariantTitle manage", "string": "Manage" }, - "2E1xZ0": { - "context": "page header", - "string": "Create Sale" - }, "2FQsYj": { "context": "button", "string": "Clear" @@ -1542,10 +1542,6 @@ "context": "dialog content", "string": "{counter,plural,one{Are you sure you want to unassign this product?} other{Are you sure you want to unassign {displayQuantity} products?}}" }, - "AHRDWt": { - "context": "button", - "string": "Create page" - }, "AJgl5u": { "context": "gift card product message", "string": "gift card product" @@ -2001,6 +1997,10 @@ "DO8+uV": { "string": "Product created" }, + "DOVEZF": { + "context": "button", + "string": "Create content" + }, "DOkfyZ": { "string": "Insufficient permissions" }, @@ -2260,6 +2260,10 @@ "context": "option title", "string": "Prioritize warehouses by sorting order" }, + "FWbv/u": { + "context": "page header", + "string": "Create Discount" + }, "FYfoiF": { "context": "section name", "string": "Allocation strategy" @@ -2812,10 +2816,6 @@ "context": "option", "string": "Export stock for all warehouses" }, - "JHfbXR": { - "context": "button", - "string": "Create Sale" - }, "JI2Xwp": { "context": "dialog title", "string": "Delete attribute" @@ -3198,9 +3198,6 @@ "context": "activate", "string": "Activate" }, - "MSD3A/": { - "string": "Search Sale" - }, "MSItJD": { "string": "You are about to leave the Dashboard. Do you want to continue?" }, @@ -3359,6 +3356,10 @@ "context": "gift card bulk create success dialog content", "string": "We have issued all of your requested gift cards. You can download the list of new gift cards using the button below." }, + "NelCIl": { + "context": "content section name", + "string": "Content" + }, "Nfh9QM": { "context": "checkbox gift cards label description", "string": "when activated non-shippable gift cards will be automatically set as fulfilled and sent to customer" @@ -4274,10 +4275,6 @@ "context": "filters error messages unknown error", "string": "Unknown error occurred" }, - "UW1fLs": { - "context": "search pages placeholder", - "string": "Search Pages" - }, "UaYJJ8": { "string": "Are you sure you want to delete {name} search tab?" }, @@ -4921,10 +4918,6 @@ "context": "time during voucher is active, header", "string": "Active Dates" }, - "Yjhgle": { - "context": "tab name", - "string": "All Sales" - }, "YkOzse": { "context": "used warehouses counter", "string": "{count}/{max} warehouses used" @@ -5372,6 +5365,10 @@ "c8nvms": { "string": "Sales" }, + "c8zJID": { + "context": "tab name", + "string": "All Discounts" + }, "cBHRxx": { "context": "button", "string": "Assign Warehouse" @@ -6457,6 +6454,9 @@ "context": "save filter tab, header", "string": "Save Custom Search" }, + "lit2zF": { + "string": "Search Discounts" + }, "ll2dE6": { "context": "PageTypeDeleteWarningDialog multiple assigned items description", "string": "Are you sure you want to delete selected page types? If you remove them you won’t be able to assign them to created pages." @@ -6677,6 +6677,10 @@ "context": "error message", "string": "Not enough items to fulfill" }, + "nP8iex": { + "context": "search content placeholder", + "string": "Search Content" + }, "nRiOg+": { "string": "Sorry, the page was not found" }, diff --git a/package-lock.json b/package-lock.json index 2b3955d1b..e2a5a8562 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,7 @@ "@material-ui/lab": "^4.0.0-alpha.61", "@material-ui/styles": "^4.11.4", "@reach/auto-id": "^0.16.0", - "@saleor/macaw-ui": "^0.8.0-pre.31", + "@saleor/macaw-ui": "^0.8.0-pre.33", "@saleor/sdk": "^0.4.4", "@sentry/react": "^6.0.0", "@types/faker": "^5.1.6", @@ -6587,9 +6587,9 @@ } }, "node_modules/@saleor/macaw-ui": { - "version": "0.8.0-pre.31", - "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.31.tgz", - "integrity": "sha512-6BtXjF0snDFoj7c9mB2FeHnBPKoN1j0ZJnumqiGvdtzlESz4cgBhMZsbDk8BTQU5+C52PC+FWObDiKC73yjQJQ==", + "version": "0.8.0-pre.33", + "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.33.tgz", + "integrity": "sha512-1ePo+aPJQWox8DJ4JM7QPEtfuz7x6F7jKA772sQgCoHP6t2IHsHnVBxAFaUZRFCR6xlW78WQLTVkLGiFYpbkPg==", "dependencies": { "@floating-ui/react-dom-interactions": "^0.5.0", "clsx": "^1.1.1", @@ -39343,9 +39343,9 @@ } }, "@saleor/macaw-ui": { - "version": "0.8.0-pre.31", - "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.31.tgz", - "integrity": "sha512-6BtXjF0snDFoj7c9mB2FeHnBPKoN1j0ZJnumqiGvdtzlESz4cgBhMZsbDk8BTQU5+C52PC+FWObDiKC73yjQJQ==", + "version": "0.8.0-pre.33", + "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.33.tgz", + "integrity": "sha512-1ePo+aPJQWox8DJ4JM7QPEtfuz7x6F7jKA772sQgCoHP6t2IHsHnVBxAFaUZRFCR6xlW78WQLTVkLGiFYpbkPg==", "requires": { "@floating-ui/react-dom-interactions": "^0.5.0", "clsx": "^1.1.1", diff --git a/package.json b/package.json index c2494a75d..3585eb0d4 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "@material-ui/lab": "^4.0.0-alpha.61", "@material-ui/styles": "^4.11.4", "@reach/auto-id": "^0.16.0", - "@saleor/macaw-ui": "^0.8.0-pre.31", + "@saleor/macaw-ui": "^0.8.0-pre.33", "@saleor/sdk": "^0.4.4", "@sentry/react": "^6.0.0", "@types/faker": "^5.1.6", diff --git a/src/components/Navigator/modes/default/views.ts b/src/components/Navigator/modes/default/views.ts index acdbf1aba..57013642b 100644 --- a/src/components/Navigator/modes/default/views.ts +++ b/src/components/Navigator/modes/default/views.ts @@ -71,7 +71,7 @@ function searchInViews( url: orderListUrl(), }, { - label: intl.formatMessage(sectionNames.pages), + label: intl.formatMessage(sectionNames.content), url: pageListUrl(), }, { diff --git a/src/components/Sidebar/menu/ItemGroup.tsx b/src/components/Sidebar/menu/ItemGroup.tsx index 8ecc55f63..a68d91145 100644 --- a/src/components/Sidebar/menu/ItemGroup.tsx +++ b/src/components/Sidebar/menu/ItemGroup.tsx @@ -1,47 +1,66 @@ -import { Box, List, Text } from "@saleor/macaw-ui/next"; +import { Box, List, sprinkles, Text } from "@saleor/macaw-ui/next"; import React from "react"; +import { Link } from "react-router-dom"; import { MenuItem } from "./Item"; import { SidebarMenuItem } from "./types"; +import { isMenuActive } from "./utils"; interface Props { menuItem: SidebarMenuItem; } -export const ItemGroup: React.FC = ({ menuItem }) => ( - - - - {menuItem.icon} - - {menuItem.label} - - - - - = ({ menuItem }) => { + const hasSubmenuActive = menuItem?.children.some(item => + isMenuActive(location.pathname, item), + ); + const isActive = + isMenuActive(location.pathname, menuItem) && !hasSubmenuActive; + const isExpanded = isActive || hasSubmenuActive; + + return ( + + - {menuItem.children?.map(child => ( - - ))} - - - -); + + + {menuItem.icon} + + {menuItem.label} + + + + + + + {menuItem.children?.map(child => ( + + ))} + + + + ); +}; diff --git a/src/components/Sidebar/menu/useMenuStructure.tsx b/src/components/Sidebar/menu/useMenuStructure.tsx index eaebdb347..a6d92fbdd 100644 --- a/src/components/Sidebar/menu/useMenuStructure.tsx +++ b/src/components/Sidebar/menu/useMenuStructure.tsx @@ -107,13 +107,6 @@ export function useMenuStructure() { }, { children: [ - { - label: intl.formatMessage(sectionNames.products), - id: "products", - url: productListUrl(), - permissions: [PermissionEnum.MANAGE_PRODUCTS], - type: "item", - }, { label: intl.formatMessage(sectionNames.categories), id: "categories", @@ -141,6 +134,7 @@ export function useMenuStructure() { ), ], icon: , + url: productListUrl(), label: intl.formatMessage(commonMessages.products), permissions: [ PermissionEnum.MANAGE_GIFT_CARD, @@ -149,19 +143,8 @@ export function useMenuStructure() { id: "products", type: "itemGroup", }, - { - id: "divider-1", - type: "divider", - }, { children: [ - { - label: intl.formatMessage(sectionNames.orders), - permissions: [PermissionEnum.MANAGE_ORDERS], - id: "orders", - url: orderListUrl(), - type: "item", - }, { label: intl.formatMessage(commonMessages.drafts), permissions: [PermissionEnum.MANAGE_ORDERS], @@ -178,6 +161,7 @@ export function useMenuStructure() { label: intl.formatMessage(sectionNames.orders), permissions: [PermissionEnum.MANAGE_ORDERS], id: "orders", + url: orderListUrl(), type: "itemGroup", }, { @@ -201,15 +185,8 @@ export function useMenuStructure() { url: customerListUrl(), type: !isEmpty(extensions.NAVIGATION_CUSTOMERS) ? "itemGroup" : "item", }, - { children: [ - { - label: intl.formatMessage(sectionNames.sales), - id: "sales", - url: saleListUrl(), - type: "item", - }, { label: intl.formatMessage(sectionNames.vouchers), id: "vouchers", @@ -224,44 +201,26 @@ export function useMenuStructure() { icon: , label: intl.formatMessage(commonMessages.discounts), permissions: [PermissionEnum.MANAGE_DISCOUNTS], + url: saleListUrl(), id: "discounts", type: "itemGroup", }, - { - id: "divider-2", - type: "divider", - }, { children: !isEmpty(extensions.NAVIGATION_PAGES) && [ - { - label: intl.formatMessage(sectionNames.pages), - permissions: [PermissionEnum.MANAGE_PAGES], - id: "pages", - url: pageListPath, - type: "item", - }, ...mapToExtensionsItems( extensions.NAVIGATION_PAGES, appExtensionsHeaderItem, ), ], icon: , - label: intl.formatMessage(sectionNames.pages), + label: intl.formatMessage(sectionNames.content), permissions: [PermissionEnum.MANAGE_PAGES], id: "pages", url: pageListPath, type: !isEmpty(extensions.NAVIGATION_PAGES) ? "itemGroup" : "item", }, - getAppSection(), { children: !isEmpty(extensions.NAVIGATION_TRANSLATIONS) && [ - { - label: intl.formatMessage(sectionNames.translations), - permissions: [PermissionEnum.MANAGE_TRANSLATIONS], - id: "translations", - url: languageListUrl, - type: "item", - }, ...mapToExtensionsItems( extensions.NAVIGATION_TRANSLATIONS, appExtensionsHeaderItem, @@ -274,10 +233,7 @@ export function useMenuStructure() { url: languageListUrl, type: !isEmpty(extensions.NAVIGATION_TRANSLATIONS) ? "itemGroup" : "item", }, - { - id: "divider-3", - type: "divider", - }, + getAppSection(), { icon: , label: intl.formatMessage(sectionNames.configuration), diff --git a/src/components/Sidebar/menu/utils.ts b/src/components/Sidebar/menu/utils.ts index f1e7d6f56..8048f3b80 100644 --- a/src/components/Sidebar/menu/utils.ts +++ b/src/components/Sidebar/menu/utils.ts @@ -31,7 +31,7 @@ export function isMenuActive(location: string, menuItem: SidebarMenuItem) { return false; } - const activeUrl = location.split("?")[0]; + const activeUrl = getPureUrl(location.split("?")[0]); const menuItemUrl = menuItem.url.split("?")[0]; if (isMenuItemExtension(menuItem)) { @@ -51,6 +51,14 @@ export function isMenuActive(location: string, menuItem: SidebarMenuItem) { }); } +const getPureUrl = (url: string) => { + if (url.includes("/dashboard")) { + return url.split("/dashboard")[1]; + } + + return url; +}; + const isMenuItemExtension = (menuItem: SidebarMenuItem) => menuItem.id.startsWith("extension-"); diff --git a/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx b/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx index 92ab19550..679926c48 100644 --- a/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx +++ b/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx @@ -103,8 +103,8 @@ const SaleCreatePage: React.FC = ({ diff --git a/src/discounts/components/SaleListPage/SaleListPage.tsx b/src/discounts/components/SaleListPage/SaleListPage.tsx index e2a972b90..dbdfc1d2e 100644 --- a/src/discounts/components/SaleListPage/SaleListPage.tsx +++ b/src/discounts/components/SaleListPage/SaleListPage.tsx @@ -5,7 +5,7 @@ import FilterBar from "@dashboard/components/FilterBar"; import { ListPageLayout } from "@dashboard/components/Layouts"; import { saleAddUrl, SaleListUrlSortField } from "@dashboard/discounts/urls"; import { SaleFragment } from "@dashboard/graphql"; -import { sectionNames } from "@dashboard/intl"; +import { commonMessages } from "@dashboard/intl"; import { ChannelProps, FilterPageProps, @@ -55,15 +55,15 @@ const SaleListPage: React.FC = ({ return ( - + @@ -71,16 +71,16 @@ const SaleListPage: React.FC = ({ = ({ params }) => { >(navigate, params => saleAddUrl(params), params); const { availableChannels } = useAppChannel(false); - const allChannels: ChannelSaleFormData[] = createSortedSaleData( - availableChannels, - ); + const allChannels: ChannelSaleFormData[] = + createSortedSaleData(availableChannels); const { channelListElements, @@ -68,10 +67,8 @@ export const SaleCreateView: React.FC = ({ params }) => { { formId: SALE_CREATE_FORM_ID }, ); - const [ - updateChannels, - updateChannelsOpts, - ] = useSaleChannelListingUpdateMutation({}); + const [updateChannels, updateChannelsOpts] = + useSaleChannelListingUpdateMutation({}); const [saleCreate, saleCreateOpts] = useSaleCreateMutation({ onCompleted: data => { @@ -100,7 +97,7 @@ export const SaleCreateView: React.FC = ({ params }) => { return ( <> - + {!!allChannels?.length && ( = ({ id, params }) => { SaleUrlQueryParams >(navigate, params => saleUrl(id, params), params); - const allChannels: ChannelSaleData[] = createChannelsDataWithSaleDiscountPrice( - data?.sale, - availableChannels, - ); + const allChannels: ChannelSaleData[] = + createChannelsDataWithSaleDiscountPrice(data?.sale, availableChannels); const saleChannelsChoices = createSortedChannelsDataFromSale(data?.sale); const { @@ -188,30 +186,26 @@ export const SaleDetails: React.FC = ({ id, params }) => { }, }); - const [ - saleCataloguesAdd, - saleCataloguesAddOpts, - ] = useSaleCataloguesAddMutation({ - onCompleted: data => { - if (data.saleCataloguesAdd.errors.length === 0) { - notifySaved(); - closeModal(); - } - }, - }); + const [saleCataloguesAdd, saleCataloguesAddOpts] = + useSaleCataloguesAddMutation({ + onCompleted: data => { + if (data.saleCataloguesAdd.errors.length === 0) { + notifySaved(); + closeModal(); + } + }, + }); - const [ - saleCataloguesRemove, - saleCataloguesRemoveOpts, - ] = useSaleCataloguesRemoveMutation({ - onCompleted: data => { - if (data.saleCataloguesRemove.errors.length === 0) { - notifySaved(); - closeModal(); - reset(); - } - }, - }); + const [saleCataloguesRemove, saleCataloguesRemoveOpts] = + useSaleCataloguesRemoveMutation({ + onCompleted: data => { + if (data.saleCataloguesRemove.errors.length === 0) { + notifySaved(); + closeModal(); + reset(); + } + }, + }); const canOpenBulkActionDialog = maybe(() => params.ids.length > 0); @@ -298,7 +292,7 @@ export const SaleDetails: React.FC = ({ id, params }) => { return ( - + {!!allChannels?.length && ( = ({ params }) => { const currentTab = getFiltersCurrentTab(params, tabs); - const [ - changeFilters, - resetFilters, - handleSearchChange, - ] = createFilterHandlers({ - cleanupFn: reset, - createUrl: saleListUrl, - getFilterQueryParam, - navigate, - params, - }); + const [changeFilters, resetFilters, handleSearchChange] = + createFilterHandlers({ + cleanupFn: reset, + createUrl: saleListUrl, + getFilterQueryParam, + navigate, + params, + }); useEffect(() => { if (!canBeSorted(params.sort, !!selectedChannel)) { @@ -175,7 +172,7 @@ export const SaleList: React.FC = ({ params }) => { return ( - + = ({ return ( <> - + diff --git a/src/pages/components/PageListPage/PageListSearchAndFilters.tsx b/src/pages/components/PageListPage/PageListSearchAndFilters.tsx index 81732798a..ee97c4dec 100644 --- a/src/pages/components/PageListPage/PageListSearchAndFilters.tsx +++ b/src/pages/components/PageListPage/PageListSearchAndFilters.tsx @@ -63,17 +63,14 @@ const PageListSearchAndFilters: React.FC = ({ }, }); - const [ - changeFilters, - resetFilters, - handleSearchChange, - ] = createFilterHandlers({ - createUrl: pageListUrl, - getFilterQueryParam, - navigate, - params, - cleanupFn: reset, - }); + const [changeFilters, resetFilters, handleSearchChange] = + createFilterHandlers({ + createUrl: pageListUrl, + getFilterQueryParam, + navigate, + params, + cleanupFn: reset, + }); const filterStructure = createFilterStructure(intl, filterOpts); @@ -111,7 +108,7 @@ const PageListSearchAndFilters: React.FC = ({ onFilterChange={changeFilters} onSearchChange={handleSearchChange} searchPlaceholder={intl.formatMessage(messages.searchPlaceholder)} - allTabLabel={"All Pages"} + allTabLabel={"All Content"} tabs={tabs.map(({ name }) => name)} currentTab={currentTab} onTabDelete={handleTabDelete} diff --git a/src/pages/components/PageListPage/messages.ts b/src/pages/components/PageListPage/messages.ts index 0335c511d..949c9616c 100644 --- a/src/pages/components/PageListPage/messages.ts +++ b/src/pages/components/PageListPage/messages.ts @@ -2,8 +2,8 @@ import { defineMessages } from "react-intl"; export const pagesListSearchAndFiltersMessages = defineMessages({ searchPlaceholder: { - id: "UW1fLs", - defaultMessage: "Search Pages", - description: "search pages placeholder", + id: "nP8iex", + defaultMessage: "Search Content", + description: "search content placeholder", }, }); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index ea7d7d9f8..c95859747 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -58,7 +58,7 @@ const Component = () => { return ( <> - +