Replace read/save methods with more generic ones

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts

@@ -1,8 +1,8 @@
 // Definitions of State data
 
-import { TableColumnSizingOptions } from "@fluentui/react-components";
 import { loadState, saveState, saveStateDebounced } from "Shared/AppStatePersistenceUtility";
 import { userContext } from "UserContext";
+import * as ViewModels from "../../../Contracts/ViewModels";
 
 // Component states
 export interface DocumentsTabStateData {
@@ -24,84 +24,45 @@ export const saveDocumentsTabState = (state: DocumentsTabStateData): void => {
   saveStateDebounced({ componentName: ComponentName }, state);
 };
 
-type ColumnSizesMap = { [columnId: string]: WidthDefinition };
+export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
-type WidthDefinition = { idealWidth?: number; minWidth?: number };
+export type WidthDefinition = { idealWidth?: number; minWidth?: number };
 
-const defaultSize: WidthDefinition = {
+export const readSubComponentState = <T>(
-  idealWidth: 200,
+  subComponentName: "ColumnSizes" | "FilterHistory",
-  minWidth: 50,
+  collection: ViewModels.CollectionBase,
-};
+  defaultValue: T,
-
+): T => {
-const ColumnSizesSubComponentName = "ColumnSizes";
-export const readColumnSizes = (
-  databaseName: string,
-  containerName: string,
-  columnIds: string[],
-): TableColumnSizingOptions => {
   const globalAccountName = userContext.databaseAccount?.name;
   // TODO what if databaseAccount doesn't exist?
 
   const state = loadState({
-    globalAccountName,
-    databaseName,
-    containerName,
     componentName: ComponentName,
-    subComponentName: ColumnSizesSubComponentName,
+    subComponentName,
-  }) as ColumnSizesMap;
+    globalAccountName,
+    databaseName: collection.databaseId,
+    containerName: collection.id(),
+  }) as T;
 
-  const columnSizesPx: ColumnSizesMap = {};
+  return state || defaultValue;
-  columnIds.forEach((columnId) => {
-    columnSizesPx[columnId] = (state && state[columnId]) || defaultSize;
-  });
-
-  return columnSizesPx;
 };
 
-export const saveColumnSizes = (databaseName: string, containerName: string, columnSizesMap: ColumnSizesMap): void => {
+export const saveSubComponentState = <T>(
+  subComponentName: "ColumnSizes" | "FilterHistory",
+  collection: ViewModels.CollectionBase,
+  state: T,
+  debounce?: boolean,
+): void => {
   const globalAccountName = userContext.databaseAccount?.name;
   // TODO what if databaseAccount doesn't exist?
 
-  saveStateDebounced(
+  (debounce ? saveStateDebounced : saveState)(
     {
       componentName: ComponentName,
-      subComponentName: ColumnSizesSubComponentName,
+      subComponentName,
       globalAccountName,
-      databaseName,
+      databaseName: collection.databaseId,
-      containerName,
+      containerName: collection.id(),
     },
-    columnSizesMap,
+    state,
-  );
-};
-
-const filterHistorySubComponentName = "FilterHistory";
-export type FilterHistory = string[];
-export const readFilterHistory = (databaseName: string, containerName: string): FilterHistory => {
-  const globalAccountName = userContext.databaseAccount?.name;
-  // TODO what if databaseAccount doesn't exist?
-
-  const state = loadState({
-    globalAccountName,
-    databaseName,
-    containerName,
-    componentName: ComponentName,
-    subComponentName: filterHistorySubComponentName,
-  }) as FilterHistory;
-
-  return state || [];
-};
-
-export const saveFilterHistory = (databaseName: string, containerName: string, filterHistory: FilterHistory): void => {
-  const globalAccountName = userContext.databaseAccount?.name;
-  // TODO what if databaseAccount doesn't exist?
-
-  saveState(
-    {
-      componentName: ComponentName,
-      subComponentName: filterHistorySubComponentName,
-      globalAccountName,
-      databaseName,
-      containerName,
-    },
-    filterHistory,
   );
 };

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -24,9 +24,9 @@ import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/
 import {
   DocumentsTabStateData,
   readDocumentsTabState,
-  readFilterHistory,
+  readSubComponentState,
   saveDocumentsTabState,
-  saveFilterHistory,
+  saveSubComponentState,
 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
 import { getPlatformTheme } from "Explorer/Theme/ThemeUtil";
 import { useSelectedNode } from "Explorer/useSelectedNode";
@@ -521,7 +521,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
   // User's filter history
   const [lastFilterContents, setLastFilterContents] = useState<string[]>(() =>
-    readFilterHistory(_collection.databaseId, _collection.id()),
+    readSubComponentState("FilterHistory", _collection, []),
   );
 
   const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
@@ -1690,7 +1690,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     // Save filter content to local storage
     lastFilterContents.unshift(filterContent);
     setLastFilterContents([...lastFilterContents]);
-    saveFilterHistory(_collection.databaseId, _collection.id(), lastFilterContents);
+    saveSubComponentState("FilterHistory", _collection, lastFilterContents);
   };
 
   const refreshDocumentsGrid = useCallback(

src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx

@@ -1,4 +1,5 @@
 import {
+  createTableColumn,
   Menu,
   MenuItem,
   MenuList,
@@ -16,14 +17,18 @@ import {
   TableRow,
   TableRowId,
   TableSelectionCell,
-  createTableColumn,
   useArrowNavigationGroup,
   useTableColumnSizing_unstable,
   useTableFeatures,
   useTableSelection,
 } from "@fluentui/react-components";
 import { NormalizedEventKey } from "Common/Constants";
-import { readColumnSizes, saveColumnSizes } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
+import {
+  ColumnSizesMap,
+  readSubComponentState,
+  saveSubComponentState,
+  WidthDefinition,
+} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
 import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
 import { isEnvironmentCtrlPressed, isEnvironmentShiftPressed } from "Utils/KeyboardUtils";
 import React, { useCallback, useMemo } from "react";
@@ -60,6 +65,11 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps {
   data: TableRowData[];
 }
 
+const defaultSize: WidthDefinition = {
+  idealWidth: 200,
+  minWidth: 50,
+};
+
 export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
   items,
   onSelectedRowsChange,
@@ -70,9 +80,15 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   isSelectionDisabled,
   collection,
 }: IDocumentsTableComponentProps) => {
-  const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() =>
+  const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() => {
-    readColumnSizes(collection.databaseId, collection.id(), ["id"].concat(columnHeaders.partitionKeyHeaders)),
+    const columnIds = ["id"].concat(columnHeaders.partitionKeyHeaders);
-  );
+    const columnSizesMap: ColumnSizesMap = readSubComponentState("ColumnSizes", collection, {});
+    const columnSizesPx: ColumnSizesMap = {};
+    columnIds.forEach((columnId) => {
+      columnSizesPx[columnId] = (columnSizesMap && columnSizesMap[columnId]) || defaultSize;
+    });
+    return columnSizesPx;
+  });
 
   const onColumnResize = React.useCallback((_, { columnId, width }) => {
     setColumnSizingOptions((state) => {
@@ -84,7 +100,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
         },
       };
 
-      saveColumnSizes(collection.databaseId, collection.id(), newSizingOptions);
+      saveSubComponentState("ColumnSizes", collection, newSizingOptions, true);
 
       return newSizingOptions;
     });