Upgrades to msal-browser (#781)

* Replaces msal with msal-browser

* Remove unused id, logging in returns the tenant

* format

* Fix tenant switch

* Removes v1 forceRefresh

src/Platform/Hosted/Components/MeControl.test.tsx

@@ -1,12 +1,12 @@
 jest.mock("../../../hooks/useDirectories");
+import { AccountInfo } from "@azure/msal-browser";
 import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import { MeControl } from "./MeControl";
-import { Account } from "msal";
 
 it("renders", () => {
-  const account = {} as Account;
+  const account = {} as AccountInfo;
   const logout = jest.fn();
   const openPanel = jest.fn();
 

src/Platform/Hosted/Components/MeControl.tsx

@@ -1,11 +1,11 @@
-import { FocusZone, DefaultButton, DirectionalHint, Persona, PersonaInitialsColor, PersonaSize } from "@fluentui/react";
+import { AccountInfo } from "@azure/msal-browser";
+import { DefaultButton, DirectionalHint, FocusZone, Persona, PersonaInitialsColor, PersonaSize } from "@fluentui/react";
 import * as React from "react";
-import { Account } from "msal";
 import { useGraphPhoto } from "../../../hooks/useGraphPhoto";
 
 interface Props {
   graphToken: string;
-  account: Account;
+  account: AccountInfo;
   openPanel: () => void;
   logout: () => void;
 }
@@ -48,7 +48,7 @@ export const MeControl: React.FunctionComponent<Props> = ({ openPanel, logout, a
         <Persona
           imageUrl={photo}
           text={account?.name}
-          secondaryText={account?.userName}
+          secondaryText={account?.username}
           showSecondaryText={true}
           showInitialsUntilImageLoads={true}
           initialsColor={PersonaInitialsColor.teal}