Allow Mongo users to change thee Guid Representation when conducting CRUD operations for documents (#2204)

* mongo guid representation

* format

* fix return type

---------

Co-authored-by: Asier Isayas <aisayas@microsoft.com>

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -199,6 +199,12 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     LocalStorageUtility.getEntryString(StorageKey.CopilotSampleDBEnabled) === "true",
   );
 
+  const [mongoGuidRepresentation, setMongoGuidRepresentation] = useState<Constants.MongoGuidRepresentation>(
+    LocalStorageUtility.hasItem(StorageKey.MongoGuidRepresentation)
+      ? (LocalStorageUtility.getEntryString(StorageKey.MongoGuidRepresentation) as Constants.MongoGuidRepresentation)
+      : Constants.MongoGuidRepresentation.CSharpLegacy,
+  );
+
   const styles = useStyles();
 
   const explorerVersion = configContext.gitSha;
@@ -261,6 +267,8 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     useDatabases.getState().sampleDataResourceTokenCollection &&
     !isEmulator;
 
+  const shouldShowMongoGuidRepresentationOption = userContext.apiType === "Mongo";
+
   const handlerOnSubmit = async () => {
     setIsExecuting(true);
 
@@ -412,6 +420,10 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       );
     }
 
+    if (shouldShowMongoGuidRepresentationOption) {
+      LocalStorageUtility.setEntryString(StorageKey.MongoGuidRepresentation, mongoGuidRepresentation);
+    }
+
     setIsExecuting(false);
     logConsoleInfo(
       `Updated items per page setting to ${LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage)}`,
@@ -433,6 +445,14 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       );
     }
 
+    if (shouldShowMongoGuidRepresentationOption) {
+      logConsoleInfo(
+        `Updated Mongo Guid Representation to ${LocalStorageUtility.getEntryString(
+          StorageKey.MongoGuidRepresentation,
+        )}`,
+      );
+    }
+
     refreshExplorer && (await explorer.refreshExplorer());
     closeSidePanel();
   };
@@ -477,6 +497,13 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     { key: SplitterDirection.Horizontal, text: "Horizontal" },
   ];
 
+  const mongoGuidRepresentationDropdownOptions: IDropdownOption[] = [
+    { key: Constants.MongoGuidRepresentation.CSharpLegacy, text: Constants.MongoGuidRepresentation.CSharpLegacy },
+    { key: Constants.MongoGuidRepresentation.JavaLegacy, text: Constants.MongoGuidRepresentation.JavaLegacy },
+    { key: Constants.MongoGuidRepresentation.PythonLegacy, text: Constants.MongoGuidRepresentation.PythonLegacy },
+    { key: Constants.MongoGuidRepresentation.Standard, text: Constants.MongoGuidRepresentation.Standard },
+  ];
+
   const handleOnPriorityLevelOptionChange = (
     ev: React.FormEvent<HTMLInputElement>,
     option: IChoiceGroupOption,
@@ -559,6 +586,13 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     setRefreshExplorer(false);
   };
 
+  const handleOnMongoGuidRepresentationOptionChange = (
+    ev: React.FormEvent<HTMLInputElement>,
+    option: IDropdownOption,
+  ): void => {
+    setMongoGuidRepresentation(option.key as Constants.MongoGuidRepresentation);
+  };
+
   const choiceButtonStyles = {
     root: {
       clear: "both",
@@ -1082,6 +1116,27 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                 </AccordionPanel>
               </AccordionItem>
             )}
+            {shouldShowMongoGuidRepresentationOption && (
+              <AccordionItem value="14">
+                <AccordionHeader>
+                  <div className={styles.header}>Guid Representation</div>
+                </AccordionHeader>
+                <AccordionPanel>
+                  <div className={styles.settingsSectionContainer}>
+                    <div className={styles.settingsSectionDescription}>
+                      GuidRepresentation in MongoDB refers to how Globally Unique Identifiers (GUIDs) are serialized and
+                      deserialized when stored in BSON documents. This will apply to all document operations.
+                    </div>
+                    <Dropdown
+                      aria-labelledby="mongoGuidRepresentation"
+                      selectedKey={mongoGuidRepresentation}
+                      options={mongoGuidRepresentationDropdownOptions}
+                      onChange={handleOnMongoGuidRepresentationOptionChange}
+                    />
+                  </div>
+                </AccordionPanel>
+              </AccordionItem>
+            )}
           </Accordion>
         )}