Retrieve read and write regions from user context and populate dropdown menu. Update local storage value.

Need to now connect with updating read region of primary cosmos client.

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -8,6 +8,7 @@ import {
   DefaultButton,
   Dropdown,
   IChoiceGroupOption,
+  IDropdownOption,
   ISpinButtonStyles,
   IToggleStyles,
   Position,
@@ -143,6 +144,16 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       ? LocalStorageUtility.getEntryString(StorageKey.IsGraphAutoVizDisabled)
       : "false",
   );
+  const [readRegion, setReadRegion] = useState<string>(
+    LocalStorageUtility.hasItem(StorageKey.ReadRegion)
+      ? LocalStorageUtility.getEntryString(StorageKey.ReadRegion)
+      : userContext?.databaseAccount?.properties?.readLocations?.[0]?.locationName,
+  );
+  const [writeRegion, setWriteRegion] = useState<string>(
+    LocalStorageUtility.hasItem(StorageKey.WriteRegion)
+      ? LocalStorageUtility.getEntryString(StorageKey.WriteRegion)
+      : userContext?.databaseAccount?.properties?.writeLocations?.[0]?.locationName,
+  );
   const [retryAttempts, setRetryAttempts] = useState<number>(
     LocalStorageUtility.hasItem(StorageKey.RetryAttempts)
       ? LocalStorageUtility.getEntryNumber(StorageKey.RetryAttempts)
@@ -180,6 +191,14 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin";
   const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
   const shouldShowPriorityLevelOption = PriorityBasedExecutionUtils.isFeatureEnabled();
+  const readRegionOptions = userContext?.databaseAccount?.properties?.readLocations?.map((location) => ({
+    key: location.locationName,
+    text: location.locationName,
+  }));
+  const writeRegionOptions = userContext?.databaseAccount?.properties?.writeLocations?.map((location) => ({
+    key: location.locationName,
+    text: location.locationName,
+  }));
   const shouldShowCopilotSampleDBOption =
     userContext.apiType === "SQL" &&
     useQueryCopilot.getState().copilotEnabled &&
@@ -265,6 +284,8 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
 
     LocalStorageUtility.setEntryBoolean(StorageKey.RUThresholdEnabled, ruThresholdEnabled);
     LocalStorageUtility.setEntryBoolean(StorageKey.QueryTimeoutEnabled, queryTimeoutEnabled);
+    LocalStorageUtility.setEntryString(StorageKey.ReadRegion, readRegion);
+    LocalStorageUtility.setEntryString(StorageKey.WriteRegion, writeRegion);
     LocalStorageUtility.setEntryNumber(StorageKey.RetryAttempts, retryAttempts);
     LocalStorageUtility.setEntryNumber(StorageKey.RetryInterval, retryInterval);
     LocalStorageUtility.setEntryNumber(StorageKey.MaxWaitTimeInSeconds, MaxWaitTimeInSeconds);
@@ -412,6 +433,16 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     setDefaultQueryResultsView(option.key as SplitterDirection);
   };
 
+  const handleOnReadRegionOptionChange = (ev: React.FormEvent<HTMLInputElement>, option: IDropdownOption): void => {
+    // TODO: Region validation?
+    setReadRegion(option.text);
+  };
+
+  const handleOnWriteRegionOptionChange = (ev: React.FormEvent<HTMLInputElement>, option: IDropdownOption): void => {
+    // TODO: Region Validation?
+    setWriteRegion(option.text);
+  };
+
   const handleOnQueryRetryAttemptsSpinButtonChange = (ev: React.MouseEvent<HTMLElement>, newValue?: string): void => {
     const retryAttempts = Number(newValue);
     if (!isNaN(retryAttempts)) {
@@ -680,22 +711,28 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                     <div className={styles.settingsSectionDescription}>
                       Select region for read and write operations.
                     </div>
+                    <div>
+                      <span className={styles.subHeader}>Read Region</span>
+                      <InfoTooltip className={styles.headerIcon}>
+                        Changes the account endpoint used to perform read operations.
+                      </InfoTooltip>
+                    </div>
                     <Dropdown
-                      placeholder="Select Read Region"
+                      placeholder={readRegion}
-                      options={[
+                      onChange={handleOnReadRegionOptionChange}
-                        { key: "West US", text: "West US" },
+                      options={readRegionOptions}
-                        { key: "East US", text: "East US" },
+                      styles={{ root: { marginBottom: "10px" } }}
-                        { key: "Central US", text: "Central US" },
-                      ]}
                     />
+                    <div>
+                      <span className={styles.subHeader}>Write Region</span>
+                      <InfoTooltip className={styles.headerIcon}>
+                        Changes the account endpoint used to perform write operations.
+                      </InfoTooltip>
+                    </div>
                     <Dropdown
-                      placeholder="Select Write Region"
+                      placeholder={writeRegion}
-                      options={[
+                      onChange={handleOnWriteRegionOptionChange}
-                        { key: "West US", text: "West US" },
+                      options={writeRegionOptions}
-                        { key: "East US", text: "East US" },
-                        { key: "Central US", text: "Central US" },
-                      ]}
-                      styles={{ root: { marginTop: "10px" } }}
                     />
                   </div>
                 </AccordionPanel>

src/Shared/StorageUtility.ts

@@ -11,6 +11,8 @@ export enum StorageKey {
   RUThreshold,
   QueryTimeoutEnabled,
   QueryTimeout,
+  ReadRegion,
+  WriteRegion,
   RetryAttempts,
   RetryInterval,
   MaxWaitTimeInSeconds,