Improve error handling when acquiring aad tokens (#1746)

* Mostly working - some cosmetic changes remaining.

* Cosmetic changes and other tidy ups.

* More clean up.

* Move msal back to dependencies. Fix typo.

* msal should be prod dependency

* Revert msal package update as it is causing issues with unit test
execution.

* Add tracing for unhandled exceptions when acquiring tokens.

src/Platform/Hosted/Components/AadAuthorizationFailure.tsx

@@ -0,0 +1,29 @@
+import { AadAuthFailure } from "hooks/useAADAuth";
+import * as React from "react";
+import ConnectImage from "../../../../images/HdeConnectCosmosDB.svg";
+import "../AadAuthorizationFailure.less";
+
+interface Props {
+  authFailure: AadAuthFailure;
+}
+
+export const AadAuthorizationFailure: React.FunctionComponent<Props> = ({ authFailure }: Props) => {
+  return (
+    <div id="aadAuthFailure" className="aadAuthFailureContainer" style={{ display: "flex" }}>
+      <div className="aadAuthFailureFormContainer">
+        <div className="aadAuthFailure">
+          <p className="aadAuthFailureContent">
+            <img src={ConnectImage} alt="Azure Cosmos DB" />
+          </p>
+          <p className="authFailureTitle">Authorization Failure</p>
+          <p className="authFailureMessage">{authFailure.failureMessage}</p>
+          {authFailure.failureLinkTitle && (
+            <p className="authFailureLink" onClick={authFailure.failureLinkAction}>
+              {authFailure.failureLinkTitle}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};