Revert feature flag for sidebar from main (#3047)

package-lock.json

@@ -17,7 +17,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",
@@ -27,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.1",
+        "@saleor/macaw-ui": "^0.7.2",
         "@saleor/sdk": "^0.4.4",
         "@sentry/react": "^6.0.0",
         "@types/faker": "^5.1.6",
@@ -7235,15 +7234,27 @@
       }
     },
     "node_modules/@saleor/macaw-ui": {
-      "version": "0.8.0-pre.1",
+      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.1.tgz",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.7.2.tgz",
-      "integrity": "sha512-zNnLJcm13HMqGJjHmjyoLL/lQ5dIefUbOq/Ws7wxPn1Bh0wwhY/3T+Qc6iG5W9gvIcpTXJojwL7tT31DHQ2KRw==",
+      "integrity": "sha512-Fli7fhTWuHu7q2CzxwTUpB4x9HYaxHSAzCLZLA23VY1ieIWbCxbsXadMiMGWp/nuYitswMr6JXMm+1SDe9K8LQ==",
+      "dependencies": {
+        "@floating-ui/react-dom-interactions": "^0.5.0",
+        "clsx": "^1.1.1",
+        "downshift": "^6.1.7",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-inlinesvg": "^3.0.1"
+      },
       "engines": {
         "node": ">=16 <19"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "@material-ui/core": "^4.11.2",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "@material-ui/icons": "^4.11.2",
+        "@material-ui/lab": "^4.0.0-alpha.58",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0",
+        "react-helmet": "^6.1.0"
       }
     },
     "node_modules/@saleor/sdk": {
@@ -26575,8 +26586,7 @@
     "node_modules/lodash-es": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-      "dev": true
     },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
@@ -44660,9 +44670,17 @@
       }
     },
     "@saleor/macaw-ui": {
-      "version": "0.8.0-pre.1",
+      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.1.tgz",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.7.2.tgz",
-      "integrity": "sha512-zNnLJcm13HMqGJjHmjyoLL/lQ5dIefUbOq/Ws7wxPn1Bh0wwhY/3T+Qc6iG5W9gvIcpTXJojwL7tT31DHQ2KRw=="
+      "integrity": "sha512-Fli7fhTWuHu7q2CzxwTUpB4x9HYaxHSAzCLZLA23VY1ieIWbCxbsXadMiMGWp/nuYitswMr6JXMm+1SDe9K8LQ==",
+      "requires": {
+        "@floating-ui/react-dom-interactions": "^0.5.0",
+        "clsx": "^1.1.1",
+        "downshift": "^6.1.7",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-inlinesvg": "^3.0.1"
+      }
     },
     "@saleor/sdk": {
       "version": "0.4.4",
@@ -59816,8 +59834,7 @@
     "lodash-es": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-      "dev": true
     },
     "lodash.camelcase": {
       "version": "4.3.0",

package.json

@@ -33,9 +33,8 @@
     "@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.1",
+    "@saleor/macaw-ui": "^0.7.2",
     "@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",

src/components/AppLayout/AppLayout.tsx

@@ -1,19 +1,30 @@
 import { useUser } from "@dashboard/auth";
 import useAppState from "@dashboard/hooks/useAppState";
 import { isDarkTheme } from "@dashboard/misc";
-import { LinearProgress } from "@material-ui/core";
+import { LinearProgress, useMediaQuery } from "@material-ui/core";
-import { useActionBar, useBacklink, useTheme } from "@saleor/macaw-ui";
+import {
+  SaleorTheme,
+  Sidebar,
+  SidebarDrawer,
+  useActionBar,
+  useBacklink,
+  useTheme,
+} from "@saleor/macaw-ui";
 import clsx from "clsx";
 import React from "react";
+import { useIntl } from "react-intl";
+import useRouter from "use-react-router";
 
 import Container from "../Container";
 import Navigator from "../Navigator";
 import NavigatorButton from "../NavigatorButton/NavigatorButton";
-import { Sidebar, SidebarDrawer } from "../Sidebar";
 import UserChip from "../UserChip";
 import useAppChannel from "./AppChannelContext";
 import AppChannelSelect from "./AppChannelSelect";
+import useMenuStructure from "./menuStructure";
+import { SidebarLink } from "./SidebarLink";
 import { useFullSizeStyles, useStyles } from "./styles";
+import { isMenuActive } from "./utils";
 
 interface AppLayoutProps {
   children: React.ReactNode;
@@ -30,11 +41,24 @@ const AppLayout: React.FC<AppLayoutProps> = ({
   const { anchor: appActionAnchor } = useActionBar();
   const appHeaderAnchor = useBacklink();
   const { logout, user } = useUser();
+  const intl = useIntl();
   const [appState] = useAppState();
+  const { location } = useRouter();
   const [isNavigatorVisible, setNavigatorVisibility] = React.useState(false);
+  const isMdUp = useMediaQuery((theme: SaleorTheme) =>
+    theme.breakpoints.up("md"),
+  );
 
-  const { availableChannels, channel, isPickerActive, setChannel } =
+  const {
-    useAppChannel(false);
+    availableChannels,
+    channel,
+    isPickerActive,
+    setChannel,
+  } = useAppChannel(false);
+  const [menuStructure, handleMenuItemClick] = useMenuStructure(intl, user);
+  const activeMenu = menuStructure.find(menuItem =>
+    isMenuActive(location.pathname, menuItem),
+  )?.id;
 
   const toggleTheme = () => setTheme(isDarkTheme(themeType) ? "light" : "dark");
 
@@ -45,7 +69,15 @@ const AppLayout: React.FC<AppLayoutProps> = ({
         setVisibility={setNavigatorVisibility}
       />
       <div className={classes.root}>
-        <Sidebar />
+        {isMdUp && (
+          <Sidebar
+            activeId={activeMenu}
+            menuItems={menuStructure}
+            onMenuItemClick={handleMenuItemClick}
+            logoHref="/"
+            linkComponent={SidebarLink}
+          />
+        )}
         <div
           className={clsx(classes.content, {
             [fullSizeClasses.content]: fullSize,
@@ -66,7 +98,14 @@ const AppLayout: React.FC<AppLayoutProps> = ({
                 <div className={classes.header}>
                   <div className={classes.headerAnchor} ref={appHeaderAnchor} />
                   <div className={classes.headerToolbar}>
-                    <SidebarDrawer />
+                    {!isMdUp && (
+                      <SidebarDrawer
+                        menuItems={menuStructure}
+                        logoHref="/"
+                        onMenuItemClick={handleMenuItemClick}
+                        linkComponent={SidebarLink}
+                      />
+                    )}
                     <div className={classes.spacer} />
                     <div className={classes.userBar}>
                       <NavigatorButton

src/components/AppLayout/menuStructure.ts

@@ -22,14 +22,14 @@ import { pageListPath } from "@dashboard/pages/urls";
 import { SidebarMenuItem } from "@saleor/macaw-ui";
 import { IntlShape } from "react-intl";
 
-import { appsListPath } from "../../../apps/urls";
+import { appsListPath } from "../../apps/urls";
-import { categoryListUrl } from "../../../categories/urls";
+import { categoryListUrl } from "../../categories/urls";
-import { collectionListUrl } from "../../../collections/urls";
+import { collectionListUrl } from "../../collections/urls";
-import { customerListUrl } from "../../../customers/urls";
+import { customerListUrl } from "../../customers/urls";
-import { saleListUrl, voucherListUrl } from "../../../discounts/urls";
+import { saleListUrl, voucherListUrl } from "../../discounts/urls";
-import { orderDraftListUrl, orderListUrl } from "../../../orders/urls";
+import { orderDraftListUrl, orderListUrl } from "../../orders/urls";
-import { productListUrl } from "../../../products/urls";
+import { productListUrl } from "../../products/urls";
-import { languageListUrl } from "../../../translations/urls";
+import { languageListUrl } from "../../translations/urls";
 import { getMenuItemExtension, mapToExtensionsItems } from "./utils";
 
 export interface FilterableMenuItem extends Omit<SidebarMenuItem, "children"> {

src/components/Sidebar/Drawer.tsx

@@ -1,10 +0,0 @@
-import { useFlags } from "@dashboard/hooks/useFlags";
-import React from "react";
-
-import { LegacyDrawer } from "./legacy";
-
-export const SidebarDrawer = () => {
-  const { enableNewSidebar } = useFlags(["enableNewSidebar"]);
-
-  return enableNewSidebar.enabled ? null : <LegacyDrawer />;
-};

src/components/Sidebar/NewSidebar.tsx

@@ -1,3 +0,0 @@
-import React from "react";
-
-export const NewSidebar = () => <div>Work in progress</div>;

src/components/Sidebar/Sidebar.tsx

@@ -1,11 +0,0 @@
-import { useFlags } from "@dashboard/hooks/useFlags";
-import React from "react";
-
-import { LegacySidebar } from "./legacy";
-import { NewSidebar } from "./NewSidebar";
-
-export const Sidebar = () => {
-  const { enableNewSidebar } = useFlags(["enableNewSidebar"]);
-
-  return enableNewSidebar.enabled ? <NewSidebar /> : <LegacySidebar />;
-};

src/components/Sidebar/index.ts

@@ -1,2 +0,0 @@
-export * from "./Drawer";
-export * from "./Sidebar";

src/components/Sidebar/legacy/LegacyDrawer.tsx

@@ -1,29 +0,0 @@
-import { useUser } from "@dashboard/auth";
-import { useMediaQuery } from "@material-ui/core";
-import { SaleorTheme, SidebarDrawer } from "@saleor/macaw-ui";
-import React from "react";
-import { useIntl } from "react-intl";
-
-import useMenuStructure from "./menuStructure";
-import { SidebarLink } from "./SidebarLink";
-
-export const LegacyDrawer = () => {
-  const intl = useIntl();
-  const { user } = useUser();
-  const isMdUp = useMediaQuery((theme: SaleorTheme) =>
-    theme.breakpoints.up("md"),
-  );
-
-  const [menuStructure, handleMenuItemClick] = useMenuStructure(intl, user);
-
-  return (
-    !isMdUp && (
-      <SidebarDrawer
-        menuItems={menuStructure}
-        logoHref="/"
-        onMenuItemClick={handleMenuItemClick}
-        linkComponent={SidebarLink}
-      />
-    )
-  );
-};

src/components/Sidebar/legacy/LegacySidebar.tsx

@@ -1,34 +0,0 @@
-import { useUser } from "@dashboard/auth";
-import { useMediaQuery } from "@material-ui/core";
-import { SaleorTheme, Sidebar } from "@saleor/macaw-ui";
-import React from "react";
-import { useIntl } from "react-intl";
-
-import useMenuStructure from "./menuStructure";
-import { SidebarLink } from "./SidebarLink";
-import { isMenuActive } from "./utils";
-
-export const LegacySidebar = () => {
-  const intl = useIntl();
-  const { user } = useUser();
-  const isMdUp = useMediaQuery((theme: SaleorTheme) =>
-    theme.breakpoints.up("md"),
-  );
-
-  const [menuStructure, handleMenuItemClick] = useMenuStructure(intl, user);
-  const activeMenu = menuStructure.find(menuItem =>
-    isMenuActive(location.pathname, menuItem),
-  )?.id;
-
-  return (
-    isMdUp && (
-      <Sidebar
-        activeId={activeMenu}
-        menuItems={menuStructure}
-        onMenuItemClick={handleMenuItemClick}
-        logoHref="/"
-        linkComponent={SidebarLink}
-      />
-    )
-  );
-};

src/components/Sidebar/legacy/index.ts

@@ -1,2 +0,0 @@
-export * from "./LegacyDrawer";
-export * from "./LegacySidebar";

src/index.tsx

@@ -1,11 +1,8 @@
-import "@saleor/macaw-ui/next/style";
-
 import { ApolloProvider } from "@apollo/client";
 import DemoBanner from "@dashboard/components/DemoBanner";
 import { PermissionEnum } from "@dashboard/graphql";
 import useAppState from "@dashboard/hooks/useAppState";
-import { ThemeProvider as LegacyThemeProvider } from "@saleor/macaw-ui";
+import { ThemeProvider } from "@saleor/macaw-ui";
-import { ThemeProvider } from "@saleor/macaw-ui/next";
 import { SaleorProvider } from "@saleor/sdk";
 import React from "react";
 import { render } from "react-dom";
@@ -87,34 +84,32 @@ const App: React.FC = () => (
   <SaleorProvider client={saleorClient}>
     <ApolloProvider client={apolloClient}>
       <BrowserRouter basename={getAppMountUri()}>
-        <LegacyThemeProvider overrides={themeOverrides}>
+        <ThemeProvider overrides={themeOverrides}>
-          <ThemeProvider>
+          <DateProvider>
-            <DateProvider>
+            <LocaleProvider>
-              <LocaleProvider>
+              <MessageManagerProvider>
-                <MessageManagerProvider>
+                <ServiceWorker />
-                  <ServiceWorker />
+                <BackgroundTasksProvider>
-                  <BackgroundTasksProvider>
+                  <AppStateProvider>
-                    <AppStateProvider>
+                    <FlagsServiceProvider>
-                      <FlagsServiceProvider>
+                      <AuthProvider>
-                        <AuthProvider>
+                        <ShopProvider>
-                          <ShopProvider>
+                          <AppChannelProvider>
-                            <AppChannelProvider>
+                            <ExternalAppProvider>
-                              <ExternalAppProvider>
+                              <ExitFormDialogProvider>
-                                <ExitFormDialogProvider>
+                                <Routes />
-                                  <Routes />
+                              </ExitFormDialogProvider>
-                                </ExitFormDialogProvider>
+                            </ExternalAppProvider>
-                              </ExternalAppProvider>
+                          </AppChannelProvider>
-                            </AppChannelProvider>
+                        </ShopProvider>
-                          </ShopProvider>
+                      </AuthProvider>
-                        </AuthProvider>
+                    </FlagsServiceProvider>
-                      </FlagsServiceProvider>
+                  </AppStateProvider>
-                    </AppStateProvider>
+                </BackgroundTasksProvider>
-                  </BackgroundTasksProvider>
+              </MessageManagerProvider>
-                </MessageManagerProvider>
+            </LocaleProvider>
-              </LocaleProvider>
+          </DateProvider>
-            </DateProvider>
+        </ThemeProvider>
-          </ThemeProvider>
-        </LegacyThemeProvider>
       </BrowserRouter>
     </ApolloProvider>
   </SaleorProvider>

src/storybook/webpack.config.js

@@ -27,12 +27,6 @@ module.exports = ({ config }) => {
   // to make it work with npm link
   config.resolve.alias = {
     react: path.resolve("./node_modules/react"),
-    "@saleor/macaw-ui/next": path.resolve(
-      "./node_modules/@saleor/macaw-ui/dist/macaw-ui.js",
-    ),
-    "@saleor/macaw-ui": path.resolve(
-      "./node_modules/@saleor/macaw-ui/legacy/dist/esm/index.js",
-    ),
     "react-dom": path.resolve("./node_modules/react-dom"),
     "@material-ui/core": path.resolve("./node_modules/@material-ui/core"),
     "@material-ui/icons": path.resolve("./node_modules/@material-ui/icons"),