Chore: Release 10.2.0 (#3219)

* refactor: use strong types in authentication module (#3164)

* Chore: Dependabot upgrades - April (#3124)

* fix: remove character escape in json response formatting (#3163)

* Fix: add parameters to token request (#3218)

* Bump version to 10.2.0

Author: thewahome

config/webpackDevServer.config.js

@@ -89,31 +89,31 @@ module.exports = function (proxy, allowedHost) {
     // src/node_modules is not ignored to support absolute imports
     // https://github.com/facebook/create-react-app/issues/1065
     // Enable HTTPS if the HTTPS environment variable is set to 'true'
-    https: protocol === 'https',
     host,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true
     },
     proxy,
-    onBeforeSetupMiddleware(devServer) {
+    setupMiddlewares: (middlewares, devServer) => {
       if (fs.existsSync(paths.proxySetup)) {
         // This registers user provided middleware for proxy reasons
         require(paths.proxySetup)(devServer.app);
       }
 
       // This lets us fetch source contents from webpack for the error overlay
-      devServer.app.use(evalSourceMapMiddleware(devServer));
+      middlewares.push(evalSourceMapMiddleware(devServer));
       // This lets us open files from the runtime error overlay.
-      devServer.app.use(errorOverlayMiddleware());
+      middlewares.push(errorOverlayMiddleware());
 
       // This service worker file is effectively a 'no-op' that will reset any
       // previous service worker registered for the same host:port combination.
       // We do this in development to avoid hitting the production cache if
       // it used the same host and port.
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      devServer.app.use(noopServiceWorkerMiddleware('/'));
+      middlewares.push(noopServiceWorkerMiddleware('/'));
+      return middlewares;
     }
   };
 };

package-lock.json

@@ -1,21 +1,21 @@
 {
         "name": "graph-explorer-v2",
-        "version": "10.1.0",
+        "version": "10.2.0",
         "private": true,
         "dependencies": {
                 "@augloop/types-core": "file:packages/types-core-2.16.189.tgz",
                 "@axe-core/webdriverjs": "4.8.5",
-                "@azure/msal-browser": "3.10.0",
-                "@babel/core": "7.23.3",
-                "@babel/runtime": "7.23.8",
-                "@fluentui/react": "8.112.5",
-                "@fluentui/react-icons-mdl2": "1.3.52",
-                "@microsoft/applicationinsights-react-js": "17.0.3",
-                "@microsoft/applicationinsights-web": "3.0.5",
+                "@azure/msal-browser": "3.14.0",
+                "@babel/core": "7.24.6",
+                "@babel/runtime": "7.24.5",
+                "@fluentui/react": "8.117.7",
+                "@fluentui/react-icons-mdl2": "1.3.63",
+                "@microsoft/applicationinsights-react-js": "17.2.0",
+                "@microsoft/applicationinsights-web": "3.2.1",
                 "@microsoft/microsoft-graph-client": "3.0.7",
                 "@monaco-editor/react": "4.6.0",
                 "@ms-ofb/officebrowserfeedbacknpm": "file:packages/officebrowserfeedbacknpm-1.6.6.tgz",
-                "adaptive-expressions": "4.21.4",
+                "adaptive-expressions": "4.22.2",
                 "adaptivecards": "3.0.2",
                 "adaptivecards-templating": "2.3.1",
                 "ajv": "8.12.0",
@@ -31,7 +31,7 @@
                 "dotenv-expand": "11.0.6",
                 "eslint-config-react-app": "7.0.1",
                 "eslint-plugin-react": "7.33.2",
-                "eslint-webpack-plugin": "4.0.1",
+                "eslint-webpack-plugin": "4.1.0",
                 "express": "4.19.2",
                 "expvariantassignmentsdk": "file:packages/expvariantassignmentsdk-1.0.0.tgz",
                 "file-loader": "6.2.0",
@@ -40,13 +40,13 @@
                 "guid-typescript": "1.0.9",
                 "isomorphic-fetch": "3.0.0",
                 "localforage": "1.10.0",
-                "mini-css-extract-plugin": "2.8.1",
+                "mini-css-extract-plugin": "2.9.0",
                 "monaco-editor": "0.30.1",
                 "monaco-editor-webpack-plugin": "6.0.0",
                 "office-ui-fabric-core": "11.1.0",
                 "postcss-flexbugs-fixes": "5.0.2",
                 "postcss-loader": "8.1.1",
-                "postcss-preset-env": "9.3.0",
+                "postcss-preset-env": "9.5.13",
                 "re-resizable": "6.9.11",
                 "react": "18.2.0",
                 "react-app-polyfill": "3.0.0",
@@ -56,13 +56,13 @@
                 "redux-thunk": "2.4.2",
                 "resolve": "1.22.8",
                 "sass": "1.72.0",
-                "sass-loader": "14.1.1",
-                "style-loader": "3.3.4",
-                "typescript": "5.3.3",
+                "sass-loader": "14.2.1",
+                "style-loader": "4.0.0",
+                "typescript": "5.4.5",
                 "url": "0.11.3",
                 "url-loader": "4.1.1",
-                "webpack": "5.90.3",
-                "webpack-dev-server": "4.15.1",
+                "webpack": "5.91.0",
+                "webpack-dev-server": "5.0.4",
                 "webpack-manifest-plugin": "5.0.0",
                 "workbox-webpack-plugin": "7.0.0"
         },
@@ -91,7 +91,7 @@
         ],
         "devDependencies": {
                 "@axe-core/playwright": "4.7.3",
-                "@playwright/test": "1.42.0",
+                "@playwright/test": "1.43.1",
                 "@types/chromedriver": "81.0.1",
                 "@types/isomorphic-fetch": "0.0.39",
                 "@types/jest": "29.5.12",
@@ -102,11 +102,11 @@
                 "@types/redux-logger": "3.0.11",
                 "@types/redux-mock-store": "1.0.3",
                 "@types/selenium-webdriver": "4.1.21",
-                "@typescript-eslint/eslint-plugin": "6.20.0",
+                "@typescript-eslint/eslint-plugin": "7.0.0",
                 "@typescript-eslint/parser": "6.17.0",
                 "acorn": "8.11.3",
                 "babel-jest": "29.7.0",
-                "chromedriver": "122.0.4",
+                "chromedriver": "124.0.1",
                 "eslint": "8.56.0",
                 "html-webpack-plugin": "5.6.0",
                 "jest": "29.7.0",

package.json

@@ -1,12 +1,17 @@
 import { createContext, useContext, useReducer } from 'react';
-import { PopupState, initialState } from '.';
+
+import { PopupState } from '.';
 import { reducedPopups } from './reducedPopups';
 
-const PopupStateContext = createContext<PopupState>(initialState);
+const PopupStateContext = createContext<PopupState>({
+  popups: []
+});
 const PopupDispatchContext = createContext<any>({});
 
 export function PopupsProvider({ children }: any) {
-  const [state, dispatch] = useReducer(reducedPopups, initialState);
+  const [state, dispatch] = useReducer(reducedPopups, {
+    popups: []
+  });
 
   return (
     <PopupStateContext.Provider value={state}>

src/app/services/context/popups-context/PopupsContext.tsx

@@ -15,7 +15,7 @@ export function formatJsonStringForAllBrowsers(
    * 3. format the string (works for all browsers)
    */
   try {
-    body = JSON.stringify(body).replace(/(?:\\[rnt]|[\r\n\t]+)+/g, '');
+    body = JSON.stringify(body);
     body = JSON.parse(body);
   } catch (error) {
     telemetry.trackException(

src/app/views/common/monaco/util/format-json.ts

@@ -1,6 +1,7 @@
 import {
   AccountInfo,
   AuthenticationResult,
+  BrowserAuthError,
   InteractionRequiredAuthError,
   PopupRequest,
   SilentRequest
@@ -45,8 +46,8 @@ export class AuthenticationWrapper implements IAuthenticationWrapper {
   public getSessionId(): string | null {
     const account = this.getAccount();
     if (account) {
-      const idTokenClaims: any = account?.idTokenClaims;
-      return idTokenClaims?.sid;
+      const idTokenClaims = account?.idTokenClaims;
+      return idTokenClaims?.sid ?? null;
     }
     return null;
   }
@@ -75,16 +76,19 @@ export class AuthenticationWrapper implements IAuthenticationWrapper {
       authority: this.getAuthority(),
       prompt: 'select_account',
       redirectUri: getCurrentUri(),
-      extraQueryParameters: getExtraQueryParameters()
+      extraQueryParameters: getExtraQueryParameters(),
+      tokenQueryParameters: getExtraQueryParameters()
     };
     try {
       const result = await msalApplication.loginPopup(popUpRequest);
       this.storeHomeAccountId(result.account!);
       return result;
-    } catch (error: any) {
-      const { errorCode } = error;
-      if (errorCode === 'interaction_in_progress') {
-        this.eraseInteractionInProgressCookie();
+    } catch (error: unknown) {
+      if (error instanceof BrowserAuthError){
+        const { errorCode } = error;
+        if (errorCode === 'interaction_in_progress') {
+          this.eraseInteractionInProgressCookie();
+        }
       }
       throw error;
     }
@@ -166,17 +170,14 @@ export class AuthenticationWrapper implements IAuthenticationWrapper {
       const result = await msalApplication.acquireTokenSilent(silentRequest);
       this.storeHomeAccountId(result.account!);
       return result;
-    } catch (error: any) {
+    } catch (error: unknown) {
       if (error instanceof InteractionRequiredAuthError || !this.getAccount()) {
         return this.loginWithInteraction(scopes.length > 0 ? scopes : defaultScopes, sessionId);
-
-      } else if (signInAuthError(error)) {
-        this.deleteHomeAccountId();
-        throw error;
       }
-      else {
-        throw error;
+      if (typeof error === 'string' && signInAuthError(error as string)) {
+        this.deleteHomeAccountId();
       }
+      throw error;
     }
   }
 
@@ -207,8 +208,9 @@ export class AuthenticationWrapper implements IAuthenticationWrapper {
       authority: this.getAuthority(),
       prompt: 'select_account',
       redirectUri: getCurrentUri(),
+      claims: this.getClaims(),
       extraQueryParameters: getExtraQueryParameters(),
-      claims: this.getClaims()
+      tokenQueryParameters: getExtraQueryParameters()
     };
 
     if (this.consentingToNewScopes || this.performingStepUpAuth) {
@@ -225,22 +227,20 @@ export class AuthenticationWrapper implements IAuthenticationWrapper {
       const result = await msalApplication.loginPopup(popUpRequest);
       this.storeHomeAccountId(result.account!);
       return result;
-    } catch (error: any) {
-      const { errorCode } = error;
-      if (signInAuthError(errorCode) && !this.consentingToNewScopes && (errorCode && errorCode !== 'user_cancelled')) {
-        this.clearSession();
-        if (errorCode === 'interaction_in_progress') {
-          this.eraseInteractionInProgressCookie();
+    } catch (error: unknown) {
+      if(error instanceof BrowserAuthError){
+        const { errorCode } = error;
+        const valid = !this.consentingToNewScopes && errorCode !== 'user_cancelled';
+        if (signInAuthError(errorCode) && valid) {
+          this.clearSession();
+          if (errorCode === 'interaction_in_progress') {
+            this.eraseInteractionInProgressCookie();
+          }
         }
-        throw error;
-      }
-      else {
-        throw error;
       }
-
+      throw error;
     }
   }
-
   private storeHomeAccountId(account: AccountInfo): void {
     localStorage.setItem(HOME_ACCOUNT_KEY, account.homeAccountId);
   }

src/modules/authentication/AuthenticationWrapper.ts

@@ -2,11 +2,11 @@ import { Configuration, LogLevel, PublicClientApplication } from '@azure/msal-br
 import { eventTypes, telemetry } from '../../telemetry';
 
 function getClientIdFromWindow() {
-  return (window as any).ClientId;
+  return window?.ClientId ?? '';
 }
 
 function getClientIdFromEnv() {
-  return process.env.REACT_APP_CLIENT_ID;
+  return process.env?.REACT_APP_CLIENT_ID ?? '';
 }
 
 const windowHasClientId = getClientIdFromWindow();
@@ -29,20 +29,6 @@ export const configuration: Configuration = {
           return;
         }
         telemetry.trackEvent(eventTypes.AUTH_REQUEST_EVENT, { message, level });
-        switch (level) {
-          case LogLevel.Error:
-            console.error('[MSAL]', message);
-            return;
-          case LogLevel.Info:
-            console.info('[MSAL]', message);
-            return;
-          case LogLevel.Verbose:
-            console.debug('[MSAL]', message);
-            return;
-          case LogLevel.Warning:
-            console.warn('[MSAL]', message);
-            return;
-        }
       },
       piiLoggingEnabled: false
     }

src/modules/authentication/msal-app.ts

@@ -0,0 +1,8 @@
+export {};
+declare global {
+  interface Window {
+    ClientId: string | undefined
+  }
+}
+
+window.ClientId = window.ClientId || undefined;