revert knockout component

src/Explorer/ComponentRegisterer.ts

@@ -56,6 +56,8 @@ ko.components.register("tabs-manager", { template: TabsManagerTemplate });
 ].forEach(({ component: { name, template } }) => ko.components.register(name, { template }));
 
 // Panes
+
+ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
 ko.components.register("add-collection-pane", new PaneComponents.AddCollectionPaneComponent());
 
 ko.components.register("graph-new-vertex-pane", new PaneComponents.GraphNewVertexPaneComponent());

src/Explorer/Explorer.tsx

@@ -50,6 +50,7 @@ import { NotebookUtil } from "./Notebook/NotebookUtil";
 import AddCollectionPane from "./Panes/AddCollectionPane";
 import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import AddDatabasePane from "./Panes/AddDatabasePane";
+import { AddDatabasePanel } from "./Panes/AddDatabasePanel/AddDatabasePanel";
 import { BrowseQueriesPanel } from "./Panes/BrowseQueriesPanel";
 import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
 import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
@@ -2251,7 +2252,7 @@ export default class Explorer {
   public openAddDatabasePane(): void {
     this.openSidePanel(
       "Add Database",
-      <AddDatabasePane explorer={this} openNotificationConsole={this.expandConsole} closePanel={this.closeSidePanel} />
+      <AddDatabasePanel explorer={this} openNotificationConsole={this.expandConsole} closePanel={this.closeSidePanel} />
     );
   }
 

src/Explorer/Panes/AddDatabasePane.html

@@ -0,0 +1,174 @@
+<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
+    <div class="contextual-pane-out" data-bind="click: cancel, clickBubble: false"></div>
+    <div class="contextual-pane" data-bind="attr: { id: id }">
+      <!-- Add database form  -- Start -->
+      <div class="contextual-pane-in">
+        <form data-bind="submit: submit" style="height: 100%">
+          <div
+            class="paneContentContainer"
+            role="dialog"
+            aria-labelledby="databaseTitle"
+            data-bind="template: { name: 'add-database-inputs' }"
+          ></div>
+        </form>
+      </div>
+      <!-- Add database form  -- End -->
+      <!-- Loader - Start -->
+      <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
+        <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
+      </div>
+      <!-- Loader - End -->
+    </div>
+  </div>
+  
+  <script type="text/html" id="add-database-inputs">
+    <!-- Add database header - Start -->
+    <div class="firstdivbg headerline">
+      <span id="databaseTitle" role="heading" aria-level="2" data-bind="text: title"></span>
+      <div
+        class="closeImg"
+        role="button"
+        aria-label="Close pane"
+        data-bind="click: cancel, event: { keypress: onCloseKeyPress }"
+        tabindex="0"
+      >
+        <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+      </div>
+    </div>
+    <!-- Add database header - End -->
+  
+    <!-- Add database errors - Start -->
+    <div class="warningErrorContainer" aria-live="assertive" data-bind="visible: formErrors() && formErrors() !== ''">
+      <div class="warningErrorContent">
+        <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
+        <span class="warningErrorDetailsLinkContainer">
+          <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
+          <a
+            class="errorLink"
+            role="link"
+            data-bind="visible: formErrorsDetails() && formErrorsDetails() !== '', click: showErrorDetails, event: { keypress: onMoreDetailsKeyPress }"
+            tabindex="0"
+          >
+            More details</a
+          >
+        </span>
+      </div>
+    </div>
+    <!-- Add database errors - End -->
+  
+    <!-- upsell message - start -->
+    <div
+      class="infoBoxContainer"
+      aria-live="assertive"
+      data-bind="visible: showUpsellMessage && showUpsellMessage() && formErrors && !formErrors()"
+    >
+      <div class="infoBoxContent">
+        <span><img class="infoBoxIcon" src="/info_color.svg" alt="Promo" /></span>
+        <span class="infoBoxDetails">
+          <span class="infoBoxMessage" data-bind="text: upsellMessage, attr: { title: upsellMessage }"></span>
+          <a
+            class="underlinedLink"
+            id="linkAddDatabase"
+            data-bind="text: upsellAnchorText, attr: { 'href': upsellAnchorUrl, 'aria-label': upsellMessageAriaLabel }"
+            target="_blank"
+            href=""
+            tabindex="0"
+          ></a>
+        </span>
+      </div>
+    </div>
+    <!-- upsell message - end -->
+  
+    <!-- Add database inputs - Start -->
+    <div class="paneMainContent">
+      <div>
+        <p>
+          <span class="mandatoryStar">*</span>
+          <span data-bind="text: databaseIdLabel"></span>
+          <span class="infoTooltip" role="tooltip" tabindex="0">
+            <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+            <span class="tooltiptext infoTooltipWidth" data-bind="text: databaseIdTooltipText"></span>
+          </span>
+        </p>
+  
+        <input
+          id="database-id"
+          type="text"
+          aria-required="true"
+          autocomplete="off"
+          pattern="[^/?#\\]*[^/?# \\]"
+          title="May not end with space nor contain characters '\' '/' '#' '?'"
+          size="40"
+          class="collid"
+          data-bind="textInput: databaseId, hasFocus: firstFieldHasFocus, attr: { 'aria-label': databaseIdLabel, 'placeholder': databaseIdPlaceHolder }"
+          autofocus
+        />
+  
+        <!-- Database provisioned throughput - Start -->
+        <!-- ko if: canConfigureThroughput -->
+        <div class="databaseProvision" aria-label="New database provision support">
+          <input
+            tabindex="0"
+            type="checkbox"
+            id="addDatabasePane-databaseSharedThroughput"
+            title="Provision shared throughput"
+            data-bind="checked: databaseCreateNewShared"
+          />
+          <span class="databaseProvisionText" for="databaseSharedThroughput">Provision throughput</span>
+          <span class="infoTooltip" role="tooltip" tabindex="0">
+            <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+            <span
+              class="tooltiptext provisionDatabaseThroughput"
+              data-bind="text: databaseLevelThroughputTooltipText"
+            ></span>
+          </span>
+        </div>
+        <div data-bind="visible: databaseCreateNewShared">
+          <throughput-input-autopilot-v3
+            params="{
+                                                step: 100,
+                                                value: throughput,
+                                                testId: 'sharedThroughputValue',
+                                                minimum: minThroughputRU,
+                                                maximum: maxThroughputRU,
+                                                isEnabled: databaseCreateNewShared,
+                                                label: throughputRangeText,
+                                                ariaLabel: throughputRangeText,
+                                                costsVisible: costsVisible,
+                                                requestUnitsUsageCost: requestUnitsUsageCost,
+                                                spendAckChecked: throughputSpendAck,
+                                                spendAckId: 'throughputSpendAckDatabase',
+                                                spendAckText: throughputSpendAckText,
+                                                spendAckVisible: throughputSpendAckVisible,
+                                                showAsMandatory: true,
+                                                infoBubbleText: ruToolTipText,
+                                                throughputAutoPilotRadioId: 'newDatabase-databaseThroughput-autoPilotRadio',
+                                                throughputProvisionedRadioId: 'newDatabase-databaseThroughput-manualRadio',
+                                                throughputModeRadioName: 'throughputModeRadioName',
+                                                isAutoPilotSelected: isAutoPilotSelected,
+                                                maxAutoPilotThroughputSet: maxAutoPilotThroughputSet,
+                                                autoPilotUsageCost: autoPilotUsageCost,
+                                                canExceedMaximumValue: canExceedMaximumValue,
+                                                freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
+                                            }"
+          >
+          </throughput-input-autopilot-v3>
+          <p data-bind="visible: canRequestSupport">
+            <!-- TODO: Replace link with call to the Azure Support blade --><a
+              href="https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20More%20Throughput%20Request"
+              >Contact support</a
+            >
+            for more than <span data-bind="text: maxThroughputRUText"></span> RU/s.
+          </p>
+        </div>
+        <!-- /ko -->
+        <!-- Database provisioned throughput - End -->
+      </div>
+    </div>
+    <div class="paneFooter">
+      <div class="leftpanel-okbut">
+        <input type="submit" value="OK" class="btncreatecoll1" />
+      </div>
+    </div>
+    <!-- Add database inputs - End -->
+  </script>

src/Explorer/Panes/AddDatabasePane.test.ts

@@ -0,0 +1,105 @@
+import * as Constants from "../../Common/Constants";
+import { DatabaseAccount } from "../../Contracts/DataModels";
+import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import { updateUserContext } from "../../UserContext";
+import Explorer from "../Explorer";
+import AddDatabasePane from "./AddDatabasePane";
+
+describe("Add Database Pane", () => {
+    describe("getSharedThroughputDefault()", () => {
+        let explorer: Explorer;
+        const mockDatabaseAccount: DatabaseAccount = {
+            id: "mock",
+            kind: "DocumentDB",
+            location: "",
+            name: "mock",
+            properties: {
+                documentEndpoint: "",
+                cassandraEndpoint: "",
+                gremlinEndpoint: "",
+                tableEndpoint: "",
+                enableFreeTier: false,
+            },
+            type: undefined,
+            tags: [],
+        };
+
+        const mockFreeTierDatabaseAccount: DatabaseAccount = {
+            id: "mock",
+            kind: "DocumentDB",
+            location: "",
+            name: "mock",
+            properties: {
+                documentEndpoint: "",
+                cassandraEndpoint: "",
+                gremlinEndpoint: "",
+                tableEndpoint: "",
+                enableFreeTier: true,
+            },
+            type: undefined,
+            tags: [],
+        };
+
+        beforeEach(() => {
+            explorer = new Explorer();
+        });
+
+        it("should be true if subscription type is Benefits", () => {
+            updateUserContext({
+                subscriptionType: SubscriptionType.Benefits,
+            });
+            const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
+            expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
+        });
+
+        it("should be false if subscription type is EA", () => {
+            updateUserContext({
+                subscriptionType: SubscriptionType.EA,
+            });
+            const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
+            expect(addDatabasePane.getSharedThroughputDefault()).toBe(false);
+        });
+
+        it("should be true if subscription type is Free", () => {
+            updateUserContext({
+                subscriptionType: SubscriptionType.Free,
+            });
+            const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
+            expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
+        });
+
+        it("should be true if subscription type is Internal", () => {
+            updateUserContext({
+                subscriptionType: SubscriptionType.Internal,
+            });
+            const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
+            expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
+        });
+
+        it("should be true if subscription type is PAYG", () => {
+            updateUserContext({
+                subscriptionType: SubscriptionType.PAYG,
+            });
+            const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
+            expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
+        });
+
+        it("should display free tier text in upsell messaging", () => {
+            explorer.databaseAccount(mockFreeTierDatabaseAccount);
+            const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
+            expect(addDatabasePane.isFreeTierAccount()).toBe(true);
+            expect(addDatabasePane.upsellMessage()).toContain("With free tier");
+            expect(addDatabasePane.upsellAnchorUrl()).toBe(Constants.Urls.freeTierInformation);
+            expect(addDatabasePane.upsellAnchorText()).toBe("Learn more");
+        });
+
+        it("should display standard texr in upsell messaging", () => {
+            explorer.databaseAccount(mockDatabaseAccount);
+            const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
+            expect(addDatabasePane.isFreeTierAccount()).toBe(false);
+            expect(addDatabasePane.upsellMessage()).toContain("Start at");
+            expect(addDatabasePane.upsellAnchorUrl()).toBe(Constants.Urls.cosmosPricing);
+            expect(addDatabasePane.upsellAnchorText()).toBe("More details");
+        });
+    });
+});

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.test.tsx

@@ -1,15 +1,17 @@
 import { shallow } from "enzyme";
 import React from "react";
 import Explorer from "../../Explorer";
-import { AddDatabasePane } from "../AddDatabasePane";
+import { AddDatabasePanel } from "./AddDatabasePanel";
+
 const props = {
   explorer: new Explorer(),
   closePanel: (): void => undefined,
   openNotificationConsole: (): void => undefined,
 };
+
 describe("AddDatabasePane Pane", () => {
   it("should render Default properly", () => {
-    const wrapper = shallow(<AddDatabasePane {...props} />);
+    const wrapper = shallow(<AddDatabasePanel {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 });

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -24,7 +24,7 @@ export interface AddDatabasePaneProps {
   openNotificationConsole: () => void;
 }
 
-export const AddDatabasePane: FunctionComponent<AddDatabasePaneProps> = ({
+export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
   explorer: container,
   closePanel,
   openNotificationConsole,

src/Explorer/Panes/PaneComponents.ts

@@ -1,4 +1,5 @@
 import AddCollectionPaneTemplate from "./AddCollectionPane.html";
+import AddDatabasePaneTemplate from "./AddDatabasePane.html";
 import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
 import GitHubReposPaneTemplate from "./GitHubReposPane.html";
 import GraphNewVertexPaneTemplate from "./GraphNewVertexPane.html";
@@ -8,12 +9,21 @@ import StringInputPaneTemplate from "./StringInputPane.html";
 import TableAddEntityPaneTemplate from "./Tables/TableAddEntityPane.html";
 import TableEditEntityPaneTemplate from "./Tables/TableEditEntityPane.html";
 
+
 export class PaneComponent {
   constructor(data: any) {
     return data.data;
   }
 }
 
+export class AddDatabasePaneComponent {
+  constructor() {
+    return {
+      viewModel: PaneComponent,
+      template: AddDatabasePaneTemplate,
+    };
+  }
+}
 export class AddCollectionPaneComponent {
   constructor() {
     return {