Chore: Release 10.1.0 (#3148)

* Chore: app migration with feature flags (#3144)

.github/workflows/linter.yml

@@ -185,6 +185,7 @@ jobs:
           REACT_APP_NOMINATION_PERIOD: ${{secrets.REACT_APP_NOMINATION_PERIOD}}
           REACT_APP_COOLDOWN_PERIOD: ${{secrets.REACT_APP_COOLDOWN_PERIOD}}
           REACT_APP_USAGE_TIME: ${{secrets.REACT_APP_USAGE_TIME}}
+          REACT_APP_MIGRATION_PARAMETER: ${{secrets.REACT_APP_MIGRATION_PARAMETER}}
           CI: false
         id: builddeploy
         uses: Azure/static-web-apps-deploy@v0.0.1-preview

azure-pipelines.yml

@@ -190,6 +190,7 @@ extends:
             REACT_APP_NOMINATION_PERIOD: $(REACT_APP_NOMINATION_PERIOD)
             REACT_APP_COOLDOWN_PERIOD: $(REACT_APP_COOLDOWN_PERIOD)
             REACT_APP_USAGE_TIME: $(REACT_APP_USAGE_TIME)
+            REACT_APP_MIGRATION_PARAMETER: $(REACT_APP_MIGRATION_PARAMETER)
           displayName: "Build static assets for staging"
 
         - task: PowerShell@2
@@ -215,6 +216,7 @@ extends:
             REACT_APP_NOMINATION_PERIOD: $(REACT_APP_NOMINATION_PERIOD)
             REACT_APP_COOLDOWN_PERIOD: $(REACT_APP_COOLDOWN_PERIOD)
             REACT_APP_USAGE_TIME: $(REACT_APP_USAGE_TIME)
+            REACT_APP_MIGRATION_PARAMETER: $(REACT_APP_MIGRATION_PARAMETER)
           displayName: "Build static assets for prod"
 
         - task: PowerShell@2

package.json

@@ -1,6 +1,6 @@
 {
         "name": "graph-explorer-v2",
-        "version": "10.0.0",
+        "version": "10.1.0",
         "private": true,
         "dependencies": {
                 "@augloop/types-core": "file:packages/types-core-2.16.189.tgz",

src/app/services/variant-constants.ts

@@ -1 +1,2 @@
-export const ALWAYSSHOWBUTTONS = 'alwaysShowButtons';
+export const ALWAYSSHOWBUTTONS = 'alwaysShowButtons';
+export const SAFEROLLOUTACTIVE = 'safeRolloutActive';

src/app/services/variant-service.ts

@@ -1,12 +1,12 @@
 /* eslint-disable max-len */
-import { VariantAssignmentRequest } from 'expvariantassignmentsdk/src/interfaces/VariantAssignmentRequest';
-import {VariantAssignmentServiceClient} from 'expvariantassignmentsdk/src/contracts/VariantAssignmentServiceClient';
+import { SeverityLevel } from '@microsoft/applicationinsights-web';
 import { VariantAssignmentClientSettings } from 'expvariantassignmentsdk/src/contracts/VariantAssignmentClientSettings';
+import { VariantAssignmentServiceClient } from 'expvariantassignmentsdk/src/contracts/VariantAssignmentServiceClient';
+import { VariantAssignmentRequest } from 'expvariantassignmentsdk/src/interfaces/VariantAssignmentRequest';
+
 import { errorTypes, telemetry } from '../../telemetry';
 import { readFromLocalStorage, saveToLocalStorage } from '../utils/local-storage';
 import { EXP_URL } from './graph-constants';
-import { SeverityLevel } from '@microsoft/applicationinsights-web';
-
 
 interface TasResponse {
   Id: string;
@@ -15,6 +15,7 @@ interface TasResponse {
 interface Parameters {
   [key: string]: string | boolean | number;
 }
+
 class VariantService {
 
   private endpoint = EXP_URL;
@@ -25,21 +26,18 @@ class VariantService {
     const settings: VariantAssignmentClientSettings = { endpoint: this.endpoint };
     this.createUser();
     const request: VariantAssignmentRequest =
-        {
-          parameters: this.getParameters()
-        };
+    {
+      parameters: this.getParameters()
+    };
 
     const client = new VariantAssignmentServiceClient(settings);
-    const response = await client.getVariantAssignments(request);
-    Promise.resolve(response).then((r) => {
-      if (r){
-        this.expResponse = r.featureVariables as TasResponse[] | null;
-        this.assignmentContext = r.assignmentContext;
-      }
-    })
-      .catch((error) => {
-        telemetry.trackException(new Error(errorTypes.UNHANDLED_ERROR), SeverityLevel.Error, error);
-      });
+    try {
+      const response = await client.getVariantAssignments(request);
+      this.expResponse = response.featureVariables as TasResponse[] | null;
+      this.assignmentContext = response.assignmentContext;
+    } catch (error) {
+      telemetry.trackException(new Error(errorTypes.UNHANDLED_ERROR), SeverityLevel.Error, error as object);
+    }
   }
 
   public createUser() {
@@ -51,7 +49,7 @@ class VariantService {
     return this.assignmentContext;
   }
 
-  public async getFeatureVariables(namespace: string, flagname: string) {
+  public getFeatureVariables(namespace: string, flagname: string) {
     const defaultConfig = this.expResponse?.find(c => c.Id === namespace);
     return defaultConfig?.Parameters[flagname];
   }

src/modules/authentication/AuthenticationWrapper.ts

@@ -11,13 +11,15 @@ import {
   DEFAULT_USER_SCOPES,
   HOME_ACCOUNT_KEY
 } from '../../app/services/graph-constants';
-import { signInAuthError } from './authentication-error-hints';
+import { SAFEROLLOUTACTIVE } from '../../app/services/variant-constants';
+import variantService from '../../app/services/variant-service';
 import { geLocale } from '../../appLocale';
+import { IQuery } from '../../types/query-runner';
+import { ClaimsChallenge } from './ClaimsChallenge';
 import { getCurrentUri } from './authUtils';
+import { signInAuthError } from './authentication-error-hints';
 import IAuthenticationWrapper from './interfaces/IAuthenticationWrapper';
 import { msalApplication } from './msal-app';
-import { IQuery } from '../../types/query-runner';
-import { ClaimsChallenge } from './ClaimsChallenge';
 
 const defaultScopes = DEFAULT_USER_SCOPES.split(' ');
 
@@ -73,7 +75,7 @@ export class AuthenticationWrapper implements IAuthenticationWrapper {
       authority: this.getAuthority(),
       prompt: 'select_account',
       redirectUri: getCurrentUri(),
-      extraQueryParameters: { mkt: geLocale }
+      extraQueryParameters: getExtraQueryParameters()
     };
     try {
       const result = await msalApplication.loginPopup(popUpRequest);
@@ -205,7 +207,7 @@ export class AuthenticationWrapper implements IAuthenticationWrapper {
       authority: this.getAuthority(),
       prompt: 'select_account',
       redirectUri: getCurrentUri(),
-      extraQueryParameters: { mkt: geLocale },
+      extraQueryParameters: getExtraQueryParameters(),
       claims: this.getClaims()
     };
 
@@ -297,3 +299,20 @@ export class AuthenticationWrapper implements IAuthenticationWrapper {
     window.sessionStorage.clear();
   }
 }
+
+function getExtraQueryParameters(): { [key: string]: string } {
+  const params: { [key: string]: string } = {
+    mkt: geLocale
+  };
+  getSafeRolloutParameter(params);
+  return params;
+}
+
+function getSafeRolloutParameter(params: { [key: string]: string; }) {
+  const safeRolloutActive = variantService.getFeatureVariables('default', SAFEROLLOUTACTIVE);
+  const migrationParam = process.env.REACT_APP_MIGRATION_PARAMETER;
+  if (safeRolloutActive && migrationParam) {
+    params.safe_rollout = migrationParam;
+  }
+}
+

src/modules/authentication/msal-app.ts

@@ -1,4 +1,5 @@
-import { Configuration, PublicClientApplication } from '@azure/msal-browser';
+import { Configuration, LogLevel, PublicClientApplication } from '@azure/msal-browser';
+import { eventTypes, telemetry } from '../../telemetry';
 
 function getClientIdFromWindow() {
   return (window as any).ClientId;
@@ -19,10 +20,36 @@ export const configuration: Configuration = {
     cacheLocation: 'localStorage',
     storeAuthStateInCookie: true,
     claimsBasedCachingEnabled: true
+  },
+  system: {
+    loggerOptions: {
+      logLevel: LogLevel.Verbose,
+      loggerCallback: (level, message, containsPii) => {
+        if (containsPii) {
+          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
+    }
   }
 };
 
 
 const msalApplication = new PublicClientApplication(configuration);
 msalApplication.initialize();
-export{ msalApplication };
+export { msalApplication };

src/telemetry/event-types.ts

@@ -7,3 +7,4 @@ export const LISTITEM_CLICK_EVENT = 'LISTITEM_CLICK_EVENT';
 export const DROPDOWN_CHANGE_EVENT = 'DROPDOWN_CHANGE_EVENT';
 export const WINDOW_OPEN_EVENT = 'WINDOW_OPEN_EVENT';
 export const KEYBOARD_COPY_EVENT = 'KEYBOARD_COPY_EVENT';
+export const AUTH_REQUEST_EVENT = 'AUTH_REQUEST_EVENT';