formatting

src/Platform/Hosted/Components/SearchableDropdown.tsx

@@ -0,0 +1,87 @@
+import { Callout, DefaultButton, DirectionalHint, Stack, TextField } from "office-ui-fabric-react";
+import React from "react";
+
+export interface DropdownItem {
+  key: string;
+  text: string;
+}
+
+export interface SearchableDropdownProps {
+  items: DropdownItem[];
+  onItemSelected: (selectedItem: DropdownItem) => void;
+  defaultSelectedItem?: DropdownItem;
+  placeholder?: string;
+  title?: string;
+}
+
+export interface SearchableDropdownState {
+  isDropdownExpanded: boolean;
+  selectedItem: DropdownItem;
+  filteredItems: DropdownItem[];
+}
+
+export class SearchableDropdown extends React.Component<SearchableDropdownProps, SearchableDropdownState> {
+  constructor(props: SearchableDropdownProps) {
+    super(props);
+
+    this.state = {
+      isDropdownExpanded: false,
+      selectedItem: props.defaultSelectedItem,
+      filteredItems: props.items,
+    };
+  }
+
+  public render(): JSX.Element {
+    return this.state.isDropdownExpanded ? (
+      <Stack>
+        <TextField
+          className="dropdownTextField"
+          title={this.props.title}
+          onChange={(event, newInput?: string) => this.onSearchInputChange(newInput)}
+          placeholder={this.props.placeholder}
+          autoFocus
+        />
+        <Callout
+          isBeakVisible={false}
+          target=".dropdownTextField"
+          directionalHint={DirectionalHint.rightTopEdge}
+          onDismiss={() => this.setState({ isDropdownExpanded: false })}
+          gapSpace={0}
+        >
+          <Stack>
+            {this.state.filteredItems?.map((item) => (
+              <DefaultButton
+                key={item.key}
+                text={item.text}
+                style={{ border: "none", textAlign: "left" }}
+                styles={{ label: { fontWeight: "normal" } }}
+                onClick={() => this.onItemSelected(item)}
+              />
+            ))}
+          </Stack>
+        </Callout>
+      </Stack>
+    ) : (
+      <TextField
+        className="dropdownTextField"
+        title={this.props.title}
+        onClick={() => this.setState({ isDropdownExpanded: true, filteredItems: this.props.items })}
+        value={this.state.selectedItem?.text || ""}
+        placeholder={this.props.placeholder}
+        readOnly
+      />
+    );
+  }
+
+  private onSearchInputChange(newInput: string): void {
+    const filteredItems = this.props.items.filter((item: DropdownItem) =>
+      item.text.toLocaleLowerCase().includes(newInput.toLocaleLowerCase())
+    );
+    this.setState({ filteredItems });
+  }
+
+  private onItemSelected(item: DropdownItem): void {
+    this.setState({ selectedItem: item, isDropdownExpanded: false });
+    this.props.onItemSelected(item);
+  }
+}

src/Platform/Hosted/Components/SwitchAccount.tsx

@@ -1,7 +1,6 @@
-import { Dropdown } from "office-ui-fabric-react/lib/Dropdown";
+import React from "react";
-import * as React from "react";
-import { FunctionComponent } from "react";
 import { DatabaseAccount } from "../../../Contracts/DataModels";
+import { DropdownItem, SearchableDropdown } from "./SearchableDropdown";
 
 interface Props {
   accounts: DatabaseAccount[];
@@ -10,30 +9,32 @@ interface Props {
   dismissMenu: () => void;
 }
 
-export const SwitchAccount: FunctionComponent<Props> = ({
+export const SwitchAccount: React.FunctionComponent<Props> = ({
   accounts,
   setSelectedAccountName,
   selectedAccount,
   dismissMenu,
 }: Props) => {
+  const accountItems = accounts?.map((account) => ({
+    key: account.name,
+    text: account.name,
+  }));
+
+  const defaultAccount = selectedAccount && {
+    key: selectedAccount.name,
+    text: selectedAccount.name,
+  };
+
   return (
-    <Dropdown
+    <SearchableDropdown
-      label="Cosmos DB Account Name"
+      items={accountItems}
-      className="accountSwitchAccountDropdown"
+      title="Cosmos DB Account Name"
-      options={accounts?.map((account) => ({
+      defaultSelectedItem={defaultAccount}
-        key: account.name,
+      placeholder={accounts?.length === 0 ? "No Accounts Found" : "Select an Account"}
-        text: account.name,
+      onItemSelected={(accountItem: DropdownItem) => {
-        data: account,
+        setSelectedAccountName(accountItem.key);
-      }))}
-      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,7 +1,6 @@
-import { Dropdown } from "office-ui-fabric-react/lib/Dropdown";
+import React from "react";
-import * as React from "react";
-import { FunctionComponent } from "react";
 import { Subscription } from "../../../Contracts/DataModels";
+import { DropdownItem, SearchableDropdown } from "./SearchableDropdown";
 
 interface Props {
   subscriptions: Subscription[];
@@ -9,30 +8,28 @@ interface Props {
   setSelectedSubscriptionId: (id: string) => void;
 }
 
-export const SwitchSubscription: FunctionComponent<Props> = ({
+export const SwitchSubscription: React.FunctionComponent<Props> = ({
   subscriptions,
   setSelectedSubscriptionId,
   selectedSubscription,
 }: Props) => {
+  const subscriptionItems = subscriptions?.map((sub) => ({
+    key: sub.subscriptionId,
+    text: sub.displayName,
+  }));
+
+  const defaultSubscription = selectedSubscription && {
+    key: selectedSubscription.subscriptionId,
+    text: selectedSubscription.displayName,
+  };
+
   return (
-    <Dropdown
+    <SearchableDropdown
-      label="Subscription"
+      items={subscriptionItems}
-      className="accountSwitchSubscriptionDropdown"
+      title="Subscription"
-      options={subscriptions?.map((sub) => {
+      defaultSelectedItem={defaultSubscription}
-        return {
+      placeholder={subscriptions?.length === 0 ? "No Subscriptions Found" : "Select a Subscription"}
-          key: sub.subscriptionId,
+      onItemSelected={(subscriptionItem: DropdownItem) => setSelectedSubscriptionId(subscriptionItem.key)}
-          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",
-      }}
     />
   );
 };