MSAL 2.0 checkpoint

package-lock.json

@@ -15328,6 +15328,15 @@
         "tinyqueue": "^1.1.0"
       }
     },
+    "match-sorter": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.0.2.tgz",
+      "integrity": "sha512-SDRLNlWof9GnAUEyhKP0O5525MMGXUGt+ep4MrrqQ2StAh3zjvICVZseiwg7Zijn3GazpJDiwuRr/mFDHd92NQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "remove-accents": "0.4.2"
+      }
+    },
     "matchdep": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/matchdep/-/matchdep-2.0.0.tgz",
@@ -17775,6 +17784,15 @@
         "warning": "^4.0.2"
       }
     },
+    "react-query": {
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.5.5.tgz",
+      "integrity": "sha512-WYZcHcAs5K5lPGT6CI8fz3lU62S8IfZhvB1K4aZH27wg9T6CWei+y7IRyZwti9X18LX134O4olgEuNth9LEX+w==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "match-sorter": "^6.0.2"
+      }
+    },
     "react-redux": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.3.tgz",
@@ -18167,6 +18185,11 @@
         "superagent-proxy": "^2.0.0"
       }
     },
+    "remove-accents": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
+      "integrity": "sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U="
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",

package.json

@@ -85,6 +85,7 @@
     "react-dom": "16.9.0",
     "react-hotkeys": "2.0.0",
     "react-notification-system": "0.2.17",
+    "react-query": "3.5.5",
     "react-redux": "7.1.3",
     "redux": "4.0.4",
     "rx-jupyter": "5.5.12",

src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.tsx

@@ -1,4 +1,3 @@
-import { AuthType } from "../../../AuthType";
 import { StyleConstants } from "../../../Common/Constants";
 import { DatabaseAccount, Subscription } from "../../../Contracts/DataModels";
 
@@ -6,172 +5,136 @@ import * as React from "react";
 import { DefaultButton, IButtonStyles, IButtonProps } from "office-ui-fabric-react/lib/Button";
 import { IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
 import { Dropdown, IDropdownOption, IDropdownProps } from "office-ui-fabric-react/lib/Dropdown";
+import { useSubscriptions } from "../../../hooks/useSubscriptions";
 
-export interface AccountSwitchComponentProps {
+export const AccountSwitchComponent: React.FunctionComponent = () => {
-  authType: AuthType;
+  const subscriptions = useSubscriptions();
-  selectedAccountName: string;
+  const menuProps: IContextualMenuProps = {
-  accounts: DatabaseAccount[];
+    directionalHintFixed: true,
-  isLoadingAccounts: boolean;
+    className: "accountSwitchContextualMenu",
-  onAccountChange: (newAccount: DatabaseAccount) => void;
+    items: [
-  selectedSubscriptionId: string;
+      {
-  subscriptions: Subscription[];
+        key: "switchSubscription",
-  isLoadingSubscriptions: boolean;
+        onRender: () => renderSubscriptionDropdown(subscriptions)
-  onSubscriptionChange: (newSubscription: Subscription) => void;
-  displayText?: string;
-}
-
-export class AccountSwitchComponent extends React.Component<AccountSwitchComponentProps> {
-  public render(): JSX.Element {
-    return this.props.authType === AuthType.AAD ? this._renderSwitchDropDown() : this._renderAccountName();
-  }
-
-  private _renderSwitchDropDown(): JSX.Element {
-    const { displayText, selectedAccountName } = this.props;
-
-    const menuProps: IContextualMenuProps = {
-      directionalHintFixed: true,
-      className: "accountSwitchContextualMenu",
-      items: [
-        {
-          key: "switchSubscription",
-          onRender: this._renderSubscriptionDropdown.bind(this)
-        },
-        {
-          key: "switchAccount",
-          onRender: this._renderAccountDropDown.bind(this)
-        }
-      ]
-    };
-
-    const buttonStyles: IButtonStyles = {
-      root: {
-        fontSize: StyleConstants.DefaultFontSize,
-        height: 40,
-        padding: 0,
-        paddingLeft: 10,
-        marginRight: 5,
-        backgroundColor: StyleConstants.BaseDark,
-        color: StyleConstants.BaseLight
       },
-      rootHovered: {
+      {
-        backgroundColor: StyleConstants.BaseHigh,
+        key: "switchAccount",
-        color: StyleConstants.BaseLight
+        onRender: renderAccountDropDown
-      },
-      rootFocused: {
-        backgroundColor: StyleConstants.BaseHigh,
-        color: StyleConstants.BaseLight
-      },
-      rootPressed: {
-        backgroundColor: StyleConstants.BaseHigh,
-        color: StyleConstants.BaseLight
-      },
-      rootExpanded: {
-        backgroundColor: StyleConstants.BaseHigh,
-        color: StyleConstants.BaseLight
-      },
-      textContainer: {
-        flexGrow: "initial"
       }
-    };
+    ]
-
-    const buttonProps: IButtonProps = {
-      text: displayText || selectedAccountName,
-      menuProps: menuProps,
-      styles: buttonStyles,
-      className: "accountSwitchButton",
-      id: "accountSwitchButton"
-    };
-
-    return <DefaultButton {...buttonProps} />;
-  }
-
-  private _renderSubscriptionDropdown(): JSX.Element {
-    const { subscriptions, selectedSubscriptionId, isLoadingSubscriptions } = this.props;
-    const options: IDropdownOption[] = subscriptions.map(sub => {
-      return {
-        key: sub.subscriptionId,
-        text: sub.displayName,
-        data: sub
-      };
-    });
-
-    const placeHolderText = isLoadingSubscriptions
-      ? "Loading subscriptions"
-      : !options || !options.length
-      ? "No subscriptions found in current directory"
-      : "Select subscription from list";
-
-    const dropdownProps: IDropdownProps = {
-      label: "Subscription",
-      className: "accountSwitchSubscriptionDropdown",
-      options: options,
-      onChange: this._onSubscriptionDropdownChange,
-      defaultSelectedKey: selectedSubscriptionId,
-      placeholder: placeHolderText,
-      styles: {
-        callout: "accountSwitchSubscriptionDropdownMenu"
-      }
-    };
-
-    return <Dropdown {...dropdownProps} />;
-  }
-
-  private _onSubscriptionDropdownChange = (e: React.FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
-    if (!option) {
-      return;
-    }
-
-    this.props.onSubscriptionChange(option.data);
   };
 
-  private _renderAccountDropDown(): JSX.Element {
+  const buttonStyles: IButtonStyles = {
-    const { accounts, selectedAccountName, isLoadingAccounts } = this.props;
+    root: {
-    const options: IDropdownOption[] = accounts.map(account => {
+      fontSize: StyleConstants.DefaultFontSize,
-      return {
+      height: 40,
-        key: account.name,
+      padding: 0,
-        text: account.name,
+      paddingLeft: 10,
-        data: account
+      marginRight: 5,
-      };
+      backgroundColor: StyleConstants.BaseDark,
-    });
+      color: StyleConstants.BaseLight
-    // Fabric UI will also try to select the first non-disabled option from dropdown.
+    },
-    // Add a option to prevent pop the message when user click on dropdown on first time.
+    rootHovered: {
-    options.unshift({
+      backgroundColor: StyleConstants.BaseHigh,
-      key: "select from list",
+      color: StyleConstants.BaseLight
-      text: "Select Cosmos DB account from list",
+    },
-      data: undefined
+    rootFocused: {
-    });
+      backgroundColor: StyleConstants.BaseHigh,
-
+      color: StyleConstants.BaseLight
-    const placeHolderText = isLoadingAccounts
+    },
-      ? "Loading Cosmos DB accounts"
+    rootPressed: {
-      : !options || !options.length
+      backgroundColor: StyleConstants.BaseHigh,
-      ? "No Cosmos DB accounts found"
+      color: StyleConstants.BaseLight
-      : "Select Cosmos DB account from list";
+    },
-
+    rootExpanded: {
-    const dropdownProps: IDropdownProps = {
+      backgroundColor: StyleConstants.BaseHigh,
-      label: "Cosmos DB Account Name",
+      color: StyleConstants.BaseLight
-      className: "accountSwitchAccountDropdown",
+    },
-      options: options,
+    textContainer: {
-      onChange: this._onAccountDropdownChange,
+      flexGrow: "initial"
-      defaultSelectedKey: selectedAccountName,
-      placeholder: placeHolderText,
-      styles: {
-        callout: "accountSwitchAccountDropdownMenu"
-      }
-    };
-
-    return <Dropdown {...dropdownProps} />;
-  }
-
-  private _onAccountDropdownChange = (e: React.FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
-    if (!option) {
-      return;
     }
-
-    this.props.onAccountChange(option.data);
   };
 
-  private _renderAccountName(): JSX.Element {
+  const buttonProps: IButtonProps = {
-    const { displayText, selectedAccountName } = this.props;
+    text: "foo",
-    return <span className="accountNameHeader">{displayText || selectedAccountName}</span>;
+    menuProps: menuProps,
-  }
+    styles: buttonStyles,
+    className: "accountSwitchButton",
+    id: "accountSwitchButton"
+  };
+
+  return <DefaultButton {...buttonProps} />;
+};
+
+function renderSubscriptionDropdown(subscriptions: Subscription[]): JSX.Element {
+  const selectedSubscriptionId = "";
+  const isLoadingSubscriptions = false;
+
+  const options: IDropdownOption[] = subscriptions.map(sub => {
+    return {
+      key: sub.subscriptionId,
+      text: sub.displayName,
+      data: sub
+    };
+  });
+
+  const placeHolderText = isLoadingSubscriptions
+    ? "Loading subscriptions"
+    : !options || !options.length
+    ? "No subscriptions found in current directory"
+    : "Select subscription from list";
+
+  const dropdownProps: IDropdownProps = {
+    label: "Subscription",
+    className: "accountSwitchSubscriptionDropdown",
+    options: options,
+    onChange: () => {},
+    defaultSelectedKey: selectedSubscriptionId,
+    placeholder: placeHolderText,
+    styles: {
+      callout: "accountSwitchSubscriptionDropdownMenu"
+    }
+  };
+
+  return <Dropdown {...dropdownProps} />;
+}
+
+function renderAccountDropDown(): JSX.Element {
+  const accounts = [];
+  const selectedAccountName = "foo";
+  const isLoadingAccounts = false;
+  const options: IDropdownOption[] = accounts.map(account => {
+    return {
+      key: account.name,
+      text: account.name,
+      data: account
+    };
+  });
+  // Fabric UI will also try to select the first non-disabled option from dropdown.
+  // Add a option to prevent pop the message when user click on dropdown on first time.
+  options.unshift({
+    key: "select from list",
+    text: "Select Cosmos DB account from list",
+    data: undefined
+  });
+
+  const placeHolderText = isLoadingAccounts
+    ? "Loading Cosmos DB accounts"
+    : !options || !options.length
+    ? "No Cosmos DB accounts found"
+    : "Select Cosmos DB account from list";
+
+  const dropdownProps: IDropdownProps = {
+    label: "Cosmos DB Account Name",
+    className: "accountSwitchAccountDropdown",
+    options: options,
+    onChange: () => {},
+    defaultSelectedKey: selectedAccountName,
+    placeholder: placeHolderText,
+    styles: {
+      callout: "accountSwitchAccountDropdownMenu"
+    }
+  };
+
+  return <Dropdown {...dropdownProps} />;
 }

src/HostedExplorer.tsx

@@ -1,5 +1,5 @@
 import { Configuration, PublicClientApplication } from "@azure/msal-browser";
-import { AuthenticatedTemplate, MsalProvider, UnauthenticatedTemplate } from "@azure/msal-react";
+import { AuthenticatedTemplate, MsalProvider, UnauthenticatedTemplate, useMsal } from "@azure/msal-react";
 import { useBoolean } from "@uifabric/react-hooks";
 import {
   DefaultButton,
@@ -15,30 +15,51 @@ import * as React from "react";
 import { render } from "react-dom";
 import FeedbackIcon from "../images/Feedback.svg";
 import ConnectIcon from "../images/HostedConnectwhite.svg";
+import ChevronRight from "../images/chevron-right.svg";
 import "../less/hostedexplorer.less";
+import { AccountSwitchComponent } from "./Explorer/Controls/AccountSwitch/AccountSwitchComponent";
 import { CommandButtonComponent } from "./Explorer/Controls/CommandButton/CommandButtonComponent";
 import { DefaultDirectoryDropdownComponent } from "./Explorer/Controls/Directory/DefaultDirectoryDropdownComponent";
 import { DirectoryListComponent } from "./Explorer/Controls/Directory/DirectoryListComponent";
 import "./Explorer/Menus/NavBar/MeControlComponent.less";
-import { useGraphProfile } from "./hooks/useGraphProfile";
+import { useGraphPhoto } from "./hooks/useGraphPhoto";
+import { ConnectScreen } from "./Platform/Hosted/ConnectScreen";
 import "./Shared/appInsights";
+import { useAADAccount } from "./hooks/useAADAccount";
 
 initializeIcons();
 
 // MSAL configuration
 const configuration: Configuration = {
   auth: {
-    clientId: "e8ae3d28-de2a-4dc8-8fa3-2d2998b1c38f",
+    clientId: "203f1145-856a-4232-83d4-a43568fba23d",
     redirectUri: "https://localhost:1234/hostedExplorer.html",
-    authority: "https://login.microsoftonline.com/72f988bf-86f1-41af-91ab-2d7cd011db47"
+    authority: "https://login.windows-ppe.net/common"
+  },
+  cache: {
+    cacheLocation: "sessionStorage",
+    storeAuthStateInCookie: false
   }
 };
 
+// const configuration: Configuration = {
+//   auth: {
+//     clientId: "b4d07291-7936-4c8e-b413-f58b6d1c67e8",
+//     redirectUri: "https://localhost:1234/hostedExplorer.html",
+//     authority: "https://login.microsoftonline.com/907765e9-1846-4d84-ad7f-a2f5030ef5ba"
+//   },
+//   cache: {
+//     cacheLocation: "sessionStorage"
+//   }
+// };
+
 const application = new PublicClientApplication(configuration);
 
 const App: React.FunctionComponent = () => {
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
-  const { graphData, photo } = useGraphProfile();
+  const { instance } = useMsal();
+  const account = useAADAccount();
+  const photo = useGraphPhoto();
 
   const menuProps = {
     className: "mecontrolContextualMenu",
@@ -123,23 +144,18 @@ const App: React.FunctionComponent = () => {
           <div className="cosmosDBTitle">
             <span
               className="title"
-              data-bind="click: openAzurePortal, event: { keypress: onOpenAzurePortalKeyPress }"
+              onClick={() => window.open("https://portal.azure.com", "_blank")}
               tabIndex={0}
               title="Go to Azure Portal"
             >
               Microsoft Azure
             </span>
             <span className="accontSplitter" /> <span className="serviceTitle">Cosmos DB</span>
-            <img
+            <img className="chevronRight" src={ChevronRight} alt="account separator" />
-              className="chevronRight"
+            <span className="accountSwitchComponentContainer">
-              src="/chevron-right.svg"
+              {/* <AccountSwitchComponent /> */}
-              alt="account separator"
+              <span className="accountNameHeader">REPLACE ME - Connection string mode</span>;
-              data-bind="visible: isAccountActive"
+            </span>
-            />
-            <span
-              className="accountSwitchComponentContainer"
-              data-bind="react: accountSwitchComponentAdapter, visible: isAccountActive"
-            />
           </div>
           <div className="feedbackConnectSettingIcons">
             <AuthenticatedTemplate>
@@ -177,8 +193,8 @@ const App: React.FunctionComponent = () => {
                 <DefaultButton {...buttonProps}>
                   <Persona
                     imageUrl={photo}
-                    text={graphData?.displayName}
+                    text={account?.name}
-                    secondaryText={graphData?.displayName}
+                    secondaryText={account?.username}
                     showSecondaryText={true}
                     showInitialsUntilImageLoads={true}
                     initialsColor={PersonaInitialsColor.teal}
@@ -193,7 +209,10 @@ const App: React.FunctionComponent = () => {
                 className="mecontrolSigninButton"
                 text="Sign In"
                 onClick={() => {
-                  instance.loginPopup();
+                  instance.loginPopup({
+                    scopes: ["https://graph.microsoft-ppe.com/" + "/.default"],
+                    redirectUri: "https://localhost:1234/hostedExplorer.html"
+                  });
                 }}
                 styles={{
                   rootHovered: { backgroundColor: "#393939", color: "#fff" },
@@ -205,30 +224,30 @@ const App: React.FunctionComponent = () => {
           </div>
         </div>
       </header>
-      {/* <iframe
+      <AuthenticatedTemplate>
-        id="explorerMenu"
+        <p>LOGGED IN!</p>
-        name="explorer"
+        {/* <iframe
-        className="iframe"
+          id="explorerMenu"
-        title="explorer"
+          name="explorer"
-        src="explorer.html?v=1.0.1&platform=Hosted"
+          className="iframe"
-        data-bind="visible: navigationSelection() === 'explorer'"
+          title="explorer"
-      ></iframe> */}
+          src="explorer.html?v=1.0.1&platform=Portal"
+        ></iframe> */}
+      </AuthenticatedTemplate>
+      <UnauthenticatedTemplate>
+        <ConnectScreen />
+      </UnauthenticatedTemplate>
+      <ConnectScreen />
       <div data-bind="react: firewallWarningComponentAdapter" />
       <div data-bind="react: dialogComponentAdapter" />
-      <Panel
+      <Panel headerText="Select Directory" isOpen={isOpen} onDismiss={dismissPanel} closeButtonAriaLabel="Close">
-        headerText="Select Directory"
+        {/* <div className="directoryDropdownContainer">
-        isOpen={!isOpen}
-        onDismiss={dismissPanel}
-        // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
-        closeButtonAriaLabel="Close"
-      >
-        <div className="directoryDropdownContainer">
           <DefaultDirectoryDropdownComponent />
         </div>
         <div className="directoryDivider" />
         <div className="directoryListContainer">
           <DirectoryListComponent />
-        </div>
+        </div> */}
       </Panel>
     </div>
   );

src/Platform/Hosted/ArmResourceUtils.ts

@@ -6,7 +6,7 @@ import { configContext } from "../../ConfigContext";
 import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 
 // TODO: 421864 - add a fetch wrapper
-export abstract class ArmResourceUtils {
+export class ArmResourceUtils {
   private static readonly _armEndpoint: string = configContext.ARM_ENDPOINT;
   private static readonly _armApiVersion: string = configContext.ARM_API_VERSION;
   private static readonly _armAuthArea: string = configContext.ARM_AUTH_AREA;

src/Platform/Hosted/Authorization.ts

@@ -20,20 +20,7 @@ export default class AuthHeadersUtil {
   private static readonly _graphEndpoint: string = configContext.GRAPH_ENDPOINT;
   private static readonly _graphApiVersion: string = configContext.GRAPH_API_VERSION;
 
-  private static _authContext: AuthenticationContext = new AuthenticationContext({
+  private static _authContext: any = {};
-    instance: AuthHeadersUtil._aadEndpoint,
-    clientId: AuthHeadersUtil._firstPartyAppId,
-    postLogoutRedirectUri: window.location.origin,
-    endpoints: {
-      aad: AuthHeadersUtil._aadEndpoint,
-      graph: AuthHeadersUtil._graphEndpoint,
-      armAuthArea: AuthHeadersUtil._armAuthArea,
-      armEndpoint: AuthHeadersUtil._armEndpoint,
-      arcadiaEndpoint: AuthHeadersUtil._arcadiaEndpoint
-    },
-    tenant: undefined,
-    cacheLocation: window.navigator.userAgent.indexOf("Edge") > -1 ? "localStorage" : undefined
-  });
 
   public static getAccessInputMetadata(accessInput: string): Q.Promise<DataModels.AccessInputMetadata> {
     const deferred: Q.Deferred<DataModels.AccessInputMetadata> = Q.defer<DataModels.AccessInputMetadata>();

src/hooks/useGraphProfile.tsx

@@ -1,7 +1,7 @@
-import { useAccount, useMsal } from "@azure/msal-react";
 import { useEffect, useState } from "react";
+import { useAADToken } from "./useAADToken";
 
-export async function fetchMe(accessToken: string): Promise<GraphMeResponse> {
+export async function fetchMe(accessToken: string): Promise<ProfileResponse> {
   const headers = new Headers();
   const bearer = `Bearer ${accessToken}`;
 
@@ -12,32 +12,12 @@ export async function fetchMe(accessToken: string): Promise<GraphMeResponse> {
     headers: headers
   };
 
-  console.log("EXECUTING REQUEST");
   return fetch("https://graph.microsoft.com/v1.0/me", options)
     .then(response => response.json())
     .catch(error => console.log(error));
 }
 
-export async function fetchPhoto(accessToken: string): Promise<Blob | void> {
+interface ProfileResponse {
-  const headers = new Headers();
-  const bearer = `Bearer ${accessToken}`;
-
-  headers.append("Authorization", bearer);
-  headers.append("Content-Type", "image/jpg");
-
-  const options = {
-    method: "GET",
-    headers: headers
-  };
-
-  console.log("EXECUTING REQUEST");
-  return fetch("https://graph.microsoft.com/v1.0/me/photo/$value", options)
-    .then(response => response.blob())
-    .catch(error => console.log(error));
-}
-
-interface GraphMeResponse {
-  businessPhones: any[];
   displayName: string;
   givenName: string;
   jobTitle: string;
@@ -50,25 +30,14 @@ interface GraphMeResponse {
   id: string;
 }
 
-export function useGraphProfile(): { graphData: GraphMeResponse; photo: string } {
+export function useGraphProfile(): ProfileResponse {
-  const { instance, accounts } = useMsal();
+  const token = useAADToken();
-  const account = useAccount(accounts[0] || {});
+  const [profileResponse, setProfileResponse] = useState<ProfileResponse>();
-  const [graphData, setGraphData] = useState<GraphMeResponse>();
-  const [photo, setPhoto] = useState<string>();
 
   useEffect(() => {
-    console.log("account", account);
+    if (token) {
-    if (account) {
+      fetchMe(token).then(response => setProfileResponse(response));
-      instance
-        .acquireTokenSilent({
-          scopes: ["User.Read"],
-          account
-        })
-        .then(response => {
-          fetchMe(response.accessToken).then(response => setGraphData(response));
-          fetchPhoto(response.accessToken).then(response => setPhoto(URL.createObjectURL(response)));
-        });
     }
-  }, [account]);
+  }, [token]);
-  return { graphData, photo };
+  return profileResponse;
 }

tsconfig.json

@@ -11,7 +11,7 @@
     "allowSyntheticDefaultImports": true,
     "downlevelIteration": true,
     "module": "esnext",
-    "target": "es5",
+    "target": "es2017",
     "lib": ["es5", "es6", "dom", "webworker.importscripts"],
     "jsx": "react",
     "moduleResolution": "node",

webpack.config.js

@@ -78,7 +78,7 @@ const ModulesRule = {
       loader: "babel-loader",
       options: {
         cacheDirectory: ".cache/babel",
-        presets: [["@babel/preset-env", { targets: { ie: "11" }, useBuiltIns: false }]]
+        presets: [["@babel/preset-env", { targets: { chrome: "80" }, useBuiltIns: false }]]
       }
     }
   ],