Save and restore DocumentsTab state to local storage (#1919)

* Infrastructure to save app state * Save filters * Replace read/save methods with more generic ones * Make datalist for filter unique per database/container combination * Disable saving middle split position for now * Fix unit tests * Turn off confusing auto-complete from input box * Disable tabStateData for now * Save and restore split position * Fix replace autocomplete="off" by removing id on Input tag * Properly set allotment width * Fix saved percentage * Save splitter per collection * Add error handling and telemetry * Fix compiling issue * Add ability to delete filter history. Bug fix when hitting Enter on filter input box. * Replace delete filter modal with dropdown menu * Add code to remove oldest record if max limit is reached in app state persistence * Only save new splitter position on drag end (not onchange) * Add unit tests * Add Clear all in settings. Update snapshots * Fix format * Remove filter delete and keep filter history to a max. Reword clear button and message in settings pane. * Fix setting button label * Update test snapshots * Reword Clear history button text * Update unit test snapshot * Enable Settings pane for Fabric, but turn off Rbac dial for Fabric. * Change union type to enum * Update src/Shared/AppStatePersistenceUtility.ts Assert that path does not include slash char. Co-authored-by: Ashley Stanton-Nurse <ashleyst@microsoft.com> * Update src/Shared/AppStatePersistenceUtility.ts Assert that path does not contain slash. Co-authored-by: Ashley Stanton-Nurse <ashleyst@microsoft.com> * Fix format --------- Co-authored-by: Ashley Stanton-Nurse <ashleyst@microsoft.com>
2025-12-20 09:20:16 +00:00 · 2024-08-22 07:37:15 +02:00
parent 94d3fcb30f
commit 038142c180
15 changed files with 723 additions and 141 deletions
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts
@@ -0,0 +1,100 @@
+// Definitions of State data
+
+import { deleteState, loadState, saveState, saveStateDebounced } from "Shared/AppStatePersistenceUtility";
+import { userContext } from "UserContext";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+
+const componentName = "DocumentsTab";
+export enum SubComponentName {
+  ColumnSizes = "ColumnSizes",
+  FilterHistory = "FilterHistory",
+  MainTabDivider = "MainTabDivider",
+}
+
+export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
+export type WidthDefinition = { idealWidth?: number; minWidth?: number };
+export type TabDivider = { leftPaneWidthPercent: number };
+
+/**
+ *
+ * @param subComponentName
+ * @param collection
+ * @param defaultValue Will be returned if persisted state is not found
+ * @returns
+ */
+export const readSubComponentState = <T>(
+  subComponentName: SubComponentName,
+  collection: ViewModels.CollectionBase,
+  defaultValue: T,
+): T => {
+  const globalAccountName = userContext.databaseAccount?.name;
+  if (!globalAccountName) {
+    const message = "Database account name not found in userContext";
+    console.error(message);
+    TelemetryProcessor.traceFailure(Action.ReadPersistedTabState, { message, componentName });
+    return defaultValue;
+  }
+
+  const state = loadState({
+    componentName: componentName,
+    subComponentName,
+    globalAccountName,
+    databaseName: collection.databaseId,
+    containerName: collection.id(),
+  }) as T;
+
+  return state || defaultValue;
+};
+
+/**
+ *
+ * @param subComponentName
+ * @param collection
+ * @param state State to save
+ * @param debounce true for high-frequency calls (e.g mouse drag events)
+ */
+export const saveSubComponentState = <T>(
+  subComponentName: SubComponentName,
+  collection: ViewModels.CollectionBase,
+  state: T,
+  debounce?: boolean,
+): void => {
+  const globalAccountName = userContext.databaseAccount?.name;
+  if (!globalAccountName) {
+    const message = "Database account name not found in userContext";
+    console.error(message);
+    TelemetryProcessor.traceFailure(Action.SavePersistedTabState, { message, componentName });
+    return;
+  }
+
+  (debounce ? saveStateDebounced : saveState)(
+    {
+      componentName: componentName,
+      subComponentName,
+      globalAccountName,
+      databaseName: collection.databaseId,
+      containerName: collection.id(),
+    },
+    state,
+  );
+};
+
+export const deleteSubComponentState = (subComponentName: SubComponentName, collection: ViewModels.CollectionBase) => {
+  const globalAccountName = userContext.databaseAccount?.name;
+  if (!globalAccountName) {
+    const message = "Database account name not found in userContext";
+    console.error(message);
+    TelemetryProcessor.traceFailure(Action.DeletePersistedTabState, { message, componentName });
+    return;
+  }
+
+  deleteState({
+    componentName: componentName,
+    subComponentName,
+    globalAccountName,
+    databaseName: collection.databaseId,
+    containerName: collection.id(),
+  });
+};