Fixed code splitting by refactoring index files

.changeset/loose-experts-lead.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fixed code splitting for `auth` and `configuration` chunks. Previously this code was included in the main bundle, skipping dynamic imports. Now it will only load when needed, which should improve performance.

src/attributes/components/AttributeListPage/AttributeListPage.tsx

@@ -4,7 +4,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { BulkDeleteButton } from "@dashboard/components/BulkDeleteButton";
 import { DashboardCard } from "@dashboard/components/Card";
 import { FilterPresetsSelect } from "@dashboard/components/FilterPresetsSelect";
-import { configurationMenuUrl } from "@dashboard/configuration";
+import { configurationMenuUrl } from "@dashboard/configuration/urls";
 import { AttributeFragment } from "@dashboard/graphql";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { sectionNames } from "@dashboard/intl";

src/attributes/components/AttributePage/AttributePage.tsx

@@ -12,8 +12,8 @@ import {
   ENTITY_TYPES_WITH_TYPES_RESTRICTION,
   REFERENCE_ATTRIBUTE_TYPES,
 } from "@dashboard/attributes/utils/data";
-import { useUser } from "@dashboard/auth";
 import { hasPermission } from "@dashboard/auth/misc";
+import { useUser } from "@dashboard/auth/useUser";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";

src/auth/AuthProvider.tsx

@@ -3,8 +3,8 @@ import { useNotifier } from "@dashboard/hooks/useNotifier";
 import { PropsWithChildren } from "react";
 import { useIntl } from "react-intl";
 
-import { UserContext } from "./";
 import { useAuthProvider } from "./hooks/useAuthProvider";
+import { UserContext } from "./useUser";
 
 const AuthProvider = ({ children }: PropsWithChildren) => {
   const apolloClient = useApolloClient();

src/auth/components/Layout.tsx

@@ -5,7 +5,7 @@ import { makeStyles, useTheme } from "@saleor/macaw-ui";
 import { ReactNode } from "react";
 import SVG from "react-inlinesvg";
 
-import { useUser } from "..";
+import { useUser } from "../useUser";
 import LoginLoading from "./LoginLoading";
 
 const useStyles = makeStyles(

src/auth/components/LoginPage/LoginPage.tsx

@@ -1,7 +1,7 @@
-import { getExternalAuthenticationMethodName } from "@dashboard/auth";
 import { LastLoginMethod } from "@dashboard/auth/hooks/useLastLoginMethod";
 import { UserContextError } from "@dashboard/auth/types";
 import { passwordResetUrl } from "@dashboard/auth/urls";
+import { getExternalAuthenticationMethodName } from "@dashboard/auth/utils";
 import { ButtonWithLoader } from "@dashboard/components/ButtonWithLoader/ButtonWithLoader";
 import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { AvailableExternalAuthenticationsQuery } from "@dashboard/graphql";

src/auth/components/SectionRoute.tsx

@@ -3,8 +3,8 @@ import { PermissionEnum } from "@dashboard/graphql";
 import { RouteProps } from "react-router-dom";
 
 import NotFound from "../../NotFound";
-import { useUser } from "..";
 import { hasAllPermissions, hasAnyPermissions } from "../misc";
+import { useUser } from "../useUser";
 
 type MatchPermissionType = "all" | "any";
 

src/auth/hooks/useAuthRedirection.ts

@@ -3,8 +3,8 @@ import { useEffect } from "react";
 import urlJoin from "url-join";
 import useRouter from "use-react-router";
 
-import { useUser } from "..";
 import { loginCallbackPath } from "../urls";
+import { useUser } from "../useUser";
 import { useAuthParameters } from "./useAuthParameters";
 
 const PLUGIN_ID_PARAM = "saleorPluginId";

src/auth/hooks/useUserAccessibleChannels.ts

@@ -1,4 +1,4 @@
-import { useUser } from "..";
+import { useUser } from "../useUser";
 
 export const useUserAccessibleChannels = () => {
   const user = useUser();

src/auth/hooks/useUserPermissions.ts

@@ -1,3 +1,3 @@
-import { useUser } from "..";
+import { useUser } from "../useUser";
 
 export const useUserPermissions = () => useUser().user?.userPermissions;

src/auth/index.tsx

@@ -1,10 +1,8 @@
 import { Route } from "@dashboard/components/Router";
 import { parseQs } from "@dashboard/url-utils";
-import { createContext, useContext } from "react";
 import { Switch } from "react-router-dom";
 
 import Layout from "./components/Layout";
-import { UserContext as Context } from "./types";
 import {
   LoginUrlQueryParams,
   newPasswordPath,
@@ -23,18 +21,6 @@ const LoginView = () => {
   return <LoginViewComponent params={params} />;
 };
 
-export const UserContext = createContext<Context>({
-  login: undefined,
-  loginByExternalPlugin: undefined,
-  logout: undefined,
-  requestLoginByExternalPlugin: undefined,
-  authenticating: false,
-  isCredentialsLogin: false,
-  authenticated: false,
-  errors: [],
-  refetchUser: undefined,
-});
-
 const AuthRouter = () => (
   <Layout>
     <Switch>
@@ -48,6 +34,3 @@ const AuthRouter = () => (
 
 AuthRouter.displayName = "AuthRouter";
 export default AuthRouter;
-
-export * from "./utils";
-export const useUser = () => useContext(UserContext);

src/auth/useUser.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+
+import { UserContext as Context } from "./types";
+
+export const UserContext = createContext<Context>({
+  login: undefined,
+  loginByExternalPlugin: undefined,
+  logout: undefined,
+  requestLoginByExternalPlugin: undefined,
+  authenticating: false,
+  isCredentialsLogin: false,
+  authenticated: false,
+  errors: [],
+  refetchUser: undefined,
+});
+
+export const useUser = () => useContext(UserContext);

src/auth/views/Login.tsx

@@ -5,12 +5,12 @@ import { useEffect } from "react";
 import urlJoin from "url-join";
 import useRouter from "use-react-router";
 
-import { useUser } from "..";
 import LoginPage from "../components/LoginPage";
 import { LoginFormData } from "../components/LoginPage/types";
 import { useAuthParameters } from "../hooks/useAuthParameters";
 import { useLastLoginMethod } from "../hooks/useLastLoginMethod";
 import { loginCallbackPath, LoginUrlQueryParams } from "../urls";
+import { useUser } from "../useUser";
 
 interface LoginViewProps {
   params: LoginUrlQueryParams;

src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx

@@ -1,5 +1,5 @@
-import { useUser } from "@dashboard/auth";
 import { hasPermission } from "@dashboard/auth/misc";
+import { useUser } from "@dashboard/auth/useUser";
 import { categoryListPath, categoryUrl } from "@dashboard/categories/urls";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { CardSpacer } from "@dashboard/components/CardSpacer";

src/channels/pages/ChannelsListPage/ChannelsListPage.tsx

@@ -9,7 +9,7 @@ import { ResponsiveTable } from "@dashboard/components/ResponsiveTable";
 import { TableButtonWrapper } from "@dashboard/components/TableButtonWrapper/TableButtonWrapper";
 import TableCellHeader from "@dashboard/components/TableCellHeader";
 import TableRowLink from "@dashboard/components/TableRowLink";
-import { configurationMenuUrl } from "@dashboard/configuration";
+import { configurationMenuUrl } from "@dashboard/configuration/urls";
 import { ChannelDetailsFragment, RefreshLimitsQuery } from "@dashboard/graphql";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { sectionNames } from "@dashboard/intl";

src/channels/views/ChannelCreate/useSaveChannel.test.ts

@@ -1,11 +1,11 @@
-import { useUser } from "@dashboard/auth";
+import { useUser } from "@dashboard/auth/useUser";
 import { ChannelWarehouses } from "@dashboard/channels/pages/ChannelDetailsPage/types";
 import { ChannelCreateInput } from "@dashboard/graphql";
 
 import { useSaveChannel } from "./useSaveChannel";
 
 jest.mock(
-  "@dashboard/auth",
+  "@dashboard/auth/useUser",
   jest.fn(() => ({
     useUser: jest.fn(),
   })),

src/channels/views/ChannelCreate/useSaveChannel.ts

@@ -1,5 +1,5 @@
 import { MutationFunction } from "@apollo/client";
-import { useUser } from "@dashboard/auth";
+import { useUser } from "@dashboard/auth/useUser";
 import { ChannelWarehouses } from "@dashboard/channels/pages/ChannelDetailsPage/types";
 import {
   ChannelCreateInput,

src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx

@@ -1,6 +1,6 @@
 // @ts-strict-ignore
-import { useUser } from "@dashboard/auth";
 import { hasPermission } from "@dashboard/auth/misc";
+import { useUser } from "@dashboard/auth/useUser";
 import { ChannelCollectionData } from "@dashboard/channels/utils";
 import { collectionListPath, CollectionUrlQueryParams } from "@dashboard/collections/urls";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";

src/components/AccountPermissions/AccountPermissions.tsx

@@ -1,4 +1,4 @@
-import { useUser } from "@dashboard/auth";
+import { useUser } from "@dashboard/auth/useUser";
 import { PermissionData } from "@dashboard/permissionGroups/components/PermissionGroupDetailsPage";
 import { Box, Text } from "@saleor/macaw-ui-next";
 import { ChangeEvent } from "react";

src/components/AppLayout/AppChannelContext.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import { useUser } from "@dashboard/auth";
+import { useUser } from "@dashboard/auth/useUser";
 import { ChannelFragment, useBaseChannelsQuery } from "@dashboard/graphql";
 import useLocalStorage from "@dashboard/hooks/useLocalStorage";
 import { getById } from "@dashboard/misc";

src/components/AppLayout/TopNav/Root.tsx

@@ -1,4 +1,4 @@
-import { useUser } from "@dashboard/auth";
+import { useUser } from "@dashboard/auth/useUser";
 import { Box, BoxProps, Text } from "@saleor/macaw-ui-next";
 import { PropsWithChildren } from "react";
 import * as React from "react";

src/components/Datagrid/persistance/useMetadata.ts

@@ -1,4 +1,4 @@
-import { useUser } from "@dashboard/auth";
+import { useUser } from "@dashboard/auth/useUser";
 import {
   MetadataInput,
   MetadataItemFragment,

src/components/Shop/index.tsx

@@ -3,7 +3,7 @@ import appleTouchIcon from "@assets/favicons/apple-touch-icon.png";
 import favicon16 from "@assets/favicons/favicon-16x16.png";
 import favicon32 from "@assets/favicons/favicon-32x32.png";
 import safariPinnedTab from "@assets/favicons/safari-pinned-tab.svg";
-import { useUser } from "@dashboard/auth";
+import { useUser } from "@dashboard/auth/useUser";
 import { ShopInfoQuery, useShopInfoQuery } from "@dashboard/graphql";
 import { createContext, ReactNode, useEffect } from "react";
 import Helmet from "react-helmet";

src/components/Sidebar/menu/hooks/useMenuStructure.tsx

@@ -1,8 +1,8 @@
-import { useUser } from "@dashboard/auth";
+import { useUser } from "@dashboard/auth/useUser";
 import { categoryListUrl } from "@dashboard/categories/urls";
 import { collectionListUrl } from "@dashboard/collections/urls";
 import { iconSize } from "@dashboard/components/icons";
-import { configurationMenuUrl } from "@dashboard/configuration";
+import { configurationMenuUrl } from "@dashboard/configuration/urls";
 import { getConfigMenuItemsPermissions } from "@dashboard/configuration/utils";
 import { customerListUrl } from "@dashboard/customers/urls";
 import { saleListUrl, voucherListUrl } from "@dashboard/discounts/urls";

src/components/Sidebar/user/Controls.tsx

@@ -1,4 +1,4 @@
-import { useUser } from "@dashboard/auth";
+import { useUser } from "@dashboard/auth/useUser";
 import { staffMemberDetailsUrl } from "@dashboard/staff/urls";
 import { useTheme } from "@dashboard/theme";
 import { useTheme as useLegacyTheme } from "@saleor/macaw-ui";

src/components/Sidebar/user/Info.tsx

@@ -1,4 +1,4 @@
-import { useUser } from "@dashboard/auth";
+import { useUser } from "@dashboard/auth/useUser";
 import { UserAvatar } from "@dashboard/components/UserAvatar";
 import { getUserInitials, getUserName } from "@dashboard/misc";
 import { Box, Text } from "@saleor/macaw-ui-next";

src/configuration/ConfigurationPage.test.tsx

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from "@testing-library/react";
 import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 
-import { useUser } from "../auth";
+import { useUser } from "../auth/useUser";
 import { PermissionEnum, UserFragment } from "../graphql";
 import { ConfigurationPage } from "./ConfigurationPage";
 import { MenuSection } from "./types";
@@ -16,7 +16,7 @@ jest.mock("@dashboard/hooks/useNavigator", () => () => jest.fn());
 jest.mock("react-router-dom", () => ({
   Link: jest.fn(({ children }) => children),
 }));
-jest.mock("@dashboard/auth", () => ({
+jest.mock("@dashboard/auth/useUser", () => ({
   useUser: jest.fn(),
 }));
 jest.mock("./styles", () => ({