Made selfServe standalone page

src/Explorer/Controls/Settings/SettingsComponent.tsx

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

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

@@ -1,68 +0,0 @@
-import React from "react";
-import { Descriptor, InputType, SmartUiComponent } from "../../../SmartUi/SmartUiComponent";
-import { SqlX } from "./SqlX";
-
-export class SelfServeComponent extends React.Component {
-  private onSubmit = async (currentValues: Map<string, InputType>): Promise<void> => {
-    console.log(currentValues.get("instanceCount"), currentValues.get("instanceSize"));
-  };
-
-  private selfServeData: Descriptor = {
-    onSubmit: this.onSubmit,
-    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",
-            onChange: (currentState: Map<string, InputType>, newValue: InputType): Map<string, InputType> => {
-              currentState.set("instanceCount", newValue);
-              if ((newValue as number) === 1) {
-                currentState.set("instanceSize", "1Core4Gb");
-              }
-              return currentState;
-            }
-          }
-        },
-        {
-          id: "instanceSize",
-          input: {
-            label: "Instance Size",
-            dataFieldName: "instanceSize",
-            type: "object",
-            choices: [
-              { label: "1Core4Gb", key: "1Core4Gb", value: "1Core4Gb" },
-              { label: "2Core8Gb", key: "2Core8Gb", value: "2Core8Gb" },
-              { label: "4Core16Gb", key: "4Core16Gb", value: "4Core16Gb" }
-            ],
-            defaultKey: "1Core4Gb",
-            onChange: (currentState: Map<string, InputType>, newValue: InputType): Map<string, InputType> => {
-              currentState.set("instanceSize", newValue);
-              return currentState;
-            }
-          }
-        }
-      ]
-    }
-  };
-
-  public render(): JSX.Element {
-    //return <SmartUiComponent descriptor={this.selfServeData} />
-    return <SmartUiComponent descriptor={SqlX.toSmartUiDescriptor()} />;
-  }
-}

src/SelfServe/ClassDescriptors.tsx

@@ -1,4 +1,4 @@
-import { Info, InputType } from "../../../SmartUi/SmartUiComponent";
+import { Info, InputType } from "../Explorer/Controls/SmartUi/SmartUiComponent";
 import { addPropertyToMap, toSmartUiDescriptor } from "./SelfServeUtils";
 
 export const SmartUi = (): ClassDecorator => {

src/SelfServe/PropertyDescriptors.tsx

@@ -1,4 +1,4 @@
-import { ChoiceItem, Info, InputType } from "../../../SmartUi/SmartUiComponent";
+import { ChoiceItem, Info, InputType } from "../Explorer/Controls/SmartUi/SmartUiComponent";
 import { addPropertyToMap } from "./SelfServeUtils";
 
 const addToMap = (descriptorName: string, descriptorValue: any): PropertyDecorator => {

src/SelfServe/SelfServe.less

@@ -0,0 +1,3 @@
+.selfServeComponentContainer {
+    margin: 10;
+}

src/SelfServe/SelfServe.tsx

@@ -0,0 +1,21 @@
+import "bootstrap/dist/css/bootstrap.css";
+import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
+import React from "react";
+import * as ReactDOM from "react-dom";
+import { initializeConfiguration } from "../ConfigContext";
+import { SmartUiComponent } from "../Explorer/Controls/SmartUi/SmartUiComponent";
+import { SqlX } from "./SqlX/SqlX";
+
+const render = async () => {
+  initializeIcons();
+  await initializeConfiguration();
+
+  const element = (
+    <SmartUiComponent descriptor={SqlX.toSmartUiDescriptor()} />
+  );
+
+  ReactDOM.render(element, document.getElementById("selfServeContent"));
+};
+
+// Entry point
+window.addEventListener("load", render);

src/SelfServe/SelfServeUtils.tsx

@@ -11,7 +11,7 @@ import {
   BooleanInput,
   ChoiceInput,
   InputType
-} from "../../../SmartUi/SmartUiComponent";
+} from "../Explorer/Controls/SmartUi/SmartUiComponent";
 
 export class SelfServeBase {
   public static toSmartUiDescriptor(): Descriptor {

src/SelfServe/SqlX/SqlX.tsx

@@ -14,11 +14,9 @@ import {
   Placeholder,
   DefaultNumberValue,
   DefaultBooleanValue,
-  DefaultStringValue,
   CustomElement
-} from "./PropertyDescriptors";
+} from "../PropertyDescriptors";
-import { SmartUi, ClassInfo, OnSubmit } from "./ClassDescriptors";
+import { SmartUi, ClassInfo, OnSubmit } from "../ClassDescriptors";
-import { ChoiceItem } from "../../../SmartUi/SmartUiComponent";
 import {
   getPromise,
   instanceSizeInfo,
@@ -29,7 +27,8 @@ import {
   Sizes,
   sqlXInfo
 } from "./SqlXApis";
-import { SelfServeBase } from "./SelfServeUtils";
+import { SelfServeBase } from "../SelfServeUtils";
+import { ChoiceItem } from "../../Explorer/Controls/SmartUi/SmartUiComponent";
 
 @SmartUi()
 @ClassInfo(getPromise(sqlXInfo))
@@ -42,7 +41,6 @@ export class SqlX extends SelfServeBase {
   @PropertyInfo(getPromise(instanceSizeInfo))
   @Label(getPromise("Instance Size"))
   @Choices(getPromise(instanceSizeOptions))
-  //@Choices(instanceSizeOptions)
   @DefaultKey(getPromise(Sizes.OneCore4Gb))
   static instanceSize: ChoiceItem;
 

src/SelfServe/SqlX/SqlXApis.tsx

@@ -1,6 +1,6 @@
 import { Text } from "office-ui-fabric-react";
 import React from "react";
-import { ChoiceItem, Info, InputType } from "../../../SmartUi/SmartUiComponent";
+import { ChoiceItem, Info, InputType } from "../../Explorer/Controls/SmartUi/SmartUiComponent";
 
 export enum Sizes {
   OneCore4Gb = "OneCore4Gb",
@@ -61,5 +61,5 @@ export const getPromise = <T extends number | string | boolean | ChoiceItem[] |
 };
 
 export const renderTextInput = async (): Promise<JSX.Element> => {
-  return <Text>SqlX is a new feature of Cosmos DB</Text>;
+  return <Text>SqlX is a new feature of Cosmos DB.</Text>;
 };

src/SelfServe/selfServe.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="images/CosmosDB_rgb_ui_lighttheme.ico" type="image/x-icon" />
+  </head>
+
+  <body>
+    <div class="selfServeComponentContainer" id="selfServeContent"></div>
+  </body>
+</html>

webpack.config.js

@@ -165,6 +165,11 @@ module.exports = function(env = {}, argv = {}) {
       template: "src/connectToGitHub.html",
       chunks: ["connectToGitHub"]
     }),
+    new HtmlWebpackPlugin({
+      filename: "selfServe.html",
+      template: "src/SelfServe/selfServe.html",
+      chunks: ["selfServe"]
+    }),
     new MonacoWebpackPlugin(),
     new CopyWebpackPlugin({
       patterns: [{ from: "DataExplorer.nuspec" }, { from: "web.config" }, { from: "quickstart/*.zip" }]
@@ -188,7 +193,8 @@ module.exports = function(env = {}, argv = {}) {
       terminal: "./src/Terminal/index.ts",
       notebookViewer: "./src/NotebookViewer/NotebookViewer.tsx",
       galleryViewer: "./src/GalleryViewer/GalleryViewer.tsx",
-      connectToGitHub: "./src/GitHub/GitHubConnector.ts"
+      connectToGitHub: "./src/GitHub/GitHubConnector.ts",
+      selfServe: "./src/SelfServe/SelfServe.tsx"
     },
     node: {
       util: true,