added recursion and inition decorators

package-lock.json

@@ -6359,7 +6359,6 @@
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
           "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-          "dev": true,
           "requires": {
             "base64-js": "^1.3.1",
             "ieee754": "^1.1.13"
@@ -14691,6 +14690,14 @@
       "requires": {
         "nan": "2.14.1",
         "prebuild-install": "5.3.3"
+      },
+      "dependencies": {
+        "nan": {
+          "version": "2.14.1",
+          "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
+          "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
+          "optional": true
+        }
       }
     },
     "killable": {
@@ -18094,6 +18101,11 @@
       "resolved": "https://registry.npmjs.org/redux-observable/-/redux-observable-2.0.0-alpha.0.tgz",
       "integrity": "sha512-w0RsVGprIFiYi1AhFCOATiv3ld2AtuobvbcVsLvX19p8eAwLowWl2OrKYcCq/QEeEpmSHTXutXfVfcBnzaWmdw=="
     },
+    "reflect-metadata": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
+      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg=="
+    },
     "reflect.ownkeys": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
@@ -20134,7 +20146,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
       "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
-      "dev": true,
       "requires": {
         "chownr": "^1.1.1",
         "mkdirp-classic": "^0.5.2",

package.json

@@ -6,8 +6,8 @@
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
     "@azure/cosmos": "3.9.0",
-    "@azure/identity": "1.1.0",
     "@azure/cosmos-language-service": "0.0.5",
+    "@azure/identity": "1.1.0",
     "@jupyterlab/services": "6.0.0-rc.2",
     "@jupyterlab/terminal": "3.0.0-rc.2",
     "@microsoft/applicationinsights-web": "2.5.9",
@@ -85,6 +85,7 @@
     "react-notification-system": "0.2.17",
     "react-redux": "7.1.3",
     "redux": "4.0.4",
+    "reflect-metadata": "0.1.13",
     "rx-jupyter": "5.5.12",
     "rxjs": "6.6.3",
     "styled-components": "4.3.2",

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}`);
   }

tsconfig.json

@@ -12,6 +12,8 @@
     "downlevelIteration": true,
     "module": "esnext",
     "target": "es5",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
     "lib": ["es5", "es6", "dom", "webworker.importscripts"],
     "jsx": "react",
     "moduleResolution": "node",