Feature: sovereign clouds

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

@@ -1,10 +1,12 @@
-import thunk from 'redux-thunk';
 import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
 import { store } from '../../../../src/store/index';
-import { ApplicationState } from '../../../types/root';
-import { Mode } from '../../../types/enums';
 import { fetchAutoCompleteOptions } from '../../../app/services/actions/autocomplete-action-creators';
+import { globalCloud } from '../../../modules/sovereign-clouds';
 import { suggestions } from '../../../modules/suggestions/suggestions';
+import { Mode } from '../../../types/enums';
+import { ApplicationState } from '../../../types/root';
 
 const middleware = [thunk];
 const mockStore = configureMockStore(middleware);
@@ -36,6 +38,7 @@ const mockState: ApplicationState = {
       template: 'Template'
     }
   },
+  cloud: globalCloud,
   graphExplorerMode: Mode.Complete,
   sidebarProperties: {
     showSidebar: true,

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

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

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

@@ -1,26 +1,31 @@
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
 import {
-  FETCH_SCOPES_ERROR,
   FETCH_FULL_SCOPES_SUCCESS,
+  FETCH_SCOPES_ERROR,
   FETCH_URL_SCOPES_PENDING
 } from '../../../app/services/redux-constants';
-
+import { authenticationWrapper } from '../../../modules/authentication';
+import { globalCloud } from '../../../modules/sovereign-clouds';
+import { store } from '../../../store/index';
+import { Mode } from '../../../types/enums';
+import { IPermissionsResponse } from '../../../types/permissions';
+import { ApplicationState } from '../../../types/root';
+import { translateMessage } from '../../utils/translate-messages';
+import { ACCOUNT_TYPE } from '../graph-constants';
 import {
-  fetchFullScopesSuccess, fetchScopesError, getPermissionsScopeType, fetchScopes,
   consentToScopes,
-  fetchUrlScopesPending,
   fetchFullScopesPending,
+  fetchFullScopesSuccess,
+  fetchScopes,
+  fetchScopesError,
+  fetchUrlScopesPending,
+  getPermissionsScopeType,
   revokeScopes
 } from './permissions-action-creator';
-import { IPermissionsResponse } from '../../../types/permissions';
-import { store } from '../../../store/index';
-import { ApplicationState } from '../../../types/root';
-import { Mode } from '../../../types/enums';
-import configureMockStore from 'redux-mock-store';
-import { authenticationWrapper } from '../../../modules/authentication';
-import thunk from 'redux-thunk';
-import { ACCOUNT_TYPE } from '../graph-constants';
 import { RevokePermissionsUtil } from './permissions-action-creator.util';
-import { translateMessage } from '../../utils/translate-messages';
+
 const middleware = [thunk];
 let mockStore = configureMockStore(middleware);
 
@@ -122,7 +127,8 @@ const mockState: ApplicationState = {
       children: []
     },
     error: null
-  }
+  },
+  cloud: globalCloud
 }
 const currentState = store.getState();
 store.getState = () => {

src/app/services/actions/resource-explorer-action-creators.spec.ts

@@ -11,6 +11,7 @@ import {
 import { AppAction } from '../../../types/action';
 import { Mode } from '../../../types/enums';
 import { ApplicationState } from '../../../types/root';
+import { globalCloud } from '../../../modules/sovereign-clouds';
 
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
@@ -99,7 +100,8 @@ const mockState: ApplicationState = {
       children: []
     },
     error: null
-  }
+  },
+  cloud: globalCloud
 }
 
 const paths = [

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 { AppAction } 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: AppAction): 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 { collections } from './collections-reducer';
 import { devxApi } from './devxApi-reducers';
 import { dimensions } from './dimensions-reducers';
@@ -27,6 +28,7 @@ export default combineReducers({
   adaptiveCard,
   authToken,
   autoComplete,
+  cloud,
   collections,
   consentedScopes,
   devxApi,

src/app/services/redux-constants.ts

@@ -42,6 +42,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/translate-messages.ts

@@ -7,7 +7,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 { removeSpinners } from '../..';
 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';
@@ -37,6 +38,7 @@ import { MainHeader } from './main-header/MainHeader';
 import { QueryResponse } from './query-response';
 import { QueryRunner } from './query-runner';
 import { parse } from './query-runner/util/iframe-message-parser';
+import { SovereignClouds } from './settings/SovereignClouds';
 import { Sidebar } from './sidebar/Sidebar';
 import { ValidationProvider } from '../services/context/validation-context/ValidationProvider';
 export interface IAppProps {
@@ -62,6 +64,7 @@ interface IAppState {
   selectedVerb: string;
   mobileScreen: boolean;
   hideDialog: boolean;
+  showCloudDialog: boolean;
   sidebarTabSelection: string;
 }
 
@@ -76,6 +79,7 @@ class App extends Component<IAppProps, IAppState> {
     this.state = {
       selectedVerb: 'GET',
       mobileScreen: false,
+      showCloudDialog: false,
       hideDialog: true,
       sidebarTabSelection: 'sample-queries'
     };
@@ -125,8 +129,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();
@@ -364,6 +385,7 @@ class App extends Component<IAppProps, IAppState> {
   }
 
   public render() {
+    const { showCloudDialog } = this.state;
     const classes = classNames(this.props);
     const { authenticated, graphExplorerMode, minimised, sampleQuery,
       sidebarProperties, dimensions }: any = this.props;
@@ -484,9 +506,14 @@ class App extends Component<IAppProps, IAppState> {
               <TermsOfUseMessage />
             </div>
           </div>
+          <SovereignClouds
+            prompt={true}
+            cloudSelectorOpen={showCloudDialog}
+            toggleCloudSelector={this.toggleConfirmCloud}
+          />
           <PopupsWrapper />
         </PopupsProvider>
-      </ThemeContext.Provider>
+      </ThemeContext.Provider >
     );
   }
 }

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

@@ -2,6 +2,7 @@ import { Link, MessageBar } from '@fluentui/react';
 import { Fragment } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { replaceBaseUrl } from '../../../modules/sovereign-clouds';
 import { AppDispatch, useAppSelector } from '../../../store';
 import { IQuery } from '../../../types/query-runner';
 import { setSampleQuery } from '../../services/actions/query-input-action-creators';
@@ -13,6 +14,7 @@ import {
 } from '../../utils/status-message';
 import { translateMessage } from '../../utils/translate-messages';
 
+
 const StatusMessages = () => {
   const dispatch: AppDispatch = useDispatch();
   const { queryRunnerStatus, sampleQuery } =
@@ -47,7 +49,7 @@ const StatusMessages = () => {
   function setQuery(link: string) {
     const query: IQuery = { ...sampleQuery };
     link = link.replace(/\.$/, '');
-    query.sampleUrl = link;
+    query.sampleUrl = replaceBaseUrl(link);
     query.selectedVerb = 'GET';
     dispatch(setSampleQuery(query));
   }

src/app/views/authentication/Authentication.tsx

@@ -37,8 +37,8 @@ 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(
@@ -47,7 +47,7 @@ const Authentication = (props: any) => {
           statusText: translateMessage('Authentication failed'),
           status: removeUnderScore(errorCode),
           messageType: MessageBarType.error,
-          hint: getSignInAuthErrorHint(errorCode)
+          hint: (errorCode) ? getSignInAuthErrorHint(errorCode) : null
         })
       );
       setLoginInProgress(false);

src/app/views/authentication/profile/Profile.tsx

@@ -6,15 +6,18 @@ import { useId } from '@fluentui/react-hooks';
 import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { globalCloud, storeCloudValue } from '../../../../modules/sovereign-clouds';
 import { AppDispatch, useAppSelector } from '../../../../store';
 import { Mode } from '../../../../types/enums';
 import { signOut } from '../../../services/actions/auth-action-creators';
+import { setActiveCloud } from '../../../services/actions/cloud-action-creator';
 import { getProfileInfo } from '../../../services/actions/profile-action-creators';
 import { usePopups } from '../../../services/hooks';
 import { translateMessage } from '../../../utils/translate-messages';
 import { classNames } from '../../classnames';
 import { authenticationStyles } from '../Authentication.styles';
 import { profileStyles } from './Profile.styles';
+
 const getInitials = (name: string) => {
   let initials = '';
   if (name && name !== '') {
@@ -44,8 +47,8 @@ const Profile = (props: any) => {
   const labelId = useId('callout-label');
   const descriptionId = useId('callout-description');
   const theme = getTheme();
-  const { personaStyleToken, profileSpinnerStyles, permissionsLabelStyles, personaButtonStyles,
-    profileContainerStyles } = profileStyles(theme);
+  const { personaStyleToken, profileSpinnerStyles, permissionsLabelStyles,
+    personaButtonStyles, profileContainerStyles } = profileStyles(theme);
 
   useEffect(() => {
     if (authenticated) {
@@ -59,6 +62,8 @@ const Profile = (props: any) => {
   }
 
   const handleSignOut = () => {
+    storeCloudValue(globalCloud.name);
+    dispatch(setActiveCloud(globalCloud));
     dispatch(signOut());
   }