addDatabasePane provide backward compatibility

.eslintignore

@@ -113,6 +113,8 @@ src/Explorer/OpenActions.ts
 src/Explorer/OpenActionsStubs.ts
 src/Explorer/Panes/AddCollectionPane.test.ts
 src/Explorer/Panes/AddCollectionPane.ts
+src/Explorer/Panes/AddDatabasePane.ts
+src/Explorer/Panes/AddDatabasePane.test.ts
 src/Explorer/Panes/BrowseQueriesPane.ts
 src/Explorer/Panes/CassandraAddCollectionPane.ts
 src/Explorer/Panes/ContextualPaneBase.ts
@@ -130,7 +132,6 @@ src/Explorer/Panes/Tables/TableEntityPane.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyNameValidator.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValueValidator.ts
-src/Explorer/Panes/AddDatabasePane.ts
 src/Explorer/SplashScreen/SplashScreen.test.ts
 src/Explorer/Tables/Constants.ts
 src/Explorer/Tables/DataTable/CacheBase.ts

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -44,7 +44,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
     if (isAutoscaleSelected) {
       return AutoPilotUtils.getAutoPilotHeaderText();
     }
-
     const minRU: string = SharedConstants.CollectionCreation.DefaultCollectionRUs400.toLocaleString();
     const maxRU: string = userContext.isTryCosmosDBSubscription
       ? Constants.TryCosmosExperience.maxRU.toLocaleString()

src/Explorer/Explorer.tsx

@@ -53,7 +53,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/AddDatabasePanelF/AddDatabasePanelF";
+import { AddDatabasePanelF } from "./Panes/AddDatabasePanelF/AddDatabasePanelF";
 import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane/BrowseQueriesPane";
 import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
 import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
@@ -2163,10 +2163,20 @@ export default class Explorer {
     );
   }
   public openAddDatabasePane(): void {
-    this.openSidePanel(
-      "Add Database",
-      <AddDatabasePanel explorer={this} openNotificationConsole={this.expandConsole} closePanel={this.closeSidePanel} />
-    );
+    let isEnable = true;
+    if (isEnable) {
+      this.addDatabasePane.open();
+      document.getElementById("linkAddDatabase").focus();
+    } else {
+      this.openSidePanel(
+        "Add Database",
+        <AddDatabasePanelF
+          explorer={this}
+          openNotificationConsole={this.expandConsole}
+          closePanel={this.closeSidePanel}
+        />
+      );
+    }
   }
 
   public openBrowseQueriesPanel(): void {

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -279,9 +279,7 @@ function createNewDatabase(container: Explorer): CommandButtonComponentProps {
     iconSrc: AddDatabaseIcon,
     iconAlt: label,
     onCommandClick: () => {
-      container.addDatabasePane.open();
-      // container.openAddDatabasePane();
-      document.getElementById("linkAddDatabase").focus();
+      container.openAddDatabasePane();
     },
     commandButtonLabel: label,
     ariaLabel: label,

src/Explorer/Panes/AddDatabasePanelF/AddDatabasePanelF.test.tsx

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

src/Explorer/Panes/AddDatabasePanelF/AddDatabasePanelF.tsx

@@ -27,7 +27,7 @@ export interface AddDatabasePaneProps {
   openNotificationConsole: () => void;
 }
 
-export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
+export const AddDatabasePanelF: FunctionComponent<AddDatabasePaneProps> = ({
   explorer: container,
   closePanel,
   openNotificationConsole,
@@ -258,7 +258,7 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
     container,
     formError: formErrors,
     formErrorDetail: formErrorsDetails,
-    id: "copynotebookpane",
+    id: "add-database-inputs",
     isExecuting,
     title,
     submitButtonText: "OK",

src/Main.tsx

@@ -227,6 +227,7 @@ const App: React.FunctionComponent = () => {
         closePanel={closeSidePanel}
         isConsoleExpanded={isNotificationConsoleExpanded}
       />
+      <div data-bind='component: { name: "add-database-pane", params: {data: addDatabasePane} }' />
       <div data-bind='component: { name: "add-collection-pane", params: { data: addCollectionPane} }' />
       <div data-bind='component: { name: "graph-styling-pane", params: { data: graphStylingPane} }' />
       <div data-bind='component: { name: "table-edit-entity-pane", params: { data: editTableEntityPane} }' />