Initial implementation of saving split value to local storage

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -18,6 +18,11 @@ import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
 import Explorer from "Explorer/Explorer";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
+import {
+  DocumentsTabPrefs,
+  readDocumentsTabPrefs,
+  saveDocumentsTabPrefs,
+} from "Explorer/Tabs/DocumentsTabV2/documentsTabPrefs";
 import { getPlatformTheme } from "Explorer/Theme/ThemeUtil";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
@@ -474,6 +479,9 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     ViewModels.DocumentExplorerState.noDocumentSelected,
   );
 
+  // Preferences
+  const [prefs, setPrefs] = useState<DocumentsTabPrefs>(readDocumentsTabPrefs());
+
   const isQueryCopilotSampleContainer =
     _collection?.isSampleCollection &&
     _collection?.databaseId === QueryCopilotSampleDatabaseId &&
@@ -1742,9 +1750,20 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
         )}
         {/* <Split> doesn't like to be a flex child */}
         <div style={{ overflow: "hidden", height: "100%" }}>
-          <Split>
+          <Split
+            onDragEnd={(preSize: number) => {
+              prefs.leftPaneWidthPercent = Math.min(100, Math.max(0, Math.round(100 * preSize) / 100));
+              saveDocumentsTabPrefs(prefs);
+              setPrefs({ ...prefs });
+            }}
+          >
             <div
-              style={{ minWidth: 120, width: "35%", overflow: "hidden", position: "relative" }}
+              style={{
+                minWidth: 60,
+                width: `${prefs.leftPaneWidthPercent}%`,
+                overflow: "hidden",
+                position: "relative",
+              }}
               ref={tableContainerRef}
             >
               <Button
@@ -1796,7 +1815,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                 )}
               </div>
             </div>
-            <div style={{ minWidth: "20%", width: "100%" }}>
+            <div style={{ minWidth: 60, width: `${100 - prefs.leftPaneWidthPercent}%` }}>
               {isTabActive && selectedDocumentContent && selectedRows.size <= 1 && (
                 <EditorReact
                   language={"json"}

src/Explorer/Tabs/DocumentsTabV2/documentsTabPrefs.ts

@@ -0,0 +1,21 @@
+// Utility functions to manage DocumentsTab preferences
+
+import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
+
+export interface DocumentsTabPrefs {
+  leftPaneWidthPercent: number;
+  columnWidths?: number[];
+}
+
+const defaultPrefs: DocumentsTabPrefs = {
+  leftPaneWidthPercent: 50,
+};
+
+export const readDocumentsTabPrefs = (): DocumentsTabPrefs => {
+  const prefs = LocalStorageUtility.getEntryObject<DocumentsTabPrefs>(StorageKey.DocumentsTabPrefs);
+  return prefs || defaultPrefs;
+};
+
+export const saveDocumentsTabPrefs = (prefs: DocumentsTabPrefs): void => {
+  LocalStorageUtility.setEntryObject(StorageKey.DocumentsTabPrefs, prefs);
+};

src/Shared/LocalStorageUtility.ts

@@ -20,3 +20,15 @@ export const setEntryNumber = (key: StorageKey, value: number): void =>
 
 export const setEntryBoolean = (key: StorageKey, value: boolean): void =>
   localStorage.setItem(StorageKey[key], value.toString());
+
+export const setEntryObject = (key: StorageKey, value: unknown): void => {
+  localStorage.setItem(StorageKey[key], JSON.stringify(value));
+};
+
+export const getEntryObject = <T>(key: StorageKey): T | null => {
+  const item = localStorage.getItem(StorageKey[key]);
+  if (item) {
+    return JSON.parse(item) as T;
+  }
+  return null;
+};

src/Shared/StorageUtility.ts

@@ -27,6 +27,7 @@ export enum StorageKey {
   GalleryCalloutDismissed,
   VisitedAccounts,
   PriorityLevel,
+  DocumentsTabPrefs,
 }
 
 export const hasRUThresholdBeenConfigured = (): boolean => {