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/ClassDecorators.tsx

@@ -0,0 +1,14 @@
+import { Info } from "../Explorer/Controls/SmartUi/SmartUiComponent";
+import { addPropertyToMap, buildSmartUiDescriptor } from "./SelfServeUtils";
+
+export const IsDisplayable = (): ClassDecorator => {
+  return target => {
+    buildSmartUiDescriptor(target.name, target.prototype);
+  };
+};
+
+export const ClassInfo = (info: (() => Promise<Info>) | Info): ClassDecorator => {
+  return target => {
+    addPropertyToMap(target.prototype, "root", target.name, "info", info);
+  };
+};

src/SelfServe/Example/SelfServeExample.tsx

@@ -0,0 +1,167 @@
+import { PropertyInfo, OnChange, Values } from "../PropertyDecorators";
+import { ClassInfo, IsDisplayable } from "../ClassDecorators";
+import { SelfServeBaseClass } from "../SelfServeUtils";
+import { ChoiceItem, Info, InputType, UiType } from "../../Explorer/Controls/SmartUi/SmartUiComponent";
+import { SessionStorageUtility } from "../../Shared/StorageUtility";
+
+export enum Regions {
+  NorthCentralUS = "NCUS",
+  WestUS = "WUS",
+  EastUS2 = "EUS2"
+}
+
+export const regionDropdownItems: ChoiceItem[] = [
+  { label: "North Central US", key: Regions.NorthCentralUS },
+  { label: "West US", key: Regions.WestUS },
+  { label: "East US 2", key: Regions.EastUS2 }
+];
+
+export const selfServeExampleInfo: Info = {
+  message: "This is a self serve class"
+};
+
+export const regionDropdownInfo: Info = {
+  message: "More regions can be added in the future."
+};
+
+const onDbThroughputChange = (currentState: Map<string, InputType>, newValue: InputType): Map<string, InputType> => {
+  currentState.set("dbThroughput", newValue);
+  currentState.set("collectionThroughput", newValue);
+  return currentState;
+};
+
+const initializeMaxThroughput = async (): Promise<number> => {
+  return 10000;
+};
+
+/*
+  This is an example self serve class that auto generates UI components for your feature.
+
+  Each self serve class
+    - Needs to extends the SelfServeBase class.
+    - Needs to have the @IsDisplayable() decorator to tell the compiler that UI needs to be generated from this class.
+    - Needs to define an onSubmit() function, a callback for when the submit button is clicked.
+    - Needs to define an initialize() function, to set default values for the inputs.
+
+  You can test this self serve UI by using the featureflag '?feature.selfServeType=example'
+  and plumb in similar feature flags for your own self serve class.
+*/
+
+/*
+  @IsDisplayable()
+    - role: Indicates to the compiler that UI should be generated from this class.
+*/
+@IsDisplayable()
+/*
+  @ClassInfo()
+    - optional
+    - input: Info | () => Promise<Info>
+    - role: Display an Info bar as the first element of the UI.
+*/
+@ClassInfo(selfServeExampleInfo)
+export default class SelfServeExample extends SelfServeBaseClass {
+  /*
+  onSubmit()
+    - input: (currentValues: Map<string, InputType>) => Promise<void>
+    - role: Callback that is triggerred when the submit button is clicked. You should perform your rest API
+            calls here using the data from the different inputs passed as a Map to this callback function.
+
+            In this example, the onSubmit callback simply sets the value for keys corresponding to the field name
+            in the SessionStorage.
+  */
+  public onSubmit = async (currentValues: Map<string, InputType>): Promise<void> => {
+    SessionStorageUtility.setEntry("regions", currentValues.get("regions")?.toString());
+    SessionStorageUtility.setEntry("enableLogging", currentValues.get("enableLogging")?.toString());
+    SessionStorageUtility.setEntry("accountName", currentValues.get("accountName")?.toString());
+    SessionStorageUtility.setEntry("dbThroughput", currentValues.get("dbThroughput")?.toString());
+    SessionStorageUtility.setEntry("collectionThroughput", currentValues.get("collectionThroughput")?.toString());
+  };
+
+  /*
+  initialize()
+    - input: () => Promise<Map<string, InputType>>
+    - role: Set default values for the properties of this class.
+
+            The properties of this class (namely regions, enableLogging, accountName, dbThroughput, collectionThroughput),
+            having the @Values decorator, will each correspond to an UI element. Their values can be of 'InputType'. Their 
+            defaults can be set by setting values in a Map corresponding to the field's name.
+
+            Typically, you can make rest calls in the async initialize function, to fetch the initial values for
+            these fields. This is called after the onSubmit callback, to reinitialize the defaults.
+
+            In this example, the initialize function simply reads the SessionStorage to fetch the default values
+            for these fields. These are then set when the changes are submitted.
+  */
+  public initialize = async (): Promise<Map<string, InputType>> => {
+    const defaults = new Map<string, InputType>();
+    defaults.set("regions", SessionStorageUtility.getEntry("regions"));
+    defaults.set("enableLogging", SessionStorageUtility.getEntry("enableLogging") === "true");
+    const stringInput = SessionStorageUtility.getEntry("accountName");
+    defaults.set("accountName", stringInput ? stringInput : "");
+    const numberSliderInput = parseInt(SessionStorageUtility.getEntry("dbThroughput"));
+    defaults.set("dbThroughput", isNaN(numberSliderInput) ? 1 : numberSliderInput);
+    const numberSpinnerInput = parseInt(SessionStorageUtility.getEntry("collectionThroughput"));
+    defaults.set("collectionThroughput", isNaN(numberSpinnerInput) ? 1 : numberSpinnerInput);
+    return defaults;
+  };
+
+  /*
+  @PropertyInfo()
+    - optional
+    - input: Info | () => Promise<Info>
+    - role: Display an Info bar above the UI element for this property.
+  */
+  @PropertyInfo(regionDropdownInfo)
+
+  /*
+  @Values() :
+    - input: NumberInputOptions | StringInputOptions | BooleanInputOptions | ChoiceInputOptions
+    - role: Specifies the required options to display the property as TextBox, Number Spinner/Slider, Radio buton or Dropdown.
+  */
+  @Values({ label: "Regions", choices: regionDropdownItems })
+  regions: ChoiceItem;
+
+  @Values({
+    label: "Enable Logging",
+    trueLabel: "Enable",
+    falseLabel: "Disable"
+  })
+  enableLogging: boolean;
+
+  @Values({
+    label: "Account Name",
+    placeholder: "Enter the account name"
+  })
+  accountName: string;
+
+  /*
+  @OnChange()
+    - optional
+    - input: (currentValues: Map<string, InputType>, newValue: InputType) => Map<string, InputType>
+    - role: Takes a Map of current values and the newValue for this property as inputs. This is called when a property
+            changes its value in the UI. This can be used to change other input values based on some other input.
+
+            The new Map of propertyName -> value is returned.
+
+            In this example, the onDbThroughputChange function sets the collectionThroughput to the same value as the dbThroughput
+            when the slider in moved in the UI.
+  */
+  @OnChange(onDbThroughputChange)
+  @Values({
+    label: "Database Throughput",
+    min: 400,
+    max: initializeMaxThroughput,
+    step: 100,
+    uiType: UiType.Slider
+  })
+  dbThroughput: number;
+
+  @Values({
+    label: "Collection Throughput",
+    min: 400,
+    max: initializeMaxThroughput,
+    step: 100,
+    uiType: UiType.Spinner
+  })
+  collectionThroughput: number;
+}

src/SelfServe/PropertyDecorators.tsx

@@ -0,0 +1,101 @@
+import { ChoiceItem, Info, InputType, UiType } from "../Explorer/Controls/SmartUi/SmartUiComponent";
+import { addPropertyToMap, CommonInputTypes } from "./SelfServeUtils";
+
+type ValueOf<T> = T[keyof T];
+interface Decorator {
+  name: keyof CommonInputTypes;
+  value: ValueOf<CommonInputTypes>;
+}
+
+interface InputOptionsBase {
+  label: string;
+}
+
+export interface NumberInputOptions extends InputOptionsBase {
+  min: (() => Promise<number>) | number;
+  max: (() => Promise<number>) | number;
+  step: (() => Promise<number>) | number;
+  uiType: UiType;
+}
+
+export interface StringInputOptions extends InputOptionsBase {
+  placeholder?: (() => Promise<string>) | string;
+}
+
+export interface BooleanInputOptions extends InputOptionsBase {
+  trueLabel: (() => Promise<string>) | string;
+  falseLabel: (() => Promise<string>) | string;
+}
+
+export interface ChoiceInputOptions extends InputOptionsBase {
+  choices: (() => Promise<ChoiceItem[]>) | ChoiceItem[];
+}
+
+type InputOptions = NumberInputOptions | StringInputOptions | BooleanInputOptions | ChoiceInputOptions;
+
+const isNumberInputOptions = (inputOptions: InputOptions): inputOptions is NumberInputOptions => {
+  return "min" in inputOptions;
+};
+
+const isBooleanInputOptions = (inputOptions: InputOptions): inputOptions is BooleanInputOptions => {
+  return "trueLabel" in inputOptions;
+};
+
+const isChoiceInputOptions = (inputOptions: InputOptions): inputOptions is ChoiceInputOptions => {
+  return "choices" in inputOptions;
+};
+
+const addToMap = (...decorators: Decorator[]): PropertyDecorator => {
+  return (target, property) => {
+    let className = target.constructor.name;
+    const propertyName = property.toString();
+    if (className === "Function") {
+      //eslint-disable-next-line @typescript-eslint/ban-types
+      className = (target as Function).name;
+      throw new Error(`Property '${propertyName}' in class '${className}'should be not be static.`);
+    }
+
+    const propertyType = (Reflect.getMetadata("design:type", target, property)?.name as string)?.toLowerCase();
+    addPropertyToMap(target, propertyName, className, "type", propertyType);
+    addPropertyToMap(target, propertyName, className, "dataFieldName", propertyName);
+
+    decorators.map((decorator: Decorator) =>
+      addPropertyToMap(target, propertyName, className, decorator.name, decorator.value)
+    );
+  };
+};
+
+export const OnChange = (
+  onChange: (currentState: Map<string, InputType>, newValue: InputType) => Map<string, InputType>
+): PropertyDecorator => {
+  return addToMap({ name: "onChange", value: onChange });
+};
+
+export const PropertyInfo = (info: (() => Promise<Info>) | Info): PropertyDecorator => {
+  return addToMap({ name: "info", value: info });
+};
+
+export const Values = (inputOptions: InputOptions): PropertyDecorator => {
+  if (isNumberInputOptions(inputOptions)) {
+    return addToMap(
+      { name: "label", value: inputOptions.label },
+      { name: "min", value: inputOptions.min },
+      { name: "max", value: inputOptions.max },
+      { name: "step", value: inputOptions.step },
+      { name: "uiType", value: inputOptions.uiType }
+    );
+  } else if (isBooleanInputOptions(inputOptions)) {
+    return addToMap(
+      { name: "label", value: inputOptions.label },
+      { name: "trueLabel", value: inputOptions.trueLabel },
+      { name: "falseLabel", value: inputOptions.falseLabel }
+    );
+  } else if (isChoiceInputOptions(inputOptions)) {
+    return addToMap({ name: "label", value: inputOptions.label }, { name: "choices", value: inputOptions.choices });
+  } else {
+    return addToMap(
+      { name: "label", value: inputOptions.label },
+      { name: "placeholder", value: inputOptions.placeholder }
+    );
+  }
+};

src/SelfServe/SelfServeComponent.test.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { SelfServeDescriptor, SelfServeComponent, SelfServeComponentState } from "./SelfServeComponent";
+import { InputType, UiType } from "../Explorer/Controls/SmartUi/SmartUiComponent";
+
+describe("SelfServeComponent", () => {
+  const defaultValues = new Map<string, InputType>([
+    ["throughput", "450"],
+    ["analyticalStore", "false"],
+    ["database", "db2"]
+  ]);
+  const initializeMock = jest.fn(async () => defaultValues);
+  const onSubmitMock = jest.fn(async () => {
+    return;
+  });
+
+  const exampleData: SelfServeDescriptor = {
+    initialize: initializeMock,
+    onSubmit: onSubmitMock,
+    inputNames: ["throughput", "containerId", "analyticalStore", "database"],
+    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: "throughput",
+          input: {
+            label: "Throughput (input)",
+            dataFieldName: "throughput",
+            type: "number",
+            min: 400,
+            max: 500,
+            step: 10,
+            defaultValue: 400,
+            uiType: UiType.Spinner
+          }
+        },
+        {
+          id: "containerId",
+          input: {
+            label: "Container id",
+            dataFieldName: "containerId",
+            type: "string"
+          }
+        },
+        {
+          id: "analyticalStore",
+          input: {
+            label: "Analytical Store",
+            trueLabel: "Enabled",
+            falseLabel: "Disabled",
+            defaultValue: true,
+            dataFieldName: "analyticalStore",
+            type: "boolean"
+          }
+        },
+        {
+          id: "database",
+          input: {
+            label: "Database",
+            dataFieldName: "database",
+            type: "object",
+            choices: [
+              { label: "Database 1", key: "db1" },
+              { label: "Database 2", key: "db2" },
+              { label: "Database 3", key: "db3" }
+            ],
+            defaultKey: "db2"
+          }
+        }
+      ]
+    }
+  };
+
+  const verifyDefaultsSet = (currentValues: Map<string, InputType>): void => {
+    for (const key of currentValues.keys()) {
+      if (defaultValues.has(key)) {
+        expect(defaultValues.get(key)).toEqual(currentValues.get(key));
+      }
+    }
+  };
+
+  it("should render", async () => {
+    const wrapper = shallow(<SelfServeComponent descriptor={exampleData} />);
+    await new Promise(resolve => setTimeout(resolve, 0));
+    expect(wrapper).toMatchSnapshot();
+
+    // initialize() should be called and defaults should be set when component is mounted
+    expect(initializeMock).toHaveBeenCalled();
+    const state = wrapper.state() as SelfServeComponentState;
+    verifyDefaultsSet(state.currentValues);
+
+    // onSubmit() must be called when submit button is clicked
+    const submitButton = wrapper.find("#submitButton");
+    submitButton.simulate("click");
+    expect(onSubmitMock).toHaveBeenCalled();
+  });
+});

src/SelfServe/SelfServeComponent.tsx

@@ -0,0 +1,218 @@
+import React from "react";
+import { IStackTokens, PrimaryButton, Spinner, SpinnerSize, Stack } from "office-ui-fabric-react";
+import {
+  ChoiceItem,
+  InputType,
+  InputTypeValue,
+  SmartUiComponent,
+  UiType,
+  SmartUiDescriptor,
+  Info
+} from "../Explorer/Controls/SmartUi/SmartUiComponent";
+
+export interface BaseInput {
+  label: (() => Promise<string>) | string;
+  dataFieldName: string;
+  type: InputTypeValue;
+  onChange?: (currentState: Map<string, InputType>, newValue: InputType) => Map<string, InputType>;
+  placeholder?: (() => Promise<string>) | string;
+  errorMessage?: string;
+}
+
+export interface NumberInput extends BaseInput {
+  min: (() => Promise<number>) | number;
+  max: (() => Promise<number>) | number;
+  step: (() => Promise<number>) | number;
+  defaultValue?: number;
+  uiType: UiType;
+}
+
+export interface BooleanInput extends BaseInput {
+  trueLabel: (() => Promise<string>) | string;
+  falseLabel: (() => Promise<string>) | string;
+  defaultValue?: boolean;
+}
+
+export interface StringInput extends BaseInput {
+  defaultValue?: string;
+}
+
+export interface ChoiceInput extends BaseInput {
+  choices: (() => Promise<ChoiceItem[]>) | ChoiceItem[];
+  defaultKey?: string;
+}
+
+export interface Node {
+  id: string;
+  info?: (() => Promise<Info>) | Info;
+  input?: AnyInput;
+  children?: Node[];
+}
+
+export interface SelfServeDescriptor {
+  root: Node;
+  initialize?: () => Promise<Map<string, InputType>>;
+  onSubmit?: (currentValues: Map<string, InputType>) => Promise<void>;
+  inputNames?: string[];
+}
+
+export type AnyInput = NumberInput | BooleanInput | StringInput | ChoiceInput;
+
+export interface SelfServeComponentProps {
+  descriptor: SelfServeDescriptor;
+}
+
+export interface SelfServeComponentState {
+  root: SelfServeDescriptor;
+  currentValues: Map<string, InputType>;
+  baselineValues: Map<string, InputType>;
+  isRefreshing: boolean;
+}
+
+export class SelfServeComponent extends React.Component<SelfServeComponentProps, SelfServeComponentState> {
+  componentDidMount(): void {
+    this.initializeSmartUiComponent();
+  }
+
+  constructor(props: SelfServeComponentProps) {
+    super(props);
+    this.state = {
+      root: this.props.descriptor,
+      currentValues: new Map(),
+      baselineValues: new Map(),
+      isRefreshing: false
+    };
+  }
+
+  private initializeSmartUiComponent = async (): Promise<void> => {
+    this.setState({ isRefreshing: true });
+    await this.initializeSmartUiNode(this.props.descriptor.root);
+    await this.setDefaults();
+    this.setState({ isRefreshing: false });
+  };
+
+  private setDefaults = async (): Promise<void> => {
+    this.setState({ isRefreshing: true });
+    let { currentValues, baselineValues } = this.state;
+
+    const initialValues = await this.props.descriptor.initialize();
+    for (const key of initialValues.keys()) {
+      if (this.props.descriptor.inputNames.indexOf(key) === -1) {
+        this.setState({ isRefreshing: false });
+        throw new Error(`${key} is not an input property of this class.`);
+      }
+
+      currentValues = currentValues.set(key, initialValues.get(key));
+      baselineValues = baselineValues.set(key, initialValues.get(key));
+    }
+    this.setState({ currentValues, baselineValues, isRefreshing: false });
+  };
+
+  public discard = (): void => {
+    let { currentValues } = this.state;
+    const { baselineValues } = this.state;
+    for (const key of baselineValues.keys()) {
+      currentValues = currentValues.set(key, baselineValues.get(key));
+    }
+    this.setState({ currentValues });
+  };
+
+  private initializeSmartUiNode = async (currentNode: Node): Promise<void> => {
+    currentNode.info = await this.getResolvedValue(currentNode.info);
+
+    if (currentNode.input) {
+      currentNode.input = await this.getResolvedInput(currentNode.input);
+    }
+
+    const promises = currentNode.children?.map(async (child: Node) => await this.initializeSmartUiNode(child));
+    if (promises) {
+      await Promise.all(promises);
+    }
+  };
+
+  private getResolvedInput = async (input: AnyInput): Promise<AnyInput> => {
+    input.label = await this.getResolvedValue(input.label);
+    input.placeholder = await this.getResolvedValue(input.placeholder);
+
+    switch (input.type) {
+      case "string": {
+        return input as StringInput;
+      }
+      case "number": {
+        const numberInput = input as NumberInput;
+        numberInput.min = await this.getResolvedValue(numberInput.min);
+        numberInput.max = await this.getResolvedValue(numberInput.max);
+        numberInput.step = await this.getResolvedValue(numberInput.step);
+        return numberInput;
+      }
+      case "boolean": {
+        const booleanInput = input as BooleanInput;
+        booleanInput.trueLabel = await this.getResolvedValue(booleanInput.trueLabel);
+        booleanInput.falseLabel = await this.getResolvedValue(booleanInput.falseLabel);
+        return booleanInput;
+      }
+      default: {
+        const choiceInput = input as ChoiceInput;
+        choiceInput.choices = await this.getResolvedValue(choiceInput.choices);
+        return choiceInput;
+      }
+    }
+  };
+
+  public async getResolvedValue<T>(value: T | (() => Promise<T>)): Promise<T> {
+    if (value instanceof Function) {
+      return value();
+    }
+    return value;
+  }
+
+  private onInputChange = (input: AnyInput, newValue: InputType) => {
+    if (input.onChange) {
+      const newValues = input.onChange(this.state.currentValues, newValue);
+      this.setState({ currentValues: newValues });
+    } else {
+      const dataFieldName = input.dataFieldName;
+      const { currentValues } = this.state;
+      currentValues.set(dataFieldName, newValue);
+      this.setState({ currentValues });
+    }
+  };
+
+  public render(): JSX.Element {
+    const containerStackTokens: IStackTokens = { childrenGap: 20 };
+    return !this.state.isRefreshing ? (
+      <div style={{ overflowX: "auto" }}>
+        <Stack tokens={containerStackTokens} styles={{ root: { width: 400, padding: 10 } }}>
+          <SmartUiComponent
+            descriptor={this.state.root as SmartUiDescriptor}
+            currentValues={this.state.currentValues}
+            onInputChange={this.onInputChange}
+          />
+
+          <Stack horizontal tokens={{ childrenGap: 10 }}>
+            <PrimaryButton
+              id="submitButton"
+              styles={{ root: { width: 100 } }}
+              text="submit"
+              onClick={async () => {
+                await this.props.descriptor.onSubmit(this.state.currentValues);
+                this.setDefaults();
+              }}
+            />
+            <PrimaryButton
+              id="discardButton"
+              styles={{ root: { width: 100 } }}
+              text="discard"
+              onClick={() => this.discard()}
+            />
+          </Stack>
+        </Stack>
+      </div>
+    ) : (
+      <Spinner
+        size={SpinnerSize.large}
+        styles={{ root: { textAlign: "center", justifyContent: "center", width: "100%", height: "100%" } }}
+      />
+    );
+  }
+}

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

src/SelfServe/SelfServeLoadingComponentAdapter.tsx

@@ -0,0 +1,25 @@
+/**
+ * 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 { Spinner, SpinnerSize } from "office-ui-fabric-react";
+import * as React from "react";
+import { ReactAdapter } from "../Bindings/ReactBindingHandler";
+
+export class SelfServeLoadingComponentAdapter implements ReactAdapter {
+  public parameters: ko.Observable<number>;
+
+  constructor() {
+    this.parameters = ko.observable(Date.now());
+  }
+
+  public renderComponent(): JSX.Element {
+    return <Spinner size={SpinnerSize.large} />;
+  }
+
+  private triggerRender() {
+    window.requestAnimationFrame(() => this.renderComponent());
+  }
+}

src/SelfServe/SelfServeUtils.test.tsx

@@ -0,0 +1,277 @@
+import {
+  CommonInputTypes,
+  mapToSmartUiDescriptor,
+  SelfServeBaseClass,
+  updateContextWithDecorator
+} from "./SelfServeUtils";
+import { InputType, UiType } from "./../Explorer/Controls/SmartUi/SmartUiComponent";
+
+describe("SelfServeUtils", () => {
+  it("initialize should be declared for self serve classes", () => {
+    class Test extends SelfServeBaseClass {
+      public onSubmit = async (): Promise<void> => {
+        return;
+      };
+      public initialize: () => Promise<Map<string, InputType>>;
+    }
+    expect(() => new Test().toSelfServeDescriptor()).toThrow("initialize() was not declared for the class 'Test'");
+  });
+
+  it("onSubmit should be declared for self serve classes", () => {
+    class Test extends SelfServeBaseClass {
+      public onSubmit: () => Promise<void>;
+      public initialize = async (): Promise<Map<string, InputType>> => {
+        return undefined;
+      };
+    }
+    expect(() => new Test().toSelfServeDescriptor()).toThrow("onSubmit() was not declared for the class 'Test'");
+  });
+
+  it("@SmartUi decorator must be present for self serve classes", () => {
+    class Test extends SelfServeBaseClass {
+      public onSubmit = async (): Promise<void> => {
+        return;
+      };
+      public initialize = async (): Promise<Map<string, InputType>> => {
+        return undefined;
+      };
+    }
+    expect(() => new Test().toSelfServeDescriptor()).toThrow(
+      "@SmartUi decorator was not declared for the class 'Test'"
+    );
+  });
+
+  it("updateContextWithDecorator", () => {
+    const context = new Map<string, CommonInputTypes>();
+    updateContextWithDecorator(context, "dbThroughput", "testClass", "max", 1);
+    updateContextWithDecorator(context, "dbThroughput", "testClass", "min", 2);
+    updateContextWithDecorator(context, "collThroughput", "testClass", "max", 5);
+    expect(context.size).toEqual(2);
+    expect(context.get("dbThroughput")).toEqual({ id: "dbThroughput", max: 1, min: 2 });
+    expect(context.get("collThroughput")).toEqual({ id: "collThroughput", max: 5 });
+  });
+
+  it("mapToSmartUiDescriptor", () => {
+    const context: Map<string, CommonInputTypes> = new Map([
+      [
+        "dbThroughput",
+        {
+          id: "dbThroughput",
+          dataFieldName: "dbThroughput",
+          type: "number",
+          label: "Database Throughput",
+          min: 1,
+          max: 5,
+          step: 1,
+          uiType: UiType.Slider
+        }
+      ],
+      [
+        "collThroughput",
+        {
+          id: "collThroughput",
+          dataFieldName: "collThroughput",
+          type: "number",
+          label: "Coll Throughput",
+          min: 1,
+          max: 5,
+          step: 1,
+          uiType: UiType.Spinner
+        }
+      ],
+      [
+        "invalidThroughput",
+        {
+          id: "invalidThroughput",
+          dataFieldName: "invalidThroughput",
+          type: "boolean",
+          label: "Invalid Coll Throughput",
+          min: 1,
+          max: 5,
+          step: 1,
+          uiType: UiType.Spinner,
+          errorMessage: "label, truelabel and falselabel are required for boolean input"
+        }
+      ],
+      [
+        "collName",
+        {
+          id: "collName",
+          dataFieldName: "collName",
+          type: "string",
+          label: "Coll Name",
+          placeholder: "placeholder text"
+        }
+      ],
+      [
+        "enableLogging",
+        {
+          id: "enableLogging",
+          dataFieldName: "enableLogging",
+          type: "boolean",
+          label: "Enable Logging",
+          trueLabel: "Enable",
+          falseLabel: "Disable"
+        }
+      ],
+      [
+        "invalidEnableLogging",
+        {
+          id: "invalidEnableLogging",
+          dataFieldName: "invalidEnableLogging",
+          type: "boolean",
+          label: "Invalid Enable Logging",
+          placeholder: "placeholder text"
+        }
+      ],
+      [
+        "regions",
+        {
+          id: "regions",
+          dataFieldName: "regions",
+          type: "object",
+          label: "Regions",
+          choices: [
+            { label: "South West US", key: "SWUS" },
+            { label: "North Central US", key: "NCUS" },
+            { label: "East US 2", key: "EUS2" }
+          ]
+        }
+      ],
+      [
+        "invalidRegions",
+        {
+          id: "invalidRegions",
+          dataFieldName: "invalidRegions",
+          type: "object",
+          label: "Invalid Regions",
+          placeholder: "placeholder text"
+        }
+      ]
+    ]);
+    const expectedDescriptor = {
+      root: {
+        id: "root",
+        children: [
+          {
+            id: "dbThroughput",
+            input: {
+              id: "dbThroughput",
+              dataFieldName: "dbThroughput",
+              type: "number",
+              label: "Database Throughput",
+              min: 1,
+              max: 5,
+              step: 1,
+              uiType: "Slider"
+            },
+            children: [] as Node[]
+          },
+          {
+            id: "collThroughput",
+            input: {
+              id: "collThroughput",
+              dataFieldName: "collThroughput",
+              type: "number",
+              label: "Coll Throughput",
+              min: 1,
+              max: 5,
+              step: 1,
+              uiType: "Spinner"
+            },
+            children: [] as Node[]
+          },
+          {
+            id: "invalidThroughput",
+            input: {
+              id: "invalidThroughput",
+              dataFieldName: "invalidThroughput",
+              type: "boolean",
+              label: "Invalid Coll Throughput",
+              min: 1,
+              max: 5,
+              step: 1,
+              uiType: "Spinner",
+              errorMessage: "label, truelabel and falselabel are required for boolean input 'invalidThroughput'."
+            },
+            children: [] as Node[]
+          },
+          {
+            id: "collName",
+            input: {
+              id: "collName",
+              dataFieldName: "collName",
+              type: "string",
+              label: "Coll Name",
+              placeholder: "placeholder text"
+            },
+            children: [] as Node[]
+          },
+          {
+            id: "enableLogging",
+            input: {
+              id: "enableLogging",
+              dataFieldName: "enableLogging",
+              type: "boolean",
+              label: "Enable Logging",
+              trueLabel: "Enable",
+              falseLabel: "Disable"
+            },
+            children: [] as Node[]
+          },
+          {
+            id: "invalidEnableLogging",
+            input: {
+              id: "invalidEnableLogging",
+              dataFieldName: "invalidEnableLogging",
+              type: "boolean",
+              label: "Invalid Enable Logging",
+              placeholder: "placeholder text",
+              errorMessage: "label, truelabel and falselabel are required for boolean input 'invalidEnableLogging'."
+            },
+            children: [] as Node[]
+          },
+          {
+            id: "regions",
+            input: {
+              id: "regions",
+              dataFieldName: "regions",
+              type: "object",
+              label: "Regions",
+              choices: [
+                { label: "South West US", key: "SWUS" },
+                { label: "North Central US", key: "NCUS" },
+                { label: "East US 2", key: "EUS2" }
+              ]
+            },
+            children: [] as Node[]
+          },
+          {
+            id: "invalidRegions",
+            input: {
+              id: "invalidRegions",
+              dataFieldName: "invalidRegions",
+              type: "object",
+              label: "Invalid Regions",
+              placeholder: "placeholder text",
+              errorMessage: "label and choices are required for Choice input 'invalidRegions'."
+            },
+            children: [] as Node[]
+          }
+        ]
+      },
+      inputNames: [
+        "dbThroughput",
+        "collThroughput",
+        "invalidThroughput",
+        "collName",
+        "enableLogging",
+        "invalidEnableLogging",
+        "regions",
+        "invalidRegions"
+      ]
+    };
+    const descriptor = mapToSmartUiDescriptor(context);
+    expect(descriptor).toEqual(expectedDescriptor);
+  });
+});

src/SelfServe/SelfServeUtils.tsx

@@ -0,0 +1,183 @@
+import "reflect-metadata";
+import { ChoiceItem, Info, InputTypeValue, InputType } from "../Explorer/Controls/SmartUi/SmartUiComponent";
+import {
+  BooleanInput,
+  ChoiceInput,
+  SelfServeDescriptor,
+  NumberInput,
+  StringInput,
+  Node,
+  AnyInput
+} from "./SelfServeComponent";
+
+export enum SelfServeType {
+  // No self serve type passed, launch explorer
+  none = "none",
+  // Unsupported self serve type passed as feature flag
+  invalid = "invalid",
+  // Add your self serve types here
+  example = "example"
+}
+
+export abstract class SelfServeBaseClass {
+  public abstract onSubmit: (currentValues: Map<string, InputType>) => Promise<void>;
+  public abstract initialize: () => Promise<Map<string, InputType>>;
+
+  public toSelfServeDescriptor(): SelfServeDescriptor {
+    const className = this.constructor.name;
+    const smartUiDescriptor = Reflect.getMetadata(className, this) as SelfServeDescriptor;
+
+    if (!this.initialize) {
+      throw new Error(`initialize() was not declared for the class '${className}'`);
+    }
+    if (!this.onSubmit) {
+      throw new Error(`onSubmit() was not declared for the class '${className}'`);
+    }
+    if (!smartUiDescriptor?.root) {
+      throw new Error(`@SmartUi decorator was not declared for the class '${className}'`);
+    }
+
+    smartUiDescriptor.initialize = this.initialize;
+    smartUiDescriptor.onSubmit = this.onSubmit;
+    return smartUiDescriptor;
+  }
+}
+
+export interface CommonInputTypes {
+  id: string;
+  info?: (() => Promise<Info>) | Info;
+  type?: InputTypeValue;
+  label?: (() => Promise<string>) | string;
+  placeholder?: (() => Promise<string>) | string;
+  dataFieldName?: string;
+  min?: (() => Promise<number>) | number;
+  max?: (() => Promise<number>) | number;
+  step?: (() => Promise<number>) | number;
+  trueLabel?: (() => Promise<string>) | string;
+  falseLabel?: (() => Promise<string>) | string;
+  choices?: (() => Promise<ChoiceItem[]>) | ChoiceItem[];
+  uiType?: string;
+  errorMessage?: string;
+  onChange?: (currentState: Map<string, InputType>, newValue: InputType) => Map<string, InputType>;
+  onSubmit?: (currentValues: Map<string, InputType>) => Promise<void>;
+  initialize?: () => Promise<Map<string, InputType>>;
+}
+
+const setValue = <T extends keyof CommonInputTypes, K extends CommonInputTypes[T]>(
+  name: T,
+  value: K,
+  fieldObject: CommonInputTypes
+): void => {
+  fieldObject[name] = value;
+};
+
+const getValue = <T extends keyof CommonInputTypes>(name: T, fieldObject: CommonInputTypes): unknown => {
+  return fieldObject[name];
+};
+
+export const addPropertyToMap = <T extends keyof CommonInputTypes, K extends CommonInputTypes[T]>(
+  target: unknown,
+  propertyName: string,
+  className: string,
+  descriptorName: keyof CommonInputTypes,
+  descriptorValue: K
+): void => {
+  const context =
+    (Reflect.getMetadata(className, target) as Map<string, CommonInputTypes>) ?? new Map<string, CommonInputTypes>();
+  updateContextWithDecorator(context, propertyName, className, descriptorName, descriptorValue);
+  Reflect.defineMetadata(className, context, target);
+};
+
+export const updateContextWithDecorator = <T extends keyof CommonInputTypes, K extends CommonInputTypes[T]>(
+  context: Map<string, CommonInputTypes>,
+  propertyName: string,
+  className: string,
+  descriptorName: keyof CommonInputTypes,
+  descriptorValue: K
+): void => {
+  if (!(context instanceof Map)) {
+    throw new Error(`@SmartUi should be the first decorator for the class '${className}'.`);
+  }
+
+  const propertyObject = context.get(propertyName) ?? { id: propertyName };
+
+  if (getValue(descriptorName, propertyObject) && descriptorName !== "type" && descriptorName !== "dataFieldName") {
+    throw new Error(
+      `Duplicate value passed for '${descriptorName}' on property '${propertyName}' of class '${className}'`
+    );
+  }
+
+  setValue(descriptorName, descriptorValue, propertyObject);
+  context.set(propertyName, propertyObject);
+};
+
+export const buildSmartUiDescriptor = (className: string, target: unknown): void => {
+  const context = Reflect.getMetadata(className, target) as Map<string, CommonInputTypes>;
+  const smartUiDescriptor = mapToSmartUiDescriptor(context);
+  Reflect.defineMetadata(className, smartUiDescriptor, target);
+};
+
+export const mapToSmartUiDescriptor = (context: Map<string, CommonInputTypes>): SelfServeDescriptor => {
+  const root = context.get("root");
+  context.delete("root");
+  const inputNames: string[] = [];
+
+  const smartUiDescriptor: SelfServeDescriptor = {
+    root: {
+      id: "root",
+      info: root?.info,
+      children: []
+    }
+  };
+
+  while (context.size > 0) {
+    const key = context.keys().next().value;
+    addToDescriptor(context, smartUiDescriptor.root, key, inputNames);
+  }
+  smartUiDescriptor.inputNames = inputNames;
+
+  return smartUiDescriptor;
+};
+
+const addToDescriptor = (
+  context: Map<string, CommonInputTypes>,
+  root: Node,
+  key: string,
+  inputNames: string[]
+): void => {
+  const value = context.get(key);
+  inputNames.push(value.id);
+  const element = {
+    id: value.id,
+    info: value.info,
+    input: getInput(value),
+    children: []
+  } as Node;
+  context.delete(key);
+  root.children.push(element);
+};
+
+const getInput = (value: CommonInputTypes): AnyInput => {
+  switch (value.type) {
+    case "number":
+      if (!value.label || !value.step || !value.uiType || !value.min || !value.max) {
+        value.errorMessage = `label, step, min, max and uiType are required for number input '${value.id}'.`;
+      }
+      return value as NumberInput;
+    case "string":
+      if (!value.label) {
+        value.errorMessage = `label is required for string input '${value.id}'.`;
+      }
+      return value as StringInput;
+    case "boolean":
+      if (!value.label || !value.trueLabel || !value.falseLabel) {
+        value.errorMessage = `label, truelabel and falselabel are required for boolean input '${value.id}'.`;
+      }
+      return value as BooleanInput;
+    default:
+      if (!value.label || !value.choices) {
+        value.errorMessage = `label and choices are required for Choice input '${value.id}'.`;
+      }
+      return value as ChoiceInput;
+  }
+};

src/SelfServe/__snapshots__/SelfServeComponent.test.tsx.snap

@@ -0,0 +1,168 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelfServeComponent should render 1`] = `
+<div
+  style={
+    Object {
+      "overflowX": "auto",
+    }
+  }
+>
+  <Stack
+    styles={
+      Object {
+        "root": Object {
+          "padding": 10,
+          "width": 400,
+        },
+      }
+    }
+    tokens={
+      Object {
+        "childrenGap": 20,
+      }
+    }
+  >
+    <SmartUiComponent
+      currentValues={
+        Map {
+          "throughput" => "450",
+          "analyticalStore" => "false",
+          "database" => "db2",
+        }
+      }
+      descriptor={
+        Object {
+          "initialize": [MockFunction] {
+            "calls": Array [
+              Array [],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": Promise {},
+              },
+            ],
+          },
+          "inputNames": Array [
+            "throughput",
+            "containerId",
+            "analyticalStore",
+            "database",
+          ],
+          "onSubmit": [MockFunction],
+          "root": Object {
+            "children": Array [
+              Object {
+                "id": "throughput",
+                "info": undefined,
+                "input": Object {
+                  "dataFieldName": "throughput",
+                  "defaultValue": 400,
+                  "label": "Throughput (input)",
+                  "max": 500,
+                  "min": 400,
+                  "placeholder": undefined,
+                  "step": 10,
+                  "type": "number",
+                  "uiType": "Spinner",
+                },
+              },
+              Object {
+                "id": "containerId",
+                "info": undefined,
+                "input": Object {
+                  "dataFieldName": "containerId",
+                  "label": "Container id",
+                  "placeholder": undefined,
+                  "type": "string",
+                },
+              },
+              Object {
+                "id": "analyticalStore",
+                "info": undefined,
+                "input": Object {
+                  "dataFieldName": "analyticalStore",
+                  "defaultValue": true,
+                  "falseLabel": "Disabled",
+                  "label": "Analytical Store",
+                  "placeholder": undefined,
+                  "trueLabel": "Enabled",
+                  "type": "boolean",
+                },
+              },
+              Object {
+                "id": "database",
+                "info": undefined,
+                "input": Object {
+                  "choices": Array [
+                    Object {
+                      "key": "db1",
+                      "label": "Database 1",
+                    },
+                    Object {
+                      "key": "db2",
+                      "label": "Database 2",
+                    },
+                    Object {
+                      "key": "db3",
+                      "label": "Database 3",
+                    },
+                  ],
+                  "dataFieldName": "database",
+                  "defaultKey": "db2",
+                  "label": "Database",
+                  "placeholder": undefined,
+                  "type": "object",
+                },
+              },
+            ],
+            "id": "root",
+            "info": Object {
+              "link": Object {
+                "href": "https://aka.ms/azure-cosmos-db-pricing",
+                "text": "More Details",
+              },
+              "message": "Start at $24/mo per database",
+            },
+          },
+        }
+      }
+      onInputChange={[Function]}
+    />
+    <Stack
+      horizontal={true}
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
+    >
+      <CustomizedPrimaryButton
+        id="submitButton"
+        onClick={[Function]}
+        styles={
+          Object {
+            "root": Object {
+              "width": 100,
+            },
+          }
+        }
+        text="submit"
+      />
+      <CustomizedPrimaryButton
+        id="discardButton"
+        onClick={[Function]}
+        styles={
+          Object {
+            "root": Object {
+              "width": 100,
+            },
+          }
+        }
+        text="discard"
+      />
+    </Stack>
+  </Stack>
+</div>
+`;