Bump eslint, eslint-plugin-jest, eslint-plugin-react, @typescript-eslint/eslint-plugin, @typescript-eslint/parser and eslint-plugin-react-hooks

Bumps [eslint](https://github.com/eslint/eslint), [eslint-plugin-jest](https://github.com/jest-community/eslint-plugin-jest), [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react), [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin), [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser) and [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/HEAD/packages/eslint-plugin-react-hooks). These dependencies needed to be updated together.

Updates `eslint` from 8.50.0 to 9.39.2
- [Release notes](https://github.com/eslint/eslint/releases)
- [Commits](https://github.com/eslint/eslint/compare/v8.50.0...v9.39.2)

Updates `eslint-plugin-jest` from 27.4.2 to 29.12.1
- [Release notes](https://github.com/jest-community/eslint-plugin-jest/releases)
- [Changelog](https://github.com/jest-community/eslint-plugin-jest/blob/main/CHANGELOG.md)
- [Commits](https://github.com/jest-community/eslint-plugin-jest/compare/v27.4.2...v29.12.1)

Updates `eslint-plugin-react` from 7.33.2 to 7.37.5
- [Release notes](https://github.com/jsx-eslint/eslint-plugin-react/releases)
- [Changelog](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/CHANGELOG.md)
- [Commits](https://github.com/jsx-eslint/eslint-plugin-react/compare/v7.33.2...v7.37.5)

Updates `@typescript-eslint/eslint-plugin` from 6.7.4 to 8.54.0
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.54.0/packages/eslint-plugin)

Updates `@typescript-eslint/parser` from 6.7.4 to 8.54.0
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.54.0/packages/parser)

Updates `eslint-plugin-react-hooks` from 4.6.0 to 7.0.1
- [Release notes](https://github.com/facebook/react/releases)
- [Changelog](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/CHANGELOG.md)
- [Commits](https://github.com/facebook/react/commits/HEAD/packages/eslint-plugin-react-hooks)

---
updated-dependencies:
- dependency-name: eslint
  dependency-version: 9.39.2
  dependency-type: direct:development
- dependency-name: eslint-plugin-jest
  dependency-version: 29.12.1
  dependency-type: direct:production
- dependency-name: eslint-plugin-react
  dependency-version: 7.37.5
  dependency-type: direct:production
- dependency-name: "@typescript-eslint/eslint-plugin"
  dependency-version: 8.54.0
  dependency-type: direct:development
- dependency-name: "@typescript-eslint/parser"
  dependency-version: 8.54.0
  dependency-type: direct:development
- dependency-name: eslint-plugin-react-hooks
  dependency-version: 7.0.1
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

package.json

@@ -64,8 +64,8 @@
     "dayjs": "1.8.19",
     "dom-to-image": "2.6.0",
     "dotenv": "8.2.0",
-    "eslint-plugin-jest": "27.4.2",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-jest": "29.12.1",
+    "eslint-plugin-react": "7.37.5",
     "hasher": "1.2.0",
     "html2canvas": "1.0.0-rc.5",
     "i18next": "23.11.5",
@@ -148,8 +148,8 @@
     "@types/styled-components": "5.1.1",
     "@types/underscore": "1.7.36",
     "@types/youtube-player": "5.5.6",
-    "@typescript-eslint/eslint-plugin": "6.7.4",
-    "@typescript-eslint/parser": "6.7.4",
+    "@typescript-eslint/eslint-plugin": "8.54.0",
+    "@typescript-eslint/parser": "8.54.0",
     "@webpack-cli/serve": "2.0.5",
     "babel-jest": "29.7.0",
     "babel-loader": "8.1.0",
@@ -160,11 +160,11 @@
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.8",
     "enzyme-to-json": "3.6.2",
-    "eslint": "8.50.0",
+    "eslint": "9.39.2",
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-prefer-arrow": "1.2.3",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-hooks": "7.0.1",
     "fast-glob": "3.2.5",
     "fs-extra": "7.0.0",
     "html-inline-css-webpack-plugin": "1.11.2",

src/Common/SearchableDropdown.styles.ts

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

@@ -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,157 +0,0 @@
-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}
-            />
-            <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/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",
+      }}
     />
   );
 };