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_INSTRUMENTATION_KEY: ${{ secrets.REACT_APP_STAGING_INSTRUMENTATION_KEY }}
         id: builddeploy
         uses: Azure/static-web-apps-deploy@v0.0.1-preview

src/app/services/actions/autocomplete-action-creators.ts

@@ -1,10 +1,6 @@
 import { suggestions } from '../../../modules/suggestions';
 import { IAction } from '../../../types/action';
-import {
-  AUTOCOMPLETE_FETCH_ERROR,
-  AUTOCOMPLETE_FETCH_PENDING,
-  AUTOCOMPLETE_FETCH_SUCCESS,
-} from '../redux-constants';
+import { AUTOCOMPLETE_FETCH_ERROR, AUTOCOMPLETE_FETCH_PENDING, AUTOCOMPLETE_FETCH_SUCCESS } from '../redux-constants';
 
 export function fetchAutocompleteSuccess(response: object): IAction {
   return {

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/permissions-action-creator.ts

@@ -1,4 +1,3 @@
-import { SeverityLevel } from '@microsoft/applicationinsights-web';
 import { MessageBarType } from 'office-ui-fabric-react';
 
 import { geLocale } from '../../../appLocale';
@@ -9,15 +8,8 @@ import { IRequestOptions } from '../../../types/request';
 import { sanitizeQueryUrl } from '../../utils/query-url-sanitization';
 import { parseSampleUrl } from '../../utils/sample-url-generation';
 import { translateMessage } from '../../utils/translate-messages';
-import {
-  FETCH_SCOPES_ERROR,
-  FETCH_SCOPES_PENDING,
-  FETCH_SCOPES_SUCCESS,
-} from '../redux-constants';
-import {
-  getAuthTokenSuccess,
-  getConsentedScopesSuccess,
-} from './auth-action-creators';
+import { FETCH_SCOPES_ERROR, FETCH_SCOPES_PENDING, FETCH_SCOPES_SUCCESS } from '../redux-constants';
+import { getAuthTokenSuccess, getConsentedScopesSuccess } from './auth-action-creators';
 import { setQueryResponseStatus } from './query-status-action-creator';
 
 export function fetchScopesSuccess(response: object): IAction {
@@ -60,9 +52,8 @@ export function fetchScopes(query?: IQuery): Function {
       }
 
       if (devxApi.parameters) {
-        permissionsUrl = `${permissionsUrl}${query ? '&' : '?'}${
-          devxApi.parameters
-        }`;
+        permissionsUrl = `${permissionsUrl}${query ? '&' : '?'}${devxApi.parameters
+          }`;
       }
 
       const headers = {

src/app/services/actions/samples-action-creators.ts

@@ -1,12 +1,7 @@
-import { SeverityLevel } from '@microsoft/applicationinsights-web';
 import { geLocale } from '../../../appLocale';
 import { IAction } from '../../../types/action';
 import { IRequestOptions } from '../../../types/request';
-import {
-  SAMPLES_FETCH_ERROR,
-  SAMPLES_FETCH_PENDING,
-  SAMPLES_FETCH_SUCCESS,
-} from '../redux-constants';
+import { SAMPLES_FETCH_ERROR, SAMPLES_FETCH_PENDING, SAMPLES_FETCH_SUCCESS } from '../redux-constants';
 
 export function fetchSamplesSuccess(response: object): IAction {
   return {

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

@@ -1,11 +1,7 @@
 import { IAction } from '../../../types/action';
 import { IRequestOptions } from '../../../types/request';
 import { parseSampleUrl } from '../../utils/sample-url-generation';
-import {
-  GET_SNIPPET_ERROR,
-  GET_SNIPPET_PENDING,
-  GET_SNIPPET_SUCCESS,
-} from '../redux-constants';
+import { GET_SNIPPET_ERROR, GET_SNIPPET_PENDING, GET_SNIPPET_SUCCESS } from '../redux-constants';
 
 export function getSnippetSuccess(response: string): IAction {
   return {
@@ -50,11 +46,10 @@ export function getSnippet(language: string): Function {
         'Content-Type': 'application/http',
       };
       // tslint:disable-next-line: max-line-length
-      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
-      )}`;
+      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
+        )}`;
       const options: IRequestOptions = { method, headers, body };
       const obj: any = {};
 

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

@@ -0,0 +1,16 @@
+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 {
+  switch (action.type) {
+    case SET_ACTIVE_CLOUD_SUCCESS:
+      return action.response;
+
+    default:
+      return state;
+  }
+}

src/app/services/reducers/index.ts

@@ -2,10 +2,11 @@ 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 { permissionsPanelOpen } from './permissions-panel-reducer';
 import { graphExplorerMode } from './graph-explorer-mode-reducer';
+import { permissionsPanelOpen } from './permissions-panel-reducer';
 import { scopes } from './permissions-reducer';
 import { profile } from './profile-reducer';
 import { sampleQuery } from './query-input-reducers';
@@ -24,6 +25,7 @@ export default combineReducers({
   adaptiveCard,
   authToken,
   autoComplete,
+  cloud,
   consentedScopes,
   graphExplorerMode,
   graphResponse,

src/app/services/redux-constants.ts

@@ -41,3 +41,4 @@ 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';

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

@@ -1,5 +1,4 @@
 /* eslint-disable no-useless-escape */
-import { GRAPH_URL } from '../services/graph-constants';
 import {
   isAllAlpha,
   sanitizeQueryParameter,
@@ -55,6 +54,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
@@ -82,7 +82,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,18 +1,22 @@
-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}`;
+      queryVersion = (version) ? version : getGraphVersion(url);
+      requestUrl = getRequestUrl(url, queryVersion);
+      search = generateSearchParameters(url, search);
+      sampleUrl = generateSampleUrl(url, queryVersion, requestUrl, search);
     } catch (error) {
       if (error.message === `Failed to construct 'URL': Invalid URL`) {
         return {
@@ -27,8 +31,21 @@ 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);
@@ -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

@@ -1,6 +1,6 @@
 import {
-  Announced,
-  IStackTokens, ITheme, styled
+  Announced, IStackTokens,
+  ITheme, styled
 } from 'office-ui-fabric-react';
 import React, { Component } from 'react';
 import { InjectedIntl, injectIntl } from 'react-intl';
@@ -9,6 +9,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 {
@@ -68,6 +70,7 @@ interface IAppState {
   selectedVerb: string;
   mobileScreen: boolean;
   hideDialog: boolean;
+  showCloudDialog: boolean;
 }
 
 class App extends Component<IAppProps, IAppState> {
@@ -78,6 +81,7 @@ class App extends Component<IAppProps, IAppState> {
     this.state = {
       selectedVerb: 'GET',
       mobileScreen: false,
+      showCloudDialog: false,
       hideDialog: true
     };
   }
@@ -118,8 +122,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();
@@ -302,6 +323,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, intl: { messages } }: any = this.props;
@@ -386,6 +408,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 'office-ui-fabric-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';
@@ -40,7 +41,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

@@ -45,7 +45,7 @@ export class Authentication extends Component<IAuthenticationProps, { loginInPro
         statusText: messages['Authentication failed'],
         status: errorCode === 'popup_window_error'
           ? translateMessage('popup blocked, allow pop-up windows in your browser')
-          : errorCode ? errorCode.replace('_', ' ') : '',
+          : errorCode ? errorCode.replace(/_/g, ' ') : '',
         messageType: MessageBarType.error
       });
       this.setState({ loginInProgress: false });