fix tab wrapping with a lil' css tweak (#2013 )

Vector Embedding and Full Text Search (#2009 ) (#2011 )
* Replaced monaco editor on Container Vector Policy tab with controls same as on create container ux * Adds vector embedding policy to container management. Adds FullTextSearch to both add container and container management. * Fixing unit tests and formatting issues * More fixes * Updating full text controls based on feedback * Minor updates * Editing test to fix compile issue * Minor fix * Adding paths for jest to ignore transform due to recent changes in upstream dependencies * Adding mock to temporarily get unit tests to pass * Hiding FTS feature behind the new EnableNoSQLFullTextSearch capability
2025-12-31 14:51:50 +00:00 · 2024-12-04 14:39:32 -08:00 · 2024-11-18 14:10:42 -08:00 · 2024-11-13 17:13:41 +01:00
38 changed files with 884 additions and 1226 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -92,7 +92,7 @@ jobs:
          NODE_OPTIONS: "--max-old-space-size=4096"
      - run: cp -r ./Contracts ./dist/contracts
      - run: cp -r ./configs ./dist/configs
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v3
        with:
          name: dist
          path: dist/
@@ -113,18 +113,18 @@ jobs:
      NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
      AZURE_DEVOPS_PAT: ${{ secrets.AZURE_DEVOPS_PAT }}
    steps:
-      - uses: nuget/setup-nuget@v2
+      - uses: nuget/setup-nuget@v1
        with:
          nuget-api-key: ${{ secrets.NUGET_API_KEY }}
      - name: Download Dist Folder
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v3
        with:
          name: dist
      - run: cp ./configs/prod.json config.json
      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v3
        name: packages
        with:
          path: "*.nupkg"
@@ -137,11 +137,11 @@ jobs:
      NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
      AZURE_DEVOPS_PAT: ${{ secrets.AZURE_DEVOPS_PAT }}
    steps:
-      - uses: nuget/setup-nuget@v2
+      - uses: nuget/setup-nuget@v1
        with:
          nuget-api-key: ${{ secrets.NUGET_API_KEY }}
      - name: Download Dist Folder
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v3
        with:
          name: dist
      - run: cp ./configs/mpac.json config.json
@@ -149,7 +149,7 @@ jobs:
      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v3
        name: packages
        with:
          path: "*.nupkg"
@@ -185,9 +185,9 @@ jobs:
        if: ${{ !cancelled() }}
        uses: actions/upload-artifact@v4
        with:
-          name: blob-report-${{ matrix.shardIndex }}
-          path: blob-report
-          retention-days: 1
+            name: blob-report-${{ matrix.shardIndex }}
+            path: blob-report
+            retention-days: 1

  merge-playwright-reports:
    name: "Merge Playwright Reports"
@@ -197,26 +197,26 @@ jobs:

    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 18
-      - name: Install dependencies
-        run: npm ci
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci

-      - name: Download blob reports from GitHub Actions Artifacts
-        uses: actions/download-artifact@v4
-        with:
-          path: all-blob-reports
-          pattern: blob-report-*
-          merge-multiple: true
+    - name: Download blob reports from GitHub Actions Artifacts
+      uses: actions/download-artifact@v4
+      with:
+        path: all-blob-reports
+        pattern: blob-report-*
+        merge-multiple: true

-      - name: Merge into HTML Report
-        run: npx playwright merge-reports --reporter html ./all-blob-reports
+    - name: Merge into HTML Report
+      run: npx playwright merge-reports --reporter html ./all-blob-reports

-      - name: Upload HTML report
-        uses: actions/upload-artifact@v4
-        with:
-          name: html-report--attempt-${{ github.run_attempt }}
-          path: playwright-report
-          retention-days: 14
+    - name: Upload HTML report
+      uses: actions/upload-artifact@v4
+      with:
+        name: html-report--attempt-${{ github.run_attempt }}
+        path: playwright-report
+        retention-days: 14
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -1906,13 +1906,20 @@ input::-webkit-calendar-picker-indicator::after {
 }

 .nav-tabs-margin {
-  height: 32px;
  background-color: #f2f2f2;

  .nav-tabs {
    display: flex;
+    flex-wrap: wrap;
    align-items: flex-end;
    height: 100%;
+    margin-bottom: -0.5px;
+
+    li {
+      // Override the bootstrap defaults here to align with our layout constants.
+      margin-bottom: 0px;
+      height: 32px;
+    }
  }
 }

--- a/package-lock.json
+++ b/package-lock.json
@@ -122,7 +122,7 @@
        "@babel/preset-env": "7.24.7",
        "@babel/preset-react": "7.24.7",
        "@babel/preset-typescript": "7.24.7",
-        "@playwright/test": "1.49.1",
+        "@playwright/test": "1.44.0",
        "@testing-library/react": "11.2.3",
        "@types/applicationinsights-js": "1.0.7",
        "@types/codemirror": "0.0.56",
@@ -10175,18 +10175,34 @@
      }
    },
    "node_modules/@playwright/test": {
-      "version": "1.49.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.49.1.tgz",
-      "integrity": "sha512-Ky+BVzPz8pL6PQxHqNRW1k3mIyv933LML7HktS8uik0bUXNCdPhoS/kLihiO1tMf/egaJb4IutXd7UywvXEW+g==",
+      "version": "1.44.0",
      "dev": true,
+      "license": "Apache-2.0",
      "dependencies": {
-        "playwright": "1.49.1"
+        "playwright": "1.44.0"
      },
      "bin": {
        "playwright": "cli.js"
      },
      "engines": {
-        "node": ">=18"
+        "node": ">=16"
+      }
+    },
+    "node_modules/@playwright/test/node_modules/playwright": {
+      "version": "1.44.0",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.44.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
      }
    },
    "node_modules/@polka/url": {
@@ -14788,15 +14804,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "optional": true,
-      "dependencies": {
-        "file-uri-to-path": "1.0.0"
-      }
-    },
    "node_modules/bintrees": {
      "version": "1.0.2",
      "license": "MIT"
@@ -19459,12 +19466,6 @@
      "version": "2.0.5",
      "license": "MIT"
    },
-    "node_modules/file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "optional": true
-    },
    "node_modules/filesize": {
      "version": "8.0.7",
      "dev": true,
@@ -20053,19 +20054,6 @@
      "version": "1.0.0",
      "license": "ISC"
    },
-    "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
    "node_modules/function-bind": {
      "version": "1.1.2",
      "license": "MIT",
@@ -24172,24 +24160,6 @@
        "fsevents": "^1.2.7"
      }
    },
-    "node_modules/jest-haste-map/node_modules/fsevents": {
-      "version": "1.2.13",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-      "deprecated": "Upgrade to fsevents v2 to mitigate potential security issues",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "dependencies": {
-        "bindings": "^1.5.0",
-        "nan": "^2.12.1"
-      },
-      "engines": {
-        "node": ">= 4.0"
-      }
-    },
    "node_modules/jest-haste-map/node_modules/jest-worker": {
      "version": "24.9.0",
      "license": "MIT",
@@ -30828,34 +30798,15 @@
        "node": ">=8"
      }
    },
-    "node_modules/playwright": {
-      "version": "1.49.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.1.tgz",
-      "integrity": "sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==",
-      "dev": true,
-      "dependencies": {
-        "playwright-core": "1.49.1"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
-      }
-    },
    "node_modules/playwright-core": {
-      "version": "1.49.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.1.tgz",
-      "integrity": "sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==",
+      "version": "1.44.0",
      "dev": true,
+      "license": "Apache-2.0",
      "bin": {
        "playwright-core": "cli.js"
      },
      "engines": {
-        "node": ">=18"
+        "node": ">=16"
      }
    },
    "node_modules/plotly.js-cartesian-dist-min": {
--- a/package.json
+++ b/package.json
@@ -117,7 +117,7 @@
    "@babel/preset-env": "7.24.7",
    "@babel/preset-react": "7.24.7",
    "@babel/preset-typescript": "7.24.7",
-    "@playwright/test": "1.49.1",
+    "@playwright/test": "1.44.0",
    "@testing-library/react": "11.2.3",
    "@types/applicationinsights-js": "1.0.7",
    "@types/codemirror": "0.0.56",
@@ -170,10 +170,10 @@
    "jest": "29.7.0",
    "jest-canvas-mock": "2.5.2",
    "jest-circus": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
    "jest-html-loader": "1.0.0",
    "jest-react-hooks-shallow": "1.5.1",
    "jest-trx-results-processor": "3.0.2",
+    "jest-environment-jsdom": "29.7.0",
    "less": "3.8.1",
    "less-loader": "11.1.3",
    "less-vars-loader": "1.1.0",
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -149,7 +149,7 @@ export class PortalBackendEndpoints {
 }

 export class MongoProxyEndpoints {
-  public static readonly Development: string = "https://localhost:7238";
+  public static readonly Local: string = "https://localhost:7238";
  public static readonly Mpac: string = "https://cdb-ms-mpac-mp.cosmos.azure.com";
  public static readonly Prod: string = "https://cdb-ms-prod-mp.cosmos.azure.com";
  public static readonly Fairfax: string = "https://cdb-ff-prod-mp.cosmos.azure.us";
--- a/src/Common/CosmosClient.ts
+++ b/src/Common/CosmosClient.ts
@@ -8,7 +8,7 @@ import { AuthType } from "../AuthType";
 import { BackendApi, PriorityLevel } from "../Common/Constants";
 import * as Logger from "../Common/Logger";
 import { Platform, configContext } from "../ConfigContext";
-import { updateUserContext, userContext } from "../UserContext";
+import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
@@ -189,19 +189,10 @@ let _client: Cosmos.CosmosClient;

 export function client(): Cosmos.CosmosClient {
  if (_client) {
-    if (!userContext.refreshCosmosClient) {
+    if (!userContext.hasDataPlaneRbacSettingChanged) {
      return _client;
    }
-    _client.dispose();
-    _client = null;
  }
-
-  if (userContext.refreshCosmosClient) {
-    updateUserContext({
-      refreshCosmosClient: false,
-    });
-  }
-
  let _defaultHeaders: Cosmos.CosmosHeaders = {};
  _defaultHeaders["x-ms-cosmos-sdk-supportedcapabilities"] =
    SDKSupportedCapabilities.None | SDKSupportedCapabilities.PartitionMerge;
--- a/src/Common/MongoProxyClient.ts
+++ b/src/Common/MongoProxyClient.ts
@@ -722,63 +722,63 @@ export function getEndpoint(endpoint: string): string {
 export function useMongoProxyEndpoint(mongoProxyApi: string): boolean {
  const mongoProxyEnvironmentMap: { [key: string]: string[] } = {
    [MongoProxyApi.ResourceList]: [
-      MongoProxyEndpoints.Development,
+      MongoProxyEndpoints.Local,
      MongoProxyEndpoints.Mpac,
      MongoProxyEndpoints.Prod,
      MongoProxyEndpoints.Fairfax,
      MongoProxyEndpoints.Mooncake,
    ],
    [MongoProxyApi.QueryDocuments]: [
-      MongoProxyEndpoints.Development,
+      MongoProxyEndpoints.Local,
      MongoProxyEndpoints.Mpac,
      MongoProxyEndpoints.Prod,
      MongoProxyEndpoints.Fairfax,
      MongoProxyEndpoints.Mooncake,
    ],
    [MongoProxyApi.CreateDocument]: [
-      MongoProxyEndpoints.Development,
+      MongoProxyEndpoints.Local,
      MongoProxyEndpoints.Mpac,
      MongoProxyEndpoints.Prod,
      MongoProxyEndpoints.Fairfax,
      MongoProxyEndpoints.Mooncake,
    ],
    [MongoProxyApi.ReadDocument]: [
-      MongoProxyEndpoints.Development,
+      MongoProxyEndpoints.Local,
      MongoProxyEndpoints.Mpac,
      MongoProxyEndpoints.Prod,
      MongoProxyEndpoints.Fairfax,
      MongoProxyEndpoints.Mooncake,
    ],
    [MongoProxyApi.UpdateDocument]: [
-      MongoProxyEndpoints.Development,
+      MongoProxyEndpoints.Local,
      MongoProxyEndpoints.Mpac,
      MongoProxyEndpoints.Prod,
      MongoProxyEndpoints.Fairfax,
      MongoProxyEndpoints.Mooncake,
    ],
    [MongoProxyApi.DeleteDocument]: [
-      MongoProxyEndpoints.Development,
+      MongoProxyEndpoints.Local,
      MongoProxyEndpoints.Mpac,
      MongoProxyEndpoints.Prod,
      MongoProxyEndpoints.Fairfax,
      MongoProxyEndpoints.Mooncake,
    ],
    [MongoProxyApi.CreateCollectionWithProxy]: [
-      MongoProxyEndpoints.Development,
+      MongoProxyEndpoints.Local,
      MongoProxyEndpoints.Mpac,
      MongoProxyEndpoints.Prod,
      MongoProxyEndpoints.Fairfax,
      MongoProxyEndpoints.Mooncake,
    ],
    [MongoProxyApi.LegacyMongoShell]: [
-      MongoProxyEndpoints.Development,
+      MongoProxyEndpoints.Local,
      MongoProxyEndpoints.Mpac,
      MongoProxyEndpoints.Prod,
      MongoProxyEndpoints.Fairfax,
      MongoProxyEndpoints.Mooncake,
    ],
    [MongoProxyApi.BulkDelete]: [
-      MongoProxyEndpoints.Development,
+      MongoProxyEndpoints.Local,
      MongoProxyEndpoints.Mpac,
      MongoProxyEndpoints.Prod,
      MongoProxyEndpoints.Fairfax,
--- a/src/Contracts/ActionContracts.ts
+++ b/src/Contracts/ActionContracts.ts
@@ -9,7 +9,6 @@ export enum TabKind {
  Graph,
  SQLQuery,
  ScaleSettings,
-  MongoQuery,
 }

 /**
@@ -52,8 +51,6 @@ export interface OpenCollectionTab extends OpenTab {
 */
 export interface OpenQueryTab extends OpenCollectionTab {
  query: QueryInfo;
-  splitterDirection?: "vertical" | "horizontal";
-  queryViewSizePercent?: number;
 }

 /**
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -115,13 +115,7 @@ export interface CollectionBase extends TreeNode {
  isSampleCollection?: boolean;

  onDocumentDBDocumentsClick(): void;
-  onNewQueryClick(
-    source: any,
-    event?: MouseEvent,
-    queryText?: string,
-    splitterDirection?: "horizontal" | "vertical",
-    queryViewSizePercent?: number,
-  ): void;
+  onNewQueryClick(source: any, event?: MouseEvent, queryText?: string): void;
  expandCollection(): void;
  collapseCollection(): void;
  getDatabase(): Database;
@@ -157,13 +151,7 @@ export interface Collection extends CollectionBase {
  onSettingsClick: () => Promise<void>;

  onNewGraphClick(): void;
-  onNewMongoQueryClick(
-    source: any,
-    event?: MouseEvent,
-    queryText?: string,
-    splitterDirection?: "horizontal" | "vertical",
-    queryViewSizePercent?: number,
-  ): void;
+  onNewMongoQueryClick(source: any, event?: MouseEvent, queryText?: string): void;
  onNewMongoShellClick(): void;
  onNewStoredProcedureClick(source: Collection, event?: MouseEvent): void;
  onNewUserDefinedFunctionClick(source: Collection, event?: MouseEvent): void;
@@ -323,8 +311,6 @@ export interface QueryTabOptions extends TabOptions {
  partitionKey?: DataModels.PartitionKey;
  queryText?: string;
  resourceTokenPartitionKey?: string;
-  splitterDirection?: "horizontal" | "vertical";
-  queryViewSizePercent?: number;
 }

 export interface ScriptTabOption extends TabOptions {
--- a/src/Explorer/Controls/InputDataList/InputDataList.tsx
+++ b/src/Explorer/Controls/InputDataList/InputDataList.tsx
@@ -1,314 +0,0 @@
-// This component is used to create a dropdown list of options for the user to select from.
-// The options are displayed in a dropdown list when the user clicks on the input field.
-// The user can then select an option from the list. The selected option is then displayed in the input field.
-
-import { getTheme } from "@fluentui/react";
-import {
-  Button,
-  Divider,
-  Input,
-  Link,
-  makeStyles,
-  Popover,
-  PopoverProps,
-  PopoverSurface,
-  PositioningImperativeRef,
-} from "@fluentui/react-components";
-import { ArrowDownRegular, DismissRegular } from "@fluentui/react-icons";
-import { NormalizedEventKey } from "Common/Constants";
-import { tokens } from "Explorer/Theme/ThemeUtil";
-import React, { FC, useEffect, useRef } from "react";
-
-const useStyles = makeStyles({
-  container: {
-    padding: 0,
-  },
-  input: {
-    flexGrow: 1,
-    paddingRight: 0,
-    outline: "none",
-    "& input:focus": {
-      outline: "none", // Undo body :focus dashed outline
-    },
-  },
-  inputButton: {
-    border: 0,
-  },
-  dropdownHeader: {
-    width: "100%",
-    fontSize: tokens.fontSizeBase300,
-    fontWeight: 600,
-    padding: `${tokens.spacingVerticalM} 0 0 ${tokens.spacingVerticalM}`,
-  },
-  dropdownStack: {
-    display: "flex",
-    flexDirection: "column",
-    gap: tokens.spacingVerticalS,
-    marginTop: tokens.spacingVerticalS,
-    marginBottom: "1px",
-  },
-  dropdownOption: {
-    fontSize: tokens.fontSizeBase300,
-    fontWeight: 400,
-    justifyContent: "left",
-    padding: `${tokens.spacingHorizontalXS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalXS} ${tokens.spacingHorizontalL}`,
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-    border: 0,
-    ":hover": {
-      outline: `1px dashed ${tokens.colorNeutralForeground1Hover}`,
-      backgroundColor: tokens.colorNeutralBackground2Hover,
-      color: tokens.colorNeutralForeground1,
-    },
-  },
-  bottomSection: {
-    fontSize: tokens.fontSizeBase300,
-    fontWeight: 400,
-    padding: `${tokens.spacingHorizontalXS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalXS} ${tokens.spacingHorizontalL}`,
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-  },
-});
-
-export interface InputDatalistDropdownOptionSection {
-  label: string;
-  options: string[];
-}
-
-export interface InputDataListProps {
-  dropdownOptions: InputDatalistDropdownOptionSection[];
-  placeholder?: string;
-  title?: string;
-  value: string;
-  onChange: (value: string) => void;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  autofocus?: boolean; // true: acquire focus on first render
-  bottomLink?: {
-    text: string;
-    url: string;
-  };
-}
-
-export const InputDataList: FC<InputDataListProps> = ({
-  dropdownOptions,
-  placeholder,
-  title,
-  value,
-  onChange,
-  onKeyDown,
-  autofocus,
-  bottomLink,
-}) => {
-  const styles = useStyles();
-  const [showDropdown, setShowDropdown] = React.useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const positioningRef = React.useRef<PositioningImperativeRef>(null);
-  const [isInputFocused, setIsInputFocused] = React.useState(autofocus);
-  const [autofocusFirstDropdownItem, setAutofocusFirstDropdownItem] = React.useState(false);
-
-  const theme = getTheme();
-  const itemRefs = useRef([]);
-
-  useEffect(() => {
-    if (inputRef.current) {
-      positioningRef.current?.setTarget(inputRef.current);
-    }
-  }, [inputRef, positioningRef]);
-
-  useEffect(() => {
-    if (isInputFocused) {
-      inputRef.current?.focus();
-    }
-  }, [isInputFocused]);
-
-  useEffect(() => {
-    if (autofocusFirstDropdownItem && showDropdown) {
-      // Autofocus on first item if input isn't focused
-      itemRefs.current[0]?.focus();
-      setAutofocusFirstDropdownItem(false);
-    }
-  }, [autofocusFirstDropdownItem, showDropdown]);
-
-  const handleOpenChange: PopoverProps["onOpenChange"] = (e, data) => {
-    if (isInputFocused && !data.open) {
-      // Don't close if input is focused and we're opening the dropdown (which will steal the focus)
-      return;
-    }
-
-    setShowDropdown(data.open || false);
-    if (data.open) {
-      setIsInputFocused(true);
-    }
-  };
-
-  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === NormalizedEventKey.Escape) {
-      setShowDropdown(false);
-    } else if (e.key === NormalizedEventKey.DownArrow) {
-      setShowDropdown(true);
-      setAutofocusFirstDropdownItem(true);
-    }
-    onKeyDown(e);
-  };
-
-  const handleDownDropdownItemKeyDown = (
-    e: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>,
-    index: number,
-  ) => {
-    if (e.key === NormalizedEventKey.Enter) {
-      e.currentTarget.click();
-    } else if (e.key === NormalizedEventKey.Escape) {
-      setShowDropdown(false);
-      inputRef.current?.focus();
-    } else if (e.key === NormalizedEventKey.DownArrow) {
-      if (index + 1 < itemRefs.current.length) {
-        itemRefs.current[index + 1].focus();
-      } else {
-        setIsInputFocused(true);
-      }
-    } else if (e.key === NormalizedEventKey.UpArrow) {
-      if (index - 1 >= 0) {
-        itemRefs.current[index - 1].focus();
-      } else {
-        // Last item, focus back to input
-        setIsInputFocused(true);
-      }
-    }
-  };
-
-  // Flatten dropdownOptions to better manage refs and focus
-  let flatIndex = 0;
-  const indexMap = new Map<string, number>();
-  for (let sectionIndex = 0; sectionIndex < dropdownOptions.length; sectionIndex++) {
-    const section = dropdownOptions[sectionIndex];
-    for (let optionIndex = 0; optionIndex < section.options.length; optionIndex++) {
-      indexMap.set(`${sectionIndex}-${optionIndex}`, flatIndex);
-      flatIndex++;
-    }
-  }
-
-  return (
-    <>
-      <Input
-        id="filterInput"
-        ref={inputRef}
-        type="text"
-        size="small"
-        autoComplete="off"
-        className={`filterInput ${styles.input}`}
-        title={title}
-        placeholder={placeholder}
-        value={value}
-        autoFocus
-        onKeyDown={handleInputKeyDown}
-        onChange={(e) => {
-          const newValue = e.target.value;
-          // Don't show dropdown if there is already a value in the input field (when user is typing)
-          setShowDropdown(!(newValue.length > 0));
-          onChange(newValue);
-        }}
-        onClick={(e) => {
-          e.stopPropagation();
-        }}
-        onFocus={() => {
-          // Don't show dropdown if there is already a value in the input field
-          // or isInputFocused is undefined which means component is mounting
-          setShowDropdown(!(value.length > 0) && isInputFocused !== undefined);
-
-          setIsInputFocused(true);
-        }}
-        onBlur={() => {
-          setIsInputFocused(false);
-        }}
-        contentAfter={
-          value.length > 0 ? (
-            <Button
-              aria-label="Clear filter"
-              className={styles.inputButton}
-              size="small"
-              icon={<DismissRegular />}
-              onClick={() => {
-                onChange("");
-                setIsInputFocused(true);
-              }}
-            />
-          ) : (
-            <Button
-              aria-label="Open dropdown"
-              className={styles.inputButton}
-              size="small"
-              icon={<ArrowDownRegular />}
-              onClick={() => {
-                setShowDropdown(true);
-                setAutofocusFirstDropdownItem(true);
-              }}
-            />
-          )
-        }
-      />
-      <Popover
-        inline
-        unstable_disableAutoFocus
-        // trapFocus
-        open={showDropdown}
-        onOpenChange={handleOpenChange}
-        positioning={{ positioningRef, position: "below", align: "start", offset: 4 }}
-      >
-        <PopoverSurface className={styles.container}>
-          {dropdownOptions.map((section, sectionIndex) => (
-            <div key={section.label}>
-              <div className={styles.dropdownHeader} style={{ color: theme.palette.themePrimary }}>
-                {section.label}
-              </div>
-              <div className={styles.dropdownStack}>
-                {section.options.map((option, index) => (
-                  <Button
-                    key={option}
-                    ref={(el) => (itemRefs.current[indexMap.get(`${sectionIndex}-${index}`)] = el)}
-                    appearance="transparent"
-                    shape="square"
-                    className={styles.dropdownOption}
-                    onClick={() => {
-                      onChange(option);
-                      setShowDropdown(false);
-                      setIsInputFocused(true);
-                    }}
-                    onBlur={() =>
-                      !bottomLink &&
-                      sectionIndex === dropdownOptions.length - 1 &&
-                      index === section.options.length - 1 &&
-                      setShowDropdown(false)
-                    }
-                    onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) =>
-                      handleDownDropdownItemKeyDown(e, indexMap.get(`${sectionIndex}-${index}`))
-                    }
-                  >
-                    {option}
-                  </Button>
-                ))}
-              </div>
-            </div>
-          ))}
-          {bottomLink && (
-            <>
-              <Divider />
-              <div className={styles.bottomSection}>
-                <Link
-                  ref={(el) => (itemRefs.current[flatIndex] = el)}
-                  href={bottomLink.url}
-                  target="_blank"
-                  onBlur={() => setShowDropdown(false)}
-                  onKeyDown={(e: React.KeyboardEvent<HTMLAnchorElement>) => handleDownDropdownItemKeyDown(e, flatIndex)}
-                >
-                  {bottomLink.text}
-                </Link>
-              </div>
-            </>
-          )}
-        </PopoverSurface>
-      </Popover>
-    </>
-  );
-};
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -1134,7 +1134,7 @@ export default class Explorer {
    if (userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo") {
      userContext.authType === AuthType.ResourceToken
        ? this.refreshDatabaseForResourceToken()
-        : await this.refreshAllDatabases(); // await: we rely on the databases to be loaded before restoring the tabs further in the flow
+        : this.refreshAllDatabases();
    }
    await useNotebook.getState().refreshNotebooksEnabledStateForAccount();

--- a/src/Explorer/OpenActions/OpenActions.tsx
+++ b/src/Explorer/OpenActions/OpenActions.tsx
@@ -1,5 +1,4 @@
 // TODO convert this file to an action registry in order to have actions and their handlers be more tightly coupled.
-import { configContext, Platform } from "ConfigContext";
 import { useDatabases } from "Explorer/useDatabases";
 import React from "react";
 import { ActionContracts } from "../../Contracts/ExplorerContracts";
@@ -57,19 +56,6 @@ function openCollectionTab(
        continue;
      }

-      if (
-        configContext.platform === Platform.Fabric &&
-        !(
-          // whitelist the tab kinds that are allowed to be opened in Fabric
-          (
-            action.tabKind === ActionContracts.TabKind.SQLDocuments ||
-            action.tabKind === ActionContracts.TabKind.SQLQuery
-          )
-        )
-      ) {
-        continue;
-      }
-
      //expand database first if not expanded to load the collections
      if (!database.isDatabaseExpanded?.()) {
        database.expandDatabase?.();
@@ -135,28 +121,10 @@ function openCollectionTab(
            action.tabKind === ActionContracts.TabKind.SQLQuery ||
            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLQuery]
          ) {
-            const openQueryTabAction = action as ActionContracts.OpenQueryTab;
            collection.onNewQueryClick(
              collection,
              undefined,
-              generateQueryText(openQueryTabAction, collection.partitionKeyProperties),
-              openQueryTabAction.splitterDirection,
-              openQueryTabAction.queryViewSizePercent,
-            );
-            break;
-          }
-
-          if (
-            action.tabKind === ActionContracts.TabKind.MongoQuery ||
-            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.MongoQuery]
-          ) {
-            const openQueryTabAction = action as ActionContracts.OpenQueryTab;
-            collection.onNewMongoQueryClick(
-              collection,
-              undefined,
-              generateQueryText(openQueryTabAction, collection.partitionKeyProperties),
-              openQueryTabAction.splitterDirection,
-              openQueryTabAction.queryViewSizePercent,
+              generateQueryText(action as ActionContracts.OpenQueryTab, collection.partitionKeyProperties),
            );
            break;
          }
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -819,9 +819,22 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,

          {this.shouldShowAnalyticalStoreOptions() && (
            <Stack className="panelGroupSpacing">
-              <Text className="panelTextBold" variant="small">
-                {this.getAnalyticalStorageContent()}
-              </Text>
+              <Stack horizontal>
+                <Text className="panelTextBold" variant="small">
+                  Analytical store
+                </Text>
+                <TooltipHost
+                  directionalHint={DirectionalHint.bottomLeftEdge}
+                  content={this.getAnalyticalStorageTooltipContent()}
+                >
+                  <Icon
+                    iconName="Info"
+                    className="panelInfoIcon"
+                    tabIndex={0}
+                    ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
+                  />
+                </TooltipHost>
+              </Stack>

              <Stack horizontal verticalAlign="center">
                <div role="radiogroup">
@@ -1217,7 +1230,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
    return "";
  }

-  private getAnalyticalStorageContent(): JSX.Element {
+  private getAnalyticalStorageTooltipContent(): JSX.Element {
    return (
      <Text variant="small">
        Enable analytical store capability to perform near real-time analytics on your operational data, without
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -193,17 +193,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({

    LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);

-    if (
-      enableDataPlaneRBACOption !== LocalStorageUtility.getEntryString(StorageKey.DataPlaneRbacEnabled) ||
-      retryAttempts !== LocalStorageUtility.getEntryNumber(StorageKey.RetryAttempts) ||
-      retryInterval !== LocalStorageUtility.getEntryNumber(StorageKey.RetryInterval) ||
-      MaxWaitTimeInSeconds !== LocalStorageUtility.getEntryNumber(StorageKey.MaxWaitTimeInSeconds)
-    ) {
-      updateUserContext({
-        refreshCosmosClient: true,
-      });
-    }
-
    if (configContext.platform !== Platform.Fabric) {
      LocalStorageUtility.setEntryString(StorageKey.DataPlaneRbacEnabled, enableDataPlaneRBACOption);
      if (
@@ -213,6 +202,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
      ) {
        updateUserContext({
          dataPlaneRbacEnabled: true,
+          hasDataPlaneRbacSettingChanged: true,
        });
        useDataPlaneRbac.setState({ dataPlaneRbacEnabled: true });
        try {
@@ -236,6 +226,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
      } else {
        updateUserContext({
          dataPlaneRbacEnabled: false,
+          hasDataPlaneRbacSettingChanged: true,
        });
        const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
        if (!userContext.features.enableAadDataPlane && !userContext.masterKey) {
@@ -573,6 +564,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                </AccordionPanel>
              </AccordionItem>
            )}
+
          {userContext.apiType === "SQL" && (
            <>
              <AccordionItem value="3">
@@ -671,79 +663,78 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
              </AccordionItem>
            </>
          )}
-          {(userContext.apiType === "SQL" || userContext.apiType === "Tables" || userContext.apiType === "Gremlin") && (
-            <AccordionItem value="6">
-              <AccordionHeader>
-                <div className={styles.header}>Retry Settings</div>
-              </AccordionHeader>
-              <AccordionPanel>
-                <div className={styles.settingsSectionContainer}>
-                  <div className={styles.settingsSectionDescription}>
-                    Retry policy associated with throttled requests during CosmosDB queries.
-                  </div>
-                  <div>
-                    <span className={styles.subHeader}>Max retry attempts</span>
-                    <InfoTooltip className={styles.headerIcon}>
-                      Max number of retries to be performed for a request. Default value 9.
-                    </InfoTooltip>
-                  </div>
-                  <SpinButton
-                    labelPosition={Position.top}
-                    min={1}
-                    step={1}
-                    value={"" + retryAttempts}
-                    onChange={handleOnQueryRetryAttemptsSpinButtonChange}
-                    incrementButtonAriaLabel="Increase value by 1"
-                    decrementButtonAriaLabel="Decrease value by 1"
-                    onIncrement={(newValue) => setRetryAttempts(parseInt(newValue) + 1 || retryAttempts)}
-                    onDecrement={(newValue) => setRetryAttempts(parseInt(newValue) - 1 || retryAttempts)}
-                    onValidate={(newValue) => setRetryAttempts(parseInt(newValue) || retryAttempts)}
-                    styles={spinButtonStyles}
-                  />
-                  <div>
-                    <span className={styles.subHeader}>Fixed retry interval (ms)</span>
-                    <InfoTooltip className={styles.headerIcon}>
-                      Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned
-                      as part of the response. Default value is 0 milliseconds.
-                    </InfoTooltip>
-                  </div>
-                  <SpinButton
-                    labelPosition={Position.top}
-                    min={1000}
-                    step={1000}
-                    value={"" + retryInterval}
-                    onChange={handleOnRetryIntervalSpinButtonChange}
-                    incrementButtonAriaLabel="Increase value by 1000"
-                    decrementButtonAriaLabel="Decrease value by 1000"
-                    onIncrement={(newValue) => setRetryInterval(parseInt(newValue) + 1000 || retryInterval)}
-                    onDecrement={(newValue) => setRetryInterval(parseInt(newValue) - 1000 || retryInterval)}
-                    onValidate={(newValue) => setRetryInterval(parseInt(newValue) || retryInterval)}
-                    styles={spinButtonStyles}
-                  />
-                  <div>
-                    <span className={styles.subHeader}>Max wait time (s)</span>
-                    <InfoTooltip className={styles.headerIcon}>
-                      Max wait time in seconds to wait for a request while the retries are happening. Default value 30
-                      seconds.
-                    </InfoTooltip>
-                  </div>
-                  <SpinButton
-                    labelPosition={Position.top}
-                    min={1}
-                    step={1}
-                    value={"" + MaxWaitTimeInSeconds}
-                    onChange={handleOnMaxWaitTimeSpinButtonChange}
-                    incrementButtonAriaLabel="Increase value by 1"
-                    decrementButtonAriaLabel="Decrease value by 1"
-                    onIncrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) + 1 || MaxWaitTimeInSeconds)}
-                    onDecrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) - 1 || MaxWaitTimeInSeconds)}
-                    onValidate={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) || MaxWaitTimeInSeconds)}
-                    styles={spinButtonStyles}
-                  />
+
+          <AccordionItem value="6">
+            <AccordionHeader>
+              <div className={styles.header}>Retry Settings</div>
+            </AccordionHeader>
+            <AccordionPanel>
+              <div className={styles.settingsSectionContainer}>
+                <div className={styles.settingsSectionDescription}>
+                  Retry policy associated with throttled requests during CosmosDB queries.
                </div>
-              </AccordionPanel>
-            </AccordionItem>
-          )}
+                <div>
+                  <span className={styles.subHeader}>Max retry attempts</span>
+                  <InfoTooltip className={styles.headerIcon}>
+                    Max number of retries to be performed for a request. Default value 9.
+                  </InfoTooltip>
+                </div>
+                <SpinButton
+                  labelPosition={Position.top}
+                  min={1}
+                  step={1}
+                  value={"" + retryAttempts}
+                  onChange={handleOnQueryRetryAttemptsSpinButtonChange}
+                  incrementButtonAriaLabel="Increase value by 1"
+                  decrementButtonAriaLabel="Decrease value by 1"
+                  onIncrement={(newValue) => setRetryAttempts(parseInt(newValue) + 1 || retryAttempts)}
+                  onDecrement={(newValue) => setRetryAttempts(parseInt(newValue) - 1 || retryAttempts)}
+                  onValidate={(newValue) => setRetryAttempts(parseInt(newValue) || retryAttempts)}
+                  styles={spinButtonStyles}
+                />
+                <div>
+                  <span className={styles.subHeader}>Fixed retry interval (ms)</span>
+                  <InfoTooltip className={styles.headerIcon}>
+                    Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as
+                    part of the response. Default value is 0 milliseconds.
+                  </InfoTooltip>
+                </div>
+                <SpinButton
+                  labelPosition={Position.top}
+                  min={1000}
+                  step={1000}
+                  value={"" + retryInterval}
+                  onChange={handleOnRetryIntervalSpinButtonChange}
+                  incrementButtonAriaLabel="Increase value by 1000"
+                  decrementButtonAriaLabel="Decrease value by 1000"
+                  onIncrement={(newValue) => setRetryInterval(parseInt(newValue) + 1000 || retryInterval)}
+                  onDecrement={(newValue) => setRetryInterval(parseInt(newValue) - 1000 || retryInterval)}
+                  onValidate={(newValue) => setRetryInterval(parseInt(newValue) || retryInterval)}
+                  styles={spinButtonStyles}
+                />
+                <div>
+                  <span className={styles.subHeader}>Max wait time (s)</span>
+                  <InfoTooltip className={styles.headerIcon}>
+                    Max wait time in seconds to wait for a request while the retries are happening. Default value 30
+                    seconds.
+                  </InfoTooltip>
+                </div>
+                <SpinButton
+                  labelPosition={Position.top}
+                  min={1}
+                  step={1}
+                  value={"" + MaxWaitTimeInSeconds}
+                  onChange={handleOnMaxWaitTimeSpinButtonChange}
+                  incrementButtonAriaLabel="Increase value by 1"
+                  decrementButtonAriaLabel="Decrease value by 1"
+                  onIncrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) + 1 || MaxWaitTimeInSeconds)}
+                  onDecrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) - 1 || MaxWaitTimeInSeconds)}
+                  onValidate={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) || MaxWaitTimeInSeconds)}
+                  styles={spinButtonStyles}
+                />
+              </div>
+            </AccordionPanel>
+          </AccordionItem>

          <AccordionItem value="7">
            <AccordionHeader>
@@ -767,6 +758,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
              </div>
            </AccordionPanel>
          </AccordionItem>
+
          {shouldShowCrossPartitionOption && (
            <AccordionItem value="8">
              <AccordionHeader>
@@ -792,6 +784,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
              </AccordionPanel>
            </AccordionItem>
          )}
+
          {shouldShowParallelismOption && (
            <AccordionItem value="9">
              <AccordionHeader>
@@ -825,6 +818,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
              </AccordionPanel>
            </AccordionItem>
          )}
+
          {shouldShowPriorityLevelOption && (
            <AccordionItem value="10">
              <AccordionHeader>
@@ -848,6 +842,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
              </AccordionPanel>
            </AccordionItem>
          )}
+
          {shouldShowGraphAutoVizOption && (
            <AccordionItem value="11">
              <AccordionHeader>
@@ -869,6 +864,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
              </AccordionPanel>
            </AccordionItem>
          )}
+
          {shouldShowCopilotSampleDBOption && (
            <AccordionItem value="12">
              <AccordionHeader>
--- a/src/Explorer/Panes/snapshots/AddCollectionPanel.test.tsx.snap
+++ b/src/Explorer/Panes/snapshots/AddCollectionPanel.test.tsx.snap
@@ -309,23 +309,40 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
    <Stack
      className="panelGroupSpacing"
    >
-      <Text
-        className="panelTextBold"
-        variant="small"
+      <Stack
+        horizontal={true}
      >
        <Text
+          className="panelTextBold"
          variant="small"
        >
-          Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads.
-           
-          <StyledLinkBase
-            href="https://aka.ms/analytical-store-overview"
-            target="_blank"
-          >
-            Learn more
-          </StyledLinkBase>
+          Analytical store
        </Text>
-      </Text>
+        <StyledTooltipHostBase
+          content={
+            <Text
+              variant="small"
+            >
+              Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads.
+               
+              <StyledLinkBase
+                href="https://aka.ms/analytical-store-overview"
+                target="_blank"
+              >
+                Learn more
+              </StyledLinkBase>
+            </Text>
+          }
+          directionalHint={4}
+        >
+          <Icon
+            ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
+            className="panelInfoIcon"
+            iconName="Info"
+            tabIndex={0}
+          />
+        </StyledTooltipHostBase>
+      </Stack>
      <Stack
        horizontal={true}
        verticalAlign="center"
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts
@@ -3,11 +3,17 @@
 import { ColumnDefinition } from "Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent";
 import {
  AppStateComponentNames,
-  deleteSubComponentState,
-  readSubComponentState,
-  saveSubComponentState,
+  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 = AppStateComponentNames.DocumentsTab;

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

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

-// Wrap the ...SubComponentState functions for type safety
-
-export const readDocumentsTabSubComponentState = <T>(
+/**
+ *
+ * @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 => readSubComponentState<T>(AppStateComponentNames.DocumentsTab, subComponentName, collection, defaultValue);
+): 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;
+  }

-export const saveDocumentsTabSubComponentState = <T>(
+  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 => saveSubComponentState<T>(AppStateComponentNames.DocumentsTab, subComponentName, collection, state, debounce);
+): 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;
+  }

-export const deleteDocumentsTabSubComponentState = (
-  subComponentName: SubComponentName,
-  collection: ViewModels.CollectionBase,
-) => deleteSubComponentState(AppStateComponentNames.DocumentsTab, subComponentName, collection);
+  (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(),
+  });
+};
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx
@@ -386,6 +386,22 @@ describe("Documents tab (noSql API)", () => {
    it("should render the page", () => {
      expect(wrapper).toMatchSnapshot();
    });
+
+    it("clicking on Edit filter should render the Apply Filter button", () => {
+      wrapper
+        .findWhere((node) => node.text() === "Edit Filter")
+        .at(0)
+        .simulate("click");
+      expect(wrapper.findWhere((node) => node.text() === "Apply Filter").exists()).toBeTruthy();
+    });
+
+    it("clicking on Edit filter should render input for filter", () => {
+      wrapper
+        .findWhere((node) => node.text() === "Edit Filter")
+        .at(0)
+        .simulate("click");
+      expect(wrapper.find("Input.filterInput").exists()).toBeTruthy();
+    });
  });

  describe("Command bar buttons", () => {
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -1,6 +1,7 @@
 import { Item, ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import {
  Button,
+  Input,
  Link,
  MessageBar,
  MessageBarBody,
@@ -9,7 +10,8 @@ import {
  makeStyles,
  shorthands,
 } from "@fluentui/react-components";
-import { QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
+import { Dismiss16Filled } from "@fluentui/react-icons";
+import { KeyCodes, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
 import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import MongoUtility from "Common/MongoUtility";
 import { createDocument } from "Common/dataAccess/createDocument";
@@ -21,11 +23,9 @@ 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";
-import { InputDataList, InputDatalistDropdownOptionSection } from "Explorer/Controls/InputDataList/InputDataList";
 import { ProgressModalDialog } from "Explorer/Controls/ProgressModalDialog";
 import Explorer from "Explorer/Explorer";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
@@ -35,9 +35,8 @@ import {
  FilterHistory,
  SubComponentName,
  TabDivider,
-  deleteDocumentsTabSubComponentState,
-  readDocumentsTabSubComponentState,
-  saveDocumentsTabSubComponentState,
+  readSubComponentState,
+  saveSubComponentState,
 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
 import { usePrevious } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
 import { CosmosFluentProvider, LayoutConstants, cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
@@ -75,7 +74,6 @@ const MAX_FILTER_HISTORY_COUNT = 100; // Datalist will become scrollable, so we
 const NO_SQL_THROTTLING_DOC_URL =
  "https://learn.microsoft.com/azure/cosmos-db/nosql/troubleshoot-request-rate-too-large";
 const MONGO_THROTTLING_DOC_URL = "https://learn.microsoft.com/azure/cosmos-db/mongodb/prevent-rate-limiting-errors";
-const DATA_EXPLORER_DOC_URL = "https://learn.microsoft.com/en-us/azure/cosmos-db/data-explorer";

 const loadMoreHeight = LayoutConstants.rowHeight;
 export const useDocumentsTabStyles = makeStyles({
@@ -92,6 +90,12 @@ export const useDocumentsTabStyles = makeStyles({
    alignItems: "center",
    ...cosmosShorthands.borderBottom(),
  },
+  filterInput: {
+    flexGrow: 1,
+  },
+  appliedFilter: {
+    flexGrow: 1,
+  },
  tableContainer: {
    marginRight: tokens.spacingHorizontalXXXL,
  },
@@ -142,8 +146,6 @@ export class DocumentsTabV2 extends TabsBase {
  private title: string;
  private resourceTokenPartitionKey: string;

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

@@ -151,13 +153,6 @@ 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 {
@@ -561,6 +556,8 @@ export interface IDocumentsTabComponentProps {
  isTabActive: boolean;
 }

+const getUniqueId = (collection: ViewModels.CollectionBase): string => `${collection.databaseId}-${collection.id()}`;
+
 const getDefaultSqlFilters = (partitionKeys: string[]) =>
  ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC', "ORDER BY c._ts ASC"].concat(
    partitionKeys.map((partitionKey) => `WHERE c.${partitionKey} = "foo"`),
@@ -586,12 +583,14 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
  onIsExecutingChange,
  isTabActive,
 }): JSX.Element => {
-  const [filterContent, setFilterContent] = useState<string>(() =>
-    readDocumentsTabSubComponentState<string>(SubComponentName.CurrentFilter, _collection, ""),
-  );
-
+  const [isFilterCreated, setIsFilterCreated] = useState<boolean>(true);
+  const [isFilterExpanded, setIsFilterExpanded] = useState<boolean>(false);
+  const [isFilterFocused, setIsFilterFocused] = useState<boolean>(false);
+  const [appliedFilter, setAppliedFilter] = useState<string>("");
+  const [filterContent, setFilterContent] = useState<string>("");
  const [documentIds, setDocumentIds] = useState<ExtendedDocumentId[]>([]);
  const [isExecuting, setIsExecuting] = useState<boolean>(false);
+  const filterInput = useRef<HTMLInputElement>(null);
  const styles = useDocumentsTabStyles();

  // Query
@@ -620,7 +619,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone

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

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

  // For progress bar for bulk delete (noSql)
@@ -658,6 +657,12 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone

  const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);

+  useEffect(() => {
+    if (isFilterFocused) {
+      filterInput.current?.focus();
+    }
+  }, [isFilterFocused]);
+
  /**
   * Recursively delete all documents by retrying throttled requests (429).
   * This only works for NoSQL, because the bulk response includes status for each delete document request.
@@ -751,6 +756,11 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    }, timeout);
  }, [bulkDeleteOperation, bulkDeleteProcess, bulkDeleteMode]);

+  const applyFilterButton = {
+    enabled: true,
+    visible: true,
+  };
+
  const partitionKey: DataModels.PartitionKey = useMemo(
    () => _partitionKey || (_collection && _collection.partitionKey),
    [_collection, _partitionKey],
@@ -777,7 +787,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
  };

  const [selectedColumnIds, setSelectedColumnIds] = useState<string[]>(() => {
-    const persistedColumnsSelection = readDocumentsTabSubComponentState<ColumnsSelection>(
+    const persistedColumnsSelection = readSubComponentState<ColumnsSelection>(
      SubComponentName.ColumnsSelection,
      _collection,
      undefined,
@@ -821,8 +831,12 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
  // This is executed in onActivate() in the original code.
  useEffect(() => {
    setKeyboardActions({
+      [KeyboardAction.SEARCH]: () => {
+        onShowFilterClick();
+        return true;
+      },
      [KeyboardAction.CLEAR_SEARCH]: () => {
-        updateFilterContent("");
+        setFilterContent("");
        refreshDocumentsGrid(true);
        return true;
      },
@@ -1303,6 +1317,12 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    ],
  );

+  const onShowFilterClick = () => {
+    setIsFilterCreated(true);
+    setIsFilterExpanded(true);
+    setIsFilterFocused(true);
+  };
+
  const queryTimeoutEnabled = useCallback(
    (): boolean => !isPreferredApiMongoDB && LocalStorageUtility.getEntryBoolean(StorageKey.QueryTimeoutEnabled),
    [isPreferredApiMongoDB],
@@ -1344,6 +1364,19 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    selectedColumnIds,
  ]);

+  const onHideFilterClick = (): void => {
+    setIsFilterExpanded(false);
+  };
+
+  const onCloseButtonKeyDown: KeyboardEventHandler<HTMLSpanElement> = (event) => {
+    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+      onHideFilterClick();
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  };
+
  const updateDocumentIds = (newDocumentsIds: DocumentId[]): void => {
    setDocumentIds(newDocumentsIds);

@@ -1485,9 +1518,14 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
  };

  const onFilterKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
-    if (e.key === Constants.NormalizedEventKey.Enter) {
+    if (e.key === "Enter") {
      onApplyFilterClick();

+      // Suppress the default behavior of the key
+      e.preventDefault();
+    } else if (e.key === "Escape") {
+      onHideFilterClick();
+
      // Suppress the default behavior of the key
      e.preventDefault();
    }
@@ -1659,7 +1697,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone

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

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

  const refreshDocumentsGrid = useCallback(
@@ -1985,6 +2023,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
          applyFilterButtonPressed,
        });

+        // collapse filter
+        setAppliedFilter(filterContent);
+        setIsFilterExpanded(false);
+
        // If apply filter is pressed, reset current selected document
        if (applyFilterButtonPressed) {
          setClickedRowIndex(RESET_INDEX);
@@ -2027,7 +2069,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone

    setSelectedColumnIds(newSelectedColumnIds);

-    saveDocumentsTabSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, {
+    saveSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, {
      selectedColumnIds: newSelectedColumnIds,
      columnDefinitions,
    });
@@ -2061,138 +2103,168 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    (partitionKey.systemKey && !isPreferredApiMongoDB) || (isPreferredApiMongoDB && isMongoBulkDeleteDisabled);
  //  -------------------------------------------------------

-  const getFilterChoices = (): InputDatalistDropdownOptionSection[] => {
-    const options: InputDatalistDropdownOptionSection[] = [];
-    const nonBlankLastFilters = lastFilterContents.filter((filter) => filter.trim() !== "");
-    if (nonBlankLastFilters.length > 0) {
-      options.push({
-        label: "Saved filters",
-        options: nonBlankLastFilters,
-      });
-    }
-    options.push({
-      label: "Default filters",
-      options: isPreferredApiMongoDB ? defaultMongoFilters : getDefaultSqlFilters(partitionKeyProperties),
-    });
-    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" }}>
-        <div className={styles.filterRow}>
-          {!isPreferredApiMongoDB && <span> SELECT * FROM c </span>}
-          <InputDataList
-            dropdownOptions={getFilterChoices()}
-            placeholder={
-              isPreferredApiMongoDB
-                ? "Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents."
-                : "Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents."
-            }
-            title="Type a query predicate or choose one from the list."
-            value={filterContent}
-            onChange={updateFilterContent}
-            onKeyDown={onFilterKeyDown}
-            bottomLink={{ text: "Learn more", url: DATA_EXPLORER_DOC_URL }}
-          />
-          <Button
-            appearance="primary"
-            size="small"
-            onClick={() => {
-              if (isExecuting) {
-                if (!isPreferredApiMongoDB) {
-                  queryAbortController.abort();
-                }
-              } else {
-                onApplyFilterClick();
-              }
-            }}
-            disabled={isExecuting && isPreferredApiMongoDB}
-            aria-label={!isExecuting || isPreferredApiMongoDB ? "Apply filter" : "Cancel"}
-            tabIndex={0}
-          >
-            {!isExecuting || isPreferredApiMongoDB ? "Apply Filter" : "Cancel"}
-          </Button>
-        </div>
-        <Allotment
-          onDragEnd={(sizes: number[]) => {
-            tabStateData.leftPaneWidthPercent = (100 * sizes[0]) / (sizes[0] + sizes[1]);
-            saveDocumentsTabSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, tabStateData);
-            setTabStateData(tabStateData);
-          }}
-        >
-          <Allotment.Pane preferredSize={`${tabStateData.leftPaneWidthPercent}%`} minSize={55}>
-            <div style={{ height: "100%", width: "100%", overflow: "hidden" }} ref={tableContainerRef}>
-              <div className={styles.tableContainer}>
-                <div
-                  style={
-                    {
-                      height: "100%",
-                      width: `calc(100% + ${calculateOffset(selectedColumnIds.length)}px)`,
-                    } /* Fix to make table not resize beyond parent's width */
-                  }
-                >
-                  <DocumentsTableComponent
-                    onRefreshTable={() => refreshDocumentsGrid(false)}
-                    items={tableItems}
-                    onSelectedRowsChange={onSelectedRowsChange}
-                    selectedRows={selectedRows}
-                    size={tableContainerSizePx}
-                    selectedColumnIds={selectedColumnIds}
-                    columnDefinitions={columnDefinitions}
-                    isRowSelectionDisabled={
-                      isBulkDeleteDisabled ||
-                      (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly)
-                    }
-                    onColumnSelectionChange={onColumnSelectionChange}
-                    defaultColumnSelection={getInitialColumnSelection()}
-                    collection={_collection}
-                    isColumnSelectionDisabled={isPreferredApiMongoDB}
-                  />
-                </div>
+        {isFilterCreated && (
+          <>
+            {!isFilterExpanded && !isPreferredApiMongoDB && (
+              <div className={styles.filterRow}>
+                <span>SELECT * FROM c</span>
+                <span className={styles.appliedFilter}>{appliedFilter}</span>
+                <Button appearance="primary" size="small" onClick={onShowFilterClick}>
+                  Edit Filter
+                </Button>
              </div>
-              {tableItems.length > 0 && (
-                <a
-                  className={styles.loadMore}
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => loadNextPage(documentsIterator.iterator, false)}
-                  onKeyDown={onLoadMoreKeyInput}
-                >
-                  Load more
-                </a>
-              )}
-            </div>
-          </Allotment.Pane>
-          <Allotment.Pane minSize={30}>
-            <div style={{ height: "100%", width: "100%" }}>
-              {isTabActive && selectedDocumentContent && selectedRows.size <= 1 && (
-                <EditorReact
-                  language={"json"}
-                  content={selectedDocumentContent}
-                  isReadOnly={false}
-                  ariaLabel={"Document editor"}
-                  lineNumbers={"on"}
-                  theme={"_theme"}
-                  onContentChanged={_onEditorContentChange}
-                  enableWordWrapContextMenuItem={true}
+            )}
+            {!isFilterExpanded && isPreferredApiMongoDB && (
+              <div className={styles.filterRow}>
+                {appliedFilter.length > 0 && <span>Filter :</span>}
+                {!(appliedFilter.length > 0) && <span className="noFilterApplied">No filter applied</span>}
+                <span className={styles.appliedFilter}>{appliedFilter}</span>
+                <Button appearance="primary" size="small" onClick={onShowFilterClick}>
+                  Edit Filter
+                </Button>
+              </div>
+            )}
+            {isFilterExpanded && (
+              <div className={styles.filterRow}>
+                {!isPreferredApiMongoDB && <span> SELECT * FROM c </span>}
+                <Input
+                  ref={filterInput}
+                  type="text"
+                  size="small"
+                  list={`filtersList-${getUniqueId(_collection)}`}
+                  className={`filterInput ${styles.filterInput}`}
+                  title="Type a query predicate or choose one from the list."
+                  placeholder={
+                    isPreferredApiMongoDB
+                      ? "Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents."
+                      : "Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents."
+                  }
+                  value={filterContent}
+                  autoFocus={true}
+                  onKeyDown={onFilterKeyDown}
+                  onChange={(e) => setFilterContent(e.target.value)}
+                  onBlur={() => setIsFilterFocused(false)}
                />
-              )}
-              {selectedRows.size > 1 && (
-                <span style={{ margin: 10 }}>Number of selected documents: {selectedRows.size}</span>
-              )}
-            </div>
-          </Allotment.Pane>
-        </Allotment>
+
+                <datalist id={`filtersList-${getUniqueId(_collection)}`}>
+                  {addStringsNoDuplicate(
+                    lastFilterContents,
+                    isPreferredApiMongoDB ? defaultMongoFilters : getDefaultSqlFilters(partitionKeyProperties),
+                  ).map((filter) => (
+                    <option key={filter} value={filter} />
+                  ))}
+                </datalist>
+
+                <Button
+                  appearance="primary"
+                  size="small"
+                  onClick={onApplyFilterClick}
+                  disabled={!applyFilterButton.enabled}
+                  aria-label="Apply filter"
+                  tabIndex={0}
+                >
+                  Apply Filter
+                </Button>
+                {!isPreferredApiMongoDB && isExecuting && (
+                  <Button
+                    appearance="primary"
+                    size="small"
+                    aria-label="Cancel Query"
+                    onClick={() => queryAbortController.abort()}
+                    tabIndex={0}
+                  >
+                    Cancel Query
+                  </Button>
+                )}
+                <Button
+                  aria-label="close filter"
+                  tabIndex={0}
+                  onClick={onHideFilterClick}
+                  onKeyDown={onCloseButtonKeyDown}
+                  appearance="transparent"
+                  size="small"
+                  icon={<Dismiss16Filled />}
+                />
+              </div>
+            )}
+          </>
+        )}
+        {/* <Split> doesn't like to be a flex child */}
+        <div style={{ overflow: "hidden", height: "100%" }}>
+          <Allotment
+            onDragEnd={(sizes: number[]) => {
+              tabStateData.leftPaneWidthPercent = (100 * sizes[0]) / (sizes[0] + sizes[1]);
+              saveSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, tabStateData);
+              setTabStateData(tabStateData);
+            }}
+          >
+            <Allotment.Pane preferredSize={`${tabStateData.leftPaneWidthPercent}%`} minSize={55}>
+              <div style={{ height: "100%", width: "100%", overflow: "hidden" }} ref={tableContainerRef}>
+                <div className={styles.tableContainer}>
+                  <div
+                    style={
+                      {
+                        height: "100%",
+                        width: `calc(100% + ${calculateOffset(selectedColumnIds.length)}px)`,
+                      } /* Fix to make table not resize beyond parent's width */
+                    }
+                  >
+                    <DocumentsTableComponent
+                      onRefreshTable={() => refreshDocumentsGrid(false)}
+                      items={tableItems}
+                      onSelectedRowsChange={onSelectedRowsChange}
+                      selectedRows={selectedRows}
+                      size={tableContainerSizePx}
+                      selectedColumnIds={selectedColumnIds}
+                      columnDefinitions={columnDefinitions}
+                      isRowSelectionDisabled={
+                        isBulkDeleteDisabled ||
+                        (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly)
+                      }
+                      onColumnSelectionChange={onColumnSelectionChange}
+                      defaultColumnSelection={getInitialColumnSelection()}
+                      collection={_collection}
+                      isColumnSelectionDisabled={isPreferredApiMongoDB}
+                    />
+                  </div>
+                </div>
+                {tableItems.length > 0 && (
+                  <a
+                    className={styles.loadMore}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => loadNextPage(documentsIterator.iterator, false)}
+                    onKeyDown={onLoadMoreKeyInput}
+                  >
+                    Load more
+                  </a>
+                )}
+              </div>
+            </Allotment.Pane>
+            <Allotment.Pane minSize={30}>
+              <div style={{ height: "100%", width: "100%" }}>
+                {isTabActive && selectedDocumentContent && selectedRows.size <= 1 && (
+                  <EditorReact
+                    language={"json"}
+                    content={selectedDocumentContent}
+                    isReadOnly={false}
+                    ariaLabel={"Document editor"}
+                    lineNumbers={"on"}
+                    theme={"_theme"}
+                    onContentChanged={_onEditorContentChange}
+                    enableWordWrapContextMenuItem={true}
+                  />
+                )}
+                {selectedRows.size > 1 && (
+                  <span style={{ margin: 10 }}>Number of selected documents: {selectedRows.size}</span>
+                )}
+              </div>
+            </Allotment.Pane>
+          </Allotment>
+        </div>
      </div>
      {bulkDeleteOperation && (
        <ProgressModalDialog
--- 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,
-  deleteDocumentsTabSubComponentState,
-  readDocumentsTabSubComponentState,
-  saveDocumentsTabSubComponentState,
+  deleteSubComponentState,
+  readSubComponentState,
+  saveSubComponentState,
  SubComponentName,
 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
 import { INITIAL_SELECTED_ROW_INDEX, useDocumentsTabStyles } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
@@ -118,11 +118,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
  const sortedRowsRef = React.useRef(null);

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

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

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

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

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

-    saveDocumentsTabSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, {
-      columnId,
-      direction,
-    });
+    saveSubComponentState<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/DocumentsTabV2/snapshots/DocumentsTabV2.test.tsx.snap
+++ b/src/Explorer/Tabs/DocumentsTabV2/snapshots/DocumentsTabV2.test.tsx.snap
@@ -17,124 +17,106 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
      className="___11ktxfv_0000000 f1o614cb fy9rknc f22iagw fsnqrgy f1f5gg8d fjodcmx f122n59 f1f09k3d fg706s2 frpde29"
    >
      <span>
-         SELECT * FROM c 
+        SELECT * FROM c
      </span>
-      <InputDataList
-        bottomLink={
-          {
-            "text": "Learn more",
-            "url": "https://learn.microsoft.com/en-us/azure/cosmos-db/data-explorer",
-          }
-        }
-        dropdownOptions={
-          [
-            {
-              "label": "Default filters",
-              "options": [
-                "WHERE c.id = "foo"",
-                "ORDER BY c._ts DESC",
-                "WHERE c.id = "foo" ORDER BY c._ts DESC",
-                "ORDER BY c._ts ASC",
-                "WHERE c.foo = "foo"",
-              ],
-            },
-          ]
-        }
-        onChange={[Function]}
-        onKeyDown={[Function]}
-        placeholder="Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents."
-        title="Type a query predicate or choose one from the list."
-        value=""
+      <span
+        className="___r7kt3y0_0000000 fqerorx"
      />
      <Button
        appearance="primary"
-        aria-label="Apply filter"
-        disabled={false}
        onClick={[Function]}
        size="small"
-        tabIndex={0}
      >
-        Apply Filter
+        Edit Filter
      </Button>
    </div>
-    <Allotment
-      onDragEnd={[Function]}
+    <div
+      style={
+        {
+          "height": "100%",
+          "overflow": "hidden",
+        }
+      }
    >
-      <Allotment.Pane
-        minSize={55}
-        preferredSize="35%"
+      <Allotment
+        onDragEnd={[Function]}
      >
-        <div
-          style={
-            {
-              "height": "100%",
-              "overflow": "hidden",
-              "width": "100%",
-            }
-          }
+        <Allotment.Pane
+          minSize={55}
+          preferredSize="35%"
        >
          <div
-            className="___9o87uj0_0000000 ffefeo0"
+            style={
+              {
+                "height": "100%",
+                "overflow": "hidden",
+                "width": "100%",
+              }
+            }
          >
            <div
-              style={
-                {
-                  "height": "100%",
-                  "width": "calc(100% + -11px)",
-                }
-              }
+              className="___9o87uj0_0000000 ffefeo0"
            >
-              <DocumentsTableComponent
-                collection={
+              <div
+                style={
                  {
-                    "databaseId": "databaseId",
-                    "id": [Function],
+                    "height": "100%",
+                    "width": "calc(100% + -11px)",
                  }
                }
-                columnDefinitions={
-                  [
+              >
+                <DocumentsTableComponent
+                  collection={
                    {
-                      "id": "id",
-                      "isPartitionKey": false,
-                      "label": "id",
-                    },
-                  ]
-                }
-                defaultColumnSelection={
-                  [
-                    "id",
-                  ]
-                }
-                isColumnSelectionDisabled={false}
-                isRowSelectionDisabled={true}
-                items={[]}
-                onColumnSelectionChange={[Function]}
-                onRefreshTable={[Function]}
-                onSelectedRowsChange={[Function]}
-                selectedColumnIds={
-                  [
-                    "id",
-                  ]
-                }
-                selectedRows={Set {}}
-              />
+                      "databaseId": "databaseId",
+                      "id": [Function],
+                    }
+                  }
+                  columnDefinitions={
+                    [
+                      {
+                        "id": "id",
+                        "isPartitionKey": false,
+                        "label": "id",
+                      },
+                    ]
+                  }
+                  defaultColumnSelection={
+                    [
+                      "id",
+                    ]
+                  }
+                  isColumnSelectionDisabled={false}
+                  isRowSelectionDisabled={true}
+                  items={[]}
+                  onColumnSelectionChange={[Function]}
+                  onRefreshTable={[Function]}
+                  onSelectedRowsChange={[Function]}
+                  selectedColumnIds={
+                    [
+                      "id",
+                    ]
+                  }
+                  selectedRows={Set {}}
+                />
+              </div>
            </div>
          </div>
-        </div>
-      </Allotment.Pane>
-      <Allotment.Pane
-        minSize={30}
-      >
-        <div
-          style={
-            {
-              "height": "100%",
-              "width": "100%",
+        </Allotment.Pane>
+        <Allotment.Pane
+          minSize={30}
+        >
+          <div
+            style={
+              {
+                "height": "100%",
+                "width": "100%",
+              }
            }
-          }
-        />
-      </Allotment.Pane>
-    </Allotment>
+          />
+        </Allotment.Pane>
+      </Allotment>
+    </div>
  </div>
 </CosmosFluentProvider>
 `;
--- a/src/Explorer/Tabs/MongoQueryTab/MongoQueryTab.tsx
+++ b/src/Explorer/Tabs/MongoQueryTab/MongoQueryTab.tsx
@@ -1,4 +1,3 @@
-import { ActionType, TabKind } from "Contracts/ActionContracts";
 import React from "react";
 import MongoUtility from "../../../Common/MongoUtility";
 import * as ViewModels from "../../../Contracts/ViewModels";
@@ -21,7 +20,7 @@ export class NewMongoQueryTab extends NewQueryTab {
    private mongoQueryTabProps: IMongoQueryTabProps,
  ) {
    super(options, mongoQueryTabProps);
-    this.queryText = options.queryText ?? "";
+    this.queryText = "";
    this.iMongoQueryTabComponentProps = {
      collection: options.collection,
      isExecutionError: this.isExecutionError(),
@@ -29,8 +28,6 @@ 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;
@@ -38,26 +35,6 @@ 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,5 +1,4 @@
 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";
@@ -27,8 +26,6 @@ export class NewQueryTab extends TabsBase {
  public iQueryTabComponentProps: IQueryTabComponentProps;
  public iTabAccessor: ITabAccessor;

-  protected persistedState: OpenQueryTab;
-
  constructor(
    options: QueryTabOptions,
    private props: IQueryTabProps,
@@ -42,41 +39,12 @@ 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,7 +34,6 @@ 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,7 +18,13 @@ import { CosmosFluentProvider } from "Explorer/Theme/ThemeUtil";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { KeyboardAction } from "KeyboardShortcuts";
 import { QueryConstants } from "Shared/Constants";
-import { LocalStorageUtility, StorageKey, getRUThreshold, ruThresholdEnabled } from "Shared/StorageUtility";
+import {
+  LocalStorageUtility,
+  StorageKey,
+  getDefaultQueryResultsView,
+  getRUThreshold,
+  ruThresholdEnabled,
+} from "Shared/StorageUtility";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { Allotment } from "allotment";
 import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
@@ -93,13 +99,6 @@ 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 {
@@ -119,13 +118,11 @@ 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,
@@ -135,12 +132,12 @@ export const QueryTabCopilotComponent = (props: IQueryTabComponentProps): any =>
    isSampleCopilotActive: isSampleCopilotActive,
    copilotStore: copilotStore,
  };
-  return <QueryTabComponentImpl styles={styles} {...queryTabProps} />;
+  return <QueryTabComponentImpl styles={styles} {...queryTabProps}></QueryTabComponentImpl>;
 };

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

 type QueryTabComponentImplProps = IQueryTabComponentProps & {
@@ -149,8 +146,6 @@ 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;
@@ -162,10 +157,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 = {
@@ -181,9 +176,7 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
      cancelQueryTimeoutID: undefined,
      copilotActive: this._queryCopilotActive(),
      currentTabActive: true,
-      queryResultsView:
-        props.splitterDirection === "vertical" ? SplitterDirection.Vertical : SplitterDirection.Horizontal,
-      queryViewSizePercent: props.queryViewSizePercent,
+      queryResultsView: getDefaultQueryResultsView(),
    };
    this.isCloseClicked = false;
    this.splitterId = this.props.tabId + "_splitter";
@@ -214,23 +207,6 @@ 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);
@@ -591,7 +567,7 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
    };
  }
  private _setViewLayout(direction: SplitterDirection): void {
-    this.setState({ queryResultsView: direction }, () => this.saveQueryTabStateDebounced());
+    this.setState({ queryResultsView: direction });

    // We'll need to refresh the context buttons to update the selected state of the view buttons
    setTimeout(() => {
@@ -623,16 +599,13 @@ 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: [],
-      },
-      () => this.saveQueryTabStateDebounced(),
-    );
+      // Clear the markers when the user edits the document.
+      modelMarkers: [],
+    });
    if (this.isPreferredApiMongoDB) {
      if (newContent.length > 0) {
        this.executeQueryButton = {
@@ -731,20 +704,8 @@ 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}
-            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
-              }
-            >
+          <Allotment key={vertical.toString()} vertical={vertical}>
+            <Allotment.Pane data-test="QueryTab/EditorPane">
              <EditorReact
                ref={this.queryEditor}
                className={this.props.styles.queryEditor}
--- a/src/Explorer/Tabs/SettingsTabV2.tsx
+++ b/src/Explorer/Tabs/SettingsTabV2.tsx
@@ -1,4 +1,3 @@
-import { ActionType, OpenCollectionTab, TabKind } from "Contracts/ActionContracts";
 import React from "react";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { SettingsComponent } from "../Controls/Settings/SettingsComponent";
@@ -11,18 +10,6 @@ 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/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -1,7 +1,9 @@
-import { IMessageBarStyles, MessageBar, MessageBarType } from "@fluentui/react";
+import { IMessageBarStyles, MessageBar, MessageBarButton, MessageBarType } from "@fluentui/react";
 import { CassandraProxyEndpoints, MongoProxyEndpoints } from "Common/Constants";
+import { sendMessage } from "Common/MessageHandler";
 import { configContext } from "ConfigContext";
 import { IpRule } from "Contracts/DataModels";
+import { MessageTypes } from "Contracts/ExplorerContracts";
 import { CollectionTabKind } from "Contracts/ViewModels";
 import Explorer from "Explorer/Explorer";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
@@ -33,7 +35,7 @@ interface TabsProps {
 }

 export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
-  const { openedTabs, openedReactTabs, activeTab, activeReactTab } = useTabs();
+  const { openedTabs, openedReactTabs, activeTab, activeReactTab, networkSettingsWarning } = useTabs();
  const [
    showMongoAndCassandraProxiesNetworkSettingsWarningState,
    setShowMongoAndCassandraProxiesNetworkSettingsWarningState,
@@ -58,6 +60,29 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {

  return (
    <div className="tabsManagerContainer">
+      {networkSettingsWarning && (
+        <MessageBar
+          messageBarType={MessageBarType.warning}
+          styles={defaultMessageBarStyles}
+          actions={
+            <MessageBarButton
+              onClick={() =>
+                sendMessage({
+                  type:
+                    userContext.apiType === "VCoreMongo"
+                      ? MessageTypes.OpenVCoreMongoNetworkingBlade
+                      : MessageTypes.OpenPostgresNetworkingBlade,
+                })
+              }
+            >
+              Change network settings
+            </MessageBarButton>
+          }
+          messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+        >
+          {networkSettingsWarning}
+        </MessageBar>
+      )}
      {showMongoAndCassandraProxiesNetworkSettingsWarningState && (
        <MessageBar
          messageBarType={MessageBarType.warning}
@@ -318,7 +343,7 @@ const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): J
 const showMongoAndCassandraProxiesNetworkSettingsWarning = (): boolean => {
  const ipRules: IpRule[] = userContext.databaseAccount?.properties?.ipRules;
  if (
-    ((userContext.apiType === "Mongo" && configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Development) ||
+    ((userContext.apiType === "Mongo" && configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Local) ||
      (userContext.apiType === "Cassandra" &&
        configContext.CASSANDRA_PROXY_ENDPOINT !== CassandraProxyEndpoints.Development)) &&
    ipRules?.length
--- a/src/Explorer/Tabs/TabsBase.ts
+++ b/src/Explorer/Tabs/TabsBase.ts
@@ -1,4 +1,3 @@
-import { OpenTab } from "Contracts/ActionContracts";
 import { KeyboardActionGroup, clearKeyboardActionGroup } from "KeyboardShortcuts";
 import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
@@ -31,8 +30,6 @@ 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;
@@ -58,10 +55,6 @@ 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, {
--- a/src/Explorer/Tree/Collection.ts
+++ b/src/Explorer/Tree/Collection.ts
@@ -630,13 +630,7 @@ export default class Collection implements ViewModels.Collection {
    }
  };

-  public onNewQueryClick(
-    source: any,
-    event: MouseEvent,
-    queryText?: string,
-    splitterDirection?: "horizontal" | "vertical",
-    queryViewSizePercent?: number,
-  ) {
+  public onNewQueryClick(source: any, event: MouseEvent, queryText?: string) {
    const collection: ViewModels.Collection = source.collection || source;
    const id = useTabs.getState().getTabs(ViewModels.CollectionTabKind.Query).length + 1;
    const title = "Query " + id;
@@ -659,21 +653,13 @@ export default class Collection implements ViewModels.Collection {
          queryText: queryText,
          partitionKey: collection.partitionKey,
          onLoadStartKey: startKey,
-          splitterDirection,
-          queryViewSizePercent,
        },
        { container: this.container },
      ),
    );
  }

-  public onNewMongoQueryClick(
-    source: any,
-    event: MouseEvent,
-    queryText?: string,
-    splitterDirection?: "horizontal" | "vertical",
-    queryViewSizePercent?: number,
-  ) {
+  public onNewMongoQueryClick(source: any, event: MouseEvent, queryText?: string) {
    const collection: ViewModels.Collection = source.collection || source;
    const id = useTabs.getState().getTabs(ViewModels.CollectionTabKind.Query).length + 1;

@@ -695,9 +681,6 @@ export default class Collection implements ViewModels.Collection {
        node: this,
        partitionKey: collection.partitionKey,
        onLoadStartKey: startKey,
-        queryText,
-        splitterDirection,
-        queryViewSizePercent,
      },
      {
        container: this.container,
--- a/src/Platform/Hosted/extractFeatures.ts
+++ b/src/Platform/Hosted/extractFeatures.ts
@@ -38,7 +38,6 @@ export type Features = {
  readonly copilotChatFixedMonacoEditorHeight: boolean;
  readonly enablePriorityBasedExecution: boolean;
  readonly disableConnectionStringLogin: boolean;
-  readonly restoreTabs: boolean;

  // can be set via both flight and feature flag
  autoscaleDefault: boolean;
@@ -109,7 +108,6 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
    copilotChatFixedMonacoEditorHeight: "true" === get("copilotchatfixedmonacoeditorheight"),
    enablePriorityBasedExecution: "true" === get("enableprioritybasedexecution"),
    disableConnectionStringLogin: "true" === get("disableconnectionstringlogin"),
-    restoreTabs: "true" === get("restoretabs"),
  };
 }

--- a/src/SelfServe/SqlX/SqlX.rp.ts
+++ b/src/SelfServe/SqlX/SqlX.rp.ts
@@ -266,10 +266,7 @@ export const getOfferingIds = async (regions: Array<RegionItem>): Promise<Offeri
        method: "GET",
        apiVersion: "2023-05-01-preview",
        queryParams: {
-          filter:
-            "armRegionName eq '" +
-            regionShortName +
-            "' and productDisplayName eq 'Azure Cosmos DB Dedicated Gateway - General Purpose'",
+          filter: "armRegionName eq '" + regionShortName + "'",
        },
      });

--- a/src/Shared/AppStatePersistenceUtility.ts
+++ b/src/Shared/AppStatePersistenceUtility.ts
@@ -1,20 +1,12 @@
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { Action } from "Shared/Telemetry/TelemetryConstants";
-import { userContext } from "UserContext";
-import * as ViewModels from "../Contracts/ViewModels";
-import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";

 // The component name whose state is being saved. Component name must not include special characters.
 export enum AppStateComponentNames {
  DocumentsTab = "DocumentsTab",
  MostRecentActivity = "MostRecentActivity",
  QueryCopilot = "QueryCopilot",
-  DataExplorerAction = "DataExplorerAction",
 }

-// Subcomponent for DataExplorerAction
-export const OPEN_TABS_SUBCOMPONENT_NAME = "OpenTabs";
-
 export const PATH_SEPARATOR = "/"; // export for testing purposes
 const SCHEMA_VERSION = 1;

@@ -80,18 +72,12 @@ export const hasState = (path: StorePath): boolean => {
 };

 // This is for high-frequency state changes
-// Keep track of timeouts per path
-const pathToTimeoutIdMap = new Map<string, NodeJS.Timeout>();
+let timeoutId: NodeJS.Timeout | undefined;
 export const saveStateDebounced = (path: StorePath, state: unknown, debounceDelayMs = 1000): void => {
-  const key = createKeyFromPath(path);
-  const timeoutId = pathToTimeoutIdMap.get(key);
  if (timeoutId) {
    clearTimeout(timeoutId);
  }
-  pathToTimeoutIdMap.set(
-    key,
-    setTimeout(() => saveState(path, state), debounceDelayMs),
-  );
+  timeoutId = setTimeout(() => saveState(path, state), debounceDelayMs);
 };

 interface ApplicationState {
@@ -126,93 +112,3 @@ export const createKeyFromPath = (path: StorePath): string => {
 export const deleteAllStates = (): void => {
  LocalStorageUtility.removeEntry(StorageKey.AppState);
 };
-
-// Convenience functions
-
-/**
- *
- * @param subComponentName
- * @param collection
- * @param defaultValue Will be returned if persisted state is not found
- * @returns
- */
-export const readSubComponentState = <T>(
-  componentName: AppStateComponentNames,
-  subComponentName: string,
-  collection: ViewModels.CollectionBase | undefined,
-  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 ? collection.databaseId : "",
-    containerName: collection ? 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>(
-  componentName: AppStateComponentNames,
-  subComponentName: string,
-  collection: ViewModels.CollectionBase | undefined,
-  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 ? collection.databaseId : "",
-      containerName: collection ? collection.id() : "",
-    },
-    state,
-  );
-};
-
-export const deleteSubComponentState = (
-  componentName: AppStateComponentNames,
-  subComponentName: string,
-  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(),
-  });
-};
--- a/src/UserContext.ts
+++ b/src/UserContext.ts
@@ -104,7 +104,7 @@ export interface UserContext {
  readonly vcoreMongoConnectionParams?: VCoreMongoConnectionParams;
  readonly feedbackPolicies?: AdminFeedbackPolicySettings;
  readonly dataPlaneRbacEnabled?: boolean;
-  readonly refreshCosmosClient?: boolean;
+  readonly hasDataPlaneRbacSettingChanged?: boolean;
 }

 export type ApiType = "SQL" | "Mongo" | "Gremlin" | "Tables" | "Cassandra" | "Postgres" | "VCoreMongo";
--- a/src/Utils/EndpointUtils.ts
+++ b/src/Utils/EndpointUtils.ts
@@ -93,7 +93,7 @@ export const MongoProxyOutboundIPs: { [key: string]: string[] } = {
 };

 export const defaultAllowedMongoProxyEndpoints: ReadonlyArray<string> = [
-  MongoProxyEndpoints.Development,
+  MongoProxyEndpoints.Local,
  MongoProxyEndpoints.Mpac,
  MongoProxyEndpoints.Prod,
  MongoProxyEndpoints.Fairfax,
--- a/src/Utils/NetworkUtility.test.ts
+++ b/src/Utils/NetworkUtility.test.ts
@@ -0,0 +1,104 @@
+import { MongoProxyEndpoints, PortalBackendEndpoints } from "Common/Constants";
+import { resetConfigContext, updateConfigContext } from "ConfigContext";
+import { DatabaseAccount, IpRule } from "Contracts/DataModels";
+import { updateUserContext } from "UserContext";
+import { MongoProxyOutboundIPs, PortalBackendOutboundIPs } from "Utils/EndpointUtils";
+import { getNetworkSettingsWarningMessage } from "./NetworkUtility";
+
+describe("NetworkUtility tests", () => {
+  describe("getNetworkSettingsWarningMessage", () => {
+    const publicAccessMessagePart = "Please enable public access to proceed";
+    const accessMessagePart = "Please allow access from Azure Portal to proceed";
+    let warningMessageResult: string;
+    const warningMessageFunc = (msg: string) => (warningMessageResult = msg);
+
+    beforeEach(() => {
+      warningMessageResult = undefined;
+    });
+
+    afterEach(() => {
+      resetConfigContext();
+    });
+
+    it("should return no message when publicNetworkAccess is enabled", async () => {
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            publicNetworkAccess: "Enabled",
+          },
+        } as DatabaseAccount,
+      });
+
+      await getNetworkSettingsWarningMessage(warningMessageFunc);
+      expect(warningMessageResult).toBeUndefined();
+    });
+
+    it("should return publicAccessMessage when publicNetworkAccess is disabled", async () => {
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            publicNetworkAccess: "Disabled",
+          },
+        } as DatabaseAccount,
+      });
+
+      await getNetworkSettingsWarningMessage(warningMessageFunc);
+      expect(warningMessageResult).toContain(publicAccessMessagePart);
+    });
+
+    it(`should return no message when the appropriate ip rules are added to mongo/cassandra account per endpoint`, async () => {
+      const portalBackendOutboundIPs: string[] = [
+        ...PortalBackendOutboundIPs[PortalBackendEndpoints.Mpac],
+        ...PortalBackendOutboundIPs[PortalBackendEndpoints.Prod],
+        ...MongoProxyOutboundIPs[MongoProxyEndpoints.Mpac],
+        ...MongoProxyOutboundIPs[MongoProxyEndpoints.Prod],
+      ];
+      updateUserContext({
+        databaseAccount: {
+          kind: "MongoDB",
+          properties: {
+            ipRules: portalBackendOutboundIPs.map((ip: string) => ({ ipAddressOrRange: ip }) as IpRule),
+            publicNetworkAccess: "Enabled",
+          },
+        } as DatabaseAccount,
+      });
+
+      updateConfigContext({
+        PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Mpac,
+        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Mpac,
+      });
+
+      let asyncWarningMessageResult: string;
+      const asyncWarningMessageFunc = (msg: string) => (asyncWarningMessageResult = msg);
+
+      await getNetworkSettingsWarningMessage(asyncWarningMessageFunc);
+      expect(asyncWarningMessageResult).toBeUndefined();
+    });
+
+    it("should return accessMessage when incorrent ip rule is added to mongo/cassandra account per endpoint", async () => {
+      updateUserContext({
+        databaseAccount: {
+          kind: "MongoDB",
+          properties: {
+            ipRules: [{ ipAddressOrRange: "1.1.1.1" }],
+            publicNetworkAccess: "Enabled",
+          },
+        } as DatabaseAccount,
+      });
+
+      updateConfigContext({
+        PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Mpac,
+        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Mpac,
+      });
+
+      let asyncWarningMessageResult: string;
+      const asyncWarningMessageFunc = (msg: string) => (asyncWarningMessageResult = msg);
+
+      await getNetworkSettingsWarningMessage(asyncWarningMessageFunc);
+      expect(asyncWarningMessageResult).toContain(accessMessagePart);
+    });
+
+    // Postgres and vcore mongo account checks basically pass through to CheckFirewallRules so those
+    // tests are omitted here and included in CheckFirewallRules.test.ts
+  });
+});
--- a/src/Utils/NetworkUtility.ts
+++ b/src/Utils/NetworkUtility.ts
@@ -0,0 +1,99 @@
+import { CassandraProxyEndpoints, MongoProxyEndpoints, PortalBackendEndpoints } from "Common/Constants";
+import { configContext } from "ConfigContext";
+import { checkFirewallRules } from "Explorer/Tabs/Shared/CheckFirewallRules";
+import { userContext } from "UserContext";
+import { CassandraProxyOutboundIPs, MongoProxyOutboundIPs, PortalBackendOutboundIPs } from "Utils/EndpointUtils";
+
+export const getNetworkSettingsWarningMessage = async (
+  setStateFunc: (warningMessage: string) => void,
+): Promise<void> => {
+  const accountProperties = userContext.databaseAccount?.properties;
+  const accessMessage =
+    "The Network settings for this account are preventing access from Data Explorer. Please allow access from Azure Portal to proceed.";
+  const publicAccessMessage =
+    "The Network settings for this account are preventing access from Data Explorer. Please enable public access to proceed.";
+
+  if (userContext.apiType === "Postgres") {
+    checkFirewallRules(
+      "2022-11-08",
+      (rule) => rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255",
+      undefined,
+      setStateFunc,
+      accessMessage,
+    );
+    return;
+  } else if (userContext.apiType === "VCoreMongo") {
+    checkFirewallRules(
+      "2023-03-01-preview",
+      (rule) =>
+        rule.name.startsWith("AllowAllAzureServicesAndResourcesWithinAzureIps") ||
+        (rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255"),
+      undefined,
+      setStateFunc,
+      accessMessage,
+    );
+    return;
+  } else if (accountProperties) {
+    // public network access is disabled
+    if (
+      accountProperties.publicNetworkAccess !== "Enabled" &&
+      accountProperties.publicNetworkAccess !== "SecuredByPerimeter"
+    ) {
+      setStateFunc(publicAccessMessage);
+      return;
+    }
+
+    const ipRules = accountProperties.ipRules;
+    // public network access is NOT set to "All networks"
+    if (ipRules?.length > 0) {
+      const isProdOrMpacPortalBackendEndpoint: boolean = [
+        PortalBackendEndpoints.Mpac,
+        PortalBackendEndpoints.Prod,
+      ].includes(configContext.PORTAL_BACKEND_ENDPOINT);
+      const portalBackendOutboundIPs: string[] = isProdOrMpacPortalBackendEndpoint
+        ? [
+            ...PortalBackendOutboundIPs[PortalBackendEndpoints.Mpac],
+            ...PortalBackendOutboundIPs[PortalBackendEndpoints.Prod],
+          ]
+        : PortalBackendOutboundIPs[configContext.PORTAL_BACKEND_ENDPOINT];
+      let portalIPs: string[] = [...portalBackendOutboundIPs];
+
+      if (userContext.apiType === "Mongo") {
+        const isProdOrMpacMongoProxyEndpoint: boolean = [MongoProxyEndpoints.Mpac, MongoProxyEndpoints.Prod].includes(
+          configContext.MONGO_PROXY_ENDPOINT,
+        );
+
+        const mongoProxyOutboundIPs: string[] = isProdOrMpacMongoProxyEndpoint
+          ? [...MongoProxyOutboundIPs[MongoProxyEndpoints.Mpac], ...MongoProxyOutboundIPs[MongoProxyEndpoints.Prod]]
+          : MongoProxyOutboundIPs[configContext.MONGO_PROXY_ENDPOINT];
+
+        portalIPs = [...portalIPs, ...mongoProxyOutboundIPs];
+      } else if (userContext.apiType === "Cassandra") {
+        const isProdOrMpacCassandraProxyEndpoint: boolean = [
+          CassandraProxyEndpoints.Mpac,
+          CassandraProxyEndpoints.Prod,
+        ].includes(configContext.CASSANDRA_PROXY_ENDPOINT);
+
+        const cassandraProxyOutboundIPs: string[] = isProdOrMpacCassandraProxyEndpoint
+          ? [
+              ...CassandraProxyOutboundIPs[CassandraProxyEndpoints.Mpac],
+              ...CassandraProxyOutboundIPs[CassandraProxyEndpoints.Prod],
+            ]
+          : CassandraProxyOutboundIPs[configContext.CASSANDRA_PROXY_ENDPOINT];
+
+        portalIPs = [...portalIPs, ...cassandraProxyOutboundIPs];
+      }
+
+      let numberOfMatches = 0;
+      ipRules.forEach((ipRule) => {
+        if (portalIPs.indexOf(ipRule.ipAddressOrRange) !== -1) {
+          numberOfMatches++;
+        }
+      });
+
+      if (numberOfMatches !== portalIPs.length) {
+        setStateFunc(accessMessage);
+      }
+    }
+  }
+};
--- a/src/hooks/useKnockoutExplorer.ts
+++ b/src/hooks/useKnockoutExplorer.ts
@@ -7,13 +7,9 @@ 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";
 import { logConsoleError } from "Utils/NotificationConsoleUtils";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
@@ -84,11 +80,6 @@ export function useKnockoutExplorer(platform: Platform): Explorer {
          await updateContextForCopilot(explorer);
          await updateContextForSampleData(explorer);
        }
-
-        if (userContext.features.restoreTabs) {
-          restoreOpenTabs();
-        }
-
        setExplorer(explorer);
      }
    };
@@ -141,7 +132,7 @@ async function configureFabric(): Promise<Explorer> {
            await scheduleRefreshDatabaseResourceToken(true);
            resolve(explorer);
            await explorer.refreshAllDatabases();
-            if (userContext.fabricContext.isVisible) {
+            if (userContext.fabricContext.isVisible && !firstContainerOpened) {
              firstContainerOpened = true;
              openFirstContainer(explorer, userContext.fabricContext.databaseConnectionInfo.databaseId);
            }
@@ -438,7 +429,6 @@ function createExplorerFabric(params: { connectionId: string; isVisible: boolean
      },
    },
  });
-  useTabs.getState().closeAllTabs();
  const explorer = new Explorer();
  return explorer;
 }
@@ -741,6 +731,8 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
    }
  }

+  getNetworkSettingsWarningMessage(useTabs.getState().setNetworkSettingsWarning);
+
  if (inputs.features) {
    Object.assign(userContext.features, extractFeatures(new URLSearchParams(inputs.features)));
  }
@@ -824,17 +816,3 @@ 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);
-    }
-  });
-};
--- a/src/hooks/useTabs.ts
+++ b/src/hooks/useTabs.ts
@@ -1,11 +1,5 @@
 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";
@@ -18,6 +12,7 @@ export interface TabsState {
  openedReactTabs: ReactTabKind[];
  activeTab: TabsBase | undefined;
  activeReactTab: ReactTabKind | undefined;
+  networkSettingsWarning: string;
  queryCopilotTabInitialInput: string;
  isTabExecuting: boolean;
  isQueryErrorThrown: boolean;
@@ -32,6 +27,7 @@ export interface TabsState {
  closeAllNotebookTabs: (hardClose: boolean) => void;
  openAndActivateReactTab: (tabKind: ReactTabKind) => void;
  closeReactTab: (tabKind: ReactTabKind) => void;
+  setNetworkSettingsWarning: (warningMessage: string) => void;
  setQueryCopilotTabInitialInput: (input: string) => void;
  setIsTabExecuting: (state: boolean) => void;
  setIsQueryErrorThrown: (state: boolean) => void;
@@ -40,8 +36,6 @@ export interface TabsState {
  selectLeftTab: () => void;
  selectRightTab: () => void;
  closeActiveTab: () => void;
-  closeAllTabs: () => void;
-  persistTabsState: () => void;
 }

 export enum ReactTabKind {
@@ -67,6 +61,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
  openedReactTabs: !isPlatformFabric ? [ReactTabKind.Home] : [],
  activeTab: undefined,
  activeReactTab: !isPlatformFabric ? ReactTabKind.Home : undefined,
+  networkSettingsWarning: "",
  queryCopilotTabInitialInput: "",
  isTabExecuting: false,
  isQueryErrorThrown: false,
@@ -78,9 +73,7 @@ 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.
@@ -137,8 +130,6 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
    }

    set({ openedTabs: updatedTabs });
-
-    get().persistTabsState();
  },
  closeAllNotebookTabs: (hardClose): void => {
    const isNotebook = (tabKind: CollectionTabKind): boolean => {
@@ -187,6 +178,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({

    set({ openedReactTabs: updatedOpenedReactTabs });
  },
+  setNetworkSettingsWarning: (warningMessage: string) => set({ networkSettingsWarning: warningMessage }),
  setQueryCopilotTabInitialInput: (input: string) => set({ queryCopilotTabInitialInput: input }),
  setIsTabExecuting: (state: boolean) => {
    set({ isTabExecuting: state });
@@ -234,18 +226,4 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
      state.closeTab(state.activeTab);
    }
  },
-  closeAllTabs: () => {
-    set({ openedTabs: [], openedReactTabs: [], activeTab: undefined, activeReactTab: undefined });
-  },
-  persistTabsState: () => {
-    const state = get();
-    const openTabsStates = state.openedTabs.map((tab) => tab.getPersistedState());
-
-    saveSubComponentState<OpenTab[]>(
-      AppStateComponentNames.DataExplorerAction,
-      OPEN_TABS_SUBCOMPONENT_NAME,
-      undefined,
-      openTabsStates,
-    );
-  },
 }));
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -243,12 +243,12 @@ module.exports = function (_env = {}, argv = {}) {
      extensions: [".tsx", ".ts", ".js"],
    },
    optimization: {
-      minimize: true,
+      minimize: mode === "production" ? true : false,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            // These options increase our initial bundle size by ~5% but the builds are significantly faster and won't run out of memory
-            // compress: false,
+            compress: false,
            mangle: {
              keep_fnames: true,
              keep_classnames: true,
@@ -256,32 +256,10 @@ module.exports = function (_env = {}, argv = {}) {
          },
        }),
      ],
-      // splitChunks: {
-      //   chunks: "all",
-      //   cacheGroups: {
-      //     fluentIcons: {
-      //       test: /[\\/]node_modules[\\/]@fluentui[\\/](font-icons-mdl2|react-icons)/,
-      //       name: "fluent-icons",
-      //       chunks: "all",
-      //       enforce: true,
-      //     },
-      //   },
-      //   runtimeChunk: false,
-      // },
    },
    watch: false,
    // Hack since it is hard to disable watch entirely with webpack dev server https://github.com/webpack/webpack-dev-server/issues/1251#issuecomment-654240734
    watchOptions: isCI ? { poll: 24 * 60 * 60 * 1000 } : {},
-    stats: {
-      all: true, // Include all stats information
-      errors: true,
-      warnings: true,
-      modules: true,
-      chunks: true,
-      chunkModules: true,
-      assets: true,
-      children: true,
-    },

    /** @type {import("webpack-dev-server").Configuration}*/
    devServer: {