added filtering items

src/Platform/Hosted/Components/SwitchAccount.tsx

@@ -1,13 +1,13 @@
-import { Dropdown } from "@fluentui/react";
+import { Callout, DirectionalHint, Label, SearchBox, useTheme } from "@fluentui/react";
 import * as React from "react";
-import { FunctionComponent } from "react";
+import { FunctionComponent, useCallback, useEffect, useRef, useState } from "react";
 import { DatabaseAccount } from "../../../Contracts/DataModels";
 
 interface Props {
   accounts: DatabaseAccount[];
   selectedAccount: DatabaseAccount;
   setSelectedAccountName: (id: string) => void;
-  dismissMenu: () => void;
+  dismissMenu?: () => void;
 }
 
 export const SwitchAccount: FunctionComponent<Props> = ({
@@ -16,24 +16,191 @@ export const SwitchAccount: FunctionComponent<Props> = ({
   selectedAccount,
   dismissMenu,
 }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [filterText, setFilterText] = useState("");
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const calloutContentRef = useRef<HTMLDivElement>(null);
+  const theme = useTheme();
+  const { semanticColors, palette } = theme;
+
+  const buttonStyles: React.CSSProperties = {
+    width: "100%",
+    height: "32px",
+    padding: "0 28px 0 8px",
+    border: `1px solid ${semanticColors.inputBorder || palette.neutralSecondary}`,
+    background: semanticColors.inputBackground || palette.white,
+    color: semanticColors.inputText || semanticColors.bodyText,
+    textAlign: "left",
+    cursor: accounts && accounts.length === 0 ? "not-allowed" : "pointer",
+    position: "relative",
+    fontFamily: "inherit",
+    fontSize: "14px",
+  };
+
+  const listContainerStyles: React.CSSProperties = {
+    width: buttonRef.current?.offsetWidth || 300,
+    maxHeight: "400px",
+    display: "flex",
+    flexDirection: "column",
+    background: semanticColors.bodyBackground || palette.white,
+  };
+
+  const listStyles: React.CSSProperties = {
+    maxHeight: "300px",
+    overflowY: "auto",
+    background: semanticColors.bodyBackground || palette.white,
+  };
+
+  const hoverBackground = semanticColors.menuItemBackgroundHovered || palette.neutralLighterAlt;
+  const selectedBackground = semanticColors.menuItemBackgroundChecked || palette.neutralLighter;
+  const placeholderColor = semanticColors.bodySubtext || palette.neutralTertiary;
+
+  const getItemStyles = (isSelected: boolean): React.CSSProperties => ({
+    padding: "8px 12px",
+    cursor: "pointer",
+    backgroundColor: isSelected ? selectedBackground : "transparent",
+    fontSize: "14px",
+    color: semanticColors.bodyText,
+  });
+
+  const closeDropdown = useCallback(() => {
+    setIsOpen(false);
+    setFilterText("");
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const handleDocumentClick = (event: MouseEvent | TouchEvent) => {
+      const target = event.target as Node;
+      if (buttonRef.current?.contains(target) || calloutContentRef.current?.contains(target)) {
+        return;
+      }
+
+      closeDropdown();
+    };
+
+    document.addEventListener("mousedown", handleDocumentClick);
+    document.addEventListener("touchstart", handleDocumentClick);
+
+    return () => {
+      document.removeEventListener("mousedown", handleDocumentClick);
+      document.removeEventListener("touchstart", handleDocumentClick);
+    };
+  }, [isOpen, closeDropdown]);
+
+  const filteredAccounts = accounts?.filter((account) =>
+    account.name.toLowerCase().includes(filterText.toLowerCase()),
+  );
+
+  const handleDismiss = useCallback(() => {
+    closeDropdown();
+  }, [closeDropdown]);
+
+  const handleButtonClick = useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (isOpen) {
+        closeDropdown();
+        return;
+      }
+
+      setIsOpen(true);
+    },
+    [isOpen, closeDropdown],
+  );
+
+  const handleSelect = useCallback(
+    (account: DatabaseAccount) => {
+      setSelectedAccountName(account.name);
+      closeDropdown();
+      dismissMenu?.();
+    },
+    [setSelectedAccountName, closeDropdown, dismissMenu],
+  );
+
+  const buttonLabel = selectedAccount?.name || (accounts && accounts.length === 0 ? "No Accounts Found" : "Select an Account");
+
   return (
-    <Dropdown
+    <div>
-      label="Cosmos DB Account Name"
+      <Label>Cosmos DB Account Name</Label>
-      className="accountSwitchAccountDropdown"
+      <button
-      options={accounts?.map((account) => ({
+        ref={buttonRef}
-        key: account.name,
+        className="accountSwitchAccountDropdown"
-        text: account.name,
+        onClick={handleButtonClick}
-        data: account,
+        style={buttonStyles}
-      }))}
+        disabled={!accounts || accounts.length === 0}
-      onChange={(_, option) => {
+      >
-        setSelectedAccountName(String(option?.key));
+        <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block" }}>
-        dismissMenu();
+          {buttonLabel}
-      }}
+        </span>
-      defaultSelectedKey={selectedAccount?.name}
+        <span
-      placeholder={accounts && accounts.length === 0 ? "No Accounts Found" : "Select an Account"}
+          style={{
-      styles={{
+            position: "absolute",
-        callout: "accountSwitchAccountDropdownMenu",
+            right: "8px",
-      }}
+            top: "50%",
-    />
+            transform: "translateY(-50%)",
+            pointerEvents: "none",
+          }}
+        >
+          ▼
+        </span>
+      </button>
+      {isOpen && (
+        <Callout
+          target={buttonRef.current}
+          onDismiss={handleDismiss}
+          directionalHint={DirectionalHint.bottomLeftEdge}
+          isBeakVisible={false}
+          gapSpace={0}
+          setInitialFocus
+          className="accountSwitchAccountDropdownMenu"
+        >
+          <div ref={calloutContentRef}>
+            <div style={listContainerStyles}>
+              <SearchBox
+                placeholder="Filter accounts"
+                value={filterText}
+                onChange={(_, newValue) => setFilterText(newValue || "")}
+                styles={{
+                  root: {
+                    padding: "8px",
+                    borderBottom: `1px solid ${semanticColors.inputBorder || palette.neutralLight}`,
+                    background: semanticColors.bodyBackground || palette.white,
+                  },
+                  field: {
+                    color: semanticColors.inputText || semanticColors.bodyText,
+                  },
+                }}
+              />
+              <div style={listStyles}>
+                {filteredAccounts && filteredAccounts.length > 0 ? (
+                  filteredAccounts.map((account) => (
+                    <div
+                      key={account.name}
+                      onClick={() => handleSelect(account)}
+                      style={getItemStyles(account.name === selectedAccount?.name)}
+                      onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = hoverBackground)}
+                      onMouseLeave={(e) =>
+                      (e.currentTarget.style.backgroundColor =
+                        account.name === selectedAccount?.name ? selectedBackground : "transparent")
+                      }
+                    >
+                      {account.name}
+                    </div>
+                  ))
+                ) : (
+                  <div style={{ padding: "8px 12px", color: placeholderColor }}>No accounts found</div>
+                )}
+              </div>
+            </div>
+          </div>
+        </Callout>
+      )}
+    </div>
   );
 };

src/Platform/Hosted/Components/SwitchSubscription.tsx

@@ -1,6 +1,6 @@
-import { Dropdown } from "@fluentui/react";
+import { Callout, DirectionalHint, Label, SearchBox, mergeStyleSets, useTheme } from "@fluentui/react";
 import * as React from "react";
-import { FunctionComponent } from "react";
+import { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Subscription } from "../../../Contracts/DataModels";
 
 interface Props {
@@ -14,25 +14,238 @@ export const SwitchSubscription: FunctionComponent<Props> = ({
   setSelectedSubscriptionId,
   selectedSubscription,
 }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [filterText, setFilterText] = useState("");
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const calloutContentRef = useRef<HTMLDivElement>(null);
+  const theme = useTheme();
+  const { semanticColors, palette } = theme;
+
+  const hoverBackground = semanticColors.menuItemBackgroundHovered || palette.neutralLighterAlt;
+  const selectedBackground = semanticColors.menuItemBackgroundChecked || palette.neutralLighter;
+  const placeholderColor = semanticColors.bodySubtext || palette.neutralTertiary;
+
+  const classNames = useMemo(
+    () =>
+      mergeStyleSets({
+        container: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 12,
+        },
+        trigger: {
+          width: "100%",
+          height: 32,
+          padding: "0 28px 0 8px",
+          border: `1px solid ${semanticColors.inputBorder || palette.neutralSecondary}`,
+          backgroundColor: semanticColors.inputBackground || palette.white,
+          color: semanticColors.inputText || semanticColors.bodyText,
+          textAlign: "left",
+          cursor: "pointer",
+          position: "relative",
+          fontFamily: "inherit",
+          fontSize: 14,
+          borderRadius: 2,
+          selectors: {
+            ":hover": {
+              borderColor: semanticColors.inputBorderHovered || palette.neutralPrimary,
+            },
+            ":focus-visible": {
+              outline: `1px solid ${semanticColors.focusBorder || palette.themePrimary}`,
+              outlineOffset: 1,
+            },
+          },
+        },
+        triggerText: {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          display: "block",
+        },
+        triggerChevron: {
+          position: "absolute",
+          right: 8,
+          top: "50%",
+          transform: "translateY(-50%)",
+          pointerEvents: "none",
+        },
+        callout: {
+          backgroundColor: semanticColors.bodyBackground || palette.white,
+        },
+        listContainer: {
+          display: "flex",
+          flexDirection: "column",
+          maxHeight: 400,
+          backgroundColor: semanticColors.bodyBackground || palette.white,
+        },
+        list: {
+          maxHeight: 300,
+          overflowY: "auto",
+        },
+        item: {
+          padding: "8px 12px",
+          cursor: "pointer",
+          fontSize: 14,
+          color: semanticColors.bodyText,
+          backgroundColor: "transparent",
+          selectors: {
+            ":hover": {
+              backgroundColor: hoverBackground,
+            },
+          },
+        },
+        itemSelected: {
+          backgroundColor: selectedBackground,
+          selectors: {
+            ":hover": {
+              backgroundColor: selectedBackground,
+            },
+          },
+        },
+        emptyState: {
+          padding: "8px 12px",
+          color: placeholderColor,
+        },
+      }),
+    [hoverBackground, palette, placeholderColor, semanticColors, selectedBackground],
+  );
+
+  const searchBoxStyles = useMemo(
+    () => ({
+      root: {
+        padding: 8,
+        borderBottom: `1px solid ${semanticColors.inputBorder || palette.neutralLight}`,
+        background: semanticColors.bodyBackground || palette.white,
+      },
+      field: {
+        color: semanticColors.inputText || semanticColors.bodyText,
+      },
+      icon: {
+        color: placeholderColor,
+      },
+      clearButton: {
+        color: placeholderColor,
+      },
+    }),
+    [palette, placeholderColor, semanticColors],
+  );
+
+  const closeDropdown = useCallback(() => {
+    setIsOpen(false);
+    setFilterText("");
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const handleDocumentClick = (event: MouseEvent | TouchEvent) => {
+      const target = event.target as Node;
+      if (buttonRef.current?.contains(target) || calloutContentRef.current?.contains(target)) {
+        return;
+      }
+
+      closeDropdown();
+    };
+
+    document.addEventListener("mousedown", handleDocumentClick);
+    document.addEventListener("touchstart", handleDocumentClick);
+
+    return () => {
+      document.removeEventListener("mousedown", handleDocumentClick);
+      document.removeEventListener("touchstart", handleDocumentClick);
+    };
+  }, [isOpen, closeDropdown]);
+
+  const filteredSubscriptions = subscriptions?.filter((sub) =>
+    sub.displayName.toLowerCase().includes(filterText.toLowerCase()),
+  );
+
+  const handleDismiss = useCallback(() => {
+    closeDropdown();
+  }, [closeDropdown]);
+
+  const handleButtonClick = useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (isOpen) {
+        closeDropdown();
+        return;
+      }
+
+      setIsOpen(true);
+    },
+    [isOpen, closeDropdown],
+  );
+
+  const handleSelect = useCallback(
+    (subscription: Subscription) => {
+      setSelectedSubscriptionId(subscription.subscriptionId);
+      closeDropdown();
+    },
+    [setSelectedSubscriptionId, closeDropdown],
+  );
+
   return (
-    <Dropdown
+    <div className={classNames.container}>
-      label="Subscription"
+      <Label>Subscription</Label>
-      className="accountSwitchSubscriptionDropdown"
+      <button
-      options={subscriptions?.map((sub) => {
+        ref={buttonRef}
-        return {
+        className="accountSwitchSubscriptionDropdown"
-          key: sub.subscriptionId,
+        onClick={handleButtonClick}
-          text: sub.displayName,
+        className={classNames.trigger}
-          data: sub,
+      >
-        };
+        <span className={classNames.triggerText}>
-      })}
+          {selectedSubscription?.displayName || "Select a Subscription"}
-      onChange={(_, option) => {
+        </span>
-        setSelectedSubscriptionId(String(option?.key));
+        <span className={classNames.triggerChevron}>
-      }}
+          ▼
-      defaultSelectedKey={selectedSubscription?.subscriptionId}
+        </span>
-      placeholder={subscriptions && subscriptions.length === 0 ? "No Subscriptions Found" : "Select a Subscription"}
+      </button>
-      styles={{
+      {isOpen && (
-        callout: "accountSwitchSubscriptionDropdownMenu",
+        <Callout
-      }}
+          target={buttonRef.current}
-    />
+          onDismiss={handleDismiss}
+          directionalHint={DirectionalHint.bottomLeftEdge}
+          isBeakVisible={false}
+          gapSpace={0}
+          setInitialFocus
+          calloutMinWidth={buttonRef.current?.offsetWidth || 280}
+          className={`${classNames.callout} accountSwitchSubscriptionDropdownMenu`}
+        >
+          <div ref={calloutContentRef}>
+            <div className={classNames.listContainer}>
+              <SearchBox
+                placeholder="Filter subscriptions"
+                value={filterText}
+                onChange={(_, newValue) => setFilterText(newValue || "")}
+                styles={searchBoxStyles}
+              />
+              <div className={classNames.list}>
+                {filteredSubscriptions && filteredSubscriptions.length > 0 ? (
+                  filteredSubscriptions.map((sub) => {
+                    const isSelected = sub.subscriptionId === selectedSubscription?.subscriptionId;
+                    const itemClassName = isSelected
+                      ? `${classNames.item} ${classNames.itemSelected}`
+                      : classNames.item;
+
+                    return (
+                      <div key={sub.subscriptionId} onClick={() => handleSelect(sub)} className={itemClassName}>
+                        {sub.displayName}
+                      </div>
+                    );
+                  })
+                ) : (
+                  <div className={classNames.emptyState}>No subscriptions found</div>
+                )}
+              </div>
+            </div>
+          </div>
+        </Callout>
+      )}
+    </div>
   );
 };