Feature: sovereign clouds

.github/workflows/azure-static-web-apps-jolly-sand-0ac78c710.yml

@@ -21,6 +21,7 @@ jobs:
       - name: Build And Deploy
         env:
           REACT_APP_CLIENT_ID: ${{ secrets.REACT_APP_CLIENT_ID }}
+          REACT_APP_CLIENT_ID_CHINA: ${{ secrets.REACT_APP_CLIENT_ID_CHINA }}
           REACT_APP_FEEDBACK_CAMPAIGN_ID: ${{ secrets.REACT_APP_FEEDBACK_CAMPAIGN_ID }},
           REACT_APP_NPS_FEEDBACK_CAMPAIGN_ID: ${{secrets.REACT_APP_NPS_FEEDBACK_CAMPAIGN_ID}}
           REACT_APP_INSTRUMENTATION_KEY: ${{ secrets.REACT_APP_STAGING_INSTRUMENTATION_KEY }}

src/app/services/actions/cloud-action-creator.ts

@@ -0,0 +1,9 @@
+import { IAction } from '../../../types/action';
+import { SET_ACTIVE_CLOUD_SUCCESS } from '../redux-constants';
+
+export function setActiveCloud(response: object): IAction {
+  return {
+    type: SET_ACTIVE_CLOUD_SUCCESS,
+    response
+  };
+}

src/app/services/actions/snippet-action-creator.ts

@@ -53,8 +53,7 @@ export function getSnippet(language: string): Function {
         'Content-Type': 'application/http'
       };
       // eslint-disable-next-line max-len
-      const body = `${sampleQuery.selectedVerb} /${queryVersion}/${
-        requestUrl + search
+      const body = `${sampleQuery.selectedVerb} /${queryVersion}/${requestUrl + search
       } HTTP/1.1\r\nHost: graph.microsoft.com\r\nContent-Type: application/json\r\n\r\n${JSON.stringify(
         sampleQuery.sampleBody
       )}`;

src/app/services/hooks/index.ts

@@ -0,0 +1,5 @@
+import { usePrevious } from './usePrevious';
+
+export default {
+  usePrevious
+}

src/app/services/hooks/usePrevious.tsx

@@ -0,0 +1,17 @@
+import { useRef, useEffect } from 'react';
+/**
+ * Keeps track of the previous value of the item passed to it before a re-render
+ *
+ * @param value
+ * @description The ref object is a generic container whose current property is mutable
+ *  and can hold any value, similar to an instance property on a class
+ * @returns Return previous value
+ *  (happens before update in useEffect)
+ */
+export function usePrevious(value: any) {
+  const ref = useRef('');
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}

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

@@ -0,0 +1,13 @@
+import { globalCloud } from '../../../modules/sovereign-clouds';
+import { IAction } from '../../../types/action';
+import { ICloud } from '../../../types/cloud';
+import { SET_ACTIVE_CLOUD_SUCCESS } from '../redux-constants';
+
+const initialState: ICloud = globalCloud;
+
+export function cloud(state = initialState, action: IAction): ICloud {
+  if (action.type === SET_ACTIVE_CLOUD_SUCCESS) {
+    return action.response;
+  }
+  return state;
+}

src/app/services/reducers/index.ts

@@ -3,6 +3,7 @@ import { combineReducers } from 'redux';
 import { adaptiveCard } from './adaptive-cards-reducer';
 import { authToken, consentedScopes } from './auth-reducers';
 import { autoComplete } from './autocomplete-reducer';
+import { cloud } from './cloud-reducer';
 import { devxApi } from './devxApi-reducers';
 import { dimensions } from './dimensions-reducers';
 import { graphExplorerMode } from './graph-explorer-mode-reducer';
@@ -28,6 +29,7 @@ export default combineReducers({
   adaptiveCard,
   authToken,
   autoComplete,
+  cloud,
   consentedScopes,
   devxApi,
   dimensions,

src/app/services/redux-constants.ts

@@ -40,6 +40,7 @@ export const AUTOCOMPLETE_FETCH_PENDING = 'AUTOCOMPLETE_FETCH_PENDING';
 export const RESIZE_SUCCESS = 'RESIZE_SUCCESS';
 export const RESPONSE_EXPANDED = 'RESPONSE_EXPANDED';
 export const PERMISSIONS_PANEL_OPEN = 'PERMISSIONS_PANEL_OPEN';
+export const SET_ACTIVE_CLOUD_SUCCESS = 'SET_ACTIVE_CLOUD_SUCCESS';
 export const AUTHENTICATION_PENDING = 'AUTHENTICATION_PENDING';
 export const SET_GRAPH_PROXY_URL = 'SET_GRAPH_PROXY_URL';
 export const FETCH_RESOURCES_SUCCESS = 'RESOURCES_FETCH_SUCCESS';

src/app/utils/query-url-sanitization.ts

@@ -1,6 +1,5 @@
 /* eslint-disable no-useless-escape */
 import { IQuery } from '../../types/query-runner';
-import { GRAPH_URL } from '../services/graph-constants';
 import {
   isAllAlpha,
   sanitizeQueryParameter
@@ -56,6 +55,7 @@ export function sanitizeGraphAPISandboxUrl(url: string): string {
  */
 export function sanitizeQueryUrl(url: string): string {
   url = decodeURIComponent(url);
+  const { origin } = new URL(url);
 
   const { search, queryVersion, requestUrl } = parseSampleUrl(url);
   const queryString: string = search
@@ -83,7 +83,7 @@ export function sanitizeQueryUrl(url: string): string {
     });
   }
 
-  return `${GRAPH_URL}/${queryVersion}/${resourceUrl}${queryString}`;
+  return `${origin}/${queryVersion}/${resourceUrl}${queryString}`;
 }
 
 /**

src/app/utils/sample-url-generation.ts

@@ -1,19 +1,23 @@
-import { GRAPH_URL } from '../services/graph-constants';
+interface IParsedSample {
+  queryVersion: string;
+  requestUrl: string;
+  sampleUrl: string;
+  search: string;
+}
 
-export function parseSampleUrl(url: string, version?: string) {
+export function parseSampleUrl(url: string, version?: string): IParsedSample {
   let requestUrl = '';
   let queryVersion = '';
   let sampleUrl = '';
   let search = '';
 
   if (url !== '') {
     try {
-      const urlObject: URL = new URL(url);
-      requestUrl = decodeURIComponent(urlObject.pathname.substr(6).replace(/\/$/, ''));
-      queryVersion = (version) ? version : urlObject.pathname.substring(1, 5);
-      search = generateSearchParameters(urlObject, search);
-      sampleUrl = `${GRAPH_URL}/${queryVersion}/${requestUrl + search}`;
-    } catch (error) {
+      queryVersion = (version) ? version : getGraphVersion(url);
+      requestUrl = getRequestUrl(url, queryVersion);
+      search = generateSearchParameters(url, search);
+      sampleUrl = generateSampleUrl(url, queryVersion, requestUrl, search);
+    } catch (error: any) {
       if (error.message === 'Failed to construct \'URL\': Invalid URL') {
         return {
           queryVersion, requestUrl, sampleUrl, search
@@ -27,13 +31,26 @@ export function parseSampleUrl(url: string, version?: string) {
   };
 }
 
-function generateSearchParameters(urlObject: URL, search: string) {
-  const searchParameters = urlObject.search;
+function getRequestUrl(url: string, version: string): string {
+  const { pathname } = new URL(url);
+  const versionToReplace = (pathname.startsWith(`/${version}`)) ? version : getGraphVersion(url);
+  const requestContent = pathname.split(versionToReplace + '/').pop()!;
+  return decodeURIComponent(requestContent?.replace(/\/$/, ''));
+}
+
+function getGraphVersion(url: string): string {
+  const { pathname } = new URL(url);
+  const parts = pathname.substring(1).split('/');
+  return parts[0];
+}
+
+function generateSearchParameters(url: string, search: string) {
+  const { search: searchParameters } = new URL(url);
   if (searchParameters) {
     try {
       search = decodeURI(searchParameters);
     }
-    catch (error) {
+    catch (error: any) {
       if (error.message === 'URI malformed') {
         search = searchParameters;
       }
@@ -42,3 +59,7 @@ function generateSearchParameters(urlObject: URL, search: string) {
   return search;
 }
 
+function generateSampleUrl(url: string, queryVersion: string, requestUrl: string, search: string): string {
+  const { origin } = new URL(url);
+  return `${origin}/${queryVersion}/${requestUrl + search}`;
+}

src/app/utils/translate-messages.ts

@@ -12,7 +12,7 @@ export function translateMessage(messageId: string): string {
 function getTranslation(messageId: string, locale: string) {
   const localeMessages: object = (messages as { [key: string]: object })[locale];
   if (localeMessages) {
-    const key: any = Object.keys(localeMessages).find(k => k === messageId);
+    const key: any = Object.keys(localeMessages).find(id => id === messageId);
     const message = (localeMessages as { [key: string]: object })[key];
     if (message) {
       return message.toString();

src/app/views/App.tsx

@@ -6,6 +6,7 @@ import { bindActionCreators, Dispatch } from 'redux';
 
 import { geLocale } from '../../appLocale';
 import { authenticationWrapper } from '../../modules/authentication';
+import { getCurrentCloud, getEligibleCloud } from '../../modules/sovereign-clouds';
 import { componentNames, eventTypes, telemetry } from '../../telemetry';
 import { loadGETheme } from '../../themes';
 import { ThemeContext } from '../../themes/theme-context';
@@ -40,6 +41,7 @@ import { QueryResponse } from './query-response';
 import { QueryRunner } from './query-runner';
 import { parse } from './query-runner/util/iframe-message-parser';
 import { Settings } from './settings';
+import { SovereignClouds } from './settings/SovereignClouds';
 import { Sidebar } from './sidebar/Sidebar';
 
 interface IAppProps {
@@ -69,6 +71,7 @@ interface IAppState {
   selectedVerb: string;
   mobileScreen: boolean;
   hideDialog: boolean;
+  showCloudDialog: boolean;
 }
 
 class App extends Component<IAppProps, IAppState> {
@@ -82,6 +85,7 @@ class App extends Component<IAppProps, IAppState> {
     this.state = {
       selectedVerb: 'GET',
       mobileScreen: false,
+      showCloudDialog: false,
       hideDialog: true
     };
   }
@@ -122,8 +126,25 @@ class App extends Component<IAppProps, IAppState> {
     // Listens for messages from host document
     window.addEventListener('message', this.receiveMessage, false);
     this.handleSharedQueries();
+    this.toggleConfirmCloud();
   };
 
+  public toggleConfirmCloud = () => {
+    if (this.state.showCloudDialog) {
+      this.setState({
+        showCloudDialog: false
+      })
+    } else {
+      const currentCloud = getCurrentCloud();
+      const eligibleCloud = getEligibleCloud();
+      if (!currentCloud && eligibleCloud) {
+        this.setState({
+          showCloudDialog: true
+        })
+      }
+    }
+  }
+
   public handleSharedQueries() {
     const { actions } = this.props;
     const queryStringParams = this.getQueryStringParams();
@@ -310,6 +331,7 @@ class App extends Component<IAppProps, IAppState> {
   };
 
   public render() {
+    const { showCloudDialog } = this.state;
     const classes = classNames(this.props);
     const { authenticated, graphExplorerMode, queryState, minimised, termsOfUse, sampleQuery,
       actions, sidebarProperties }: any = this.props;
@@ -403,6 +425,11 @@ class App extends Component<IAppProps, IAppState> {
             </div>
           </div>
         </div>
+        <SovereignClouds
+          prompt={true}
+          cloudSelectorOpen={showCloudDialog}
+          toggleCloudSelector={this.toggleConfirmCloud}
+        />
       </ThemeContext.Provider>
     );
   }

src/app/views/app-sections/StatusMessages.tsx

@@ -1,6 +1,7 @@
 import { Link, MessageBar } from '@fluentui/react';
 import React, { Fragment } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { replaceBaseUrl } from '../../../modules/sovereign-clouds';
 
 import { IQuery } from '../../../types/query-runner';
 import { GRAPH_URL } from '../../services/graph-constants';
@@ -38,7 +39,7 @@ export function statusMessages(queryState: any, sampleQuery: IQuery, actions: an
 
   function setQuery(link: string) {
     const query: IQuery = { ...sampleQuery };
-    query.sampleUrl = link;
+    query.sampleUrl = replaceBaseUrl(link);
     actions.setSampleQuery(query);
   }
 

src/app/views/authentication/Authentication.tsx

@@ -42,17 +42,17 @@ const Authentication = (props: any) => {
         dispatch(getConsentedScopesSuccess(authResponse.scopes));
       }
     } catch (error: any) {
-      const { errorCode } = error;
-      if (signInAuthError(errorCode)) {
+      const errorCode = error.errorCode;
+      if (errorCode && signInAuthError(errorCode)) {
         authenticationWrapper.clearSession();
       }
       dispatch(
         setQueryResponseStatus({
           ok: false,
           statusText: messages['Authentication failed'],
-          status: removeUnderScore(errorCode),
+          status: (errorCode) ? removeUnderScore(errorCode) : '',
           messageType: MessageBarType.error,
-          hint: getSignInAuthErrorHint(errorCode)
+          hint: (errorCode) ? getSignInAuthErrorHint(errorCode) : null
         })
       );
       setLoginInProgress(false);
@@ -61,8 +61,7 @@ const Authentication = (props: any) => {
         SeverityLevel.Error,
         {
           ComponentName: componentNames.AUTHENTICATION_ACTION,
-          Message: `Authentication failed: ${errorCode ? removeUnderScore(errorCode) : ''
-          }`
+          Message: `Authentication failed: ${errorCode ? removeUnderScore(errorCode) : ''}`
         }
       );
     }

src/app/views/authentication/AuthenticationErrorsHints.ts

@@ -15,7 +15,11 @@ export function getSignInAuthErrorHint(error: string): string {
 }
 
 export function signInAuthError(error: string): boolean {
-  return authErrorList.includes(error.trim());
+  console.log({ error });
+  if (error) {
+    return authErrorList.includes(error.trim());
+  }
+  return false;
 }
 
 export function getConsentAuthErrorHint(error: string): string {