Refactor SearchableDropdown with Fluent UI components, extract styles, and add tests (#2329)

* Initial plan

* Refactor SearchableDropdown with Fluent UI components and add tests

- Replace native HTML elements with Fluent UI components (Stack, DefaultButton, Text)
- Extract inline styles to SearchableDropdown.styles.ts
- Add comprehensive unit tests (14 test cases)
- Verify behavior consistency with AccountSwitcher tests

Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com>

* Optimize SearchableDropdown with useMemo for filteredItems

Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com>

* Fix text alignment to match original UI - ensure left alignment

- Add flexContainer.justifyContent: "flex-start" to button styles
- Add textAlign: "left" to button label, item styles, and empty message
- Restore original left-aligned appearance for placeholder and selected text

Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com>

---------

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

src/Common/SearchableDropdown.styles.ts

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

@@ -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,
+    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: [],
+    };
+    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,6 +1,24 @@
-import { Callout, DirectionalHint, ISearchBoxStyles, Label, SearchBox } from "@fluentui/react";
+import {
+  Callout,
+  DefaultButton,
+  DirectionalHint,
+  ISearchBoxStyles,
+  Label,
+  SearchBox,
+  Stack,
+  Text,
+} from "@fluentui/react";
 import * as React from "react";
-import { useCallback, useRef, useState } 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;
@@ -14,10 +32,7 @@ interface SearchableDropdownProps<T> {
   className?: string;
   disabled?: boolean;
   onDismiss?: () => void;
-  buttonStyles?: React.CSSProperties;
   searchBoxStyles?: Partial<ISearchBoxStyles>;
-  listStyles?: React.CSSProperties;
-  itemStyles?: React.CSSProperties;
 }
 
 export const SearchableDropdown = <T,>({
@@ -32,75 +47,34 @@ export const SearchableDropdown = <T,>({
   className,
   disabled = false,
   onDismiss,
-  buttonStyles: customButtonStyles,
   searchBoxStyles: customSearchBoxStyles,
-  listStyles: customListStyles,
-  itemStyles: customItemStyles,
 }: SearchableDropdownProps<T>): React.ReactElement => {
   const [isOpen, setIsOpen] = useState(false);
   const [filterText, setFilterText] = useState("");
-  const buttonRef = useRef<HTMLButtonElement>(null);
+  const buttonRef = useRef<HTMLDivElement>(null);
-
-  const defaultButtonStyles: React.CSSProperties = {
-    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",
-    fontFamily: "inherit",
-    fontSize: "14px",
-  };
-
-  const defaultListStyles: React.CSSProperties = {
-    maxHeight: "300px",
-    overflowY: "auto",
-  };
-
-  const defaultItemStyles: React.CSSProperties = {
-    padding: "8px 12px",
-    cursor: "pointer",
-    fontSize: "14px",
-  };
-
-  // Merge custom styles with defaults
-  const buttonStyles = { ...defaultButtonStyles, ...customButtonStyles };
-  const listStyles = { ...defaultListStyles, ...customListStyles };
-  const itemStyles = { ...defaultItemStyles, ...customItemStyles };
 
   const closeDropdown = useCallback(() => {
     setIsOpen(false);
     setFilterText("");
   }, []);
 
-  const filteredItems = items?.filter((item) => getDisplayText(item).toLowerCase().includes(filterText.toLowerCase()));
+  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(
+  const handleButtonClick = useCallback(() => {
-    (event: React.MouseEvent) => {
+    if (disabled) {
-      if (disabled) {
-        return;
-      }
-      event.preventDefault();
-      event.stopPropagation();
-
-      if (isOpen) {
-        closeDropdown();
-        return;
-      }
-
-      setIsOpen(true);
       return;
-    },
+    }
-    [isOpen, closeDropdown, disabled],
+
-  );
+    setIsOpen(!isOpen);
+  }, [isOpen, disabled]);
 
   const handleSelect = useCallback(
     (item: T) => {
@@ -117,33 +91,23 @@ export const SearchableDropdown = <T,>({
     : placeholder;
 
   const buttonId = `${className}-button`;
+  const buttonStyles = getDropdownButtonStyles(disabled);
 
   return (
-    <div>
+    <Stack>
       <Label htmlFor={buttonId}>{label}</Label>
-      <button
+      <div ref={buttonRef}>
-        id={buttonId}
+        <DefaultButton
-        ref={buttonRef}
+          id={buttonId}
-        className={className}
+          className={className}
-        onClick={handleButtonClick}
+          onClick={handleButtonClick}
-        style={buttonStyles}
+          styles={buttonStyles}
-        disabled={disabled}
+          disabled={disabled}
-      >
-        <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block" }}>
-          {buttonLabel}
-        </span>
-        <span
-          style={{
-            position: "absolute",
-            right: "8px",
-            top: "50%",
-            transform: "translateY(-50%)",
-            pointerEvents: "none",
-          }}
         >
-          ▼
+          <Text styles={buttonLabelStyles}>{buttonLabel}</Text>
-        </span>
+          <span style={chevronStyles}>▼</span>
-      </button>
+        </DefaultButton>
+      </div>
       {isOpen && (
         <Callout
           target={buttonRef.current}
@@ -153,14 +117,14 @@ export const SearchableDropdown = <T,>({
           gapSpace={0}
           setInitialFocus
         >
-          <div style={{ width: buttonRef.current?.offsetWidth || 300, display: "flex", flexDirection: "column" }}>
+          <Stack styles={calloutContentStyles} style={{ width: buttonRef.current?.offsetWidth || 300 }}>
             <SearchBox
               placeholder={filterPlaceholder}
               value={filterText}
               onChange={(_, newValue) => setFilterText(newValue || "")}
               styles={customSearchBoxStyles}
             />
-            <div style={listStyles}>
+            <Stack styles={listContainerStyles}>
               {filteredItems && filteredItems.length > 0 ? (
                 filteredItems.map((item) => {
                   const key = getKey(item);
@@ -169,26 +133,23 @@ export const SearchableDropdown = <T,>({
                     <div
                       key={key}
                       onClick={() => handleSelect(item)}
-                      style={{
+                      style={getItemStyles(isSelected)}
-                        ...itemStyles,
-                        backgroundColor: isSelected ? "#e6e6e6" : "transparent",
-                      }}
                       onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "#f3f2f1")}
                       onMouseLeave={(e) =>
                         (e.currentTarget.style.backgroundColor = isSelected ? "#e6e6e6" : "transparent")
                       }
                     >
-                      {getDisplayText(item)}
+                      <Text>{getDisplayText(item)}</Text>
                     </div>
                   );
                 })
               ) : (
-                <div style={{ padding: "8px 12px", color: "#605e5c" }}>No items found</div>
+                <Text styles={emptyMessageStyles}>No items found</Text>
               )}
-            </div>
+            </Stack>
-          </div>
+          </Stack>
         </Callout>
       )}
-    </div>
+    </Stack>
   );
 };