Chore: Update @azure/msal-browser v2 to v3 (#2825)

package.json

@@ -5,7 +5,7 @@
         "dependencies": {
                 "@augloop/types-core": "file:packages/types-core-2.16.189.tgz",
                 "@axe-core/webdriverjs": "4.7.3",
-                "@azure/msal-browser": "2.38.0",
+                "@azure/msal-browser": "3.1.0",
                 "@babel/core": "7.23.0",
                 "@babel/runtime": "7.23.1",
                 "@fluentui/react": "8.112.0",

src/app/services/actions/permissions-action-creator.spec.ts

@@ -20,7 +20,7 @@ import { authenticationWrapper } from '../../../modules/authentication';
 import thunk from 'redux-thunk';
 import { ACCOUNT_TYPE } from '../graph-constants';
 import { RevokePermissionsUtil } from './permissions-action-creator.util';
-import { AccountInfo } from '@azure/msal-browser';
+import { translateMessage } from '../../utils/translate-messages';
 const middleware = [thunk];
 let mockStore = configureMockStore(middleware);
 
@@ -252,7 +252,13 @@ describe('Permissions action creators', () => {
       uniqueId: 'string',
       tenantId: 'string',
       scopes: ['profile.Read User.Read'],
-      account: {} as AccountInfo,
+      account: {
+        homeAccountId: 'string',
+        environment: 'string',
+        tenantId: 'string',
+        username: 'string',
+        localAccountId: 'string'
+      },
       idToken: 'string',
       idTokenClaims: {},
       fromCache: true,
@@ -269,8 +275,8 @@ describe('Permissions action creators', () => {
       {
         type: 'QUERY_GRAPH_STATUS',
         response: {
-          statusText: 'Success',
-          status: 'Scope consent successful',
+          statusText: translateMessage('Success'),
+          status: translateMessage('Scope consent successful'),
           ok: true,
           messageType: 4
         }
@@ -356,8 +362,8 @@ describe('Permissions action creators', () => {
         {
           type: 'QUERY_GRAPH_STATUS',
           response: {
-            statusText: 'Revoking ',
-            status: 'Please wait while we revoke this permission',
+            statusText: translateMessage('Revoking'),
+            status: translateMessage('Please wait while we revoke this permission'),
             ok: false,
             messageType: 0
           }
@@ -366,8 +372,8 @@ describe('Permissions action creators', () => {
         {
           type: 'QUERY_GRAPH_STATUS',
           response: {
-            statusText: 'Failed',
-            status: 'An error occurred when unconsenting. Please try again',
+            statusText: translateMessage('Default scope'),
+            status: translateMessage('Cannot delete default scope'),
             ok: false,
             messageType: 1
           }
@@ -423,8 +429,8 @@ describe('Permissions action creators', () => {
         {
           type: 'QUERY_GRAPH_STATUS',
           response: {
-            statusText: 'Revoking ',
-            status: 'Please wait while we revoke this permission',
+            statusText: translateMessage('Revoking '),
+            status: translateMessage('Please wait while we revoke this permission'),
             ok: false,
             messageType: 0
           }
@@ -433,8 +439,8 @@ describe('Permissions action creators', () => {
         {
           type: 'QUERY_GRAPH_STATUS',
           response: {
-            statusText: 'Failed',
-            status: 'An error occurred when unconsenting. Please try again',
+            statusText: translateMessage('Unable to dissent'),
+            status: translateMessage('Unable to dissent. You require the following permissions to revoke'),
             ok: false,
             messageType: 1
           }
@@ -494,8 +500,8 @@ describe('Permissions action creators', () => {
         {
           type: 'QUERY_GRAPH_STATUS',
           response: {
-            statusText: 'Revoking ',
-            status: 'Please wait while we revoke this permission',
+            statusText: translateMessage('Revoking'),
+            status: translateMessage('Please wait while we revoke this permission'),
             ok: false,
             messageType: 0
           }
@@ -504,8 +510,9 @@ describe('Permissions action creators', () => {
         {
           type: 'QUERY_GRAPH_STATUS',
           response: {
-            statusText: 'Failed',
-            status: 'An error occurred when unconsenting. Please try again',
+            statusText: translateMessage('Revoking admin granted scopes'),
+            // eslint-disable-next-line max-len
+            status: translateMessage('You are unconsenting to an admin pre-consented permission'),
             ok: false,
             messageType: 1
           }

src/app/services/actions/permissions-action-creator.util.ts

@@ -65,7 +65,7 @@ export class RevokePermissionsUtil {
     if (!this.userHasRequiredPermissions(requiredPermissions, consentedScopes, grantsPayload!)) {
       throw new RevokeScopesError({
         errorText: 'Revoking admin granted scopes',
-        statusText: 'Unable to dissentYou require the following permissions to revoke',
+        statusText: 'Unable to dissent. You require the following permissions to revoke',
         status: 'Unable to dissent',
         messageType: 1
       })

src/app/services/reducers/permissions-reducer.ts

@@ -23,9 +23,10 @@ const initialState: IScopes = {
 };
 
 export function scopes(state: IScopes = initialState, action: AppAction): any {
+  let response: IPermissionsResponse;
   switch (action.type) {
     case FETCH_FULL_SCOPES_SUCCESS:
-      let response: IPermissionsResponse = { ...action.response as IPermissionsResponse };
+      response = { ...action.response as IPermissionsResponse };
       return {
         pending: { ...state.pending, isFullPermissions: false },
         data: { ...state.data, fullPermissions: response.scopes.fullPermissions },

src/app/services/reducers/request-history-reducers.ts

@@ -8,9 +8,10 @@ import {
 } from '../redux-constants';
 
 export function history(state: any[] = [], action: AppAction): any {
+  let historyItems: any[];
   switch (action.type) {
     case ADD_HISTORY_ITEM_SUCCESS:
-      let historyItems = [...state, action.response];
+      historyItems = [...state, action.response];
       historyItems = historyItems.reduce((current, compare) => {
         return current.findIndex((historyItem: IHistoryItem) => {
           return historyItem.createdAt === compare.createdAt;

src/messages/GE.json

@@ -490,5 +490,11 @@
   "Invalid URL": "Invalid URL",
   "Missing version": "The URL must include a valid version to run the query",
   "No resource found matching this query": "No resource was found matching this query",
-  "Least privileged permission": "This is the least privileged permission in the list"
+  "Least privileged permission": "This is the least privileged permission in the list",
+  "Revoking": "Revoking ",
+  "Please wait while we revoke this permission": "Please wait while we revoke this permission",
+  "Unable to dissent": "Unable to dissent",
+  "Unable to dissent. You require the following permissions to revoke": "Unable to dissent. You require Directory.Read.All and DelegatedPermissionGrant.ReadWrite.All to be able to revoke consent to permissions",
+  "Revoking admin granted scopes": "Revoking admin granted scopes",
+  "Revoking default scopes": "Revoking default scopes"
 }

src/modules/authentication/msal-app.ts

@@ -17,9 +17,12 @@ export const configuration: Configuration = {
   },
   cache: {
     cacheLocation: 'localStorage',
-    storeAuthStateInCookie: true
+    storeAuthStateInCookie: true,
+    claimsBasedCachingEnabled: true
   }
 };
 
 
-export const msalApplication = new PublicClientApplication(configuration);
+const msalApplication = new PublicClientApplication(configuration);
+msalApplication.initialize();
+export{ msalApplication };

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2020",
     "lib": [
       "dom",
       "dom.iterable",