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)
2025-12-20 01:11:25 +00:00 · 2024-11-28 11:18:55 +01:00
parent 80b926214b
commit 73d2686025
18 changed files with 431 additions and 130 deletions
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts
@@ -3,17 +3,11 @@
 import { ColumnDefinition } from "Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent";
 import {
  AppStateComponentNames,
-  deleteState,
-  loadState,
-  saveState,
-  saveStateDebounced,
+  deleteSubComponentState,
+  readSubComponentState,
+  saveSubComponentState,
 } 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 = AppStateComponentNames.DocumentsTab;

 export enum SubComponentName {
  ColumnSizes = "ColumnSizes",
@@ -21,6 +15,7 @@ export enum SubComponentName {
  MainTabDivider = "MainTabDivider",
  ColumnsSelection = "ColumnsSelection",
  ColumnSort = "ColumnSort",
+  CurrentFilter = "CurrentFilter",
 }

 export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
@@ -30,84 +25,22 @@ export type TabDivider = { leftPaneWidthPercent: number };
 export type ColumnsSelection = { selectedColumnIds: string[]; columnDefinitions: ColumnDefinition[] };
 export type ColumnSort = { columnId: string; direction: "ascending" | "descending" };

-/**
- *
- * @param subComponentName
- * @param collection
- * @param defaultValue Will be returned if persisted state is not found
- * @returns
- */
-export const readSubComponentState = <T>(
+// Wrap the ...SubComponentState functions for type safety
+
+export const readDocumentsTabSubComponentState = <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;
-  }
+): T => readSubComponentState<T>(AppStateComponentNames.DocumentsTab, subComponentName, collection, 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>(
+export const saveDocumentsTabSubComponentState = <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;
-  }
+): void => saveSubComponentState<T>(AppStateComponentNames.DocumentsTab, subComponentName, collection, state, debounce);

-  (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(),
-  });
-};
+export const deleteDocumentsTabSubComponentState = (
+  subComponentName: SubComponentName,
+  collection: ViewModels.CollectionBase,
+) => deleteSubComponentState(AppStateComponentNames.DocumentsTab, subComponentName, collection);
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -21,6 +21,7 @@ import { queryDocuments } from "Common/dataAccess/queryDocuments";
 import { readDocument } from "Common/dataAccess/readDocument";
 import { updateDocument } from "Common/dataAccess/updateDocument";
 import { Platform, configContext } from "ConfigContext";
+import { ActionType, OpenCollectionTab, TabKind } from "Contracts/ActionContracts";
 import { CommandButtonComponentProps } from "Explorer/Controls/CommandButton/CommandButtonComponent";
 import { useDialog } from "Explorer/Controls/Dialog";
 import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
@@ -34,8 +35,9 @@ import {
  FilterHistory,
  SubComponentName,
  TabDivider,
-  readSubComponentState,
-  saveSubComponentState,
+  deleteDocumentsTabSubComponentState,
+  readDocumentsTabSubComponentState,
+  saveDocumentsTabSubComponentState,
 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
 import { usePrevious } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
 import { CosmosFluentProvider, LayoutConstants, cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
@@ -140,6 +142,8 @@ export class DocumentsTabV2 extends TabsBase {
  private title: string;
  private resourceTokenPartitionKey: string;

+  protected persistedState: OpenCollectionTab;
+
  constructor(options: ViewModels.DocumentsTabOptions) {
    super(options);

@@ -147,6 +151,13 @@ export class DocumentsTabV2 extends TabsBase {
    this.title = options.title;
    this.partitionKey = options.partitionKey;
    this.resourceTokenPartitionKey = options.resourceTokenPartitionKey;
+
+    this.persistedState = {
+      actionType: ActionType.OpenCollectionTab,
+      tabKind: options.isPreferredApiMongoDB ? TabKind.MongoDocuments : TabKind.SQLDocuments,
+      databaseResourceId: options.collection.databaseId,
+      collectionResourceId: options.collection.id(),
+    };
  }

  public render(): JSX.Element {
@@ -575,7 +586,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
  onIsExecutingChange,
  isTabActive,
 }): JSX.Element => {
-  const [filterContent, setFilterContent] = useState<string>("");
+  const [filterContent, setFilterContent] = useState<string>(() =>
+    readDocumentsTabSubComponentState<string>(SubComponentName.CurrentFilter, _collection, ""),
+  );
+
  const [documentIds, setDocumentIds] = useState<ExtendedDocumentId[]>([]);
  const [isExecuting, setIsExecuting] = useState<boolean>(false);
  const styles = useDocumentsTabStyles();
@@ -606,7 +620,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone

  // State
  const [tabStateData, setTabStateData] = useState<TabDivider>(() =>
-    readSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, {
+    readDocumentsTabSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, {
      leftPaneWidthPercent: 35,
    }),
  );
@@ -621,7 +635,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone

  // User's filter history
  const [lastFilterContents, setLastFilterContents] = useState<FilterHistory>(() =>
-    readSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, [] as FilterHistory),
+    readDocumentsTabSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, [] as FilterHistory),
  );

  // For progress bar for bulk delete (noSql)
@@ -763,7 +777,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
  };

  const [selectedColumnIds, setSelectedColumnIds] = useState<string[]>(() => {
-    const persistedColumnsSelection = readSubComponentState<ColumnsSelection>(
+    const persistedColumnsSelection = readDocumentsTabSubComponentState<ColumnsSelection>(
      SubComponentName.ColumnsSelection,
      _collection,
      undefined,
@@ -808,7 +822,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
  useEffect(() => {
    setKeyboardActions({
      [KeyboardAction.CLEAR_SEARCH]: () => {
-        setFilterContent("");
+        updateFilterContent("");
        refreshDocumentsGrid(true);
        return true;
      },
@@ -1645,7 +1659,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone

  // Column definition is a map<id, ColumnDefinition> to garantee uniqueness
  const [columnDefinitions, setColumnDefinitions] = useState<ColumnDefinition[]>(() => {
-    const persistedColumnsSelection = readSubComponentState<ColumnsSelection>(
+    const persistedColumnsSelection = readDocumentsTabSubComponentState<ColumnsSelection>(
      SubComponentName.ColumnsSelection,
      _collection,
      undefined,
@@ -1956,7 +1970,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    const limitedLastFilterContents = lastFilterContents.slice(0, MAX_FILTER_HISTORY_COUNT);

    setLastFilterContents(limitedLastFilterContents);
-    saveSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, lastFilterContents);
+    saveDocumentsTabSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, lastFilterContents);
  };

  const refreshDocumentsGrid = useCallback(
@@ -2013,7 +2027,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone

    setSelectedColumnIds(newSelectedColumnIds);

-    saveSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, {
+    saveDocumentsTabSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, {
      selectedColumnIds: newSelectedColumnIds,
      columnDefinitions,
    });
@@ -2063,6 +2077,15 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    return options;
  };

+  const updateFilterContent = (filter: string): void => {
+    if (filter === "" || filter === undefined) {
+      deleteDocumentsTabSubComponentState(SubComponentName.CurrentFilter, _collection);
+    } else {
+      saveDocumentsTabSubComponentState<string>(SubComponentName.CurrentFilter, _collection, filter, true);
+    }
+    setFilterContent(filter);
+  };
+
  return (
    <CosmosFluentProvider className={styles.container}>
      <div className="tab-pane active" role="tabpanel" style={{ display: "flex" }}>
@@ -2077,7 +2100,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
            }
            title="Type a query predicate or choose one from the list."
            value={filterContent}
-            onChange={(value) => setFilterContent(value)}
+            onChange={updateFilterContent}
            onKeyDown={onFilterKeyDown}
            bottomLink={{ text: "Learn more", url: DATA_EXPLORER_DOC_URL }}
          />
@@ -2103,7 +2126,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
        <Allotment
          onDragEnd={(sizes: number[]) => {
            tabStateData.leftPaneWidthPercent = (100 * sizes[0]) / (sizes[0] + sizes[1]);
-            saveSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, tabStateData);
+            saveDocumentsTabSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, tabStateData);
            setTabStateData(tabStateData);
          }}
        >
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
@@ -42,9 +42,9 @@ import { TableColumnSelectionPane } from "Explorer/Panes/TableColumnSelectionPan
 import {
  ColumnSizesMap,
  ColumnSort,
-  deleteSubComponentState,
-  readSubComponentState,
-  saveSubComponentState,
+  deleteDocumentsTabSubComponentState,
+  readDocumentsTabSubComponentState,
+  saveDocumentsTabSubComponentState,
  SubComponentName,
 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
 import { INITIAL_SELECTED_ROW_INDEX, useDocumentsTabStyles } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
@@ -118,7 +118,11 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
  const sortedRowsRef = React.useRef(null);

  const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() => {
-    const columnSizesMap: ColumnSizesMap = readSubComponentState(SubComponentName.ColumnSizes, collection, {});
+    const columnSizesMap: ColumnSizesMap = readDocumentsTabSubComponentState(
+      SubComponentName.ColumnSizes,
+      collection,
+      {},
+    );
    const columnSizesPx: TableColumnSizingOptions = {};
    selectedColumnIds.forEach((columnId) => {
      if (
@@ -142,7 +146,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
    sortDirection: "ascending" | "descending";
    sortColumn: TableColumnId | undefined;
  }>(() => {
-    const sort = readSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, undefined);
+    const sort = readDocumentsTabSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, undefined);

    if (!sort) {
      return {
@@ -174,7 +178,12 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
        return acc;
      }, {} as ColumnSizesMap);

-      saveSubComponentState<ColumnSizesMap>(SubComponentName.ColumnSizes, collection, persistentSizes, true);
+      saveDocumentsTabSubComponentState<ColumnSizesMap>(
+        SubComponentName.ColumnSizes,
+        collection,
+        persistentSizes,
+        true,
+      );

      return newSizingOptions;
    });
@@ -186,11 +195,14 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
    setColumnSort(event, columnId, direction);

    if (columnId === undefined || direction === undefined) {
-      deleteSubComponentState(SubComponentName.ColumnSort, collection);
+      deleteDocumentsTabSubComponentState(SubComponentName.ColumnSort, collection);
      return;
    }

-    saveSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, { columnId, direction });
+    saveDocumentsTabSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, {
+      columnId,
+      direction,
+    });
  };

  // Columns must be a static object and cannot change on re-renders otherwise React will complain about too many refreshes
--- a/src/Explorer/Tabs/MongoQueryTab/MongoQueryTab.tsx
+++ b/src/Explorer/Tabs/MongoQueryTab/MongoQueryTab.tsx
@@ -1,3 +1,4 @@
+import { ActionType, TabKind } from "Contracts/ActionContracts";
 import React from "react";
 import MongoUtility from "../../../Common/MongoUtility";
 import * as ViewModels from "../../../Contracts/ViewModels";
@@ -20,7 +21,7 @@ export class NewMongoQueryTab extends NewQueryTab {
    private mongoQueryTabProps: IMongoQueryTabProps,
  ) {
    super(options, mongoQueryTabProps);
-    this.queryText = "";
+    this.queryText = options.queryText ?? "";
    this.iMongoQueryTabComponentProps = {
      collection: options.collection,
      isExecutionError: this.isExecutionError(),
@@ -28,6 +29,8 @@ export class NewMongoQueryTab extends NewQueryTab {
      tabsBaseInstance: this,
      queryText: this.queryText,
      partitionKey: this.partitionKey,
+      splitterDirection: options.splitterDirection,
+      queryViewSizePercent: options.queryViewSizePercent,
      container: this.mongoQueryTabProps.container,
      onTabAccessor: (instance: ITabAccessor): void => {
        this.iTabAccessor = instance;
@@ -35,6 +38,26 @@ export class NewMongoQueryTab extends NewQueryTab {
      isPreferredApiMongoDB: true,
      monacoEditorSetting: "plaintext",
      viewModelcollection: this.mongoQueryTabProps.viewModelcollection,
+      onUpdatePersistedState: (state: {
+        queryText: string;
+        splitterDirection: string;
+        queryViewSizePercent: number;
+      }): void => {
+        this.persistedState = {
+          actionType: ActionType.OpenCollectionTab,
+          tabKind: TabKind.SQLQuery,
+          databaseResourceId: options.collection.databaseId,
+          collectionResourceId: options.collection.id(),
+          query: {
+            text: state.queryText,
+          },
+          splitterDirection: state.splitterDirection as "vertical" | "horizontal",
+          queryViewSizePercent: state.queryViewSizePercent,
+        };
+        if (this.triggerPersistState) {
+          this.triggerPersistState();
+        }
+      },
    };
  }

--- a/src/Explorer/Tabs/QueryTab/QueryTab.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTab.tsx
@@ -1,4 +1,5 @@
 import { sendMessage } from "Common/MessageHandler";
+import { ActionType, OpenQueryTab, TabKind } from "Contracts/ActionContracts";
 import { MessageTypes } from "Contracts/MessageTypes";
 import { CopilotProvider } from "Explorer/QueryCopilot/QueryCopilotContext";
 import { userContext } from "UserContext";
@@ -26,6 +27,8 @@ export class NewQueryTab extends TabsBase {
  public iQueryTabComponentProps: IQueryTabComponentProps;
  public iTabAccessor: ITabAccessor;

+  protected persistedState: OpenQueryTab;
+
  constructor(
    options: QueryTabOptions,
    private props: IQueryTabProps,
@@ -39,12 +42,41 @@ export class NewQueryTab extends TabsBase {
      tabsBaseInstance: this,
      queryText: options.queryText,
      partitionKey: this.partitionKey,
+      splitterDirection: options.splitterDirection,
+      queryViewSizePercent: options.queryViewSizePercent,
      container: this.props.container,
      onTabAccessor: (instance: ITabAccessor): void => {
        this.iTabAccessor = instance;
      },
      isPreferredApiMongoDB: false,
+      onUpdatePersistedState: (state: {
+        queryText: string;
+        splitterDirection: string;
+        queryViewSizePercent: number;
+      }): void => {
+        this.persistedState = {
+          actionType: ActionType.OpenCollectionTab,
+          tabKind: TabKind.SQLQuery,
+          databaseResourceId: options.collection.databaseId,
+          collectionResourceId: options.collection.id(),
+          query: {
+            text: state.queryText,
+          },
+          splitterDirection: state.splitterDirection as "vertical" | "horizontal",
+          queryViewSizePercent: state.queryViewSizePercent,
+        };
+        if (this.triggerPersistState) {
+          this.triggerPersistState();
+        }
+      },
    };
+
+    // set initial state
+    this.iQueryTabComponentProps.onUpdatePersistedState({
+      queryText: options.queryText,
+      splitterDirection: options.splitterDirection,
+      queryViewSizePercent: options.queryViewSizePercent,
+    });
  }

  public render(): JSX.Element {
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.test.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.test.tsx
@@ -34,6 +34,7 @@ jest.mock("Shared/AppStatePersistenceUtility", () => ({
  AppStateComponentNames: {
    QueryCopilot: "QueryCopilot",
  },
+  readSubComponentState: jest.fn(),
 }));

 describe("QueryTabComponent", () => {
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -18,13 +18,7 @@ import { CosmosFluentProvider } from "Explorer/Theme/ThemeUtil";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { KeyboardAction } from "KeyboardShortcuts";
 import { QueryConstants } from "Shared/Constants";
-import {
-  LocalStorageUtility,
-  StorageKey,
-  getDefaultQueryResultsView,
-  getRUThreshold,
-  ruThresholdEnabled,
-} from "Shared/StorageUtility";
+import { LocalStorageUtility, StorageKey, getRUThreshold, ruThresholdEnabled } from "Shared/StorageUtility";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { Allotment } from "allotment";
 import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
@@ -99,6 +93,13 @@ export interface IQueryTabComponentProps {
  copilotEnabled?: boolean;
  isSampleCopilotActive?: boolean;
  copilotStore?: Partial<QueryCopilotState>;
+  splitterDirection?: "horizontal" | "vertical";
+  queryViewSizePercent?: number;
+  onUpdatePersistedState: (state: {
+    queryText: string;
+    splitterDirection: "vertical" | "horizontal";
+    queryViewSizePercent: number;
+  }) => void;
 }

 interface IQueryTabStates {
@@ -118,11 +119,13 @@ interface IQueryTabStates {
  queryResultsView: SplitterDirection;
  errors?: QueryError[];
  modelMarkers?: monaco.editor.IMarkerData[];
+  queryViewSizePercent: number;
 }

 export const QueryTabCopilotComponent = (props: IQueryTabComponentProps): any => {
  const styles = useQueryTabStyles();
  const copilotStore = useCopilotStore();
+
  const isSampleCopilotActive = useSelectedNode.getState().isQueryCopilotCollectionSelected();
  const queryTabProps = {
    ...props,
@@ -132,12 +135,12 @@ export const QueryTabCopilotComponent = (props: IQueryTabComponentProps): any =>
    isSampleCopilotActive: isSampleCopilotActive,
    copilotStore: copilotStore,
  };
-  return <QueryTabComponentImpl styles={styles} {...queryTabProps}></QueryTabComponentImpl>;
+  return <QueryTabComponentImpl styles={styles} {...queryTabProps} />;
 };

 export const QueryTabComponent = (props: IQueryTabComponentProps): any => {
  const styles = useQueryTabStyles();
-  return <QueryTabComponentImpl styles={styles} {...props}></QueryTabComponentImpl>;
+  return <QueryTabComponentImpl styles={styles} {...{ ...props }} />;
 };

 type QueryTabComponentImplProps = IQueryTabComponentProps & {
@@ -146,6 +149,8 @@ type QueryTabComponentImplProps = IQueryTabComponentProps & {

 // Inner (legacy) class component. We only use this component via one of the two functional components above (since we need to use the `useQueryTabStyles` hook).
 class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps, IQueryTabStates> {
+  private static readonly DEBOUNCE_DELAY_MS = 1000;
+
  public queryEditorId: string;
  public executeQueryButton: Button;
  public saveQueryButton: Button;
@@ -157,10 +162,10 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
  private _iterator: MinimalQueryIterator;
  private queryAbortController: AbortController;
  queryEditor: React.RefObject<EditorReact>;
+  private timeoutId: NodeJS.Timeout | undefined;

  constructor(props: QueryTabComponentImplProps) {
    super(props);
-
    this.queryEditor = createRef<EditorReact>();

    this.state = {
@@ -176,7 +181,9 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
      cancelQueryTimeoutID: undefined,
      copilotActive: this._queryCopilotActive(),
      currentTabActive: true,
-      queryResultsView: getDefaultQueryResultsView(),
+      queryResultsView:
+        props.splitterDirection === "vertical" ? SplitterDirection.Vertical : SplitterDirection.Horizontal,
+      queryViewSizePercent: props.queryViewSizePercent,
    };
    this.isCloseClicked = false;
    this.splitterId = this.props.tabId + "_splitter";
@@ -207,6 +214,23 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
    });
  }

+  /**
+   * Helper function to save the query text in the query tab state
+   * Since it reads and writes to the same state, it is debounced
+   */
+  private saveQueryTabStateDebounced = () => {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+    }
+    this.timeoutId = setTimeout(async () => {
+      this.props.onUpdatePersistedState({
+        queryText: this.state.sqlQueryEditorContent,
+        splitterDirection: this.state.queryResultsView,
+        queryViewSizePercent: this.state.queryViewSizePercent,
+      });
+    }, QueryTabComponentImpl.DEBOUNCE_DELAY_MS);
+  };
+
  private _queryCopilotActive(): boolean {
    if (this.props.copilotEnabled) {
      return readCopilotToggleStatus(userContext.databaseAccount);
@@ -567,7 +591,7 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
    };
  }
  private _setViewLayout(direction: SplitterDirection): void {
-    this.setState({ queryResultsView: direction });
+    this.setState({ queryResultsView: direction }, () => this.saveQueryTabStateDebounced());

    // We'll need to refresh the context buttons to update the selected state of the view buttons
    setTimeout(() => {
@@ -599,13 +623,16 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
    if (this.state.copilotActive) {
      this.props.copilotStore?.setQuery(newContent);
    }
-    this.setState({
-      sqlQueryEditorContent: newContent,
-      queryCopilotGeneratedQuery: "",
+    this.setState(
+      {
+        sqlQueryEditorContent: newContent,
+        queryCopilotGeneratedQuery: "",

-      // Clear the markers when the user edits the document.
-      modelMarkers: [],
-    });
+        // Clear the markers when the user edits the document.
+        modelMarkers: [],
+      },
+      () => this.saveQueryTabStateDebounced(),
+    );
    if (this.isPreferredApiMongoDB) {
      if (newContent.length > 0) {
        this.executeQueryButton = {
@@ -704,8 +731,20 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
            ></QueryCopilotPromptbar>
          )}
          {/* Set 'key' to the value of vertical to force re-rendering when vertical changes, to work around https://github.com/johnwalley/allotment/issues/457 */}
-          <Allotment key={vertical.toString()} vertical={vertical}>
-            <Allotment.Pane data-test="QueryTab/EditorPane">
+          <Allotment
+            key={vertical.toString()}
+            vertical={vertical}
+            onDragEnd={(sizes: number[]) => {
+              const queryViewSizePercent = (100 * sizes[0]) / (sizes[0] + sizes[1]);
+              this.setState({ queryViewSizePercent }, () => this.saveQueryTabStateDebounced());
+            }}
+          >
+            <Allotment.Pane
+              data-test="QueryTab/EditorPane"
+              preferredSize={
+                this.state.queryViewSizePercent !== undefined ? `${this.state.queryViewSizePercent}%` : undefined
+              }
+            >
              <EditorReact
                ref={this.queryEditor}
                className={this.props.styles.queryEditor}
--- a/src/Explorer/Tabs/SettingsTabV2.tsx
+++ b/src/Explorer/Tabs/SettingsTabV2.tsx
@@ -1,3 +1,4 @@
+import { ActionType, OpenCollectionTab, TabKind } from "Contracts/ActionContracts";
 import React from "react";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { SettingsComponent } from "../Controls/Settings/SettingsComponent";
@@ -10,6 +11,18 @@ export class SettingsTabV2 extends TabsBase {
 }

 export class CollectionSettingsTabV2 extends SettingsTabV2 {
+  protected persistedState: OpenCollectionTab;
+
+  constructor(options: ViewModels.TabOptions) {
+    super(options);
+    this.persistedState = {
+      actionType: ActionType.OpenCollectionTab,
+      tabKind: TabKind.ScaleSettings,
+      databaseResourceId: options.collection.databaseId,
+      collectionResourceId: options.collection.id(),
+    };
+  }
+
  public onActivate(): void {
    super.onActivate();
    this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.CollectionSettingsV2);
--- a/src/Explorer/Tabs/TabsBase.ts
+++ b/src/Explorer/Tabs/TabsBase.ts
@@ -1,3 +1,4 @@
+import { OpenTab } from "Contracts/ActionContracts";
 import { KeyboardActionGroup, clearKeyboardActionGroup } from "KeyboardShortcuts";
 import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
@@ -30,6 +31,8 @@ export default class TabsBase extends WaitsForTemplateViewModel {
  protected _theme: string;
  public onLoadStartKey: number;

+  protected persistedState: OpenTab | undefined = undefined; // Used to store state of tab for persistence
+
  constructor(options: ViewModels.TabOptions) {
    super();
    this.index = options.index;
@@ -55,6 +58,10 @@ export default class TabsBase extends WaitsForTemplateViewModel {
    };
  }

+  // Called by useTabs to persist
+  public getPersistedState = (): OpenTab | null => this.persistedState;
+  public triggerPersistState: () => void = undefined;
+
  public onCloseTabButtonClick(): void {
    useTabs.getState().closeTab(this);
    TelemetryProcessor.trace(Action.Tab, ActionModifiers.Close, {