djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Revert feature flag for sidebar from main (#3047)

Browse source
This commit is contained in:
Krzysztof Żuraw 2023-01-26 11:01:15 +01:00 committed by GitHub
parent 993595caac
commit 71d0e4a980
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 113 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
package-lock.json generated
View file

@ -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",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.1.tgz",
"integrity": "sha512-zNnLJcm13HMqGJjHmjyoLL/lQ5dIefUbOq/Ws7wxPn1Bh0wwhY/3T+Qc6iG5W9gvIcpTXJojwL7tT31DHQ2KRw==",
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.7.2.tgz",
"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",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
"@material-ui/core": "^4.11.2",
"@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==",
"dev": true
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"node_modules/lodash.camelcase": {
"version": "4.3.0",
@ -44660,9 +44670,17 @@
}
},
"@saleor/macaw-ui": {
"version": "0.8.0-pre.1",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.1.tgz",
"integrity": "sha512-zNnLJcm13HMqGJjHmjyoLL/lQ5dIefUbOq/Ws7wxPn1Bh0wwhY/3T+Qc6iG5W9gvIcpTXJojwL7tT31DHQ2KRw=="
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.7.2.tgz",
"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==",
"dev": true
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"lodash.camelcase": {
"version": "4.3.0",

3
package.json
View file

@ -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",

53
src/components/AppLayout/AppLayout.tsx
View file

@ -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 { useActionBar, useBacklink, useTheme } from "@saleor/macaw-ui";
import { LinearProgress, useMediaQuery } from "@material-ui/core";
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 } =
useAppChannel(false);
const {
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

0
src/components/Sidebar/legacy/SidebarLink.tsx → src/components/AppLayout/SidebarLink.tsx
View file

16
src/components/Sidebar/legacy/menuStructure.ts → src/components/AppLayout/menuStructure.ts
View file

@ -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 { categoryListUrl } from "../../../categories/urls";
import { collectionListUrl } from "../../../collections/urls";
import { customerListUrl } from "../../../customers/urls";
import { saleListUrl, voucherListUrl } from "../../../discounts/urls";
import { orderDraftListUrl, orderListUrl } from "../../../orders/urls";
import { productListUrl } from "../../../products/urls";
import { languageListUrl } from "../../../translations/urls";
import { appsListPath } from "../../apps/urls";
import { categoryListUrl } from "../../categories/urls";
import { collectionListUrl } from "../../collections/urls";
import { customerListUrl } from "../../customers/urls";
import { saleListUrl, voucherListUrl } from "../../discounts/urls";
import { orderDraftListUrl, orderListUrl } from "../../orders/urls";
import { productListUrl } from "../../products/urls";
import { languageListUrl } from "../../translations/urls";
import { getMenuItemExtension, mapToExtensionsItems } from "./utils";
export interface FilterableMenuItem extends Omit<SidebarMenuItem, "children"> {

0
src/components/Sidebar/legacy/utils.ts → src/components/AppLayout/utils.ts
View file

10
src/components/Sidebar/Drawer.tsx
View file

@ -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 />;
};

3
src/components/Sidebar/NewSidebar.tsx
View file

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

11
src/components/Sidebar/Sidebar.tsx
View file

@ -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 />;
};

2
src/components/Sidebar/index.ts
View file

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

29
src/components/Sidebar/legacy/LegacyDrawer.tsx
View file

@ -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}
/>
)
);
};

34
src/components/Sidebar/legacy/LegacySidebar.tsx
View file

@ -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}
/>
)
);
};

2
src/components/Sidebar/legacy/index.ts
View file

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

59
src/index.tsx
View file

@ -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/next";
import { ThemeProvider } from "@saleor/macaw-ui";
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>
<DateProvider>
<LocaleProvider>
<MessageManagerProvider>
<ServiceWorker />
<BackgroundTasksProvider>
<AppStateProvider>
<FlagsServiceProvider>
<AuthProvider>
<ShopProvider>
<AppChannelProvider>
<ExternalAppProvider>
<ExitFormDialogProvider>
<Routes />
</ExitFormDialogProvider>
</ExternalAppProvider>
</AppChannelProvider>
</ShopProvider>
</AuthProvider>
</FlagsServiceProvider>
</AppStateProvider>
</BackgroundTasksProvider>
</MessageManagerProvider>
</LocaleProvider>
</DateProvider>
</ThemeProvider>
</LegacyThemeProvider>
<ThemeProvider overrides={themeOverrides}>
<DateProvider>
<LocaleProvider>
<MessageManagerProvider>
<ServiceWorker />
<BackgroundTasksProvider>
<AppStateProvider>
<FlagsServiceProvider>
<AuthProvider>
<ShopProvider>
<AppChannelProvider>
<ExternalAppProvider>
<ExitFormDialogProvider>
<Routes />
</ExitFormDialogProvider>
</ExternalAppProvider>
</AppChannelProvider>
</ShopProvider>
</AuthProvider>
</FlagsServiceProvider>
</AppStateProvider>
</BackgroundTasksProvider>
</MessageManagerProvider>
</LocaleProvider>
</DateProvider>
</ThemeProvider>
</BrowserRouter>
</ApolloProvider>
</SaleorProvider>

6
src/storybook/webpack.config.js
View file

@ -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"),