Initial plan

src/Common/SearchableDropdown.styles.ts

@@ -1,72 +0,0 @@
-import { IButtonStyles, IStackStyles, ITextStyles } from "@fluentui/react";
-import * as React from "react";
-
-export const getDropdownButtonStyles = (disabled: boolean): IButtonStyles => ({
-  root: {
-    width: "100%",
-    height: "32px",
-    padding: "0 28px 0 8px",
-    border: "1px solid #8a8886",
-    background: "#fff",
-    color: "#323130",
-    textAlign: "left",
-    cursor: disabled ? "not-allowed" : "pointer",
-    position: "relative",
-  },
-  flexContainer: {
-    justifyContent: "flex-start",
-  },
-  label: {
-    fontWeight: "normal",
-    fontSize: "14px",
-    textAlign: "left",
-  },
-});
-
-export const buttonLabelStyles: ITextStyles = {
-  root: {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    display: "block",
-    textAlign: "left",
-  },
-};
-
-export const chevronStyles: React.CSSProperties = {
-  position: "absolute",
-  right: "8px",
-  top: "50%",
-  transform: "translateY(-50%)",
-  pointerEvents: "none",
-};
-
-export const calloutContentStyles: IStackStyles = {
-  root: {
-    display: "flex",
-    flexDirection: "column",
-  },
-};
-
-export const listContainerStyles: IStackStyles = {
-  root: {
-    maxHeight: "300px",
-    overflowY: "auto",
-  },
-};
-
-export const getItemStyles = (isSelected: boolean): React.CSSProperties => ({
-  padding: "8px 12px",
-  cursor: "pointer",
-  fontSize: "14px",
-  backgroundColor: isSelected ? "#e6e6e6" : "transparent",
-  textAlign: "left",
-});
-
-export const emptyMessageStyles: ITextStyles = {
-  root: {
-    padding: "8px 12px",
-    color: "#605e5c",
-    textAlign: "left",
-  },
-};

src/Common/SearchableDropdown.test.tsx

@@ -1,200 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import React from "react";
-import { SearchableDropdown } from "./SearchableDropdown";
-
-interface TestItem {
-  id: string;
-  name: string;
-}
-
-describe("SearchableDropdown", () => {
-  const mockItems: TestItem[] = [
-    { id: "1", name: "Item One" },
-    { id: "2", name: "Item Two" },
-    { id: "3", name: "Item Three" },
-  ];
-
-  const defaultProps = {
-    label: "Test Label",
-    items: mockItems,
-    selectedItem: null as TestItem | null,
-    onSelect: jest.fn(),
-    getKey: (item: TestItem) => item.id,
-    getDisplayText: (item: TestItem) => item.name,
-    placeholder: "Select an item",
-    filterPlaceholder: "Filter items",
-    className: "test-dropdown",
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("should render with label and placeholder", () => {
-    render(<SearchableDropdown {...defaultProps} />);
-    expect(screen.getByText("Test Label")).toBeInTheDocument();
-    expect(screen.getByText("Select an item")).toBeInTheDocument();
-  });
-
-  it("should display selected item", () => {
-    const propsWithSelection = {
-      ...defaultProps,
-      selectedItem: mockItems[0],
-    };
-    render(<SearchableDropdown {...propsWithSelection} />);
-    expect(screen.getByText("Item One")).toBeInTheDocument();
-  });
-
-  it("should show 'No items found' when items array is empty", () => {
-    const propsWithEmptyItems = {
-      ...defaultProps,
-      items: [] as TestItem[],
-    };
-    render(<SearchableDropdown {...propsWithEmptyItems} />);
-    expect(screen.getByText("No Test Labels Found")).toBeInTheDocument();
-  });
-
-  it("should open dropdown when button is clicked", () => {
-    render(<SearchableDropdown {...defaultProps} />);
-    const button = screen.getByText("Select an item");
-    fireEvent.click(button);
-    expect(screen.getByPlaceholderText("Filter items")).toBeInTheDocument();
-  });
-
-  it("should filter items based on search text", () => {
-    render(<SearchableDropdown {...defaultProps} />);
-    const button = screen.getByText("Select an item");
-    fireEvent.click(button);
-
-    const searchBox = screen.getByPlaceholderText("Filter items");
-    fireEvent.change(searchBox, { target: { value: "Two" } });
-
-    expect(screen.getByText("Item Two")).toBeInTheDocument();
-    expect(screen.queryByText("Item One")).not.toBeInTheDocument();
-    expect(screen.queryByText("Item Three")).not.toBeInTheDocument();
-  });
-
-  it("should call onSelect when an item is clicked", () => {
-    const onSelectMock = jest.fn();
-    const propsWithMock = {
-      ...defaultProps,
-      onSelect: onSelectMock,
-    };
-    render(<SearchableDropdown {...propsWithMock} />);
-
-    const button = screen.getByText("Select an item");
-    fireEvent.click(button);
-
-    const item = screen.getByText("Item Two");
-    fireEvent.click(item);
-
-    expect(onSelectMock).toHaveBeenCalledWith(mockItems[1]);
-  });
-
-  it("should close dropdown after selecting an item", () => {
-    render(<SearchableDropdown {...defaultProps} />);
-
-    const button = screen.getByText("Select an item");
-    fireEvent.click(button);
-
-    expect(screen.getByPlaceholderText("Filter items")).toBeInTheDocument();
-
-    const item = screen.getByText("Item One");
-    fireEvent.click(item);
-
-    expect(screen.queryByPlaceholderText("Filter items")).not.toBeInTheDocument();
-  });
-
-  it("should disable button when disabled prop is true", () => {
-    const propsWithDisabled = {
-      ...defaultProps,
-      disabled: true,
-    };
-    render(<SearchableDropdown {...propsWithDisabled} />);
-
-    const button = screen.getByRole("button");
-    expect(button).toBeDisabled();
-  });
-
-  it("should not open dropdown when disabled", () => {
-    const propsWithDisabled = {
-      ...defaultProps,
-      disabled: true,
-    };
-    render(<SearchableDropdown {...propsWithDisabled} />);
-
-    const button = screen.getByRole("button");
-    fireEvent.click(button);
-
-    expect(screen.queryByPlaceholderText("Filter items")).not.toBeInTheDocument();
-  });
-
-  it("should show 'No items found' when search yields no results", () => {
-    render(<SearchableDropdown {...defaultProps} />);
-
-    const button = screen.getByText("Select an item");
-    fireEvent.click(button);
-
-    const searchBox = screen.getByPlaceholderText("Filter items");
-    fireEvent.change(searchBox, { target: { value: "Nonexistent" } });
-
-    expect(screen.getByText("No items found")).toBeInTheDocument();
-  });
-
-  it("should handle case-insensitive filtering", () => {
-    render(<SearchableDropdown {...defaultProps} />);
-
-    const button = screen.getByText("Select an item");
-    fireEvent.click(button);
-
-    const searchBox = screen.getByPlaceholderText("Filter items");
-    fireEvent.change(searchBox, { target: { value: "two" } });
-
-    expect(screen.getByText("Item Two")).toBeInTheDocument();
-    expect(screen.queryByText("Item One")).not.toBeInTheDocument();
-  });
-
-  it("should clear filter text when dropdown is closed and reopened", () => {
-    render(<SearchableDropdown {...defaultProps} />);
-
-    const button = screen.getByText("Select an item");
-    fireEvent.click(button);
-
-    const searchBox = screen.getByPlaceholderText("Filter items");
-    fireEvent.change(searchBox, { target: { value: "Two" } });
-
-    // Close dropdown by selecting an item
-    const item = screen.getByText("Item Two");
-    fireEvent.click(item);
-
-    // Reopen dropdown
-    fireEvent.click(button);
-
-    // Filter text should be cleared
-    const reopenedSearchBox = screen.getByPlaceholderText("Filter items");
-    expect(reopenedSearchBox).toHaveValue("");
-  });
-
-  it("should use custom placeholder text", () => {
-    const propsWithCustomPlaceholder = {
-      ...defaultProps,
-      placeholder: "Choose an option",
-    };
-    render(<SearchableDropdown {...propsWithCustomPlaceholder} />);
-    expect(screen.getByText("Choose an option")).toBeInTheDocument();
-  });
-
-  it("should use custom filter placeholder text", () => {
-    const propsWithCustomFilterPlaceholder = {
-      ...defaultProps,
-      filterPlaceholder: "Search here",
-    };
-    render(<SearchableDropdown {...propsWithCustomFilterPlaceholder} />);
-
-    const button = screen.getByText("Select an item");
-    fireEvent.click(button);
-
-    expect(screen.getByPlaceholderText("Search here")).toBeInTheDocument();
-  });
-});

src/Common/SearchableDropdown.tsx

@@ -1,155 +0,0 @@
-import {
-  Callout,
-  DefaultButton,
-  DirectionalHint,
-  ISearchBoxStyles,
-  Label,
-  SearchBox,
-  Stack,
-  Text,
-} from "@fluentui/react";
-import * as React from "react";
-import { useCallback, useMemo, useRef, useState } from "react";
-import {
-  buttonLabelStyles,
-  calloutContentStyles,
-  chevronStyles,
-  emptyMessageStyles,
-  getDropdownButtonStyles,
-  getItemStyles,
-  listContainerStyles,
-} from "./SearchableDropdown.styles";
-
-interface SearchableDropdownProps<T> {
-  label: string;
-  items: T[];
-  selectedItem: T | null;
-  onSelect: (item: T) => void;
-  getKey: (item: T) => string;
-  getDisplayText: (item: T) => string;
-  placeholder?: string;
-  filterPlaceholder?: string;
-  className?: string;
-  disabled?: boolean;
-  onDismiss?: () => void;
-  searchBoxStyles?: Partial<ISearchBoxStyles>;
-}
-
-export const SearchableDropdown = <T,>({
-  label,
-  items,
-  selectedItem,
-  onSelect,
-  getKey,
-  getDisplayText,
-  placeholder = "Select an item",
-  filterPlaceholder = "Filter items",
-  className,
-  disabled = false,
-  onDismiss,
-  searchBoxStyles: customSearchBoxStyles,
-}: SearchableDropdownProps<T>): React.ReactElement => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [filterText, setFilterText] = useState("");
-  const buttonRef = useRef<HTMLDivElement>(null);
-
-  const closeDropdown = useCallback(() => {
-    setIsOpen(false);
-    setFilterText("");
-  }, []);
-
-  const filteredItems = useMemo(
-    () => items?.filter((item) => getDisplayText(item).toLowerCase().includes(filterText.toLowerCase())),
-    [items, filterText, getDisplayText],
-  );
-
-  const handleDismiss = useCallback(() => {
-    closeDropdown();
-    onDismiss?.();
-  }, [closeDropdown, onDismiss]);
-
-  const handleButtonClick = useCallback(() => {
-    if (disabled) {
-      return;
-    }
-
-    setIsOpen(!isOpen);
-  }, [isOpen, disabled]);
-
-  const handleSelect = useCallback(
-    (item: T) => {
-      onSelect(item);
-      closeDropdown();
-    },
-    [onSelect, closeDropdown],
-  );
-
-  const buttonLabel = selectedItem
-    ? getDisplayText(selectedItem)
-    : items?.length === 0
-    ? `No ${label}s Found`
-    : placeholder;
-
-  const buttonId = `${className}-button`;
-  const buttonStyles = getDropdownButtonStyles(disabled);
-
-  return (
-    <Stack>
-      <Label htmlFor={buttonId}>{label}</Label>
-      <div ref={buttonRef}>
-        <DefaultButton
-          id={buttonId}
-          className={className}
-          onClick={handleButtonClick}
-          styles={buttonStyles}
-          disabled={disabled}
-        >
-          <Text styles={buttonLabelStyles}>{buttonLabel}</Text>
-          <span style={chevronStyles}>▼</span>
-        </DefaultButton>
-      </div>
-      {isOpen && (
-        <Callout
-          target={buttonRef.current}
-          onDismiss={handleDismiss}
-          directionalHint={DirectionalHint.bottomLeftEdge}
-          isBeakVisible={false}
-          gapSpace={0}
-          setInitialFocus
-        >
-          <Stack styles={calloutContentStyles} style={{ width: buttonRef.current?.offsetWidth || 300 }}>
-            <SearchBox
-              placeholder={filterPlaceholder}
-              value={filterText}
-              onChange={(_, newValue) => setFilterText(newValue || "")}
-              styles={customSearchBoxStyles}
-            />
-            <Stack styles={listContainerStyles}>
-              {filteredItems && filteredItems.length > 0 ? (
-                filteredItems.map((item) => {
-                  const key = getKey(item);
-                  const isSelected = selectedItem ? getKey(selectedItem) === key : false;
-                  return (
-                    <div
-                      key={key}
-                      onClick={() => handleSelect(item)}
-                      style={getItemStyles(isSelected)}
-                      onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "#f3f2f1")}
-                      onMouseLeave={(e) =>
-                        (e.currentTarget.style.backgroundColor = isSelected ? "#e6e6e6" : "transparent")
-                      }
-                    >
-                      <Text>{getDisplayText(item)}</Text>
-                    </div>
-                  );
-                })
-              ) : (
-                <Text styles={emptyMessageStyles}>No items found</Text>
-              )}
-            </Stack>
-          </Stack>
-        </Callout>
-      )}
-    </Stack>
-  );
-};

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -16,7 +16,7 @@ import {
 import { useIndexingPolicyStore } from "Explorer/Tabs/QueryTab/ResultsView";
 import { useDatabases } from "Explorer/useDatabases";
 import { isFabricNative } from "Platform/Fabric/FabricUtil";
-import { isCapabilityEnabled, isVectorSearchEnabled } from "Utils/CapabilityUtils";
+import { isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { isRunningOnPublicCloud } from "Utils/CloudUtils";
 import * as React from "react";
 import DiscardIcon from "../../../../images/discard.svg";
@@ -70,6 +70,7 @@ import {
   getMongoNotification,
   getTabTitle,
   hasDatabaseSharedThroughput,
+  isDataMaskingEnabled,
   isDirty,
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
@@ -1073,8 +1074,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
       newCollection.fullTextPolicy = this.state.fullTextPolicy;
 
-      // Only send data masking policy if it was modified (dirty)
-      if (this.state.isDataMaskingDirty && isCapabilityEnabled(Constants.CapabilityNames.EnableDynamicDataMasking)) {
+      // Only send data masking policy if it was modified (dirty) and data masking is enabled
+      if (this.state.isDataMaskingDirty && isDataMaskingEnabled(this.collection.dataMaskingPolicy?.())) {
         newCollection.dataMaskingPolicy = this.state.dataMaskingContent;
       }
 
@@ -1463,15 +1464,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       });
     }
 
-    // Check if DDM should be enabled
-    const shouldEnableDDM = (): boolean => {
-      const hasDataMaskingCapability = isCapabilityEnabled(Constants.CapabilityNames.EnableDynamicDataMasking);
-      const isSqlAccount = userContext.apiType === "SQL";
-
-      return isSqlAccount && hasDataMaskingCapability; // Only show for SQL accounts with DDM capability
-    };
-
-    if (shouldEnableDDM()) {
+    if (isDataMaskingEnabled(this.collection.dataMaskingPolicy?.())) {
       const dataMaskingComponentProps: DataMaskingComponentProps = {
         shouldDiscardDataMasking: this.state.shouldDiscardDataMasking,
         resetShouldDiscardDataMasking: this.resetShouldDiscardDataMasking,

src/Explorer/Controls/Settings/SettingsSubComponents/DataMaskingComponent.tsx

@@ -1,12 +1,10 @@
 import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
 import * as monaco from "monaco-editor";
 import * as React from "react";
-import * as Constants from "../../../../Common/Constants";
 import * as DataModels from "../../../../Contracts/DataModels";
-import { isCapabilityEnabled } from "../../../../Utils/CapabilityUtils";
 import { loadMonaco } from "../../../LazyMonaco";
 import { titleAndInputStackProps, unsavedEditorWarningMessage } from "../SettingsRenderUtils";
-import { isDirty as isContentDirty } from "../SettingsUtils";
+import { isDataMaskingEnabled, isDirty as isContentDirty } from "../SettingsUtils";
 
 export interface DataMaskingComponentProps {
   shouldDiscardDataMasking: boolean;
@@ -140,7 +138,7 @@ export class DataMaskingComponent extends React.Component<DataMaskingComponentPr
   };
 
   public render(): JSX.Element {
-    if (!isCapabilityEnabled(Constants.CapabilityNames.EnableDynamicDataMasking)) {
+    if (!isDataMaskingEnabled(this.props.dataMaskingContent)) {
       return null;
     }
 

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -2,6 +2,8 @@ import * as Constants from "../../../Common/Constants";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { isFabricNative } from "../../../Platform/Fabric/FabricUtil";
+import { userContext } from "../../../UserContext";
+import { isCapabilityEnabled } from "../../../Utils/CapabilityUtils";
 import { MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 
 const zeroValue = 0;
@@ -88,6 +90,19 @@ export const hasDatabaseSharedThroughput = (collection: ViewModels.Collection):
   return database?.isDatabaseShared() && !collection.offer();
 };
 
+export const isDataMaskingEnabled = (dataMaskingPolicy?: DataModels.DataMaskingPolicy): boolean => {
+  const isSqlAccount = userContext.apiType === "SQL";
+  if (!isSqlAccount) {
+    return false;
+  }
+
+  const hasDataMaskingCapability = isCapabilityEnabled(Constants.CapabilityNames.EnableDynamicDataMasking);
+  const hasDataMaskingPolicyFromCollection =
+    dataMaskingPolicy?.includedPaths?.length > 0 || dataMaskingPolicy?.excludedPaths?.length > 0;
+
+  return hasDataMaskingCapability || hasDataMaskingPolicyFromCollection;
+};
+
 export const parseConflictResolutionMode = (modeFromBackend: string): DataModels.ConflictResolutionMode => {
   // Backend can contain different casing as it does case-insensitive comparisson
   if (!modeFromBackend) {

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -604,6 +604,60 @@ exports[`SettingsComponent renders 1`] = `
           />
         </Stack>
       </PivotItem>
+      <PivotItem
+        headerButtonProps={
+          {
+            "data-test": "settings-tab-header/DataMaskingTab",
+          }
+        }
+        headerText="Masking Policy (preview)"
+        itemKey="DataMaskingTab"
+        key="DataMaskingTab"
+        style={
+          {
+            "backgroundColor": "var(--colorNeutralBackground1)",
+            "color": "var(--colorNeutralForeground1)",
+            "marginTop": 20,
+          }
+        }
+      >
+        <Stack
+          styles={
+            {
+              "root": {
+                "backgroundColor": "var(--colorNeutralBackground1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+            }
+          }
+        >
+          <DataMaskingComponent
+            dataMaskingContent={
+              {
+                "excludedPaths": [
+                  "/excludedPath",
+                ],
+                "includedPaths": [],
+                "isPolicyEnabled": true,
+              }
+            }
+            dataMaskingContentBaseline={
+              {
+                "excludedPaths": [
+                  "/excludedPath",
+                ],
+                "includedPaths": [],
+                "isPolicyEnabled": true,
+              }
+            }
+            onDataMaskingContentChange={[Function]}
+            onDataMaskingDirtyChange={[Function]}
+            resetShouldDiscardDataMasking={[Function]}
+            shouldDiscardDataMasking={false}
+            validationErrors={[]}
+          />
+        </Stack>
+      </PivotItem>
       <PivotItem
         headerButtonProps={
           {

src/Platform/Hosted/Components/SwitchAccount.tsx

@@ -1,6 +1,6 @@
+import { Dropdown } from "@fluentui/react";
 import * as React from "react";
 import { FunctionComponent } from "react";
-import { SearchableDropdown } from "../../../Common/SearchableDropdown";
 import { DatabaseAccount } from "../../../Contracts/DataModels";
 
 interface Props {
@@ -17,18 +17,23 @@ export const SwitchAccount: FunctionComponent<Props> = ({
   dismissMenu,
 }: Props) => {
   return (
-    <SearchableDropdown<DatabaseAccount>
+    <Dropdown
       label="Cosmos DB Account Name"
-      items={accounts}
-      selectedItem={selectedAccount}
-      onSelect={(account) => setSelectedAccountName(account.name)}
-      getKey={(account) => account.name}
-      getDisplayText={(account) => account.name}
-      placeholder="Select an Account"
-      filterPlaceholder="Filter accounts"
       className="accountSwitchAccountDropdown"
-      disabled={!accounts || accounts.length === 0}
-      onDismiss={dismissMenu}
+      options={accounts?.map((account) => ({
+        key: account.name,
+        text: account.name,
+        data: account,
+      }))}
+      onChange={(_, option) => {
+        setSelectedAccountName(String(option?.key));
+        dismissMenu();
+      }}
+      defaultSelectedKey={selectedAccount?.name}
+      placeholder={accounts && accounts.length === 0 ? "No Accounts Found" : "Select an Account"}
+      styles={{
+        callout: "accountSwitchAccountDropdownMenu",
+      }}
     />
   );
 };

src/Platform/Hosted/Components/SwitchSubscription.tsx

@@ -1,6 +1,6 @@
+import { Dropdown } from "@fluentui/react";
 import * as React from "react";
 import { FunctionComponent } from "react";
-import { SearchableDropdown } from "../../../Common/SearchableDropdown";
 import { Subscription } from "../../../Contracts/DataModels";
 
 interface Props {
@@ -15,16 +15,24 @@ export const SwitchSubscription: FunctionComponent<Props> = ({
   selectedSubscription,
 }: Props) => {
   return (
-    <SearchableDropdown<Subscription>
+    <Dropdown
       label="Subscription"
-      items={subscriptions}
-      selectedItem={selectedSubscription}
-      onSelect={(sub) => setSelectedSubscriptionId(sub.subscriptionId)}
-      getKey={(sub) => sub.subscriptionId}
-      getDisplayText={(sub) => sub.displayName}
-      placeholder="Select a Subscription"
-      filterPlaceholder="Filter subscriptions"
       className="accountSwitchSubscriptionDropdown"
+      options={subscriptions?.map((sub) => {
+        return {
+          key: sub.subscriptionId,
+          text: sub.displayName,
+          data: sub,
+        };
+      })}
+      onChange={(_, option) => {
+        setSelectedSubscriptionId(String(option?.key));
+      }}
+      defaultSelectedKey={selectedSubscription?.subscriptionId}
+      placeholder={subscriptions && subscriptions.length === 0 ? "No Subscriptions Found" : "Select a Subscription"}
+      styles={{
+        callout: "accountSwitchSubscriptionDropdownMenu",
+      }}
     />
   );
 };