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
2026-01-08 20:17:03 +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
24 changed files with 507 additions and 1025 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/
@@ -117,14 +117,14 @@ jobs:
        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"
@@ -141,7 +141,7 @@ jobs:
        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"
--- 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/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/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx
@@ -14,7 +14,6 @@ import * as ViewModels from "../../../../Contracts/ViewModels";

 import { handleError } from "Common/ErrorHandlingUtils";
 import { cancelDataTransferJob, pollDataTransferJob } from "Common/dataAccess/dataTransfers";
-import { Platform, configContext } from "ConfigContext";
 import Explorer from "Explorer/Explorer";
 import { ChangePartitionKeyPane } from "Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane";
 import {
@@ -149,71 +148,69 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
  };

  return (
-    configContext.platform !== Platform.Emulator && (
-      <Stack tokens={{ childrenGap: 20 }} styles={{ root: { maxWidth: 600 } }}>
-        <Stack tokens={{ childrenGap: 10 }}>
-          <Text styles={textHeadingStyle}>Change {partitionKeyName.toLowerCase()}</Text>
-          <Stack horizontal tokens={{ childrenGap: 20 }}>
-            <Stack tokens={{ childrenGap: 5 }}>
-              <Text styles={textSubHeadingStyle}>Current {partitionKeyName.toLowerCase()}</Text>
-              <Text styles={textSubHeadingStyle}>Partitioning</Text>
-            </Stack>
-            <Stack tokens={{ childrenGap: 5 }}>
-              <Text>{partitionKeyValue}</Text>
-              <Text>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
-            </Stack>
+    <Stack tokens={{ childrenGap: 20 }} styles={{ root: { maxWidth: 600 } }}>
+      <Stack tokens={{ childrenGap: 10 }}>
+        <Text styles={textHeadingStyle}>Change {partitionKeyName.toLowerCase()}</Text>
+        <Stack horizontal tokens={{ childrenGap: 20 }}>
+          <Stack tokens={{ childrenGap: 5 }}>
+            <Text styles={textSubHeadingStyle}>Current {partitionKeyName.toLowerCase()}</Text>
+            <Text styles={textSubHeadingStyle}>Partitioning</Text>
+          </Stack>
+          <Stack tokens={{ childrenGap: 5 }}>
+            <Text>{partitionKeyValue}</Text>
+            <Text>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
          </Stack>
        </Stack>
-        <MessageBar messageBarType={MessageBarType.warning}>
-          To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to
-          the source container for the entire duration of the partition key change process.
-          <Link
-            href="https://learn.microsoft.com/azure/cosmos-db/container-copy#how-does-container-copy-work"
-            target="_blank"
-            underline
+      </Stack>
+      <MessageBar messageBarType={MessageBarType.warning}>
+        To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to the
+        source container for the entire duration of the partition key change process.
+        <Link
+          href="https://learn.microsoft.com/azure/cosmos-db/container-copy#how-does-container-copy-work"
+          target="_blank"
+          underline
+        >
+          Learn more
+        </Link>
+      </MessageBar>
+      <Text>
+        To change the partition key, a new destination container must be created or an existing destination container
+        selected. Data will then be copied to the destination container.
+      </Text>
+      <PrimaryButton
+        styles={{ root: { width: "fit-content" } }}
+        text="Change"
+        onClick={startPartitionkeyChangeWorkflow}
+        disabled={isCurrentJobInProgress(portalDataTransferJob)}
+      />
+      {portalDataTransferJob && (
+        <Stack>
+          <Text styles={textHeadingStyle}>{partitionKeyName} change job</Text>
+          <Stack
+            horizontal
+            tokens={{ childrenGap: 20 }}
+            styles={{
+              root: {
+                alignItems: "center",
+              },
+            }}
          >
-            Learn more
-          </Link>
-        </MessageBar>
-        <Text>
-          To change the partition key, a new destination container must be created or an existing destination container
-          selected. Data will then be copied to the destination container.
-        </Text>
-        <PrimaryButton
-          styles={{ root: { width: "fit-content" } }}
-          text="Change"
-          onClick={startPartitionkeyChangeWorkflow}
-          disabled={isCurrentJobInProgress(portalDataTransferJob)}
-        />
-        {portalDataTransferJob && (
-          <Stack>
-            <Text styles={textHeadingStyle}>{partitionKeyName} change job</Text>
-            <Stack
-              horizontal
-              tokens={{ childrenGap: 20 }}
+            <ProgressIndicator
+              label={portalDataTransferJob?.properties?.jobName}
+              description={getProgressDescription()}
+              percentComplete={getPercentageComplete()}
              styles={{
                root: {
-                  alignItems: "center",
+                  width: "85%",
                },
              }}
-            >
-              <ProgressIndicator
-                label={portalDataTransferJob?.properties?.jobName}
-                description={getProgressDescription()}
-                percentComplete={getPercentageComplete()}
-                styles={{
-                  root: {
-                    width: "85%",
-                  },
-                }}
-              ></ProgressIndicator>
-              {isCurrentJobInProgress(portalDataTransferJob) && (
-                <DefaultButton text="Cancel" onClick={() => cancelRunningDataTransferJob(portalDataTransferJob)} />
-              )}
-            </Stack>
+            ></ProgressIndicator>
+            {isCurrentJobInProgress(portalDataTransferJob) && (
+              <DefaultButton text="Cancel" onClick={() => cancelRunningDataTransferJob(portalDataTransferJob)} />
+            )}
          </Stack>
-        )}
-      </Stack>
-    )
+        </Stack>
+      )}
+    </Stack>
  );
 };
--- 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/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/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/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/hooks/useKnockoutExplorer.ts
+++ b/src/hooks/useKnockoutExplorer.ts
@@ -7,11 +7,6 @@ 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";
@@ -85,11 +80,6 @@ export function useKnockoutExplorer(platform: Platform): Explorer {
          await updateContextForCopilot(explorer);
          await updateContextForSampleData(explorer);
        }
-
-        if (userContext.features.restoreTabs) {
-          restoreOpenTabs();
-        }
-
        setExplorer(explorer);
      }
    };
@@ -826,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";
@@ -42,7 +36,6 @@ export interface TabsState {
  selectLeftTab: () => void;
  selectRightTab: () => void;
  closeActiveTab: () => void;
-  persistTabsState: () => void;
 }

 export enum ReactTabKind {
@@ -80,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.
@@ -139,8 +130,6 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
    }

    set({ openedTabs: updatedTabs });
-
-    get().persistTabsState();
  },
  closeAllNotebookTabs: (hardClose): void => {
    const isNotebook = (tabKind: CollectionTabKind): boolean => {
@@ -237,15 +226,4 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
      state.closeTab(state.activeTab);
    }
  },
-  persistTabsState: () => {
-    const state = get();
-    const openTabsStates = state.openedTabs.map((tab) => tab.getPersistedState());
-
-    saveSubComponentState<OpenTab[]>(
-      AppStateComponentNames.DataExplorerAction,
-      OPEN_TABS_SUBCOMPONENT_NAME,
-      undefined,
-      openTabsStates,
-    );
-  },
 }));