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

* 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

.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"

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;
+    }
   }
 }
 

src/Common/CosmosClient.ts

@@ -8,12 +8,11 @@ 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";
 import { getErrorMessage } from "./ErrorHandlingUtils";
-import { runCommand } from "hooks/useDatabaseAccounts";
 
 const _global = typeof self === "undefined" ? window : self;
 
@@ -33,7 +32,6 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
       return null;
     }
     const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
-    console.log("AAD Token ", userContext.aadToken);
     const authorizationToken = `${AUTH_PREFIX}${userContext.aadToken}`;
     return authorizationToken;
   }
@@ -211,14 +209,10 @@ export function client(): Cosmos.CosmosClient {
     _defaultHeaders["x-ms-cosmos-priority-level"] = PriorityLevel.Default;
   }
 
-  const wrappedTokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
-    return await runCommand(tokenProvider, requestInfo);
-  };
-
   const options: Cosmos.CosmosClientOptions = {
     endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
     key: userContext.dataPlaneRbacEnabled ? "" : userContext.masterKey,
-    tokenProvider: wrappedTokenProvider,
+    tokenProvider,
     userAgentSuffix: "Azure Portal",
     defaultHeaders: _defaultHeaders,
     connectionPolicy: {

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>
-    </>
-  );
-};

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", () => {

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";
@@ -24,7 +26,6 @@ import { Platform, configContext } from "ConfigContext";
 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";
@@ -73,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({
@@ -90,6 +90,12 @@ export const useDocumentsTabStyles = makeStyles({
     alignItems: "center",
     ...cosmosShorthands.borderBottom(),
   },
+  filterInput: {
+    flexGrow: 1,
+  },
+  appliedFilter: {
+    flexGrow: 1,
+  },
   tableContainer: {
     marginRight: tokens.spacingHorizontalXXXL,
   },
@@ -550,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"`),
@@ -575,9 +583,14 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   onIsExecutingChange,
   isTabActive,
 }): JSX.Element => {
+  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
@@ -644,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.
@@ -737,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],
@@ -807,6 +831,10 @@ 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]: () => {
         setFilterContent("");
         refreshDocumentsGrid(true);
@@ -1289,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],
@@ -1330,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);
 
@@ -1471,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();
     }
@@ -1971,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);
@@ -2047,129 +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;
-  };
-
   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={(value) => setFilterContent(value)}
-            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]);
-            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>
+        {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

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>
 `;

src/UserContext.ts

@@ -81,7 +81,6 @@ export interface UserContext {
   readonly endpoint?: string;
   readonly aadToken?: string;
   readonly accessToken?: string;
-  readonly armToken?: string;
   readonly authorizationToken?: string;
   readonly resourceToken?: string;
   readonly subscriptionType?: SubscriptionType;

src/hooks/useAADAuth.ts

@@ -3,7 +3,6 @@ import { useBoolean } from "@fluentui/react-hooks";
 import * as React from "react";
 import { configContext } from "../ConfigContext";
 import { acquireTokenWithMsal, getMsalInstance } from "../Utils/AuthorizationUtils";
-import { updateUserContext } from "UserContext";
 
 const msalInstance = await getMsalInstance();
 
@@ -80,7 +79,7 @@ export function useAADAuth(): ReturnType {
         authority: `${configContext.AAD_ENDPOINT}${tenantId}`,
         scopes: [`${configContext.ARM_ENDPOINT}/.default`],
       });
-      updateUserContext({ armToken: armToken });
+
       setArmToken(armToken);
       setAuthFailure(null);
     } catch (error) {

src/hooks/useDatabaseAccounts.tsx

@@ -1,8 +1,6 @@
 import { HttpHeaders } from "Common/Constants";
 import { QueryRequestOptions, QueryResponse } from "Contracts/AzureResourceGraph";
 import useSWR from "swr";
-import { updateUserContext, userContext } from "UserContext";
-import { acquireTokenWithMsal, getMsalInstance } from "Utils/AuthorizationUtils";
 import { configContext } from "../ConfigContext";
 import { DatabaseAccount } from "../Contracts/DataModels";
 /* eslint-disable  @typescript-eslint/no-explicit-any */
@@ -35,9 +33,12 @@ export async function fetchDatabaseAccounts(subscriptionId: string, accessToken:
   return accounts.sort((a, b) => a.name.localeCompare(b.name));
 }
 
-export async function fetchDatabaseAccountsFromGraph(subscriptionId: string): Promise<DatabaseAccount[]> {
+export async function fetchDatabaseAccountsFromGraph(
+  subscriptionId: string,
+  accessToken: string,
+): Promise<DatabaseAccount[]> {
   const headers = new Headers();
-  const bearer = `Bearer ${userContext.armToken}`;
+  const bearer = `Bearer ${accessToken}`;
 
   headers.append("Authorization", bearer);
   headers.append(HttpHeaders.contentType, "application/json");
@@ -45,9 +46,8 @@ export async function fetchDatabaseAccountsFromGraph(subscriptionId: string): Pr
   const apiVersion = "2021-03-01";
   const managementResourceGraphAPIURL = `${configContext.ARM_ENDPOINT}providers/Microsoft.ResourceGraph/resources?api-version=${apiVersion}`;
 
-  let databaseAccounts: DatabaseAccount[] = [];
+  const databaseAccounts: DatabaseAccount[] = [];
   let skipToken: string;
-  console.log("Old ARM Token - fetchDatabaseAccountsFromGraph function", userContext.armToken);
   do {
     const body = {
       query: databaseAccountsQuery,
@@ -85,81 +85,10 @@ export async function fetchDatabaseAccountsFromGraph(subscriptionId: string): Pr
   return databaseAccounts.sort((a, b) => a.name.localeCompare(b.name));
 }
 
-export function useDatabaseAccounts(subscriptionId: string): DatabaseAccount[] | undefined {
+export function useDatabaseAccounts(subscriptionId: string, armToken: string): DatabaseAccount[] | undefined {
   const { data } = useSWR(
-    () => (subscriptionId ? ["databaseAccounts", subscriptionId] : undefined),
-    (_, subscriptionId) => runCommand(fetchDatabaseAccountsFromGraph, subscriptionId),
+    () => (armToken && subscriptionId ? ["databaseAccounts", subscriptionId, armToken] : undefined),
+    (_, subscriptionId, armToken) => fetchDatabaseAccountsFromGraph(subscriptionId, armToken),
   );
   return data;
 }
-
-// Define the types for your responses
-interface DatabaseAccount {
-  name: string;
-  id: string;
-  // Add other relevant fields as per your use case
-}
-
-interface QueryRequestOptions {
-  $top?: number;
-  $skipToken?: string;
-  $allowPartialScopes?: boolean;
-}
-
-// Define the configuration context and headers if not already defined
-const configContext = {
-  ARM_ENDPOINT: "https://management.azure.com/",
-  AAD_ENDPOINT: "https://login.microsoftonline.com/",
-};
-
-interface QueryResponse {
-  data?: any[];
-  $skipToken?: string;
-}
-
-export async function runCommand<T>(fn: (...args: any[]) => Promise<T>, ...args: any[]): Promise<T> {
-  try {
-    // Attempt to execute the function passed as an argument
-    const result = await fn(...args);
-    console.log("Successfully executed function:", fn.name, result);
-    return result;
-  } catch (error) {
-    // Handle any error that is thrown during the execution of the function
-    if (error) {
-      console.log("Creating new token");
-      const msalInstance = await getMsalInstance();
-
-      const cachedAccount = msalInstance.getAllAccounts()?.[0];
-      const cachedTenantId = localStorage.getItem("cachedTenantId");
-
-      msalInstance.setActiveAccount(cachedAccount);
-
-      // TODO: Add condition to check if the ARM token needs to be renewed, then we need to run the code below for creating the ARM token
-
-      console.log("Creating new ARM token");
-      const newAccessToken = await acquireTokenWithMsal(msalInstance, {
-        authority: `${configContext.AAD_ENDPOINT}${cachedTenantId}`,
-        scopes: [`${configContext.ARM_ENDPOINT}/.default`],
-      });
-      updateUserContext({ armToken: newAccessToken });
-
-      // TODO: add condition to check if AAD token needs to be renewed (i.e) Token provider has failed with expired AAD token and create a new AAD Token using the below code
-
-      // const hrefEndpoint = new URL(userContext.databaseAccount.properties.documentEndpoint).href.replace(/\/$/, "/.default");
-      // console.log('Creating new AAD token');
-      // let aadToken = await acquireTokenWithMsal(msalInstance, {
-      //   forceRefresh: true,
-      //   authority: `${configContext.AAD_ENDPOINT}${cachedTenantId}`,
-      //   scopes: [hrefEndpoint],
-      // });
-      // updateUserContext({aadToken: aadToken});
-
-      //console.log('Latest AAD Token', fn.name, userContext.aadToken);
-      const result = await fn(...args);
-      return result;
-    } else {
-      console.error("An error occurred:", error.message);
-      throw new error();
-    }
-  }
-}

src/hooks/useSubscriptions.tsx

@@ -3,8 +3,6 @@ import { QueryRequestOptions, QueryResponse } from "Contracts/AzureResourceGraph
 import useSWR from "swr";
 import { configContext } from "../ConfigContext";
 import { Subscription } from "../Contracts/DataModels";
-import { runCommand } from "hooks/useDatabaseAccounts";
-import { userContext } from "UserContext";
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 
 interface SubscriptionListResult {
@@ -37,9 +35,9 @@ export async function fetchSubscriptions(accessToken: string): Promise<Subscript
   return subscriptions.sort((a, b) => a.displayName.localeCompare(b.displayName));
 }
 
-export async function fetchSubscriptionsFromGraph(): Promise<Subscription[]> {
+export async function fetchSubscriptionsFromGraph(accessToken: string): Promise<Subscription[]> {
   const headers = new Headers();
-  const bearer = `Bearer ${userContext.armToken}`;
+  const bearer = `Bearer ${accessToken}`;
 
   headers.append("Authorization", bearer);
   headers.append(HttpHeaders.contentType, "application/json");
@@ -50,7 +48,6 @@ export async function fetchSubscriptionsFromGraph(): Promise<Subscription[]> {
 
   const subscriptions: Subscription[] = [];
   let skipToken: string;
-  console.log("Old ARM Token fetchSubscriptionsFromGraph fn", userContext.armToken);
   do {
     const body = {
       query: subscriptionsQuery,
@@ -89,14 +86,9 @@ export async function fetchSubscriptionsFromGraph(): Promise<Subscription[]> {
 }
 
 export function useSubscriptions(armToken: string): Subscription[] | undefined {
-  const { data, error } = useSWR(
+  const { data } = useSWR(
     () => (armToken ? ["subscriptions", armToken] : undefined),
-    (_) => runCommand(fetchSubscriptionsFromGraph),
+    (_, armToken) => fetchSubscriptionsFromGraph(armToken),
   );
-
-  if (error) {
-    console.error("Error fetching subscriptions:", error);
-  }
-
   return data;
 }