Added the Self Serve Data Model (#367)

* added recursion and inition decorators

* working version

* added todo comment and removed console.log

* Added Recursive add

* removed type requirement

* proper resolution of promises

* added custom element and base class

* Made selfServe standalone page

* Added custom renderer as async type

* Added overall defaults

* added inital open from data explorer

* removed landingpage

* added feature for self serve type

* renamed sqlx->example and added invalid type

* Added comments for Example

* removed unnecessary changes

* Resolved PR comments

Added tests
Moved onSubmt and initialize inside base class
Moved testExplorer to separate folder
made fields of SelfServe Class non static

* fixed lint errors

* fixed compilation errors

* Removed reactbinding changes

* renamed dropdown -> choice

* Added SelfServeComponent

* Addressed PR comments

* merged master

* added selfservetype.none for emulator and hosted experience

* fixed formatting errors

* Removed "any" type

* undid package.json changes

src/Main.tsx

@@ -81,6 +81,7 @@ import { DefaultExperienceUtility } from "./Shared/DefaultExperienceUtility";
 import { parseResourceTokenConnectionString } from "./Platform/Hosted/Helpers/ResourceTokenUtils";
 import { AccountKind, DefaultAccountExperience, ServerIds } from "./Common/Constants";
 import { listKeys } from "./Utils/arm/generatedClients/2020-04-01/databaseAccounts";
+import { SelfServeType } from "./SelfServe/SelfServeUtils";
 
 const App: React.FunctionComponent = () => {
   useEffect(() => {
@@ -89,6 +90,7 @@ const App: React.FunctionComponent = () => {
       if (config.platform === Platform.Hosted) {
         const win = (window as unknown) as HostedExplorerChildFrame;
         explorer = new Explorer();
+        explorer.selfServeType(SelfServeType.none);
         if (win.hostedConfig.authType === AuthType.EncryptedToken) {
           // TODO: Remove window.authType
           window.authType = AuthType.EncryptedToken;
@@ -236,6 +238,7 @@ const App: React.FunctionComponent = () => {
       } else if (config.platform === Platform.Emulator) {
         window.authType = AuthType.MasterKey;
         explorer = new Explorer();
+        explorer.selfServeType(SelfServeType.none);
         explorer.databaseAccount(emulatorAccount);
         explorer.isAccountReady(true);
       } else if (config.platform === Platform.Portal) {
@@ -261,7 +264,17 @@ const App: React.FunctionComponent = () => {
 
   return (
     <div className="flexContainer">
-      <div id="divExplorer" className="flexContainer hideOverflows" style={{ display: "none" }}>
+      <div
+        id="divSelfServe"
+        className="flexContainer"
+        data-bind="visible: selfServeType() && selfServeType() !== 'none', react: selfServeComponentAdapter"
+      ></div>
+      <div
+        id="divExplorer"
+        data-bind="if: selfServeType() === 'none'"
+        className="flexContainer hideOverflows"
+        style={{ display: "none" }}
+      >
         {/* Main Command Bar - Start */}
         <div data-bind="react: commandBarComponentAdapter" />
         {/* Main Command Bar - End */}
@@ -453,17 +466,21 @@ const App: React.FunctionComponent = () => {
         />
       </div>
       {/* Global loader - Start */}
+
       <div className="splashLoaderContainer" data-bind="visible: isRefreshingExplorer">
         <div className="splashLoaderContentContainer">
-          <p className="connectExplorerContent">
-            <img src={hdeConnectImage} alt="Azure Cosmos DB" />
-          </p>
-          <p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
-            Welcome to Azure Cosmos DB
-          </p>
-          <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
-            Connecting...
-          </p>
+          <div data-bind="visible: selfServeType() === undefined, react: selfServeLoadingComponentAdapter"></div>
+          <div data-bind="if: selfServeType() === 'none'" style={{ display: "none" }}>
+            <p className="connectExplorerContent">
+              <img src={hdeConnectImage} alt="Azure Cosmos DB" />
+            </p>
+            <p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
+              Welcome to Azure Cosmos DB
+            </p>
+            <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
+              Connecting...
+            </p>
+          </div>
         </div>
       </div>
       {/* Global loader - End */}