Merge branch 'master' into users/nishthaahuja/searchableDropdown

* Add Playwright E2E tests for Dynamic Data Masking feature (#2348)

* Initial plan

* Add DDM Playwright test with comprehensive test cases

Co-authored-by: sakshigupta12feb <206070758+sakshigupta12feb@users.noreply.github.com>

* Remove disable DDM test - DDM cannot be disabled once enabled

Co-authored-by: sakshigupta12feb <206070758+sakshigupta12feb@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sakshigupta12feb <206070758+sakshigupta12feb@users.noreply.github.com>

* Fix format and lint errors in DDM Playwright tests (#2350)

* Initial plan

* Fix format and lint errors in dataMasking.spec.ts

Co-authored-by: sakshigupta12feb <206070758+sakshigupta12feb@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sakshigupta12feb <206070758+sakshigupta12feb@users.noreply.github.com>

* playwright testfor DDM

* fixed errors

* fixed playwright based on isPolicyEnabled(removal)

---------

Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sakshigupta12feb <206070758+sakshigupta12feb@users.noreply.github.com>
Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>

src/Common/ErrorHandlingUtils.ts

@@ -1,7 +1,5 @@
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { SubscriptionType } from "../Contracts/SubscriptionType";
-import { isExpectedError } from "../Metrics/ErrorClassification";
-import { scenarioMonitor } from "../Metrics/ScenarioMonitor";
 import { userContext } from "../UserContext";
 import { ARMError } from "../Utils/arm/request";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
@@ -33,12 +31,6 @@ export const handleError = (
 
   // checks for errors caused by firewall and sends them to portal to handle
   sendNotificationForError(errorMessage, errorCode);
-
-  // Mark expected failures for health metrics (auth, firewall, permissions, etc.)
-  // This ensures timeouts with expected failures emit healthy instead of unhealthy
-  if (isExpectedError(error)) {
-    scenarioMonitor.markExpectedFailure();
-  }
 };
 
 export const getErrorMessage = (error: string | Error = ""): string => {

src/Common/SearchableDropdown.styles.ts

@@ -0,0 +1,78 @@
+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 buttonWrapperStyles: React.CSSProperties = {
+  position: "relative",
+  width: "100%",
+};
+
+export const chevronStyles: React.CSSProperties = {
+  position: "absolute",
+  right: "8px",
+  top: "50%",
+  transform: "translateY(-50%)",
+  pointerEvents: "none",
+  fontSize: "12px",
+};
+
+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

@@ -0,0 +1,200 @@
+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

@@ -0,0 +1,158 @@
+import {
+  Callout,
+  DefaultButton,
+  DirectionalHint,
+  Icon,
+  ISearchBoxStyles,
+  Label,
+  SearchBox,
+  Stack,
+  Text,
+} from "@fluentui/react";
+import * as React from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  buttonLabelStyles,
+  buttonWrapperStyles,
+  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} style={buttonWrapperStyles}>
+        <DefaultButton
+          id={buttonId}
+          className={className}
+          onClick={handleButtonClick}
+          styles={buttonStyles}
+          disabled={disabled}
+        >
+          <Text styles={buttonLabelStyles}>{buttonLabel}</Text>
+        </DefaultButton>
+        <Icon iconName="ChevronDown" style={chevronStyles} />
+      </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}
+              showIcon={true}
+            />
+            <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/Contracts/DataModels.ts

@@ -275,8 +275,7 @@ export interface DataMaskingPolicy {
     startPosition: number;
     length: number;
   }>;
-  excludedPaths: string[];
-  isPolicyEnabled: boolean;
+  excludedPaths?: string[];
 }
 
 export interface MaterializedView {

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

@@ -30,7 +30,6 @@ jest.mock("../../../Common/dataAccess/updateCollection", () => ({
     dataMaskingPolicy: {
       includedPaths: [],
       excludedPaths: ["/excludedPath"],
-      isPolicyEnabled: true,
     },
     indexes: [],
   }),
@@ -307,12 +306,10 @@ describe("SettingsComponent", () => {
       dataMaskingContent: {
         includedPaths: [],
         excludedPaths: ["/excludedPath"],
-        isPolicyEnabled: true,
       },
       dataMaskingContentBaseline: {
         includedPaths: [],
         excludedPaths: [],
-        isPolicyEnabled: false,
       },
       isDataMaskingDirty: true,
     });
@@ -326,7 +323,6 @@ describe("SettingsComponent", () => {
     expect(wrapper.state("dataMaskingContentBaseline")).toEqual({
       includedPaths: [],
       excludedPaths: ["/excludedPath"],
-      isPolicyEnabled: true,
     });
   });
 
@@ -340,7 +336,6 @@ describe("SettingsComponent", () => {
     const invalidPolicy: InvalidPolicy = {
       includedPaths: "invalid",
       excludedPaths: [],
-      isPolicyEnabled: false,
     };
     // Use type assertion since we're deliberately testing with invalid data
     settingsComponentInstance["onDataMaskingContentChange"](invalidPolicy as unknown as DataModels.DataMaskingPolicy);
@@ -349,7 +344,6 @@ describe("SettingsComponent", () => {
     expect(wrapper.state("dataMaskingContent")).toEqual({
       includedPaths: "invalid",
       excludedPaths: [],
-      isPolicyEnabled: false,
     });
     expect(wrapper.state("dataMaskingValidationErrors")).toEqual(["includedPaths must be an array"]);
 
@@ -364,7 +358,6 @@ describe("SettingsComponent", () => {
         },
       ],
       excludedPaths: ["/excludedPath"],
-      isPolicyEnabled: true,
     };
 
     settingsComponentInstance["onDataMaskingContentChange"](validPolicy);
@@ -388,7 +381,6 @@ describe("SettingsComponent", () => {
         },
       ],
       excludedPaths: ["/excludedPath1"],
-      isPolicyEnabled: false,
     };
 
     const modifiedPolicy = {
@@ -401,7 +393,6 @@ describe("SettingsComponent", () => {
         },
       ],
       excludedPaths: ["/excludedPath2"],
-      isPolicyEnabled: true,
     };
 
     // Set initial state

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,
@@ -686,22 +687,14 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     this.setState({ isComputedPropertiesDirty: isComputedPropertiesDirty });
 
   private onDataMaskingContentChange = (newDataMasking: DataModels.DataMaskingPolicy): void => {
-    if (!newDataMasking.excludedPaths) {
-      newDataMasking.excludedPaths = [];
-    }
-    if (!newDataMasking.includedPaths) {
-      newDataMasking.includedPaths = [];
-    }
-
     const validationErrors = [];
-    if (!Array.isArray(newDataMasking.includedPaths)) {
+    if (newDataMasking.includedPaths === undefined || newDataMasking.includedPaths === null) {
+      validationErrors.push("includedPaths is required");
+    } else if (!Array.isArray(newDataMasking.includedPaths)) {
       validationErrors.push("includedPaths must be an array");
     }
-    if (!Array.isArray(newDataMasking.excludedPaths)) {
-      validationErrors.push("excludedPaths must be an array");
-    }
-    if (typeof newDataMasking.isPolicyEnabled !== "boolean") {
-      validationErrors.push("isPolicyEnabled must be a boolean");
+    if (newDataMasking.excludedPaths !== undefined && !Array.isArray(newDataMasking.excludedPaths)) {
+      validationErrors.push("excludedPaths must be an array if provided");
     }
 
     this.setState({
@@ -842,7 +835,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     const dataMaskingContent: DataModels.DataMaskingPolicy = {
       includedPaths: this.collection.dataMaskingPolicy?.()?.includedPaths || [],
       excludedPaths: this.collection.dataMaskingPolicy?.()?.excludedPaths || [],
-      isPolicyEnabled: this.collection.dataMaskingPolicy?.()?.isPolicyEnabled ?? true,
     };
     const conflictResolutionPolicy: DataModels.ConflictResolutionPolicy =
       this.collection.conflictResolutionPolicy && this.collection.conflictResolutionPolicy();
@@ -1073,8 +1065,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 +1455,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.test.tsx

@@ -53,7 +53,6 @@ describe("DataMaskingComponent", () => {
       },
     ],
     excludedPaths: [],
-    isPolicyEnabled: false,
   };
 
   let changeContentCallback: () => void;
@@ -78,7 +77,7 @@ describe("DataMaskingComponent", () => {
       <DataMaskingComponent
         {...mockProps}
         dataMaskingContent={samplePolicy}
-        dataMaskingContentBaseline={{ ...samplePolicy, isPolicyEnabled: true }}
+        dataMaskingContentBaseline={{ ...samplePolicy, excludedPaths: ["/excluded"] }}
       />,
     );
 
@@ -123,7 +122,7 @@ describe("DataMaskingComponent", () => {
   });
 
   it("resets content when shouldDiscardDataMasking is true", async () => {
-    const baselinePolicy = { ...samplePolicy, isPolicyEnabled: true };
+    const baselinePolicy = { ...samplePolicy, excludedPaths: ["/excluded"] };
 
     const wrapper = mount(
       <DataMaskingComponent
@@ -159,7 +158,7 @@ describe("DataMaskingComponent", () => {
     wrapper.update();
 
     // Update baseline to trigger componentDidUpdate
-    const newBaseline = { ...samplePolicy, isPolicyEnabled: true };
+    const newBaseline = { ...samplePolicy, excludedPaths: ["/excluded"] };
     wrapper.setProps({ dataMaskingContentBaseline: newBaseline });
 
     expect(mockProps.onDataMaskingDirtyChange).toHaveBeenCalledWith(true);
@@ -174,7 +173,6 @@ describe("DataMaskingComponent", () => {
     const invalidPolicy: Record<string, unknown> = {
       includedPaths: "not an array",
       excludedPaths: [] as string[],
-      isPolicyEnabled: "not a boolean",
     };
 
     mockGetValue.mockReturnValue(JSON.stringify(invalidPolicy));
@@ -197,7 +195,7 @@ describe("DataMaskingComponent", () => {
     wrapper.update();
 
     // First change
-    const modifiedPolicy1 = { ...samplePolicy, isPolicyEnabled: true };
+    const modifiedPolicy1 = { ...samplePolicy, excludedPaths: ["/path1"] };
     mockGetValue.mockReturnValue(JSON.stringify(modifiedPolicy1));
     changeContentCallback();
     expect(mockProps.onDataMaskingDirtyChange).toHaveBeenCalledWith(true);

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 { isDirty as isContentDirty, isDataMaskingEnabled } from "../SettingsUtils";
 
 export interface DataMaskingComponentProps {
   shouldDiscardDataMasking: boolean;
@@ -24,16 +22,8 @@ interface DataMaskingComponentState {
 }
 
 const emptyDataMaskingPolicy: DataModels.DataMaskingPolicy = {
-  includedPaths: [
-    {
-      path: "/",
-      strategy: "Default",
-      startPosition: 0,
-      length: -1,
-    },
-  ],
+  includedPaths: [],
   excludedPaths: [],
-  isPolicyEnabled: true,
 };
 
 export class DataMaskingComponent extends React.Component<DataMaskingComponentProps, DataMaskingComponentState> {
@@ -140,7 +130,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/TestUtils.tsx

@@ -68,7 +68,6 @@ export const collection = {
   dataMaskingPolicy: ko.observable<DataModels.DataMaskingPolicy>({
     includedPaths: [],
     excludedPaths: ["/excludedPath"],
-    isPolicyEnabled: true,
   }),
   readSettings: () => {
     return;

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

@@ -604,6 +604,58 @@ 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": [],
+              }
+            }
+            dataMaskingContentBaseline={
+              {
+                "excludedPaths": [
+                  "/excludedPath",
+                ],
+                "includedPaths": [],
+              }
+            }
+            onDataMaskingContentChange={[Function]}
+            onDataMaskingDirtyChange={[Function]}
+            resetShouldDiscardDataMasking={[Function]}
+            shouldDiscardDataMasking={false}
+            validationErrors={[]}
+          />
+        </Stack>
+      </PivotItem>
       <PivotItem
         headerButtonProps={
           {

src/Explorer/Tree/Collection.ts

@@ -141,7 +141,6 @@ export default class Collection implements ViewModels.Collection {
     const defaultDataMaskingPolicy: DataModels.DataMaskingPolicy = {
       includedPaths: Array<{ path: string; strategy: string; startPosition: number; length: number }>(),
       excludedPaths: Array<string>(),
-      isPolicyEnabled: true,
     };
     const observablePolicy = ko.observable(data.dataMaskingPolicy || defaultDataMaskingPolicy);
     observablePolicy.subscribe(() => {});

src/Main.tsx

@@ -119,9 +119,6 @@ const App = (): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [explorer]);
 
-  // Track interactive phase for both ContainerCopyPanel and DivExplorer paths
-  useInteractive(MetricScenario.ApplicationLoad);
-
   if (!explorer) {
     return <LoadingExplorer />;
   }
@@ -148,6 +145,7 @@ const App = (): JSX.Element => {
 const DivExplorer: React.FC<{ explorer: Explorer }> = ({ explorer }) => {
   const isCarouselOpen = useCarousel((state) => state.shouldOpen);
   const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
+  useInteractive(MetricScenario.ApplicationLoad);
 
   return (
     <div

src/Metrics/ErrorClassification.test.ts

@@ -1,182 +0,0 @@
-import { ARMError } from "../Utils/arm/request";
-import { isExpectedError } from "./ErrorClassification";
-
-describe("ErrorClassification", () => {
-  describe("isExpectedError", () => {
-    describe("ARMError with expected codes", () => {
-      it("returns true for AuthorizationFailed code", () => {
-        const error = new ARMError("Authorization failed");
-        error.code = "AuthorizationFailed";
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns true for Forbidden code", () => {
-        const error = new ARMError("Forbidden");
-        error.code = "Forbidden";
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns true for Unauthorized code", () => {
-        const error = new ARMError("Unauthorized");
-        error.code = "Unauthorized";
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns true for InvalidAuthenticationToken code", () => {
-        const error = new ARMError("Invalid token");
-        error.code = "InvalidAuthenticationToken";
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns true for ExpiredAuthenticationToken code", () => {
-        const error = new ARMError("Token expired");
-        error.code = "ExpiredAuthenticationToken";
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns true for numeric 401 code", () => {
-        const error = new ARMError("Unauthorized");
-        error.code = 401;
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns true for numeric 403 code", () => {
-        const error = new ARMError("Forbidden");
-        error.code = 403;
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns false for unexpected ARM error code", () => {
-        const error = new ARMError("Internal error");
-        error.code = "InternalServerError";
-        expect(isExpectedError(error)).toBe(false);
-      });
-
-      it("returns false for numeric 500 code", () => {
-        const error = new ARMError("Server error");
-        error.code = 500;
-        expect(isExpectedError(error)).toBe(false);
-      });
-    });
-
-    describe("MSAL AuthError with expected errorCodes", () => {
-      it("returns true for popup_window_error", () => {
-        const error = { errorCode: "popup_window_error", message: "Popup blocked" };
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns true for interaction_required", () => {
-        const error = { errorCode: "interaction_required", message: "User interaction required" };
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns true for user_cancelled", () => {
-        const error = { errorCode: "user_cancelled", message: "User cancelled" };
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns true for consent_required", () => {
-        const error = { errorCode: "consent_required", message: "Consent required" };
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns true for login_required", () => {
-        const error = { errorCode: "login_required", message: "Login required" };
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns true for no_account_error", () => {
-        const error = { errorCode: "no_account_error", message: "No account" };
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns false for unexpected MSAL error code", () => {
-        const error = { errorCode: "unknown_error", message: "Unknown" };
-        expect(isExpectedError(error)).toBe(false);
-      });
-    });
-
-    describe("HTTP status codes", () => {
-      it("returns true for error with status 401", () => {
-        const error = { status: 401, message: "Unauthorized" };
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns true for error with status 403", () => {
-        const error = { status: 403, message: "Forbidden" };
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns false for error with status 500", () => {
-        const error = { status: 500, message: "Internal Server Error" };
-        expect(isExpectedError(error)).toBe(false);
-      });
-
-      it("returns false for error with status 404", () => {
-        const error = { status: 404, message: "Not Found" };
-        expect(isExpectedError(error)).toBe(false);
-      });
-    });
-
-    describe("Firewall error message pattern", () => {
-      it("returns true for firewall error in Error message", () => {
-        const error = new Error("Request blocked by firewall");
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns true for IP not allowed error", () => {
-        const error = new Error("Client IP address is not allowed");
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns true for ip not allowed (no 'address')", () => {
-        const error = new Error("Your ip not allowed to access this resource");
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns true for string error with firewall", () => {
-        expect(isExpectedError("firewall rules prevent access")).toBe(true);
-      });
-
-      it("returns true for case-insensitive firewall match", () => {
-        const error = new Error("FIREWALL blocked request");
-        expect(isExpectedError(error)).toBe(true);
-      });
-
-      it("returns false for unrelated error message", () => {
-        const error = new Error("Database connection failed");
-        expect(isExpectedError(error)).toBe(false);
-      });
-    });
-
-    describe("Edge cases", () => {
-      it("returns false for null", () => {
-        expect(isExpectedError(null)).toBe(false);
-      });
-
-      it("returns false for undefined", () => {
-        expect(isExpectedError(undefined)).toBe(false);
-      });
-
-      it("returns false for empty object", () => {
-        expect(isExpectedError({})).toBe(false);
-      });
-
-      it("returns false for plain Error without expected patterns", () => {
-        const error = new Error("Something went wrong");
-        expect(isExpectedError(error)).toBe(false);
-      });
-
-      it("returns false for string without firewall pattern", () => {
-        expect(isExpectedError("Generic error occurred")).toBe(false);
-      });
-
-      it("handles error with multiple matching criteria", () => {
-        // ARMError with both code and firewall message
-        const error = new ARMError("Request blocked by firewall");
-        error.code = "Forbidden";
-        expect(isExpectedError(error)).toBe(true);
-      });
-    });
-  });
-});

src/Metrics/ErrorClassification.ts

@@ -1,109 +0,0 @@
-import { ARMError } from "../Utils/arm/request";
-
-/**
- * Expected error codes that should not mark scenarios as unhealthy.
- * These represent expected failures like auth issues, permission errors, and user actions.
- */
-
-// ARM error codes (string)
-const EXPECTED_ARM_ERROR_CODES: Set<string> = new Set([
-  "AuthorizationFailed",
-  "Forbidden",
-  "Unauthorized",
-  "AuthenticationFailed",
-  "InvalidAuthenticationToken",
-  "ExpiredAuthenticationToken",
-  "AuthorizationPermissionMismatch",
-]);
-
-// HTTP status codes that indicate expected failures
-const EXPECTED_HTTP_STATUS_CODES: Set<number> = new Set([
-  401, // Unauthorized
-  403, // Forbidden
-]);
-
-// MSAL error codes (string)
-const EXPECTED_MSAL_ERROR_CODES: Set<string> = new Set([
-  "popup_window_error",
-  "interaction_required",
-  "user_cancelled",
-  "consent_required",
-  "login_required",
-  "no_account_error",
-  "monitor_window_timeout",
-  "empty_window_error",
-]);
-
-// Firewall error message pattern (only case where we check message content)
-const FIREWALL_ERROR_PATTERN = /firewall|ip\s*(address)?\s*(is\s*)?not\s*allowed/i;
-
-/**
- * Interface for MSAL AuthError-like objects
- */
-interface MsalAuthError {
-  errorCode?: string;
-}
-
-/**
- * Interface for errors with HTTP status
- */
-interface HttpError {
-  status?: number;
-}
-
-/**
- * Determines if an error is an expected failure that should not mark the scenario as unhealthy.
- *
- * Expected failures include:
- * - Authentication/authorization errors (user not logged in, permissions)
- * - Firewall blocking errors
- * - User-cancelled operations
- *
- * @param error - The error to classify
- * @returns true if the error is expected and should not affect health metrics
- */
-export function isExpectedError(error: unknown): boolean {
-  if (!error) {
-    return false;
-  }
-
-  // Check ARMError code
-  if (error instanceof ARMError && error.code !== undefined) {
-    if (typeof error.code === "string" && EXPECTED_ARM_ERROR_CODES.has(error.code)) {
-      return true;
-    }
-    if (typeof error.code === "number" && EXPECTED_HTTP_STATUS_CODES.has(error.code)) {
-      return true;
-    }
-  }
-
-  // Check for MSAL AuthError (has errorCode property)
-  const msalError = error as MsalAuthError;
-  if (msalError.errorCode && typeof msalError.errorCode === "string") {
-    if (EXPECTED_MSAL_ERROR_CODES.has(msalError.errorCode)) {
-      return true;
-    }
-  }
-
-  // Check HTTP status on generic errors
-  const httpError = error as HttpError;
-  if (httpError.status && typeof httpError.status === "number") {
-    if (EXPECTED_HTTP_STATUS_CODES.has(httpError.status)) {
-      return true;
-    }
-  }
-
-  // Check for firewall error in message (the only message-based check)
-  if (error instanceof Error && error.message) {
-    if (FIREWALL_ERROR_PATTERN.test(error.message)) {
-      return true;
-    }
-  }
-
-  // Check for string errors with firewall pattern
-  if (typeof error === "string" && FIREWALL_ERROR_PATTERN.test(error)) {
-    return true;
-  }
-
-  return false;
-}

src/Metrics/MetricEvents.ts

@@ -15,11 +15,6 @@ export const reportUnhealthy = (scenario: MetricScenario, platform: Platform, ap
   send({ platform, api, scenario, healthy: false });
 
 const send = async (event: MetricEvent): Promise<Response> => {
-  // Skip metrics emission during local development
-  if (process.env.NODE_ENV === "development") {
-    return Promise.resolve(new Response(null, { status: 200 }));
-  }
-
   const url = createUri(configContext?.PORTAL_BACKEND_ENDPOINT, RELATIVE_PATH);
   const authHeader = getAuthorizationHeader();
 

src/Metrics/ScenarioMonitor.test.ts

@@ -1,231 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import { configContext } from "../ConfigContext";
-import { updateUserContext } from "../UserContext";
-import MetricScenario, { reportHealthy, reportUnhealthy } from "./MetricEvents";
-import { ApplicationMetricPhase, CommonMetricPhase } from "./ScenarioConfig";
-import { scenarioMonitor } from "./ScenarioMonitor";
-
-// Mock the MetricEvents module
-jest.mock("./MetricEvents", () => ({
-  __esModule: true,
-  default: {
-    ApplicationLoad: "ApplicationLoad",
-    DatabaseLoad: "DatabaseLoad",
-  },
-  reportHealthy: jest.fn().mockResolvedValue({ ok: true }),
-  reportUnhealthy: jest.fn().mockResolvedValue({ ok: true }),
-}));
-
-// Mock configContext
-jest.mock("../ConfigContext", () => ({
-  configContext: {
-    platform: "Portal",
-    PORTAL_BACKEND_ENDPOINT: "https://test.portal.azure.com",
-  },
-  Platform: {
-    Portal: "Portal",
-    Hosted: "Hosted",
-    Emulator: "Emulator",
-    Fabric: "Fabric",
-  },
-}));
-
-describe("ScenarioMonitor", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    // Use legacy fake timers to avoid conflicts with performance API
-    jest.useFakeTimers({ legacyFakeTimers: true });
-
-    // Ensure performance mock is available (setupTests.ts sets this but fake timers may override)
-    if (typeof performance.mark !== "function") {
-      Object.defineProperty(global, "performance", {
-        writable: true,
-        configurable: true,
-        value: {
-          mark: jest.fn(),
-          measure: jest.fn(),
-          clearMarks: jest.fn(),
-          clearMeasures: jest.fn(),
-          getEntriesByName: jest.fn().mockReturnValue([{ startTime: 0 }]),
-          getEntriesByType: jest.fn().mockReturnValue([]),
-          now: jest.fn(() => Date.now()),
-          timeOrigin: Date.now(),
-        },
-      });
-    }
-
-    // Reset userContext
-    updateUserContext({
-      apiType: "SQL",
-    });
-
-    // Reset the scenario monitor to clear any previous state
-    scenarioMonitor.reset();
-  });
-
-  afterEach(() => {
-    // Reset scenarios before switching to real timers
-    scenarioMonitor.reset();
-    jest.useRealTimers();
-  });
-
-  describe("markExpectedFailure", () => {
-    it("sets hasExpectedFailure flag on active scenarios", () => {
-      // Start a scenario
-      scenarioMonitor.start(MetricScenario.ApplicationLoad);
-
-      // Mark expected failure
-      scenarioMonitor.markExpectedFailure();
-
-      // Let timeout fire - should emit healthy because of expected failure
-      jest.advanceTimersByTime(10000);
-
-      expect(reportHealthy).toHaveBeenCalledWith(MetricScenario.ApplicationLoad, configContext.platform, "SQL");
-      expect(reportUnhealthy).not.toHaveBeenCalled();
-    });
-
-    it("sets flag on multiple active scenarios", () => {
-      // Start two scenarios
-      scenarioMonitor.start(MetricScenario.ApplicationLoad);
-      scenarioMonitor.start(MetricScenario.DatabaseLoad);
-
-      // Mark expected failure - should affect both
-      scenarioMonitor.markExpectedFailure();
-
-      // Let timeouts fire
-      jest.advanceTimersByTime(10000);
-
-      expect(reportHealthy).toHaveBeenCalledTimes(2);
-      expect(reportUnhealthy).not.toHaveBeenCalled();
-    });
-
-    it("does not affect already emitted scenarios", () => {
-      // Start scenario
-      scenarioMonitor.start(MetricScenario.ApplicationLoad);
-
-      // Complete all phases to emit
-      scenarioMonitor.completePhase(MetricScenario.ApplicationLoad, ApplicationMetricPhase.ExplorerInitialized);
-      scenarioMonitor.completePhase(MetricScenario.ApplicationLoad, CommonMetricPhase.Interactive);
-
-      // Now mark expected failure - should not change anything
-      scenarioMonitor.markExpectedFailure();
-
-      // Healthy was called when phases completed
-      expect(reportHealthy).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe("timeout behavior", () => {
-    it("emits unhealthy on timeout without expected failure", () => {
-      scenarioMonitor.start(MetricScenario.ApplicationLoad);
-
-      // Let timeout fire without marking expected failure
-      jest.advanceTimersByTime(10000);
-
-      expect(reportUnhealthy).toHaveBeenCalledWith(MetricScenario.ApplicationLoad, configContext.platform, "SQL");
-      expect(reportHealthy).not.toHaveBeenCalled();
-    });
-
-    it("emits healthy on timeout with expected failure", () => {
-      scenarioMonitor.start(MetricScenario.ApplicationLoad);
-
-      // Mark expected failure
-      scenarioMonitor.markExpectedFailure();
-
-      // Let timeout fire
-      jest.advanceTimersByTime(10000);
-
-      expect(reportHealthy).toHaveBeenCalledWith(MetricScenario.ApplicationLoad, configContext.platform, "SQL");
-      expect(reportUnhealthy).not.toHaveBeenCalled();
-    });
-
-    it("emits healthy even with partial phase completion and expected failure", () => {
-      scenarioMonitor.start(MetricScenario.ApplicationLoad);
-
-      // Complete one phase
-      scenarioMonitor.completePhase(MetricScenario.ApplicationLoad, ApplicationMetricPhase.ExplorerInitialized);
-
-      // Mark expected failure
-      scenarioMonitor.markExpectedFailure();
-
-      // Let timeout fire (Interactive phase not completed)
-      jest.advanceTimersByTime(10000);
-
-      expect(reportHealthy).toHaveBeenCalled();
-      expect(reportUnhealthy).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("failPhase behavior", () => {
-    it("emits unhealthy immediately on unexpected failure", () => {
-      scenarioMonitor.start(MetricScenario.DatabaseLoad);
-
-      // Fail a phase (simulating unexpected error)
-      scenarioMonitor.failPhase(MetricScenario.DatabaseLoad, ApplicationMetricPhase.DatabasesFetched);
-
-      // Should emit unhealthy immediately, not wait for timeout
-      expect(reportUnhealthy).toHaveBeenCalledWith(MetricScenario.DatabaseLoad, configContext.platform, "SQL");
-    });
-
-    it("does not emit twice after failPhase and timeout", () => {
-      scenarioMonitor.start(MetricScenario.DatabaseLoad);
-
-      // Fail a phase
-      scenarioMonitor.failPhase(MetricScenario.DatabaseLoad, ApplicationMetricPhase.DatabasesFetched);
-
-      // Let timeout fire
-      jest.advanceTimersByTime(10000);
-
-      // Should only have emitted once (from failPhase)
-      expect(reportUnhealthy).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe("completePhase behavior", () => {
-    it("emits healthy when all phases complete", () => {
-      scenarioMonitor.start(MetricScenario.ApplicationLoad);
-
-      // Complete all required phases
-      scenarioMonitor.completePhase(MetricScenario.ApplicationLoad, ApplicationMetricPhase.ExplorerInitialized);
-      scenarioMonitor.completePhase(MetricScenario.ApplicationLoad, CommonMetricPhase.Interactive);
-
-      expect(reportHealthy).toHaveBeenCalledWith(MetricScenario.ApplicationLoad, configContext.platform, "SQL");
-    });
-
-    it("does not emit until all phases complete", () => {
-      scenarioMonitor.start(MetricScenario.ApplicationLoad);
-
-      // Complete only one phase
-      scenarioMonitor.completePhase(MetricScenario.ApplicationLoad, ApplicationMetricPhase.ExplorerInitialized);
-
-      expect(reportHealthy).not.toHaveBeenCalled();
-      expect(reportUnhealthy).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("scenario isolation", () => {
-    it("expected failure on one scenario does not affect others after completion", () => {
-      // Start both scenarios
-      scenarioMonitor.start(MetricScenario.ApplicationLoad);
-      scenarioMonitor.start(MetricScenario.DatabaseLoad);
-
-      // Complete ApplicationLoad
-      scenarioMonitor.completePhase(MetricScenario.ApplicationLoad, ApplicationMetricPhase.ExplorerInitialized);
-      scenarioMonitor.completePhase(MetricScenario.ApplicationLoad, CommonMetricPhase.Interactive);
-
-      // Now mark expected failure - should only affect DatabaseLoad
-      scenarioMonitor.markExpectedFailure();
-
-      // Let DatabaseLoad timeout
-      jest.advanceTimersByTime(10000);
-
-      // ApplicationLoad emitted healthy on completion
-      // DatabaseLoad emits healthy on timeout (expected failure)
-      expect(reportHealthy).toHaveBeenCalledTimes(2);
-      expect(reportUnhealthy).not.toHaveBeenCalled();
-    });
-  });
-});

src/Metrics/ScenarioMonitor.ts

@@ -21,7 +21,6 @@ interface InternalScenarioContext {
   phases: Map<MetricPhase, PhaseContext>; // Track start/end for each phase
   timeoutId?: number;
   emitted: boolean;
-  hasExpectedFailure: boolean; // Flag for expected failures (auth, firewall, etc.)
 }
 
 class ScenarioMonitor {
@@ -76,7 +75,6 @@ class ScenarioMonitor {
       failed: new Set<MetricPhase>(),
       phases: new Map<MetricPhase, PhaseContext>(),
       emitted: false,
-      hasExpectedFailure: false,
     };
 
     // Start all required phases at scenario start time
@@ -93,11 +91,7 @@ class ScenarioMonitor {
       timeoutMs: config.timeoutMs,
     });
 
-    ctx.timeoutId = window.setTimeout(() => {
-      // If an expected failure occurred (auth, firewall, etc.), emit healthy instead of unhealthy
-      const healthy = ctx.hasExpectedFailure;
-      this.emit(ctx, healthy, true);
-    }, config.timeoutMs);
+    ctx.timeoutId = window.setTimeout(() => this.emit(ctx, false, true), config.timeoutMs);
     this.contexts.set(scenario, ctx);
   }
 
@@ -181,24 +175,6 @@ class ScenarioMonitor {
     this.emit(ctx, false, false, failureSnapshot);
   }
 
-  /**
-   * Marks that an expected failure occurred (auth, firewall, permissions, etc.).
-   * When the scenario times out with this flag set, it will emit healthy instead of unhealthy.
-   * This is called automatically from handleError when an expected error is detected.
-   */
-  markExpectedFailure() {
-    // Set the flag on all active (non-emitted) scenarios
-    this.contexts.forEach((ctx) => {
-      if (!ctx.emitted) {
-        ctx.hasExpectedFailure = true;
-        traceMark(Action.MetricsScenario, {
-          event: "expected_failure_marked",
-          scenario: ctx.scenario,
-        });
-      }
-    });
-  }
-
   private tryEmitIfReady(ctx: InternalScenarioContext) {
     const allDone = ctx.config.requiredPhases.every((p) => ctx.completed.has(p));
     if (!allDone) {
@@ -271,8 +247,7 @@ class ScenarioMonitor {
     });
 
     // Call portal backend health metrics endpoint
-    // If healthy is true (either completed successfully or timeout with expected failure), report healthy
-    if (healthy) {
+    if (healthy && !timedOut) {
       reportHealthy(ctx.scenario, platform, api);
     } else {
       reportUnhealthy(ctx.scenario, platform, api);
@@ -327,19 +302,6 @@ class ScenarioMonitor {
       phaseTimings,
     };
   }
-
-  /**
-   * Reset all scenarios (for testing purposes only).
-   * Clears all active contexts and their timeouts.
-   */
-  reset() {
-    this.contexts.forEach((ctx) => {
-      if (ctx.timeoutId) {
-        clearTimeout(ctx.timeoutId);
-      }
-    });
-    this.contexts.clear();
-  }
 }
 
 export const scenarioMonitor = new ScenarioMonitor();

src/Platform/Hosted/Components/AccountSwitcher.test.tsx

@@ -1,12 +1,12 @@
 jest.mock("../../../hooks/useSubscriptions");
 jest.mock("../../../hooks/useDatabaseAccounts");
-import React from "react";
-import { render, fireEvent, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import { AccountSwitcher } from "./AccountSwitcher";
-import { useSubscriptions } from "../../../hooks/useSubscriptions";
-import { useDatabaseAccounts } from "../../../hooks/useDatabaseAccounts";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
 import { DatabaseAccount, Subscription } from "../../../Contracts/DataModels";
+import { useDatabaseAccounts } from "../../../hooks/useDatabaseAccounts";
+import { useSubscriptions } from "../../../hooks/useSubscriptions";
+import { AccountSwitcher } from "./AccountSwitcher";
 
 it("calls setAccount from parent component", () => {
   const armToken = "fakeToken";
@@ -25,7 +25,7 @@ it("calls setAccount from parent component", () => {
   expect(screen.getByLabelText("Subscription")).toHaveTextContent("Select a Subscription");
   fireEvent.click(screen.getByText("Select a Subscription"));
   fireEvent.click(screen.getByText(subscriptions[0].displayName));
-  expect(screen.getByLabelText("Cosmos DB Account Name")).toHaveTextContent("Select an Account");
+  expect(screen.getByLabelText("Cosmos DB Account")).toHaveTextContent("Select an Account");
   fireEvent.click(screen.getByText("Select an Account"));
   fireEvent.click(screen.getByText(accounts[0].name));
   expect(setDatabaseAccount).toHaveBeenCalledWith(accounts[0]);

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,23 +17,18 @@ export const SwitchAccount: FunctionComponent<Props> = ({
   dismissMenu,
 }: Props) => {
   return (
-    <Dropdown
-      label="Cosmos DB Account Name"
+    <SearchableDropdown<DatabaseAccount>
+      label="Cosmos DB Account"
+      items={accounts}
+      selectedItem={selectedAccount}
+      onSelect={(account) => setSelectedAccountName(account.name)}
+      getKey={(account) => account.name}
+      getDisplayText={(account) => account.name}
+      placeholder="Select an Account"
+      filterPlaceholder="Search by Account name"
       className="accountSwitchAccountDropdown"
-      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",
-      }}
+      disabled={!accounts || accounts.length === 0}
+      onDismiss={dismissMenu}
     />
   );
 };

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,24 +15,16 @@ export const SwitchSubscription: FunctionComponent<Props> = ({
   selectedSubscription,
 }: Props) => {
   return (
-    <Dropdown
+    <SearchableDropdown<Subscription>
       label="Subscription"
+      items={subscriptions}
+      selectedItem={selectedSubscription}
+      onSelect={(sub) => setSelectedSubscriptionId(sub.subscriptionId)}
+      getKey={(sub) => sub.subscriptionId}
+      getDisplayText={(sub) => sub.displayName}
+      placeholder="Select a Subscription"
+      filterPlaceholder="Search by Subscription name"
       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",
-      }}
     />
   );
 };

src/Utils/AuthorizationUtils.ts

@@ -8,8 +8,6 @@ import * as Logger from "../Common/Logger";
 import { configContext } from "../ConfigContext";
 import { DatabaseAccount } from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
-import { isExpectedError } from "../Metrics/ErrorClassification";
-import { scenarioMonitor } from "../Metrics/ScenarioMonitor";
 import { trace, traceFailure } from "../Shared/Telemetry/TelemetryProcessor";
 import { UserContext, userContext } from "../UserContext";
 
@@ -129,10 +127,6 @@ export async function acquireMsalTokenForAccount(
         acquireTokenType: silent ? "silent" : "interactive",
         errorMessage: JSON.stringify(error),
       });
-      // Mark expected failure for health metrics so timeout emits healthy
-      if (isExpectedError(error)) {
-        scenarioMonitor.markExpectedFailure();
-      }
       throw error;
     }
   } else {
@@ -175,10 +169,7 @@ export async function acquireTokenWithMsal(
           acquireTokenType: "interactive",
           errorMessage: JSON.stringify(interactiveError),
         });
-        // Mark expected failure for health metrics so timeout emits healthy
-        if (isExpectedError(interactiveError)) {
-          scenarioMonitor.markExpectedFailure();
-        }
+
         throw interactiveError;
       }
     } else {
@@ -187,10 +178,7 @@ export async function acquireTokenWithMsal(
         acquireTokenType: "silent",
         errorMessage: JSON.stringify(silentError),
       });
-      // Mark expected failure for health metrics so timeout emits healthy
-      if (isExpectedError(silentError)) {
-        scenarioMonitor.markExpectedFailure();
-      }
+
       throw silentError;
     }
   }

test/sql/scaleAndSettings/dataMasking.spec.ts

@@ -0,0 +1,127 @@
+import { expect, test, type Page } from "@playwright/test";
+import { DataExplorer, TestAccount } from "../../fx";
+import { createTestSQLContainer, TestContainerContext } from "../../testData";
+
+/**
+ * Tests for Dynamic Data Masking (DDM) feature.
+ *
+ * Prerequisites:
+ * - Test account must have the EnableDynamicDataMasking capability enabled
+ * - If the capability is not enabled, the DataMaskingTab will not be visible and tests will be skipped
+ *
+ * Important Notes:
+ * - Tests focus on enabling DDM and modifying the masking policy configuration
+ */
+
+let testContainer: TestContainerContext;
+let DATABASE_ID: string;
+let CONTAINER_ID: string;
+
+test.beforeAll(async () => {
+  testContainer = await createTestSQLContainer();
+  DATABASE_ID = testContainer.database.id;
+  CONTAINER_ID = testContainer.container.id;
+});
+
+// Clean up test database after all tests
+test.afterAll(async () => {
+  if (testContainer) {
+    await testContainer.dispose();
+  }
+});
+
+// Helper function to navigate to Data Masking tab
+async function navigateToDataMaskingTab(page: Page, explorer: DataExplorer): Promise<boolean> {
+  // Refresh the tree to see the newly created database
+  const refreshButton = explorer.frame.getByTestId("Sidebar/RefreshButton");
+  await refreshButton.click();
+  await page.waitForTimeout(3000);
+
+  // Expand database and container nodes
+  const databaseNode = await explorer.waitForNode(DATABASE_ID);
+  await databaseNode.expand();
+  await page.waitForTimeout(2000);
+
+  const containerNode = await explorer.waitForNode(`${DATABASE_ID}/${CONTAINER_ID}`);
+  await containerNode.expand();
+  await page.waitForTimeout(1000);
+
+  // Click Scale & Settings or Settings (depending on container type)
+  let settingsNode = explorer.frame.getByTestId(`TreeNode:${DATABASE_ID}/${CONTAINER_ID}/Scale & Settings`);
+  const isScaleAndSettings = await settingsNode.isVisible().catch(() => false);
+
+  if (!isScaleAndSettings) {
+    settingsNode = explorer.frame.getByTestId(`TreeNode:${DATABASE_ID}/${CONTAINER_ID}/Settings`);
+  }
+
+  await settingsNode.click();
+  await page.waitForTimeout(2000);
+
+  // Check if Data Masking tab is available
+  const dataMaskingTab = explorer.frame.getByTestId("settings-tab-header/DataMaskingTab");
+  const isTabVisible = await dataMaskingTab.isVisible().catch(() => false);
+
+  if (!isTabVisible) {
+    return false;
+  }
+
+  await dataMaskingTab.click();
+  await page.waitForTimeout(1000);
+  return true;
+}
+
+test.describe("Data Masking under Scale & Settings", () => {
+  test("Data Masking tab should be visible and show JSON editor", async ({ page }) => {
+    const explorer = await DataExplorer.open(page, TestAccount.SQL);
+    const isTabAvailable = await navigateToDataMaskingTab(page, explorer);
+
+    if (!isTabAvailable) {
+      test.skip(
+        true,
+        "Data Masking tab is not available. Test account may not have EnableDynamicDataMasking capability.",
+      );
+    }
+
+    // Verify the Data Masking editor is visible
+    const dataMaskingEditor = explorer.frame.locator(".settingsV2Editor");
+    await expect(dataMaskingEditor).toBeVisible();
+  });
+
+  test("Data Masking editor should contain default policy structure", async ({ page }) => {
+    const explorer = await DataExplorer.open(page, TestAccount.SQL);
+    const isTabAvailable = await navigateToDataMaskingTab(page, explorer);
+
+    if (!isTabAvailable) {
+      test.skip(
+        true,
+        "Data Masking tab is not available. Test account may not have EnableDynamicDataMasking capability.",
+      );
+    }
+
+    // Verify the editor contains the expected JSON structure fields
+    const editorContent = explorer.frame.locator(".settingsV2Editor");
+    await expect(editorContent).toBeVisible();
+
+    // Check that the editor contains key policy fields (default policy has empty arrays)
+    await expect(editorContent).toContainText("includedPaths");
+    await expect(editorContent).toContainText("excludedPaths");
+  });
+
+  test("Data Masking editor should have correct default policy values", async ({ page }) => {
+    const explorer = await DataExplorer.open(page, TestAccount.SQL);
+    const isTabAvailable = await navigateToDataMaskingTab(page, explorer);
+
+    if (!isTabAvailable) {
+      test.skip(
+        true,
+        "Data Masking tab is not available. Test account may not have EnableDynamicDataMasking capability.",
+      );
+    }
+
+    const editorContent = explorer.frame.locator(".settingsV2Editor");
+    await expect(editorContent).toBeVisible();
+
+    // Default policy should have empty includedPaths and excludedPaths arrays
+    await expect(editorContent).toContainText("[]");
+  });
+});