Migrated Hosted Explorer to React (#360)

Co-authored-by: Victor Meng <vimeng@microsoft.com>
Co-authored-by: Steve Faulkner <stfaul@microsoft.com>

src/Platform/Hosted/Components/SwitchAccount.tsx

@@ -0,0 +1,39 @@
+import { Dropdown } from "office-ui-fabric-react/lib/Dropdown";
+import * as React from "react";
+import { FunctionComponent } from "react";
+import { DatabaseAccount } from "../../../Contracts/DataModels";
+
+interface Props {
+  accounts: DatabaseAccount[];
+  selectedAccount: DatabaseAccount;
+  setSelectedAccountName: (id: string) => void;
+  dismissMenu: () => void;
+}
+
+export const SwitchAccount: FunctionComponent<Props> = ({
+  accounts,
+  setSelectedAccountName,
+  selectedAccount,
+  dismissMenu
+}: Props) => {
+  return (
+    <Dropdown
+      label="Cosmos DB 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"
+      }}
+    />
+  );
+};