From 7e289854b4d440eae9f210a8cd6e6b096a7054b7 Mon Sep 17 00:00:00 2001
From: "Craig Boger (from Dev Box)" <bogercraig@microsoft.com>
Date: Tue, 28 Jan 2025 15:41:43 -0800
Subject: [PATCH] Limit region selection to portal and hosted AAD auth.  SQL
 accounts only.  Could possibly enable on table and gremlin later.

---
 .../Panes/SettingsPane/SettingsPane.tsx       | 61 ++++++++-----------
 src/hooks/useKnockoutExplorer.ts              | 53 ++++++----------
 2 files changed, 46 insertions(+), 68 deletions(-)

diff --git a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
index 377d6399d..9e79e6391 100644
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -635,20 +635,38 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                       Learn more{" "}
                     </a>
                   </div>
-                  <ChoiceGroup
-                    ariaLabelledBy="enableDataPlaneRBACOptions"
-                    options={dataPlaneRBACOptionsList}
-                    styles={choiceButtonStyles}
-                    selectedKey={enableDataPlaneRBACOption}
-                    onChange={handleOnDataPlaneRBACOptionChange}
+                </AccordionPanel>
+              </AccordionItem>
+            )}
+          {userContext.apiType === "SQL" && userContext.authType === AuthType.AAD && (
+            <AccordionItem value="3">
+              <AccordionHeader>
+                <div className={styles.header}>Region Selection</div>
+              </AccordionHeader>
+              <AccordionPanel>
+                <div className={styles.settingsSectionContainer}>
+                  <div className={styles.settingsSectionDescription}>
+                    Changes region the Cosmos Client uses to access account.
+                  </div>
+                  <div>
+                    <span className={styles.subHeader}>Select Region</span>
+                    <InfoTooltip className={styles.headerIcon}>
+                      Changes the account endpoint used to perform client operations.
+                    </InfoTooltip>
+                  </div>
+                  <Dropdown
+                    placeholder={regionOptions.find((option) => option.key === selectedRegion)?.text}
+                    onChange={handleOnSelectedRegionOptionChange}
+                    options={regionOptions}
+                    styles={{ root: { marginBottom: "10px" } }}
                   />
                 </div>
               </AccordionPanel>
             </AccordionItem>
           )}
-          {userContext.apiType === "SQL" && !isEmulator && (
+          {userContext.apiType === "SQL" && (
             <>
-              <AccordionItem value="3">
+              <AccordionItem value="4">
                 <AccordionHeader>
                   <div className={styles.header}>Query Timeout</div>
                 </AccordionHeader>
@@ -689,7 +707,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                 </AccordionPanel>
               </AccordionItem>
 
-              <AccordionItem value="4">
+              <AccordionItem value="5">
                 <AccordionHeader>
                   <div className={styles.header}>RU Limit</div>
                 </AccordionHeader>
@@ -723,31 +741,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                 </AccordionPanel>
               </AccordionItem>
 
-              <AccordionItem value="5">
-                <AccordionHeader>
-                  <div className={styles.header}>Region Selection</div>
-                </AccordionHeader>
-                <AccordionPanel>
-                  <div className={styles.settingsSectionContainer}>
-                    <div className={styles.settingsSectionDescription}>
-                      Changes region the Cosmos Client uses to access account.
-                    </div>
-                    <div>
-                      <span className={styles.subHeader}>Select Region</span>
-                      <InfoTooltip className={styles.headerIcon}>
-                        Changes the account endpoint used to perform client operations.
-                      </InfoTooltip>
-                    </div>
-                    <Dropdown
-                      placeholder={regionOptions.find((option) => option.key === selectedRegion)?.text}
-                      onChange={handleOnSelectedRegionOptionChange}
-                      options={regionOptions}
-                      styles={{ root: { marginBottom: "10px" } }}
-                    />
-                  </div>
-                </AccordionPanel>
-              </AccordionItem>
-
               <AccordionItem value="6">
                 <AccordionHeader>
                   <div className={styles.header}>Default Query Results View</div>
diff --git a/src/hooks/useKnockoutExplorer.ts b/src/hooks/useKnockoutExplorer.ts
index 25a5e4177..56b99c201 100644
--- a/src/hooks/useKnockoutExplorer.ts
+++ b/src/hooks/useKnockoutExplorer.ts
@@ -298,24 +298,8 @@ async function configureHostedWithAAD(config: AAD): Promise<Explorer> {
       `Configuring Data Explorer for ${userContext.apiType} account ${account.name}`,
       "Explorer/configureHostedWithAAD",
     );
-    // TODO:  Somewhere in here need to configure regional endpoint selection in the user context for the client to pull from.
-    // Essentially, if the value exists in local storage, then grab the regional endpoint and load it.  Only if data plane RBAC is enabled.
-    // For now, just loading up setting from storage if it exists.  If we limit to data plane rbac accounts, then we limit other client APIs besides nosql.
-    // TODO: Maybe just load up the regional endpoint if it exists in the local storage?  Loading here makes sense since we are configuring
-    // user context, but introduces a lot of repetitive code.
-    if (
-      (userContext.apiType === "SQL" || userContext.apiType === "Tables" || userContext.apiType === "Gremlin") &&
-      LocalStorageUtility.hasItem(StorageKey.SelectedRegion)
-    ) {
-      const storedRegion = LocalStorageUtility.getEntryString(StorageKey.SelectedRegion);
-      const location = userContext.databaseAccount?.properties?.readLocations?.find(
-        (loc) => loc.locationName === storedRegion,
-      );
-      updateUserContext({
-        // TODO: Can possible make this process better by just storing the selected region endpoint.
-        selectedRegionalEndpoint: location?.documentEndpoint,
-        refreshCosmosClient: true,
-      });
+    if (userContext.apiType === "SQL") {
+      checkAndUpdateSelectedRegionalEndpoint();
     }
     if (!userContext.features.enableAadDataPlane) {
       Logger.logInfo(`AAD Feature flag is not enabled for account ${account.name}`, "Explorer/configureHostedWithAAD");
@@ -570,22 +554,9 @@ async function configurePortal(): Promise<Explorer> {
           updateContextsFromPortalMessage(inputs);
 
           const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
-          // TODO:  Somewhere in here need to configure regional endpoint selection in the user context for the client to pull from.
-          // Essentially, if the value exists in local storage, then grab the regional endpoint and load it.  Only if data plane RBAC is enabled.
-          // For now, just loading up setting from storage if it exists.  If we limit to data plane rbac accounts, then we limit other client APIs besides nosql.
-          if (
-            (userContext.apiType === "SQL" || userContext.apiType === "Tables" || userContext.apiType === "Gremlin") &&
-            LocalStorageUtility.hasItem(StorageKey.SelectedRegion)
-          ) {
-            const storedRegion = LocalStorageUtility.getEntryString(StorageKey.SelectedRegion);
-            const location = userContext.databaseAccount?.properties?.readLocations?.find(
-              (loc) => loc.locationName === storedRegion,
-            );
-            updateUserContext({
-              // TODO: Can possible make this process better by just storing the selected region endpoint.
-              selectedRegionalEndpoint: location?.documentEndpoint,
-              refreshCosmosClient: true,
-            });
+
+          if (userContext.apiType === "SQL") {
+            checkAndUpdateSelectedRegionalEndpoint();
           }
 
           let dataPlaneRbacEnabled;
@@ -706,6 +677,20 @@ function updateAADEndpoints(portalEnv: PortalEnv) {
   }
 }
 
+function checkAndUpdateSelectedRegionalEndpoint() {
+  //TODO: Possibly refactor userContext to store selected regional endpoint instead of selected region.
+  if (LocalStorageUtility.hasItem(StorageKey.SelectedRegion)) {
+    const storedRegion = LocalStorageUtility.getEntryString(StorageKey.SelectedRegion);
+    const location = userContext.databaseAccount?.properties?.readLocations?.find(
+      (loc) => loc.locationName === storedRegion,
+    );
+    updateUserContext({
+      selectedRegionalEndpoint: location?.documentEndpoint,
+      refreshCosmosClient: true,
+    });
+  }
+}
+
 function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
   if (
     configContext.PORTAL_BACKEND_ENDPOINT &&