Revert "Basic sidebar version" (#3046)

package-lock.json

@@ -27,7 +27,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.4",
+        "@saleor/macaw-ui": "^0.8.0-pre.1",
         "@saleor/sdk": "^0.4.4",
         "@sentry/react": "^6.0.0",
         "@types/faker": "^5.1.6",
@@ -7235,9 +7235,9 @@
       }
     },
     "node_modules/@saleor/macaw-ui": {
-      "version": "0.8.0-pre.4",
+      "version": "0.8.0-pre.1",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.4.tgz",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.1.tgz",
-      "integrity": "sha512-9x97IhjCxZ5FD0b3pJfNs2U3YEvsnlJWZHXvGZKPztr0XbtkGbMy5EdHazSH/lNeI3g2T9CE9uKONyatiXAvmw==",
+      "integrity": "sha512-zNnLJcm13HMqGJjHmjyoLL/lQ5dIefUbOq/Ws7wxPn1Bh0wwhY/3T+Qc6iG5W9gvIcpTXJojwL7tT31DHQ2KRw==",
       "engines": {
         "node": ">=16 <19"
       },
@@ -44660,9 +44660,9 @@
       }
     },
     "@saleor/macaw-ui": {
-      "version": "0.8.0-pre.4",
+      "version": "0.8.0-pre.1",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.4.tgz",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.1.tgz",
-      "integrity": "sha512-9x97IhjCxZ5FD0b3pJfNs2U3YEvsnlJWZHXvGZKPztr0XbtkGbMy5EdHazSH/lNeI3g2T9CE9uKONyatiXAvmw=="
+      "integrity": "sha512-zNnLJcm13HMqGJjHmjyoLL/lQ5dIefUbOq/Ws7wxPn1Bh0wwhY/3T+Qc6iG5W9gvIcpTXJojwL7tT31DHQ2KRw=="
     },
     "@saleor/sdk": {
       "version": "0.4.4",

package.json

@@ -24,7 +24,6 @@
     "@editorjs/list": "^1.7.0",
     "@editorjs/paragraph": "^2.8.0",
     "@editorjs/quote": "^2.4.0",
-    "@floating-ui/react-dom-interactions": "^0.5.0",
     "@glideapps/glide-data-grid": "^5.0.0",
     "@graphiql/plugin-explorer": "^0.1.12",
     "@graphiql/react": "^0.15.0",
@@ -34,8 +33,9 @@
     "@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.4",
+    "@saleor/macaw-ui": "^0.8.0-pre.1",
     "@saleor/sdk": "^0.4.4",
+    "@floating-ui/react-dom-interactions": "^0.5.0",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",
     "@uiw/react-color-hue": "0.0.34",
@@ -204,7 +204,6 @@
     "husky": "^8.0.0",
     "jest": "^27.5.1",
     "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^27.5.1",
     "jest-file": "^1.0.0",
     "jest-localstorage-mock": "^2.4.3",
     "lint-staged": "^10.5.1",
@@ -214,7 +213,8 @@
     "mochawesome-report-generator": "^6.0.1",
     "prettier": "^2.8.3",
     "setup-polly-jest": "^0.9.1",
-    "ts-jest": "^27.1.5"
+    "ts-jest": "^27.1.5",
+    "jest-environment-jsdom": "^27.5.1"
   },
   "jest": {
     "resetMocks": false,

src/components/Sidebar/NewSidebar.tsx

@@ -1,42 +1,3 @@
-import { useUser } from "@dashboard/auth";
-import { Box, List, sprinkles, Text } from "@saleor/macaw-ui/next";
 import React from "react";
-import { useIntl } from "react-intl";
-import { Link } from "react-router-dom";
 
-import useMenuStructure from "./useMenuStructure";
+export const NewSidebar = () => <div>Work in progress</div>;
-
-export const NewSidebar = () => {
-  const intl = useIntl();
-  const { user } = useUser();
-  const [menuStructure] = useMenuStructure(intl, user);
-
-  return (
-    <Box
-      backgroundColor="subdued"
-      as="aside"
-      padding={5}
-      borderColor="neutralPlain"
-      borderRightWidth={1}
-      borderRightStyle="solid"
-    >
-      <List as="ol">
-        {menuStructure.map(menuItem => (
-          <List.Item borderRadius={3} key={menuItem.id}>
-            <Link
-              to={menuItem.url}
-              className={sprinkles({
-                padding: 4,
-              })}
-            >
-              <Box display="flex" alignItems="center" gap={5}>
-                {menuItem.icon}
-                <Text>{menuItem.label}</Text>
-              </Box>
-            </Link>
-          </List.Item>
-        ))}
-      </List>
-    </Box>
-  );
-};

src/components/Sidebar/useMenuStructure.tsx

@@ -1,292 +0,0 @@
-import { appsListPath } from "@dashboard/apps/urls";
-import {
-  extensionMountPoints,
-  useExtensions,
-} from "@dashboard/apps/useExtensions";
-import { categoryListUrl } from "@dashboard/categories/urls";
-import { collectionListUrl } from "@dashboard/collections/urls";
-import { MARKETPLACE_URL } from "@dashboard/config";
-import { configurationMenuUrl } from "@dashboard/configuration";
-import { getConfigMenuItemsPermissions } from "@dashboard/configuration/utils";
-import { customerListUrl } from "@dashboard/customers/urls";
-import { saleListUrl, voucherListUrl } from "@dashboard/discounts/urls";
-import { giftCardListUrl } from "@dashboard/giftCards/urls";
-import { PermissionEnum, UserFragment } from "@dashboard/graphql";
-import { commonMessages, sectionNames } from "@dashboard/intl";
-import { marketplaceUrlResolver } from "@dashboard/marketplace/marketplace-url-resolver";
-import { orderDraftListUrl, orderListUrl } from "@dashboard/orders/urls";
-import { pageListPath } from "@dashboard/pages/urls";
-import { productListUrl } from "@dashboard/products/urls";
-import { languageListUrl } from "@dashboard/translations/urls";
-import { SidebarMenuItem } from "@saleor/macaw-ui";
-import {
-  ConfigurationIcon,
-  CustomersIcon,
-  HomeIcon,
-  MarketplaceIcon,
-  OrdersIcon,
-  ProductsIcons,
-  TableEditIcon,
-  TranslationsIcon,
-  VouchersIcon,
-} from "@saleor/macaw-ui/next";
-import React from "react";
-import { IntlShape } from "react-intl";
-
-import { getMenuItemExtension, mapToExtensionsItems } from "./legacy/utils";
-
-export interface FilterableMenuItem extends Omit<any, "children"> {
-  children?: FilterableMenuItem[];
-  permissions?: PermissionEnum[];
-}
-
-function useMenuStructure(intl: IntlShape, user: UserFragment) {
-  const extensions = useExtensions(extensionMountPoints.NAVIGATION_SIDEBAR);
-
-  const handleMenuItemClick = (menuItem: SidebarMenuItem) => {
-    const extension = getMenuItemExtension(extensions, menuItem);
-    if (extension) {
-      extension.open();
-      return;
-    }
-  };
-
-  const appExtensionsHeaderItem = {
-    id: "extensions",
-    label: intl.formatMessage(sectionNames.appExtensions),
-  };
-
-  // This will be deleted when Marketplace is released
-  // Consider this solution as temporary
-  const getAppSection = () => {
-    if (MARKETPLACE_URL) {
-      return {
-        icon: <MarketplaceIcon color="iconNeutralSubdued" />,
-        label: intl.formatMessage(sectionNames.apps),
-        permissions: [PermissionEnum.MANAGE_APPS],
-        id: "apps_section",
-        children: [
-          {
-            label: intl.formatMessage(sectionNames.apps),
-            id: "apps",
-            url: appsListPath,
-          },
-          {
-            label: intl.formatMessage(sectionNames.marketplace),
-            id: "marketplace-saleor-apps",
-            url: marketplaceUrlResolver.getSaleorAppsDashboardPath(),
-          },
-          {
-            ariaLabel: "marketplace",
-            label: intl.formatMessage(sectionNames.appTemplateGallery),
-            id: "marketplace-template-gallery",
-            url: marketplaceUrlResolver.getTemplateGalleryDashboardPath(),
-          },
-        ],
-      };
-    }
-
-    return {
-      icon: <MarketplaceIcon color="iconNeutralSubdued" />,
-      label: intl.formatMessage(sectionNames.apps),
-      permissions: [PermissionEnum.MANAGE_APPS],
-      id: "apps",
-      url: appsListPath,
-    };
-  };
-
-  const menuItems = [
-    {
-      icon: <HomeIcon color="iconNeutralSubdued" />,
-      label: intl.formatMessage(sectionNames.home),
-      id: "home",
-      url: "/",
-    },
-    {
-      children: [
-        {
-          label: intl.formatMessage(sectionNames.products),
-          id: "products",
-          url: productListUrl(),
-          permissions: [PermissionEnum.MANAGE_PRODUCTS],
-        },
-        {
-          label: intl.formatMessage(sectionNames.categories),
-          id: "categories",
-          url: categoryListUrl(),
-          permissions: [PermissionEnum.MANAGE_PRODUCTS],
-        },
-        {
-          label: intl.formatMessage(sectionNames.collections),
-          id: "collections",
-          url: collectionListUrl(),
-          permissions: [PermissionEnum.MANAGE_PRODUCTS],
-        },
-        {
-          label: intl.formatMessage(sectionNames.giftCards),
-          id: "giftCards",
-          url: giftCardListUrl(),
-          permissions: [PermissionEnum.MANAGE_GIFT_CARD],
-        },
-        ...mapToExtensionsItems(
-          extensions.NAVIGATION_CATALOG,
-          appExtensionsHeaderItem,
-        ),
-      ],
-      icon: <ProductsIcons color="iconNeutralSubdued" />,
-      label: intl.formatMessage(commonMessages.catalog),
-      permissions: [
-        PermissionEnum.MANAGE_GIFT_CARD,
-        PermissionEnum.MANAGE_PRODUCTS,
-      ],
-      id: "catalogue",
-    },
-    {
-      children: [
-        {
-          label: intl.formatMessage(sectionNames.orders),
-          permissions: [PermissionEnum.MANAGE_ORDERS],
-          id: "orders",
-          url: orderListUrl(),
-        },
-        {
-          label: intl.formatMessage(commonMessages.drafts),
-          permissions: [PermissionEnum.MANAGE_ORDERS],
-          id: "order-drafts",
-          url: orderDraftListUrl(),
-        },
-        ...mapToExtensionsItems(
-          extensions.NAVIGATION_ORDERS,
-          appExtensionsHeaderItem,
-        ),
-      ],
-      icon: <OrdersIcon color="iconNeutralSubdued" />,
-      label: intl.formatMessage(sectionNames.orders),
-      permissions: [PermissionEnum.MANAGE_ORDERS],
-      id: "orders",
-    },
-    {
-      children: extensions.NAVIGATION_CUSTOMERS.length > 0 && [
-        {
-          label: intl.formatMessage(sectionNames.customers),
-          permissions: [PermissionEnum.MANAGE_USERS],
-          id: "customers",
-          url: customerListUrl(),
-        },
-        ...mapToExtensionsItems(
-          extensions.NAVIGATION_CUSTOMERS,
-          appExtensionsHeaderItem,
-        ),
-      ],
-      icon: <CustomersIcon color="iconNeutralSubdued" />,
-      label: intl.formatMessage(sectionNames.customers),
-      permissions: [PermissionEnum.MANAGE_USERS],
-      id: "customers",
-      url: customerListUrl(),
-    },
-
-    {
-      children: [
-        {
-          label: intl.formatMessage(sectionNames.sales),
-          id: "sales",
-          url: saleListUrl(),
-        },
-        {
-          label: intl.formatMessage(sectionNames.vouchers),
-          id: "vouchers",
-          url: voucherListUrl(),
-        },
-        ...mapToExtensionsItems(
-          extensions.NAVIGATION_DISCOUNTS,
-          appExtensionsHeaderItem,
-        ),
-      ],
-      icon: <VouchersIcon color="iconNeutralSubdued" />,
-      label: intl.formatMessage(commonMessages.discounts),
-      permissions: [PermissionEnum.MANAGE_DISCOUNTS],
-      id: "discounts",
-    },
-    {
-      children: extensions.NAVIGATION_PAGES.length > 0 && [
-        {
-          label: intl.formatMessage(sectionNames.pages),
-          permissions: [PermissionEnum.MANAGE_PAGES],
-          id: "pages",
-          url: pageListPath,
-        },
-        ...mapToExtensionsItems(
-          extensions.NAVIGATION_PAGES,
-          appExtensionsHeaderItem,
-        ),
-      ],
-      icon: <TableEditIcon color="iconNeutralSubdued" />,
-      label: intl.formatMessage(sectionNames.pages),
-      permissions: [PermissionEnum.MANAGE_PAGES],
-      id: "pages",
-      url: pageListPath,
-    },
-    getAppSection(),
-    {
-      children: extensions.NAVIGATION_TRANSLATIONS.length > 0 && [
-        {
-          label: intl.formatMessage(sectionNames.translations),
-          permissions: [PermissionEnum.MANAGE_TRANSLATIONS],
-          id: "translations",
-          url: languageListUrl,
-        },
-        ...mapToExtensionsItems(
-          extensions.NAVIGATION_TRANSLATIONS,
-          appExtensionsHeaderItem,
-        ),
-      ],
-      icon: <TranslationsIcon color="iconNeutralSubdued" />,
-      label: intl.formatMessage(sectionNames.translations),
-      permissions: [PermissionEnum.MANAGE_TRANSLATIONS],
-      id: "translations",
-      url: languageListUrl,
-    },
-    {
-      icon: <ConfigurationIcon color="iconNeutralSubdued" />,
-      label: intl.formatMessage(sectionNames.configuration),
-      permissions: getConfigMenuItemsPermissions(intl),
-      id: "configure",
-      url: configurationMenuUrl,
-    },
-  ];
-
-  const isMenuItemPermitted = (menuItem: FilterableMenuItem) => {
-    const userPermissions = (user?.userPermissions || []).map(
-      permission => permission.code,
-    );
-    if (!menuItem?.permissions || menuItem?.permissions?.length < 1) {
-      return true;
-    }
-    return menuItem.permissions.some(permission =>
-      userPermissions.includes(permission),
-    );
-  };
-
-  const getFilteredMenuItems = (menuItems: FilterableMenuItem[]) =>
-    menuItems.filter(isMenuItemPermitted);
-
-  return [
-    menuItems.reduce(
-      (resultItems: FilterableMenuItem[], menuItem: FilterableMenuItem) => {
-        if (!isMenuItemPermitted(menuItem)) {
-          return resultItems;
-        }
-        const { children } = menuItem;
-        const filteredChildren = children
-          ? getFilteredMenuItems(children)
-          : undefined;
-
-        return [...resultItems, { ...menuItem, children: filteredChildren }];
-      },
-      [],
-    ),
-    handleMenuItemClick,
-  ] as const;
-}
-
-export default useMenuStructure;