added recursion and inition decorators

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -45,6 +45,7 @@ import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readM
 import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import { isEmpty } from "underscore";
+import { SelfServeCmponent as SelfServeComponent } from "./SettingsSubComponents/SelfServe/SelfServe";
 
 interface SettingsV2TabInfo {
   tab: SettingsV2TabTypes;
@@ -899,6 +900,12 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     };
 
     const tabs: SettingsV2TabInfo[] = [];
+    
+    tabs.push({
+      tab: SettingsV2TabTypes.SelfServe,
+      content: <SelfServeComponent propertyNames={['prop1', 'prop2']}/>
+    })
+
     if (!hasDatabaseSharedThroughput(this.collection) && this.collection.offer()) {
       tabs.push({
         tab: SettingsV2TabTypes.ScaleTab,
@@ -968,4 +975,4 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       </div>
     );
   }
-}
+}

src/Explorer/Controls/Settings/SettingsSubComponents/SelfServe/SelfServe.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { Descriptor, InputType, SmartUiComponent } from "../../../SmartUi/SmartUiComponent";
+import { SqlX } from "./SelfServeTypes";
+
+interface SelfServeComponentProps {
+    propertyNames: string[]
+}
+
+export class SelfServeCmponent extends React.Component<SelfServeComponentProps> {
+
+    private properties: any = {}
+
+    constructor(props: SelfServeComponentProps) {
+        super(props)
+        let stringer = "{"
+        for (var i =0; i < props.propertyNames.length; i++) {
+            stringer += `"${props.propertyNames[i]}":null,`
+        }
+        stringer = stringer.substring(0, stringer.length-1)
+        console.log(stringer)
+        stringer += "}"
+        this.properties = JSON.parse(stringer)
+    }
+
+
+      private selfServeData: Descriptor = {
+        root: {
+          id: "root",
+          info: {
+            message: "Start at $24/mo per database",
+            link: {
+              href: "https://aka.ms/azure-cosmos-db-pricing",
+              text: "More Details"
+            }
+          },
+          children: [
+            {
+              id: "instanceCount",
+              input: {
+                label: "Instance Count",
+                dataFieldName: "instanceCount",
+                type: "number",
+                min: 1,
+                max: 5,
+                step: 1,
+                defaultValue: 1,
+                inputType: "slider"
+              }
+            },
+            {
+              id: "instanceSize",
+              input: {
+                label: "Instance Size",
+                dataFieldName: "instanceSize",
+                type: "enum",
+                choices: [
+                  { label: "1Core4Gb", key: "1Core4Gb", value: "1Core4Gb" },
+                  { label: "2Core8Gb", key: "2Core8Gb", value: "2Core8Gb" },
+                  { label: "4Core16Gb", key: "4Core16Gb", value: "4Core16Gb" }
+                ],
+                defaultKey: "1Core4Gb"
+              }
+            }
+          ]
+        }
+      };
+
+
+
+      private exampleCallbacks = (newValues: Map<string, InputType>): void => {
+        for (var i =0; i < this.props.propertyNames.length; i++) {
+            const prop = this.props.propertyNames[i]
+            const newVal = newValues.get(prop)
+            if (newVal) {
+                this.properties[`${prop}`] = newVal
+            }
+        }
+
+        console.log(this.properties)
+      };
+    
+    public render() : JSX.Element {
+        console.log('keys: ', SqlX.toJson());
+
+        return <SmartUiComponent descriptor={this.selfServeData} onChange={this.exampleCallbacks} />
+    }
+}

src/Explorer/Controls/Settings/SettingsSubComponents/SelfServe/SelfServeTypes.tsx

@@ -0,0 +1,55 @@
+
+import "reflect-metadata";
+
+const SqlXPropertiesKey = 'SqlXPropertiesKey';
+
+const modifyParentProperty = (context: any, parentProperty: string, property: string | symbol) : any => {
+    if (parentProperty in context) {
+        context[parentProperty][property] ={}
+        return context
+    } else {
+        const keys = Object.keys(context)
+        for(var i =0; i< keys.length; i++) {
+            context[keys[i]] = modifyParentProperty(context[keys[i]], parentProperty, property)
+            return context
+        }
+    }
+    return context
+}
+
+export const Property = (parentProperty?: string): PropertyDecorator => {
+    return (target, property) => {
+      let context = Reflect.getMetadata(SqlXPropertiesKey, target)
+      if(!context) {
+        context = {}
+      }
+      if (parentProperty) {
+          const prevContextValue  = JSON.stringify(context) 
+          context = modifyParentProperty(context, parentProperty, property)
+          if (JSON.stringify(context) === prevContextValue) {
+              throw new Error(`${parentProperty} not defined. declare it before the child property with @Property decorator.`)
+          }
+      } else {
+          context[property] = {}
+      }
+      console.log("context:" + JSON.stringify(context))
+      Reflect.defineMetadata(SqlXPropertiesKey, context, target)
+    };
+};
+
+export class SqlX {
+    @Property()
+    static prop1: any;
+
+    @Property()
+    static prop2: any;
+
+    @Property("prop1")
+    static prop11: any;
+
+
+    public static toJson = () : any => {
+        return Reflect.getMetadata(SqlXPropertiesKey, SqlX)
+    }
+}
+

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -44,7 +44,8 @@ export enum SettingsV2TabTypes {
   ScaleTab,
   ConflictResolutionTab,
   SubSettingsTab,
-  IndexingPolicyTab
+  IndexingPolicyTab,
+  SelfServe
 }
 
 export interface IsComponentDirtyResult {
@@ -146,6 +147,8 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
       return "Settings";
     case SettingsV2TabTypes.IndexingPolicyTab:
       return "Indexing Policy";
+    case SettingsV2TabTypes.SelfServe:
+      return "SelfServe";
     default:
       throw new Error(`Unknown tab ${tab}`);
   }