Added infobox to advanced settings (#2231)

* Added infobox to advanced settings

* Update tooltip message and test snap

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,6 +1164,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionHeader>
               <AccordionPanel>
                 <div className={styles.settingsSectionContainer}>
+                  <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
                     <Checkbox
                       styles={{ label: { padding: 0 } }}
                       className="padding"
@@ -1171,6 +1173,11 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                       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>

src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap

@@ -588,6 +588,15 @@ exports[`Settings Pane should render Default properly 1`] = `
         <AccordionPanel>
           <div
             className="___1dfa554_0000000 fo7qwa0"
+          >
+            <Stack
+              horizontal={true}
+              tokens={
+                {
+                  "childrenGap": 4,
+                }
+              }
+              verticalAlign="center"
             >
               <StyledCheckboxBase
                 ariaLabel="Ignore partition key on document update"
@@ -603,6 +612,12 @@ exports[`Settings Pane should render Default properly 1`] = `
                   }
                 }
               />
+              <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>
@@ -882,6 +897,15 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
         <AccordionPanel>
           <div
             className="___1dfa554_0000000 fo7qwa0"
+          >
+            <Stack
+              horizontal={true}
+              tokens={
+                {
+                  "childrenGap": 4,
+                }
+              }
+              verticalAlign="center"
             >
               <StyledCheckboxBase
                 ariaLabel="Ignore partition key on document update"
@@ -897,6 +921,12 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
                   }
                 }
               />
+              <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>