From d0d615a85ad8332f56ca4e98403dee94600b2ee3 Mon Sep 17 00:00:00 2001
From: sunghyunkang1111 <114709653+sunghyunkang1111@users.noreply.github.com>
Date: Tue, 21 Oct 2025 13:49:52 -0500
Subject: [PATCH] Added infobox to advanced settings (#2231)

* Added infobox to advanced settings

* Update tooltip message and test snap
---
 .../Panes/SettingsPane/SettingsPane.tsx       | 23 ++++--
 .../__snapshots__/SettingsPane.test.tsx.snap  | 74 +++++++++++++------
 2 files changed, 67 insertions(+), 30 deletions(-)

diff --git a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
index 046e827fd..2e89418d8 100644
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -13,6 +13,7 @@ import {
   IToggleStyles,
   Position,
   SpinButton,
+  Stack,
   Toggle,
 } from "@fluentui/react";
 import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, makeStyles } from "@fluentui/react-components";
@@ -1163,14 +1164,20 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionHeader>
               <AccordionPanel>
                 <div className={styles.settingsSectionContainer}>
-                  <Checkbox
-                    styles={{ label: { padding: 0 } }}
-                    className="padding"
-                    ariaLabel="Ignore partition key on document update"
-                    checked={ignorePartitionKeyOnDocumentUpdate}
-                    onChange={handleOnIgnorePartitionKeyOnDocumentUpdateChange}
-                    label="Ignore partition key on document update"
-                  />
+                  <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
+                    <Checkbox
+                      styles={{ label: { padding: 0 } }}
+                      className="padding"
+                      ariaLabel="Ignore partition key on document update"
+                      checked={ignorePartitionKeyOnDocumentUpdate}
+                      onChange={handleOnIgnorePartitionKeyOnDocumentUpdateChange}
+                      label="Ignore partition key on document update"
+                    />
+                    <InfoTooltip className={styles.headerIcon}>
+                      If checked, the partition key value will not be used to locate the document during update
+                      operations. Only use this if document updates are failing due to an abnormal partition key.
+                    </InfoTooltip>
+                  </Stack>
                 </div>
               </AccordionPanel>
             </AccordionItem>
diff --git a/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap b/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
index e46ba57ea..022cc8647 100644
--- a/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
+++ b/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
@@ -589,20 +589,35 @@ exports[`Settings Pane should render Default properly 1`] = `
           <div
             className="___1dfa554_0000000 fo7qwa0"
           >
-            <StyledCheckboxBase
-              ariaLabel="Ignore partition key on document update"
-              checked={false}
-              className="padding"
-              label="Ignore partition key on document update"
-              onChange={[Function]}
-              styles={
+            <Stack
+              horizontal={true}
+              tokens={
                 {
-                  "label": {
-                    "padding": 0,
-                  },
+                  "childrenGap": 4,
                 }
               }
-            />
+              verticalAlign="center"
+            >
+              <StyledCheckboxBase
+                ariaLabel="Ignore partition key on document update"
+                checked={false}
+                className="padding"
+                label="Ignore partition key on document update"
+                onChange={[Function]}
+                styles={
+                  {
+                    "label": {
+                      "padding": 0,
+                    },
+                  }
+                }
+              />
+              <InfoTooltip
+                className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
+              >
+                If checked, the partition key value will not be used to locate the document during update operations. Only use this if document updates are failing due to an abnormal partition key.
+              </InfoTooltip>
+            </Stack>
           </div>
         </AccordionPanel>
       </AccordionItem>
@@ -883,20 +898,35 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
           <div
             className="___1dfa554_0000000 fo7qwa0"
           >
-            <StyledCheckboxBase
-              ariaLabel="Ignore partition key on document update"
-              checked={false}
-              className="padding"
-              label="Ignore partition key on document update"
-              onChange={[Function]}
-              styles={
+            <Stack
+              horizontal={true}
+              tokens={
                 {
-                  "label": {
-                    "padding": 0,
-                  },
+                  "childrenGap": 4,
                 }
               }
-            />
+              verticalAlign="center"
+            >
+              <StyledCheckboxBase
+                ariaLabel="Ignore partition key on document update"
+                checked={false}
+                className="padding"
+                label="Ignore partition key on document update"
+                onChange={[Function]}
+                styles={
+                  {
+                    "label": {
+                      "padding": 0,
+                    },
+                  }
+                }
+              />
+              <InfoTooltip
+                className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
+              >
+                If checked, the partition key value will not be used to locate the document during update operations. Only use this if document updates are failing due to an abnormal partition key.
+              </InfoTooltip>
+            </Stack>
           </div>
         </AccordionPanel>
       </AccordionItem>