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/SwitchSubscription.tsx

@@ -0,0 +1,38 @@
+import { Dropdown } from "office-ui-fabric-react/lib/Dropdown";
+import * as React from "react";
+import { FunctionComponent } from "react";
+import { Subscription } from "../../../Contracts/DataModels";
+
+interface Props {
+  subscriptions: Subscription[];
+  selectedSubscription: Subscription;
+  setSelectedSubscriptionId: (id: string) => void;
+}
+
+export const SwitchSubscription: FunctionComponent<Props> = ({
+  subscriptions,
+  setSelectedSubscriptionId,
+  selectedSubscription
+}: Props) => {
+  return (
+    <Dropdown
+      label="Subscription"
+      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"
+      }}
+    />
+  );
+};