disable lazy loading in router

package.json

@@ -1,7 +1,7 @@
 {
   "name": "radix-web-console",
   "description": "Radix Web Console; the web-based GUI to administer Radix applications",
-  "version": "4.17.0",
+  "version": "4.17.1",
   "license": "MIT",
   "scripts": {
     "start": "EXTEND_ESLINT=true vite",
@@ -17,14 +17,14 @@
     "deps:stale": "node scripts/deps-stale-check.js"
   },
   "dependencies": {
-    "@azure/msal-browser": "^3.0.1",
-    "@azure/msal-react": "^2.0.1",
-    "@equinor/eds-core-react": "^0.32.3",
+    "@azure/msal-browser": "^3.0.2",
+    "@azure/msal-react": "^2.0.2",
+    "@equinor/eds-core-react": "^0.32.4",
     "@equinor/eds-icons": "^0.19.3",
-    "@microsoft/microsoft-graph-client": "^3.0.5",
+    "@microsoft/microsoft-graph-client": "^3.0.6",
     "@react-rxjs/core": "^0.10.7",
     "@reduxjs/toolkit": "^1.9.5",
-    "axios": "^1.4.0",
+    "axios": "^1.5.0",
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
     "immutability-helper": "^3.1.1",
@@ -48,15 +48,16 @@
     "vite": "^4.4.9"
   },
   "devDependencies": {
+    "@remix-run/web-fetch": "^4.3.7",
     "@testing-library/react": "^14.0.0",
     "@types/lodash": "^4.14.197",
     "@types/microsoft-graph": "^2.38.0",
-    "@types/react": "^18.2.20",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "depcheck": "^1.4.3",
-    "eslint": "^8.47.0",
+    "depcheck": "^1.4.5",
+    "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^5.0.0",
@@ -65,12 +66,12 @@
     "license-checker": "^25.0.1",
     "miragejs": "^0.1.47",
     "mock-socket": "^9.2.1",
-    "prettier": "^3.0.1",
+    "prettier": "^3.0.2",
     "redux-saga-test-plan": "^4.0.6",
     "swagger-proptypes": "^7.0.1",
     "typescript": "^5.1.6",
     "vite-plugin-eslint": "^1.8.1",
-    "vitest": "^0.34.1"
+    "vitest": "^0.34.3"
   },
   "jest": {
     "transformIgnorePatterns": [

src/components/app-context/index.tsx

@@ -1,12 +1,17 @@
 import {
   AccountInfo,
+  IPublicClientApplication,
   InteractionRequiredAuthError,
   InteractionType,
   PublicClientApplication,
 } from '@azure/msal-browser';
-import { useMsal } from '@azure/msal-react';
 import { AuthCodeMSALBrowserAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/authCodeMsalBrowser';
-import { PropsWithChildren, createContext, useContext } from 'react';
+import {
+  FunctionComponent,
+  PropsWithChildren,
+  createContext,
+  useContext,
+} from 'react';
 
 import { msGraphConfig, serviceNowApiConfig } from './config';
 
@@ -24,36 +29,29 @@ export function useAppContext(): AppContext {
   return useContext(appContext);
 }
 
-export default function ProvideAppContext({ children }: PropsWithChildren) {
-  const ctx = useProvideAppContext();
+export const ProvideAppContext: FunctionComponent<
+  PropsWithChildren<{ instance: IPublicClientApplication }>
+> = ({ instance, children }) => {
+  const ctx = useProvideAppContext(instance as PublicClientApplication);
   return <appContext.Provider value={ctx}>{children}</appContext.Provider>;
-}
+};
 
-function useProvideAppContext(): AppContext {
-  const { instance } = useMsal();
+function useProvideAppContext(instance: PublicClientApplication): AppContext {
+  const account = instance.getActiveAccount()!;
 
-  // Used by the Graph SDK to authenticate API calls
-  const graphAuthProvider = new AuthCodeMSALBrowserAuthenticationProvider(
-    instance as PublicClientApplication,
-    {
-      account: instance.getActiveAccount()!,
+  return {
+    // Used by the Graph SDK to authenticate API calls
+    graphAuthProvider: new AuthCodeMSALBrowserAuthenticationProvider(instance, {
+      account: account,
+      interactionType: InteractionType.Redirect,
       scopes: msGraphConfig.scopes,
-      interactionType: InteractionType.Popup,
-    }
-  );
-  // Used by the Graph SDK to authenticate API calls
-  const serviceNowAuthProvider = new ServiceNowAuthProvider(
-    instance as PublicClientApplication,
-    {
-      account: instance.getActiveAccount()!,
-      scopes: serviceNowApiConfig.scopes,
+    }),
+    // Used by the Graph SDK to authenticate API calls
+    serviceNowAuthProvider: new ServiceNowAuthProvider(instance, {
+      account: account,
       interactionType: InteractionType.Redirect,
-    }
-  );
-
-  return {
-    graphAuthProvider: graphAuthProvider,
-    serviceNowAuthProvider: serviceNowAuthProvider,
+      scopes: serviceNowApiConfig.scopes,
+    }),
   };
 }
 
@@ -80,26 +78,26 @@ export class ServiceNowAuthProvider {
       }
       return response.accessToken;
     } catch (error) {
-      if (error instanceof InteractionRequiredAuthError) {
-        if (this.options.interactionType === InteractionType.Redirect) {
-          // acquireTokenRedirect redirects browser and aborts calling script
-          // so we just return an empty string as this provider will be
-          // called again once authenticaion flow is completed
-          this.publicClient.acquireTokenRedirect({
-            scopes: this.options.scopes,
-          });
-          return '';
-        } else if (this.options.interactionType === InteractionType.Popup) {
-          const response = await this.publicClient.acquireTokenPopup({
-            scopes: this.options.scopes,
-          });
-          return response.accessToken;
-        } else {
-          throw new Error('invalid InteractionType');
-        }
-      } else {
+      if (!(error instanceof InteractionRequiredAuthError)) {
         throw error;
       }
+
+      if (this.options.interactionType === InteractionType.Redirect) {
+        // acquireTokenRedirect redirects browser and aborts calling script
+        // so we just return an empty string as this provider will be
+        // called again once authenticaion flow is completed
+        this.publicClient.acquireTokenRedirect({
+          scopes: this.options.scopes,
+        });
+        return '';
+      } else if (this.options.interactionType === InteractionType.Popup) {
+        const response = await this.publicClient.acquireTokenPopup({
+          scopes: this.options.scopes,
+        });
+        return response.accessToken;
+      }
+
+      throw new Error('invalid InteractionType');
     }
   }
 }

src/components/page-root/index.test.tsx

@@ -1,14 +1,15 @@
 import { render } from '@testing-library/react';
 import { Provider } from 'react-redux';
 
-import { PageRoot } from '.';
+import { PageRouter } from '.';
 
 import store from '../../init/store';
+import { router } from '../../router';
 
 it('renders without crashing', () => {
   render(
     <Provider store={store}>
-      <PageRoot />
+      <PageRouter router={router} />
     </Provider>
   );
 });

src/components/page-root/index.tsx

@@ -1,14 +1,15 @@
 import { InteractionType } from '@azure/msal-browser';
 import { useMsal, useMsalAuthentication } from '@azure/msal-react';
 import { FunctionComponent } from 'react';
-import { RouterProvider } from 'react-router-dom';
+import { RouterProvider, RouterProviderProps } from 'react-router-dom';
 
 import { LazyLoadFallback } from '../lazy-load-fallback';
-import { router } from '../../router';
 
 import './style.css';
 
-export const PageRoot: FunctionComponent = () => {
+export const PageRouter: FunctionComponent<
+  Pick<RouterProviderProps, 'router'>
+> = ({ router }) => {
   useMsalAuthentication(InteractionType.Redirect);
   const { accounts } = useMsal();
   if (accounts.length === 0) {
@@ -26,5 +27,3 @@ export const PageRoot: FunctionComponent = () => {
     </div>
   );
 };
-
-export default PageRoot;

src/components/page-root/style.css

@@ -7,11 +7,8 @@
 }
 
 .page-root > .page-root-layout-base {
-  overflow: auto;
-}
-
-.page-root-layout-base {
   display: flex;
-  flex: 1 1 100%;
   flex-direction: column;
+  flex: 1 1 100%;
+  overflow: auto;
 }

src/init/entry-default.tsx

@@ -10,8 +10,9 @@ import { Provider } from 'react-redux';
 import { msalConfig } from './msal-config';
 import store from './store';
 
-import ProvideAppContext from '../components/app-context';
-import { PageRoot } from '../components/page-root';
+import { ProvideAppContext } from '../components/app-context';
+import { PageRouter } from '../components/page-root';
+import { router } from '../router';
 
 const msalInstance = new PublicClientApplication(msalConfig);
 
@@ -20,19 +21,19 @@ if (accounts?.length > 0) {
   msalInstance.setActiveAccount(accounts[0]);
 }
 
-msalInstance.addEventCallback((event: EventMessage) => {
-  if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
+msalInstance.addEventCallback(({ eventType, payload }: EventMessage) => {
+  if (eventType === EventType.LOGIN_SUCCESS && payload) {
     // Set the active account - this simplifies token acquisition
-    const authResult = event.payload as AuthenticationResult;
+    const authResult = payload as AuthenticationResult;
     msalInstance.setActiveAccount(authResult.account);
   }
 });
 
 export default (
   <Provider store={store}>
     <MsalProvider instance={msalInstance}>
-      <ProvideAppContext>
-        <PageRoot />
+      <ProvideAppContext instance={msalInstance}>
+        <PageRouter router={router} />
       </ProvideAppContext>
     </MsalProvider>
   </Provider>