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/SelfServe/SelfServeComponentAdapter.tsx

@@ -0,0 +1,51 @@
+/**
+ * This adapter is responsible to render the React component
+ * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
+ * and update any knockout observables passed from the parent.
+ */
+import * as ko from "knockout";
+import * as React from "react";
+import { ReactAdapter } from "../Bindings/ReactBindingHandler";
+import Explorer from "../Explorer/Explorer";
+import { SelfServeDescriptor, SelfServeComponent } from "./SelfServeComponent";
+import { SelfServeType } from "./SelfServeUtils";
+
+export class SelfServeComponentAdapter implements ReactAdapter {
+  public parameters: ko.Observable<SelfServeDescriptor>;
+  public container: Explorer;
+
+  constructor(container: Explorer) {
+    this.container = container;
+    this.parameters = ko.observable(undefined);
+    this.container.selfServeType.subscribe(() => {
+      this.triggerRender();
+    });
+  }
+
+  public static getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDescriptor> => {
+    switch (selfServeType) {
+      case SelfServeType.example: {
+        const SelfServeExample = await import(/* webpackChunkName: "SelfServeExample" */ "./Example/SelfServeExample");
+        return new SelfServeExample.default().toSelfServeDescriptor();
+      }
+      default:
+        return undefined;
+    }
+  };
+
+  public renderComponent(): JSX.Element {
+    if (this.container.selfServeType() === SelfServeType.invalid) {
+      return <h1>Invalid self serve type!</h1>;
+    }
+    const smartUiDescriptor = this.parameters();
+    return smartUiDescriptor ? <SelfServeComponent descriptor={smartUiDescriptor} /> : <></>;
+  }
+
+  private triggerRender() {
+    window.requestAnimationFrame(async () => {
+      const selfServeType = this.container.selfServeType();
+      const smartUiDescriptor = await SelfServeComponentAdapter.getDescriptor(selfServeType);
+      this.parameters(smartUiDescriptor);
+    });
+  }
+}