Add files from previous commit

src/Platform/Hosted/ConnectScreen.less

@@ -0,0 +1,101 @@
+.connectExplorerContainer {
+  height: 100%;
+  width: 100%;
+}
+.connectExplorerContainer .connectExplorerFormContainer {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: -ms-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+.connectExplorerContainer .connectExplorer {
+  text-align: center;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: -ms-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  margin-bottom: 60px;
+}
+.connectExplorerContainer .connectExplorer .welcomeText {
+  font-size: 14px;
+  color: #393939;
+  margin: 8px 8px 16px 8px;
+}
+.connectExplorerContainer .connectExplorer .switchConnectTypeText {
+  margin: 8px;
+  font-size: 12px;
+  color: #0058ad;
+  cursor: pointer;
+}
+.connectExplorerContainer .connectExplorer .connectStringText {
+  font-size: 12px;
+  color: #393939;
+}
+.connectExplorerContainer .connectExplorer .connectExplorerContent {
+  margin: 8px;
+  color: #393939;
+}
+.connectExplorerContainer .connectExplorer .connectExplorerContent .inputToken {
+  width: 300px;
+  padding: 0px 4px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.connectExplorerContainer .connectExplorer .connectExplorerContent .inputToken::placeholder {
+  font-style: italic;
+}
+.connectExplorerContainer .connectExplorer .connectExplorerContent .errorDetailsInfoTooltip {
+  position: relative;
+  display: inline-block;
+  padding-left: 4px;
+  vertical-align: top;
+}
+.connectExplorerContainer .connectExplorer .connectExplorerContent .errorDetailsInfoTooltip:hover .errorDetails {
+  visibility: visible;
+}
+.connectExplorerContainer .connectExplorer .connectExplorerContent .errorDetailsInfoTooltip .errorDetails {
+  bottom: 24px;
+  width: 145px;
+  visibility: hidden;
+  background-color: #393939;
+  color: #ffffff;
+  position: absolute;
+  z-index: 1;
+  left: -10px;
+  padding: 6px;
+}
+.connectExplorerContainer .connectExplorer .connectExplorerContent .errorDetailsInfoTooltip .errorDetails:after {
+  border-width: 10px 10px 0px 10px;
+  bottom: -8px;
+  content: "";
+  position: absolute;
+  right: 100%;
+  border-style: solid;
+  left: 12px;
+  width: 0;
+  height: 0;
+  border-color: #3b3b3b transparent;
+}
+.connectExplorerContainer .connectExplorer .connectExplorerContent .errorDetailsInfoTooltip .errorImg {
+  height: 14px;
+  width: 14px;
+}
+
+.filterbtnstyle {
+  background: #0058ad;
+  width: 90px;
+  height: 25px;
+  color: white;
+  border: solid 1px;
+}

src/Platform/Hosted/ConnectScreen.tsx

@@ -0,0 +1,52 @@
+import "./ConnectScreen.less";
+import * as React from "react";
+import { useMsal } from "@azure/msal-react";
+import { useBoolean } from "@uifabric/react-hooks";
+
+export const ConnectScreen: React.FunctionComponent = () => {
+  const { instance } = useMsal();
+  const [isConnectionStringVisible, { setTrue: showConnectionString }] = useBoolean(false);
+
+  return (
+    <div id="connectExplorer" className="connectExplorerContainer" style={{ display: "flex" }}>
+      <div className="connectExplorerFormContainer">
+        <div className="connectExplorer">
+          <p className="connectExplorerContent">
+            <img src="images/HdeConnectCosmosDB.svg" alt="Azure Cosmos DB" />
+          </p>
+          <p className="welcomeText">Welcome to Azure Cosmos DB</p>
+          {isConnectionStringVisible ? (
+            <form id="connectWithConnectionString">
+              <p className="connectExplorerContent connectStringText">Connect to your account with connection string</p>
+              <p className="connectExplorerContent">
+                <input className="inputToken" type="text" required placeholder="Please enter a connection string" />
+                <span className="errorDetailsInfoTooltip" style={{ display: "none" }}>
+                  <img className="errorImg" src="images/error.svg" alt="Error notification" />
+                  <span className="errorDetails" />
+                </span>
+              </p>
+              <p className="connectExplorerContent">
+                <input className="filterbtnstyle" type="submit" value="Connect" />
+              </p>
+              <p className="switchConnectTypeText" onClick={() => instance.loginPopup()}>
+                Sign In with Azure Account
+              </p>
+            </form>
+          ) : (
+            <div id="connectWithAad">
+              <input className="filterbtnstyle" type="button" value="Sign In" onClick={() => instance.loginPopup()} />
+              <p
+                className="switchConnectTypeText"
+                onClick={() => {
+                  showConnectionString();
+                }}
+              >
+                Connect to your account with connection string
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};