Checkpoint

src/DirectoryPickerPanel.tsx

@@ -0,0 +1,50 @@
+import { Panel, PanelType, ChoiceGroup } from "office-ui-fabric-react";
+import * as React from "react";
+import { useDirectories } from "./hooks/useDirectories";
+
+interface Props {
+  isOpen: boolean;
+  dismissPanel: () => void;
+  tenantId: string;
+  armToken: string;
+}
+
+export const DirectoryPickerPanel: React.FunctionComponent<Props> = ({
+  isOpen,
+  dismissPanel,
+  armToken,
+  tenantId
+}: Props) => {
+  const directories = useDirectories(armToken);
+  return (
+    <Panel
+      type={PanelType.medium}
+      headerText="Select Directory"
+      isOpen={isOpen}
+      onDismiss={dismissPanel}
+      closeButtonAriaLabel="Close"
+    >
+      <ChoiceGroup
+        options={directories.map(dir => ({ key: dir.tenantId, text: `${dir.displayName} (${dir.tenantId})` }))}
+        selectedKey={tenantId}
+        onChange={async () => {
+          dismissPanel();
+          // TODO!!! This does not work. Still not sure why. Tried lots of stuff.
+          // const response = await msal.loginPopup({
+          //   authority: `https://login.microsoftonline.com/${option.key}`
+          // });
+          // // msal = new Msal.UserAgentApplication({
+          // //   auth: {
+          // //     authority: `https://login.microsoftonline.com/${option.key}`,
+          // //     clientId: "203f1145-856a-4232-83d4-a43568fba23d",
+          // //     redirectUri: "https://dataexplorer-dev.azurewebsites.net" // TODO! This should only be set in development
+          // //   }
+          // // });
+          // setTenantId(option.key);
+          // setAccount(response.account);
+          // console.log(account);
+        }}
+      />
+    </Panel>
+  );
+};