From fc9f2ea78b294f20b5c863026e9808e973c4456e Mon Sep 17 00:00:00 2001
From: "Craig Boger (from Dev Box)" <bogercraig@microsoft.com>
Date: Thu, 26 Dec 2024 16:49:46 -0800
Subject: [PATCH] Add standin region selection to settings menu.

---
 .../Panes/SettingsPane/SettingsPane.tsx       | 46 ++++++++++++++++---
 1 file changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
index aedf517eb..f921d507e 100644
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -6,6 +6,7 @@ import {
   Checkbox,
   ChoiceGroup,
   DefaultButton,
+  Dropdown,
   IChoiceGroupOption,
   ISpinButtonStyles,
   IToggleStyles,
@@ -669,10 +670,41 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                   </div>
                 </AccordionPanel>
               </AccordionItem>
+
+              <AccordionItem value="6">
+                <AccordionHeader>
+                  <div className={styles.header}>Region Selection</div>
+                </AccordionHeader>
+                <AccordionPanel>
+                  <div className={styles.settingsSectionContainer}>
+                    <div className={styles.settingsSectionDescription}>
+                      Select region for read and write operations.
+                    </div>
+                    <Dropdown
+                      placeholder="Select Read Region"
+                      options={[
+                        { key: "West US", text: "West US" },
+                        { key: "East US", text: "East US" },
+                        { key: "Central US", text: "Central US" },
+                      ]}
+                    />
+                    <Dropdown
+                      placeholder="Select Write Region"
+                      options={[
+                        { key: "West US", text: "West US" },
+                        { key: "East US", text: "East US" },
+                        { key: "Central US", text: "Central US" },
+                      ]}
+                      styles={{ root: { marginTop: "10px" } }}
+                    />
+                  </div>
+                </AccordionPanel>
+              </AccordionItem>
             </>
           )}
+
           {(userContext.apiType === "SQL" || userContext.apiType === "Tables" || userContext.apiType === "Gremlin") && (
-            <AccordionItem value="6">
+            <AccordionItem value="7">
               <AccordionHeader>
                 <div className={styles.header}>Retry Settings</div>
               </AccordionHeader>
@@ -745,7 +777,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
             </AccordionItem>
           )}
 
-          <AccordionItem value="7">
+          <AccordionItem value="8">
             <AccordionHeader>
               <div className={styles.header}>Enable container pagination</div>
             </AccordionHeader>
@@ -768,7 +800,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
             </AccordionPanel>
           </AccordionItem>
           {shouldShowCrossPartitionOption && (
-            <AccordionItem value="8">
+            <AccordionItem value="9">
               <AccordionHeader>
                 <div className={styles.header}>Enable cross-partition query</div>
               </AccordionHeader>
@@ -793,7 +825,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
             </AccordionItem>
           )}
           {shouldShowParallelismOption && (
-            <AccordionItem value="9">
+            <AccordionItem value="10">
               <AccordionHeader>
                 <div className={styles.header}>Max degree of parallelism</div>
               </AccordionHeader>
@@ -826,7 +858,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
             </AccordionItem>
           )}
           {shouldShowPriorityLevelOption && (
-            <AccordionItem value="10">
+            <AccordionItem value="11">
               <AccordionHeader>
                 <div className={styles.header}>Priority Level</div>
               </AccordionHeader>
@@ -849,7 +881,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
             </AccordionItem>
           )}
           {shouldShowGraphAutoVizOption && (
-            <AccordionItem value="11">
+            <AccordionItem value="12">
               <AccordionHeader>
                 <div className={styles.header}>Display Gremlin query results as:&nbsp;</div>
               </AccordionHeader>
@@ -870,7 +902,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
             </AccordionItem>
           )}
           {shouldShowCopilotSampleDBOption && (
-            <AccordionItem value="12">
+            <AccordionItem value="13">
               <AccordionHeader>
                 <div className={styles.header}>Enable sample database</div>
               </AccordionHeader>