WIP

src/HostedExplorer.tsx

@@ -31,7 +31,7 @@ const App: React.FunctionComponent = () => {
   // For showing/hiding panel
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
 
-  const { isLoggedIn, armToken, graphToken, account, tenantId, logout, login } = useAADAuth();
+  const { isLoggedIn, armToken, graphToken, account, tenantId, logout, login, switchTenant } = useAADAuth();
   const [databaseAccount, setDatabaseAccount] = React.useState<DatabaseAccount>();
   const [authType, setAuthType] = React.useState<AuthType>(encryptedToken ? AuthType.EncryptedToken : undefined);
   const [connectionString, setConnectionString] = React.useState<string>();
@@ -132,7 +132,7 @@ const App: React.FunctionComponent = () => {
       {!isLoggedIn && !encryptedTokenMetadata && (
         <ConnectExplorer {...{ login, setEncryptedToken, setAuthType, connectionString, setConnectionString }} />
       )}
-      {isLoggedIn && <DirectoryPickerPanel {...{ isOpen, dismissPanel, armToken, tenantId }} />}
+      {isLoggedIn && <DirectoryPickerPanel {...{ isOpen, dismissPanel, armToken, tenantId, switchTenant }} />}
     </>
   );
 };

src/Platform/Hosted/Components/AccountSwitcher.tsx

@@ -55,6 +55,8 @@ export const AccountSwitcher: React.FunctionComponent<Props> = ({ armToken, setD
   const accounts = useDatabaseAccounts(selectedSubscriptionId, armToken);
   const [selectedAccountName, setSelectedAccoutName] = React.useState<string>(cachedDatabaseAccountName);
 
+  console.log(subscriptions, accounts);
+
   React.useEffect(() => {
     if (accounts && selectedAccountName) {
       const account = accounts.find(account => account.name === selectedAccountName);

src/Platform/Hosted/Components/DirectoryPickerPanel.tsx

@@ -7,13 +7,15 @@ interface Props {
   dismissPanel: () => void;
   tenantId: string;
   armToken: string;
+  switchTenant: (tenantId: string) => void;
 }
 
 export const DirectoryPickerPanel: React.FunctionComponent<Props> = ({
   isOpen,
   dismissPanel,
   armToken,
-  tenantId
+  tenantId,
+  switchTenant
 }: Props) => {
   const directories = useDirectories(armToken);
   return (
@@ -27,22 +29,9 @@ export const DirectoryPickerPanel: React.FunctionComponent<Props> = ({
       <ChoiceGroup
         options={directories.map(dir => ({ key: dir.tenantId, text: `${dir.displayName} (${dir.tenantId})` }))}
         selectedKey={tenantId}
-        onChange={async () => {
+        onChange={async (event, option) => {
+          switchTenant(option.key);
           dismissPanel();
-          // TODO!!! Switching directories 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>

src/hooks/useAADAuth.ts

@@ -2,12 +2,12 @@ import * as React from "react";
 import { useBoolean } from "@uifabric/react-hooks";
 import { UserAgentApplication, Account } from "msal";
 
-const msal = new UserAgentApplication({
+let msal = new UserAgentApplication({
   cache: {
     cacheLocation: "localStorage"
   },
   auth: {
-    authority: "https://login.microsoft.com/common",
+    authority: "https://login.microsoftonline.com/common",
     clientId: "203f1145-856a-4232-83d4-a43568fba23d",
     redirectUri: "https://dataexplorer-dev.azurewebsites.net" // TODO! This should only be set in development
   }
@@ -24,6 +24,7 @@ interface ReturnType {
   logout: () => void;
   tenantId: string;
   account: Account;
+  switchTenant: (tenantId: string) => void;
 }
 
 export function useAADAuth(): ReturnType {
@@ -49,13 +50,38 @@ export function useAADAuth(): ReturnType {
     msal.logout();
   }, []);
 
+  const switchTenant = React.useCallback(
+    async id => {
+      msal = new UserAgentApplication({
+        cache: {
+          cacheLocation: "localStorage"
+        },
+        auth: {
+          authority: `https://login.microsoftonline.com/${id}`,
+          clientId: "203f1145-856a-4232-83d4-a43568fba23d",
+          redirectUri: "https://dataexplorer-dev.azurewebsites.net" // TODO! This should only be set in development
+        }
+      });
+      const response = await msal.loginPopup({
+        authority: `https://login.microsoftonline.com/${id}`
+      });
+      setTenantId(response.tenantId);
+      setAccount(response.account);
+      console.log(response);
+    },
+    [account, tenantId]
+  );
+
   React.useEffect(() => {
     if (account && tenantId) {
+      console.log("Getting tokens for", tenantId);
       Promise.all([
         msal.acquireTokenSilent({
+          authority: `https://login.microsoftonline.com/${tenantId}`,
           scopes: ["https://graph.windows.net//.default"]
         }),
         msal.acquireTokenSilent({
+          authority: `https://login.microsoftonline.com/${tenantId}`,
           scopes: ["https://management.azure.com//.default"]
         })
       ]).then(([graphTokenResponse, armTokenResponse]) => {
@@ -72,6 +98,7 @@ export function useAADAuth(): ReturnType {
     graphToken,
     armToken,
     login,
-    logout
+    logout,
+    switchTenant
   };
 }