Added more Self Serve functionalities (#401)

* 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

* added toggle, visibility, text display,commandbar

* added sqlx example

* added onRefrssh

* formatting changes

* rmoved radioswitch display

* updated smartui tests

* Added more tests

* onSubmit -> onSave

* Resolved PR comments

src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { shallow } from "enzyme";
-import { SmartUiComponent, SmartUiDescriptor, UiType } from "./SmartUiComponent";
+import { SmartUiComponent, SmartUiDescriptor } from "./SmartUiComponent";
+import { NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes";
 
 describe("SmartUiComponent", () => {
   const exampleData: SmartUiDescriptor = {
@@ -14,6 +15,20 @@ describe("SmartUiComponent", () => {
         },
       },
       children: [
+        {
+          id: "description",
+          input: {
+            dataFieldName: "description",
+            type: "string",
+            description: {
+              text: "this is an example description text.",
+              link: {
+                href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
+                text: "Click here for more information.",
+              },
+            },
+          },
+        },
         {
           id: "throughput",
           input: {
@@ -24,7 +39,7 @@ describe("SmartUiComponent", () => {
             max: 500,
             step: 10,
             defaultValue: 400,
-            uiType: UiType.Spinner,
+            uiType: NumberUiType.Spinner,
           },
         },
         {
@@ -37,7 +52,7 @@ describe("SmartUiComponent", () => {
             max: 500,
             step: 10,
             defaultValue: 400,
-            uiType: UiType.Slider,
+            uiType: NumberUiType.Slider,
           },
         },
         {
@@ -50,7 +65,7 @@ describe("SmartUiComponent", () => {
             max: 500,
             step: 10,
             defaultValue: 400,
-            uiType: UiType.Spinner,
+            uiType: NumberUiType.Spinner,
             errorMessage: "label, truelabel and falselabel are required for boolean input 'throughput3'",
           },
         },
@@ -91,11 +106,58 @@ describe("SmartUiComponent", () => {
     },
   };
 
-  it("should render", async () => {
+  it("should render and honor input's hidden, disabled state", async () => {
+    const currentValues = new Map<string, SmartUiInput>();
     const wrapper = shallow(
-      <SmartUiComponent descriptor={exampleData} currentValues={new Map()} onInputChange={undefined} />
+      <SmartUiComponent
+        disabled={false}
+        descriptor={exampleData}
+        currentValues={currentValues}
+        onInputChange={jest.fn()}
+        onError={() => {
+          return;
+        }}
+      />
     );
     await new Promise((resolve) => setTimeout(resolve, 0));
     expect(wrapper).toMatchSnapshot();
+    expect(wrapper.exists("#containerId-textField-input")).toBeTruthy();
+
+    currentValues.set("containerId", { value: "container1", hidden: true });
+    wrapper.setProps({ currentValues });
+    wrapper.update();
+    expect(wrapper.exists("#containerId-textField-input")).toBeFalsy();
+
+    currentValues.set("containerId", { value: "container1", hidden: false, disabled: true });
+    wrapper.setProps({ currentValues });
+    wrapper.update();
+    const containerIdTextField = wrapper.find("#containerId-textField-input");
+    expect(containerIdTextField.props().disabled).toBeTruthy();
+  });
+
+  it("disable all inputs", async () => {
+    const wrapper = shallow(
+      <SmartUiComponent
+        disabled={true}
+        descriptor={exampleData}
+        currentValues={new Map()}
+        onInputChange={jest.fn()}
+        onError={() => {
+          return;
+        }}
+      />
+    );
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(wrapper).toMatchSnapshot();
+    const throughputSpinner = wrapper.find("#throughput-spinner-input");
+    expect(throughputSpinner.props().disabled).toBeTruthy();
+    const throughput2Slider = wrapper.find("#throughput2-slider-input").childAt(0);
+    expect(throughput2Slider.props().disabled).toBeTruthy();
+    const containerIdTextField = wrapper.find("#containerId-textField-input");
+    expect(containerIdTextField.props().disabled).toBeTruthy();
+    const analyticalStoreToggle = wrapper.find("#analyticalStore-toggle-input");
+    expect(analyticalStoreToggle.props().disabled).toBeTruthy();
+    const databaseDropdown = wrapper.find("#database-dropdown-input");
+    expect(databaseDropdown.props().disabled).toBeTruthy();
   });
 });