Restore open collection tabs: Query, Documents, Settings (#2004)

* Persist query multiple query texts

* Save multiple query tab histories

* Save and restore states for QueryTab and DocumentsTab for SQL and Mongo

* Enable Collection Scale/Settings restore

* Persist documents tab current filter

* Fix DocumentsTab conflict resolve mistake

* Remove unused variable

* Fix e2e test

* Fix e2e localStorage reference

* Try clearing local storage via playwright page

* Clear local storage after opening page

* Move restore flag behind feature flag. Whitelist restorable tabs in for Fabric. Restore e2e tests.

* Fix typo

* Fix: avoid setting undefined for preferredSize for the <Allotment.Pane>

* Add comments

* Move restore tabs after knockout configure step from Explorer constructor (which could be called multiple times)

src/hooks/useKnockoutExplorer.ts

@@ -7,6 +7,11 @@ import Explorer from "Explorer/Explorer";
 import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
+import {
+  AppStateComponentNames,
+  OPEN_TABS_SUBCOMPONENT_NAME,
+  readSubComponentState,
+} from "Shared/AppStatePersistenceUtility";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { useNewPortalBackendEndpoint } from "Utils/EndpointUtils";
 import { getNetworkSettingsWarningMessage } from "Utils/NetworkUtility";
@@ -80,6 +85,11 @@ export function useKnockoutExplorer(platform: Platform): Explorer {
           await updateContextForCopilot(explorer);
           await updateContextForSampleData(explorer);
         }
+
+        if (userContext.features.restoreTabs) {
+          restoreOpenTabs();
+        }
+
         setExplorer(explorer);
       }
     };
@@ -816,3 +826,17 @@ async function updateContextForSampleData(explorer: Explorer): Promise<void> {
 interface SampledataconnectionResponse {
   connectionString: string;
 }
+
+const restoreOpenTabs = () => {
+  const openTabsState = readSubComponentState<(DataExplorerAction | undefined)[]>(
+    AppStateComponentNames.DataExplorerAction,
+    OPEN_TABS_SUBCOMPONENT_NAME,
+    undefined,
+    [],
+  );
+  openTabsState.forEach((openTabState) => {
+    if (openTabState) {
+      handleOpenAction(openTabState, useDatabases.getState().databases, this);
+    }
+  });
+};

src/hooks/useTabs.ts

@@ -1,5 +1,11 @@
 import { clamp } from "@fluentui/react";
+import { OpenTab } from "Contracts/ActionContracts";
 import { useSelectedNode } from "Explorer/useSelectedNode";
+import {
+  AppStateComponentNames,
+  OPEN_TABS_SUBCOMPONENT_NAME,
+  saveSubComponentState,
+} from "Shared/AppStatePersistenceUtility";
 import create, { UseStore } from "zustand";
 import * as ViewModels from "../Contracts/ViewModels";
 import { CollectionTabKind } from "../Contracts/ViewModels";
@@ -36,6 +42,7 @@ export interface TabsState {
   selectLeftTab: () => void;
   selectRightTab: () => void;
   closeActiveTab: () => void;
+  persistTabsState: () => void;
 }
 
 export enum ReactTabKind {
@@ -73,7 +80,9 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
   },
   activateNewTab: (tab: TabsBase): void => {
     set((state) => ({ openedTabs: [...state.openedTabs, tab], activeTab: tab, activeReactTab: undefined }));
+    tab.triggerPersistState = get().persistTabsState;
     tab.onActivate();
+    get().persistTabsState();
   },
   activateReactTab: (tabKind: ReactTabKind): void => {
     // Clear the selected node when switching to a react tab.
@@ -130,6 +139,8 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
     }
 
     set({ openedTabs: updatedTabs });
+
+    get().persistTabsState();
   },
   closeAllNotebookTabs: (hardClose): void => {
     const isNotebook = (tabKind: CollectionTabKind): boolean => {
@@ -226,4 +237,15 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
       state.closeTab(state.activeTab);
     }
   },
+  persistTabsState: () => {
+    const state = get();
+    const openTabsStates = state.openedTabs.map((tab) => tab.getPersistedState());
+
+    saveSubComponentState<OpenTab[]>(
+      AppStateComponentNames.DataExplorerAction,
+      OPEN_TABS_SUBCOMPONENT_NAME,
+      undefined,
+      openTabsStates,
+    );
+  },
 }));