Panel should not use GenericRightPaneComponent

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>

src/Explorer/ComponentRegisterer.ts

@@ -13,6 +13,4 @@ ko.components.register("dynamic-list", DynamicListComponent);
 ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponentAutoPilotV3);
 
 // Panes
-
-ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
 ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());

src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.test.tsx

@@ -1,12 +1,12 @@
 jest.mock("../../../../Juno/JunoClient");
 import { shallow } from "enzyme";
 import React from "react";
-import { CodeOfConductComponent, CodeOfConductComponentProps } from ".";
 import { HttpStatusCodes } from "../../../../Common/Constants";
 import { JunoClient } from "../../../../Juno/JunoClient";
+import { CodeOfConduct, CodeOfConductProps } from "./CodeOfConduct";
 
-describe("CodeOfConductComponent", () => {
+describe("CodeOfConduct", () => {
-  let codeOfConductProps: CodeOfConductComponentProps;
+  let codeOfConductProps: CodeOfConductProps;
 
   beforeEach(() => {
     const junoClient = new JunoClient();
@@ -21,12 +21,12 @@ describe("CodeOfConductComponent", () => {
   });
 
   it("renders", () => {
-    const wrapper = shallow(<CodeOfConductComponent {...codeOfConductProps} />);
+    const wrapper = shallow(<CodeOfConduct {...codeOfConductProps} />);
     expect(wrapper).toMatchSnapshot();
   });
 
   it("onAcceptedCodeOfConductCalled", async () => {
-    const wrapper = shallow(<CodeOfConductComponent {...codeOfConductProps} />);
+    const wrapper = shallow(<CodeOfConduct {...codeOfConductProps} />);
     wrapper.find(".genericPaneSubmitBtn").first().simulate("click");
     await Promise.resolve();
     expect(codeOfConductProps.onAcceptCodeOfConduct).toBeCalled();

src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.tsx

@@ -6,15 +6,15 @@ import { JunoClient } from "../../../../Juno/JunoClient";
 import { Action } from "../../../../Shared/Telemetry/TelemetryConstants";
 import { trace, traceFailure, traceStart, traceSuccess } from "../../../../Shared/Telemetry/TelemetryProcessor";
 
-export interface CodeOfConductComponentProps {
+export interface CodeOfConductProps {
   junoClient: JunoClient;
   onAcceptCodeOfConduct: (result: boolean) => void;
 }
 
-export const CodeOfConductComponent: FunctionComponent<CodeOfConductComponentProps> = ({
+export const CodeOfConduct: FunctionComponent<CodeOfConductProps> = ({
   junoClient,
   onAcceptCodeOfConduct,
-}: CodeOfConductComponentProps) => {
+}: CodeOfConductProps) => {
   const descriptionPara1 = "Azure Cosmos DB Notebook Gallery - Code of Conduct";
   const descriptionPara2 = "The notebook public gallery contains notebook samples shared by users of Azure Cosmos DB.";
   const descriptionPara3 = "In order to view and publish your samples to the gallery, you must accept the ";
@@ -47,7 +47,7 @@ export const CodeOfConductComponent: FunctionComponent<CodeOfConductComponentPro
         startKey
       );
 
-      handleError(error, "CodeOfConductComponent/acceptCodeOfConduct", "Failed to accept code of conduct");
+      handleError(error, "CodeOfConduct/acceptCodeOfConduct", "Failed to accept code of conduct");
     }
   };
 

src/Explorer/Controls/NotebookGallery/CodeOfConduct/__snapshots__/CodeOfConduct.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CodeOfConductComponent renders 1`] = `
+exports[`CodeOfConduct renders 1`] = `
 <Stack
   tokens={
     Object {

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx

@@ -1,123 +0,0 @@
-import * as React from "react";
-import { JunoClient } from "../../../Juno/JunoClient";
-import { HttpStatusCodes, CodeOfConductEndpoints } from "../../../Common/Constants";
-import { Stack, Text, Checkbox, PrimaryButton, Link } from "@fluentui/react";
-import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
-import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
-
-export interface CodeOfConductComponentProps {
-  junoClient: JunoClient;
-  onAcceptCodeOfConduct: (result: boolean) => void;
-}
-
-interface CodeOfConductComponentState {
-  readCodeOfConduct: boolean;
-}
-
-export class CodeOfConductComponent extends React.Component<CodeOfConductComponentProps, CodeOfConductComponentState> {
-  private viewCodeOfConductTraced: boolean;
-  private descriptionPara1: string;
-  private descriptionPara2: string;
-  private descriptionPara3: string;
-  private link1: { label: string; url: string };
-
-  constructor(props: CodeOfConductComponentProps) {
-    super(props);
-
-    this.state = {
-      readCodeOfConduct: false,
-    };
-
-    this.descriptionPara1 = "Azure Cosmos DB Notebook Gallery - Code of Conduct";
-    this.descriptionPara2 = "The notebook public gallery contains notebook samples shared by users of Azure Cosmos DB.";
-    this.descriptionPara3 = "In order to view and publish your samples to the gallery, you must accept the ";
-    this.link1 = { label: "code of conduct.", url: CodeOfConductEndpoints.codeOfConduct };
-  }
-
-  private async acceptCodeOfConduct(): Promise<void> {
-    const startKey = traceStart(Action.NotebooksGalleryAcceptCodeOfConduct);
-
-    try {
-      const response = await this.props.junoClient.acceptCodeOfConduct();
-      if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
-        throw new Error(`Received HTTP ${response.status} when accepting code of conduct`);
-      }
-
-      traceSuccess(Action.NotebooksGalleryAcceptCodeOfConduct, {}, startKey);
-
-      this.props.onAcceptCodeOfConduct(response.data);
-    } catch (error) {
-      traceFailure(
-        Action.NotebooksGalleryAcceptCodeOfConduct,
-        {
-          error: getErrorMessage(error),
-          errorStack: getErrorStack(error),
-        },
-        startKey
-      );
-
-      handleError(error, "CodeOfConductComponent/acceptCodeOfConduct", "Failed to accept code of conduct");
-    }
-  }
-
-  private onChangeCheckbox = (): void => {
-    this.setState({ readCodeOfConduct: !this.state.readCodeOfConduct });
-  };
-
-  public render(): JSX.Element {
-    if (!this.viewCodeOfConductTraced) {
-      this.viewCodeOfConductTraced = true;
-      trace(Action.NotebooksGalleryViewCodeOfConduct);
-    }
-
-    return (
-      <Stack tokens={{ childrenGap: 20 }}>
-        <Stack.Item>
-          <Text style={{ fontWeight: 500, fontSize: "20px" }}>{this.descriptionPara1}</Text>
-        </Stack.Item>
-
-        <Stack.Item>
-          <Text>{this.descriptionPara2}</Text>
-        </Stack.Item>
-
-        <Stack.Item>
-          <Text>
-            {this.descriptionPara3}
-            <Link href={this.link1.url} target="_blank">
-              {this.link1.label}
-            </Link>
-          </Text>
-        </Stack.Item>
-
-        <Stack.Item>
-          <Checkbox
-            styles={{
-              label: {
-                margin: 0,
-                padding: "2 0 2 0",
-              },
-              text: {
-                fontSize: 12,
-              },
-            }}
-            label="I have read and accept the code of conduct."
-            onChange={this.onChangeCheckbox}
-          />
-        </Stack.Item>
-
-        <Stack.Item>
-          <PrimaryButton
-            ariaLabel="Continue"
-            title="Continue"
-            onClick={async () => await this.acceptCodeOfConduct()}
-            tabIndex={0}
-            className="genericPaneSubmitBtn"
-            text="Continue"
-            disabled={!this.state.readCodeOfConduct}
-          />
-        </Stack.Item>
-      </Stack>
-    );
-  }
-}

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -30,7 +30,7 @@ import * as GalleryUtils from "../../../Utils/GalleryUtils";
 import Explorer from "../../Explorer";
 import { Dialog, DialogProps } from "../Dialog";
 import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent";
-import { CodeOfConductComponent } from "./CodeOfConductComponent";
+import { CodeOfConduct } from "./CodeOfConduct/CodeOfConduct";
 import "./GalleryViewerComponent.less";
 import { InfoComponent } from "./InfoComponent/InfoComponent";
 
@@ -372,7 +372,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
         {acceptedCodeOfConduct === false && (
           <Overlay isDarkThemed>
             <div className="publicGalleryTabOverlayContent">
-              <CodeOfConductComponent
+              <CodeOfConduct
                 junoClient={this.props.junoClient}
                 onAcceptCodeOfConduct={(result: boolean) => {
                   this.setState({ isCodeOfConductAccepted: result });

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -35,49 +35,6 @@ exports[`SettingsComponent renders 1`] = `
                 "_refreshSparkEnabledStateForAccount": [Function],
                 "_resetNotebookWorkspace": [Function],
                 "addCollectionText": [Function],
-                "addDatabasePane": AddDatabasePane {
-                  "autoPilotUsageCost": [Function],
-                  "canConfigureThroughput": [Function],
-                  "canExceedMaximumValue": [Function],
-                  "canRequestSupport": [Function],
-                  "container": [Circular],
-                  "costsVisible": [Function],
-                  "databaseCreateNewShared": [Function],
-                  "databaseId": [Function],
-                  "databaseIdLabel": [Function],
-                  "databaseIdPlaceHolder": [Function],
-                  "databaseIdTooltipText": [Function],
-                  "databaseLevelThroughputTooltipText": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
-                  "id": "adddatabasepane",
-                  "isAutoPilotSelected": [Function],
-                  "isExecuting": [Function],
-                  "isFreeTierAccount": [Function],
-                  "isTemplateReady": [Function],
-                  "maxAutoPilotThroughputSet": [Function],
-                  "maxThroughputRU": [Function],
-                  "maxThroughputRUText": [Function],
-                  "minThroughputRU": [Function],
-                  "onMoreDetailsKeyPress": [Function],
-                  "requestUnitsUsageCost": [Function],
-                  "ruToolTipText": [Function],
-                  "showUpsellMessage": [Function],
-                  "throughput": [Function],
-                  "throughputRangeText": [Function],
-                  "throughputSpendAck": [Function],
-                  "throughputSpendAckText": [Function],
-                  "throughputSpendAckVisible": [Function],
-                  "title": [Function],
-                  "upsellAnchorText": [Function],
-                  "upsellAnchorUrl": [Function],
-                  "upsellMessage": [Function],
-                  "upsellMessageAriaLabel": [Function],
-                  "visible": [Function],
-                },
-                "addDatabaseText": [Function],
                 "arcadiaToken": [Function],
                 "canExceedMaximumValue": [Function],
                 "canSaveQueries": [Function],
@@ -1016,49 +973,6 @@ exports[`SettingsComponent renders 1`] = `
               "_refreshSparkEnabledStateForAccount": [Function],
               "_resetNotebookWorkspace": [Function],
               "addCollectionText": [Function],
-              "addDatabasePane": AddDatabasePane {
-                "autoPilotUsageCost": [Function],
-                "canConfigureThroughput": [Function],
-                "canExceedMaximumValue": [Function],
-                "canRequestSupport": [Function],
-                "container": [Circular],
-                "costsVisible": [Function],
-                "databaseCreateNewShared": [Function],
-                "databaseId": [Function],
-                "databaseIdLabel": [Function],
-                "databaseIdPlaceHolder": [Function],
-                "databaseIdTooltipText": [Function],
-                "databaseLevelThroughputTooltipText": [Function],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "freeTierExceedThroughputTooltip": [Function],
-                "id": "adddatabasepane",
-                "isAutoPilotSelected": [Function],
-                "isExecuting": [Function],
-                "isFreeTierAccount": [Function],
-                "isTemplateReady": [Function],
-                "maxAutoPilotThroughputSet": [Function],
-                "maxThroughputRU": [Function],
-                "maxThroughputRUText": [Function],
-                "minThroughputRU": [Function],
-                "onMoreDetailsKeyPress": [Function],
-                "requestUnitsUsageCost": [Function],
-                "ruToolTipText": [Function],
-                "showUpsellMessage": [Function],
-                "throughput": [Function],
-                "throughputRangeText": [Function],
-                "throughputSpendAck": [Function],
-                "throughputSpendAckText": [Function],
-                "throughputSpendAckVisible": [Function],
-                "title": [Function],
-                "upsellAnchorText": [Function],
-                "upsellAnchorUrl": [Function],
-                "upsellMessage": [Function],
-                "upsellMessageAriaLabel": [Function],
-                "visible": [Function],
-              },
-              "addDatabaseText": [Function],
               "arcadiaToken": [Function],
               "canExceedMaximumValue": [Function],
               "canSaveQueries": [Function],
@@ -2010,49 +1924,6 @@ exports[`SettingsComponent renders 1`] = `
                 "_refreshSparkEnabledStateForAccount": [Function],
                 "_resetNotebookWorkspace": [Function],
                 "addCollectionText": [Function],
-                "addDatabasePane": AddDatabasePane {
-                  "autoPilotUsageCost": [Function],
-                  "canConfigureThroughput": [Function],
-                  "canExceedMaximumValue": [Function],
-                  "canRequestSupport": [Function],
-                  "container": [Circular],
-                  "costsVisible": [Function],
-                  "databaseCreateNewShared": [Function],
-                  "databaseId": [Function],
-                  "databaseIdLabel": [Function],
-                  "databaseIdPlaceHolder": [Function],
-                  "databaseIdTooltipText": [Function],
-                  "databaseLevelThroughputTooltipText": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
-                  "id": "adddatabasepane",
-                  "isAutoPilotSelected": [Function],
-                  "isExecuting": [Function],
-                  "isFreeTierAccount": [Function],
-                  "isTemplateReady": [Function],
-                  "maxAutoPilotThroughputSet": [Function],
-                  "maxThroughputRU": [Function],
-                  "maxThroughputRUText": [Function],
-                  "minThroughputRU": [Function],
-                  "onMoreDetailsKeyPress": [Function],
-                  "requestUnitsUsageCost": [Function],
-                  "ruToolTipText": [Function],
-                  "showUpsellMessage": [Function],
-                  "throughput": [Function],
-                  "throughputRangeText": [Function],
-                  "throughputSpendAck": [Function],
-                  "throughputSpendAckText": [Function],
-                  "throughputSpendAckVisible": [Function],
-                  "title": [Function],
-                  "upsellAnchorText": [Function],
-                  "upsellAnchorUrl": [Function],
-                  "upsellMessage": [Function],
-                  "upsellMessageAriaLabel": [Function],
-                  "visible": [Function],
-                },
-                "addDatabaseText": [Function],
                 "arcadiaToken": [Function],
                 "canExceedMaximumValue": [Function],
                 "canSaveQueries": [Function],
@@ -2991,49 +2862,6 @@ exports[`SettingsComponent renders 1`] = `
               "_refreshSparkEnabledStateForAccount": [Function],
               "_resetNotebookWorkspace": [Function],
               "addCollectionText": [Function],
-              "addDatabasePane": AddDatabasePane {
-                "autoPilotUsageCost": [Function],
-                "canConfigureThroughput": [Function],
-                "canExceedMaximumValue": [Function],
-                "canRequestSupport": [Function],
-                "container": [Circular],
-                "costsVisible": [Function],
-                "databaseCreateNewShared": [Function],
-                "databaseId": [Function],
-                "databaseIdLabel": [Function],
-                "databaseIdPlaceHolder": [Function],
-                "databaseIdTooltipText": [Function],
-                "databaseLevelThroughputTooltipText": [Function],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "freeTierExceedThroughputTooltip": [Function],
-                "id": "adddatabasepane",
-                "isAutoPilotSelected": [Function],
-                "isExecuting": [Function],
-                "isFreeTierAccount": [Function],
-                "isTemplateReady": [Function],
-                "maxAutoPilotThroughputSet": [Function],
-                "maxThroughputRU": [Function],
-                "maxThroughputRUText": [Function],
-                "minThroughputRU": [Function],
-                "onMoreDetailsKeyPress": [Function],
-                "requestUnitsUsageCost": [Function],
-                "ruToolTipText": [Function],
-                "showUpsellMessage": [Function],
-                "throughput": [Function],
-                "throughputRangeText": [Function],
-                "throughputSpendAck": [Function],
-                "throughputSpendAckText": [Function],
-                "throughputSpendAckVisible": [Function],
-                "title": [Function],
-                "upsellAnchorText": [Function],
-                "upsellAnchorUrl": [Function],
-                "upsellMessage": [Function],
-                "upsellMessageAriaLabel": [Function],
-                "visible": [Function],
-              },
-              "addDatabaseText": [Function],
               "arcadiaToken": [Function],
               "canExceedMaximumValue": [Function],
               "canSaveQueries": [Function],

src/Explorer/Explorer.tsx

@@ -52,7 +52,6 @@ import type NotebookManager from "./Notebook/NotebookManager";
 import type { NotebookPaneContent } from "./Notebook/NotebookManager";
 import { NotebookUtil } from "./Notebook/NotebookUtil";
 import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
-import AddDatabasePane from "./Panes/AddDatabasePane";
 import { AddDatabasePanel } from "./Panes/AddDatabasePanel/AddDatabasePanel";
 import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane/BrowseQueriesPane";
 import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
@@ -68,7 +67,7 @@ import { SetupNoteBooksPanel } from "./Panes/SetupNotebooksPanel/SetupNotebooksP
 import { StringInputPane } from "./Panes/StringInputPane/StringInputPane";
 import { AddTableEntityPanel } from "./Panes/Tables/AddTableEntityPanel";
 import { EditTableEntityPanel } from "./Panes/Tables/EditTableEntityPanel";
-import { TableQuerySelectPanel } from "./Panes/Tables/TableQuerySelectPanel";
+import { TableQuerySelectPanel } from "./Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel";
 import { UploadFilePane } from "./Panes/UploadFilePane/UploadFilePane";
 import { UploadItemsPane } from "./Panes/UploadItemsPane/UploadItemsPane";
 import TableListViewModal from "./Tables/DataTable/TableEntityListViewModel";
@@ -101,7 +100,6 @@ export interface ExplorerParams {
 
 export default class Explorer {
   public addCollectionText: ko.Observable<string>;
-  public addDatabaseText: ko.Observable<string>;
   public collectionTitle: ko.Observable<string>;
   public deleteCollectionText: ko.Observable<string>;
   public deleteDatabaseText: ko.Observable<string>;
@@ -149,7 +147,6 @@ export default class Explorer {
   public tabsManager: TabsManager;
 
   // Contextual panes
-  public addDatabasePane: AddDatabasePane;
   public cassandraAddCollectionPane: CassandraAddCollectionPane;
   private gitHubClient: GitHubClient;
   public gitHubOAuthService: GitHubOAuthService;
@@ -208,7 +205,6 @@ export default class Explorer {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
     this.addCollectionText = ko.observable<string>("New Collection");
-    this.addDatabaseText = ko.observable<string>("New Database");
     this.collectionTitle = ko.observable<string>("Collections");
     this.collectionTreeNodeAltText = ko.observable<string>("Collection");
     this.deleteCollectionText = ko.observable<string>("Delete Collection");
@@ -401,13 +397,6 @@ export default class Explorer {
       }
     });
 
-    this.addDatabasePane = new AddDatabasePane({
-      id: "adddatabasepane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.cassandraAddCollectionPane = new CassandraAddCollectionPane({
       id: "cassandraaddcollectionpane",
       visible: ko.observable<boolean>(false),
@@ -423,7 +412,6 @@ export default class Explorer {
       }
     });
 
-    this.addDatabaseText.subscribe((addDatabaseText: string) => this.addDatabasePane.title(addDatabaseText));
     this.isTabsContentExpanded = ko.observable(false);
 
     document.addEventListener(
@@ -441,7 +429,6 @@ export default class Explorer {
     switch (userContext.apiType) {
       case "SQL":
         this.addCollectionText("New Container");
-        this.addDatabaseText("New Database");
         this.collectionTitle("SQL API");
         this.collectionTreeNodeAltText("Container");
         this.deleteCollectionText("Delete Container");
@@ -450,7 +437,6 @@ export default class Explorer {
         break;
       case "Mongo":
         this.addCollectionText("New Collection");
-        this.addDatabaseText("New Database");
         this.collectionTitle("Collections");
         this.collectionTreeNodeAltText("Collection");
         this.deleteCollectionText("Delete Collection");
@@ -459,7 +445,6 @@ export default class Explorer {
         break;
       case "Gremlin":
         this.addCollectionText("New Graph");
-        this.addDatabaseText("New Database");
         this.deleteCollectionText("Delete Graph");
         this.deleteDatabaseText("Delete Database");
         this.collectionTitle("Gremlin API");
@@ -468,7 +453,6 @@ export default class Explorer {
         break;
       case "Tables":
         this.addCollectionText("New Table");
-        this.addDatabaseText("New Database");
         this.deleteCollectionText("Delete Table");
         this.deleteDatabaseText("Delete Database");
         this.collectionTitle("Azure Table API");
@@ -478,7 +462,6 @@ export default class Explorer {
         break;
       case "Cassandra":
         this.addCollectionText("New Table");
-        this.addDatabaseText("New Keyspace");
         this.deleteCollectionText("Delete Table");
         this.deleteDatabaseText("Delete Keyspace");
         this.collectionTitle("Cassandra API");
@@ -1384,7 +1367,7 @@ export default class Explorer {
       this.showOkModalDialog("Unable to rename file", "This file is being edited. Please close the tab and try again.");
     } else {
       this.openSidePanel(
-        "",
+        "Rename Notebook",
         <StringInputPane
           explorer={this}
           closePanel={() => {
@@ -1415,7 +1398,7 @@ export default class Explorer {
     }
 
     this.openSidePanel(
-      "",
+      "Create new directory",
       <StringInputPane
         explorer={this}
         closePanel={() => {
@@ -1907,7 +1890,7 @@ export default class Explorer {
       "Delete " + getDatabaseName(),
       <DeleteDatabaseConfirmationPanel
         explorer={this}
-        openNotificationConsole={this.expandConsole}
+        openNotificationConsole={() => this.expandConsole()}
         closePanel={this.closeSidePanel}
         selectedDatabase={this.findSelectedDatabase()}
       />
@@ -1949,19 +1932,14 @@ export default class Explorer {
     );
   }
   public openAddDatabasePane(): void {
-    if (userContext.features.enableKOPanel) {
+    this.openSidePanel(
-      this.addDatabasePane.open();
+      "New " + getDatabaseName(),
-      document.getElementById("linkAddDatabase").focus();
+      <AddDatabasePanel
-    } else {
+        explorer={this}
-      this.openSidePanel(
+        openNotificationConsole={() => this.expandConsole()}
-        "Add " + getDatabaseName(),
+        closePanel={this.closeSidePanel}
-        <AddDatabasePanel
+      />
-          explorer={this}
+    );
-          openNotificationConsole={() => this.expandConsole()}
-          closePanel={this.closeSidePanel}
-        />
-      );
-    }
   }
 
   public openBrowseQueriesPanel(): void {

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

@@ -132,6 +132,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
               onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                 onLabelChange(event);
               }}
+              autoFocus
             />
             <div className="actionCol"></div>
           </div>

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -33,7 +33,6 @@ export class CommandBarComponentAdapter implements ReactAdapter {
       container.deleteCollectionText,
       container.deleteDatabaseText,
       container.addCollectionText,
-      container.addDatabaseText,
       container.isDatabaseNodeOrNoneSelected,
       container.isDatabaseNodeSelected,
       container.isNoneSelected,

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts

@@ -126,7 +126,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addDatabaseText = ko.observable("mockText");
       mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
         databaseAccount: {
@@ -221,7 +220,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addDatabaseText = ko.observable("mockText");
       mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
         databaseAccount: {

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -22,6 +22,7 @@ import * as Constants from "../../../Common/Constants";
 import { configContext, Platform } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { userContext } from "../../../UserContext";
+import { getDatabaseName } from "../../../Utils/APITypeUtils";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { OpenFullScreen } from "../../OpenFullScreen";
@@ -261,7 +262,7 @@ function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonCo
 }
 
 function createNewDatabase(container: Explorer): CommandButtonComponentProps {
-  const label = container.addDatabaseText();
+  const label = "New " + getDatabaseName();
   return {
     iconSrc: AddDatabaseIcon,
     iconAlt: label,

src/Explorer/Panes/AddDatabasePane.html

@@ -1,174 +0,0 @@
-<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

@@ -1,105 +0,0 @@
-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";
-
-const mockDatabaseAccount: DatabaseAccount = {
-  id: "mock",
-  kind: "DocumentDB",
-  location: "",
-  name: "mock",
-  properties: {
-    documentEndpoint: "",
-    cassandraEndpoint: "",
-    gremlinEndpoint: "",
-    tableEndpoint: "",
-    enableFreeTier: false,
-  },
-  type: undefined,
-};
-
-const mockFreeTierDatabaseAccount: DatabaseAccount = {
-  id: "mock",
-  kind: "DocumentDB",
-  location: "",
-  name: "mock",
-  properties: {
-    documentEndpoint: "",
-    cassandraEndpoint: "",
-    gremlinEndpoint: "",
-    tableEndpoint: "",
-    enableFreeTier: true,
-  },
-  type: undefined,
-};
-
-describe("Add Database Pane", () => {
-  describe("getSharedThroughputDefault()", () => {
-    it("should be true if subscription type is Benefits", () => {
-      updateUserContext({
-        subscriptionType: SubscriptionType.Benefits,
-      });
-      const explorer = new Explorer();
-      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 explorer = new Explorer();
-      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 explorer = new Explorer();
-      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 explorer = new Explorer();
-      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 explorer = new Explorer();
-      const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
-      expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
-    });
-
-    it("should display free tier text in upsell messaging", () => {
-      updateUserContext({ databaseAccount: mockFreeTierDatabaseAccount });
-      const explorer = new Explorer();
-      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", () => {
-      updateUserContext({ databaseAccount: mockDatabaseAccount });
-      const explorer = new Explorer();
-      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/AddDatabasePane.ts

@@ -1,452 +0,0 @@
-import * as ko from "knockout";
-import * as Constants from "../../Common/Constants";
-import { createDatabase } from "../../Common/dataAccess/createDatabase";
-import editable from "../../Common/EditableUtility";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { configContext, Platform } from "../../ConfigContext";
-import * as DataModels from "../../Contracts/DataModels";
-import { SubscriptionType } from "../../Contracts/SubscriptionType";
-import * as ViewModels from "../../Contracts/ViewModels";
-import * as SharedConstants from "../../Shared/Constants";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
-import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
-import * as PricingUtils from "../../Utils/PricingUtils";
-import { ContextualPaneBase } from "./ContextualPaneBase";
-
-export default class AddDatabasePane extends ContextualPaneBase {
-  public defaultExperience: ko.Computed<string>;
-  public databaseIdLabel: ko.Computed<string>;
-  public databaseIdPlaceHolder: ko.Computed<string>;
-  public databaseId: ko.Observable<string>;
-  public databaseIdTooltipText: ko.Computed<string>;
-  public databaseLevelThroughputTooltipText: ko.Computed<string>;
-  public databaseCreateNewShared: ko.Observable<boolean>;
-  public formErrorsDetails: ko.Observable<string>;
-  public throughput: ViewModels.Editable<number>;
-  public maxThroughputRU: ko.Observable<number>;
-  public minThroughputRU: ko.Observable<number>;
-  public maxThroughputRUText: ko.PureComputed<string>;
-  public throughputRangeText: ko.Computed<string>;
-  public throughputSpendAckText: ko.Observable<string>;
-  public throughputSpendAck: ko.Observable<boolean>;
-  public throughputSpendAckVisible: ko.Computed<boolean>;
-  public requestUnitsUsageCost: ko.Computed<string>;
-  public canRequestSupport: ko.PureComputed<boolean>;
-  public costsVisible: ko.PureComputed<boolean>;
-  public upsellMessage: ko.PureComputed<string>;
-  public upsellMessageAriaLabel: ko.PureComputed<string>;
-  public upsellAnchorUrl: ko.PureComputed<string>;
-  public upsellAnchorText: ko.PureComputed<string>;
-  public isAutoPilotSelected: ko.Observable<boolean>;
-  public maxAutoPilotThroughputSet: ko.Observable<number>;
-  public autoPilotUsageCost: ko.Computed<string>;
-  public canExceedMaximumValue: ko.PureComputed<boolean>;
-  public ruToolTipText: ko.Computed<string>;
-  public freeTierExceedThroughputTooltip: ko.Computed<string>;
-  public isFreeTierAccount: ko.Computed<boolean>;
-  public canConfigureThroughput: ko.PureComputed<boolean>;
-  public showUpsellMessage: ko.PureComputed<boolean>;
-
-  constructor(options: ViewModels.PaneOptions) {
-    super(options);
-    this.title((this.container && this.container.addDatabaseText()) || "New Database");
-    this.databaseId = ko.observable<string>();
-    this.ruToolTipText = ko.pureComputed(() => PricingUtils.getRuToolTipText());
-    this.canConfigureThroughput = ko.pureComputed(() => !this.container.isServerlessEnabled());
-
-    this.canExceedMaximumValue = ko.pureComputed(() => this.container.canExceedMaximumValue());
-
-    // TODO 388844: get defaults from parent frame
-    this.databaseCreateNewShared = ko.observable<boolean>(this.getSharedThroughputDefault());
-
-    this.databaseIdLabel = ko.computed<string>(() =>
-      userContext.apiType === "Cassandra" ? "Keyspace id" : "Database id"
-    );
-
-    this.databaseIdPlaceHolder = ko.computed<string>(() =>
-      userContext.apiType === "Cassandra" ? "Type a new keyspace id" : "Type a new database id"
-    );
-
-    this.databaseIdTooltipText = ko.computed<string>(() => {
-      const isCassandraAccount: boolean = userContext.apiType === "Cassandra";
-      return `A ${isCassandraAccount ? "keyspace" : "database"} is a logical container of one or more ${
-        isCassandraAccount ? "tables" : "collections"
-      }`;
-    });
-    this.databaseLevelThroughputTooltipText = ko.computed<string>(() => {
-      const isCassandraAccount: boolean = userContext.apiType === "Cassandra";
-      const databaseLabel: string = isCassandraAccount ? "keyspace" : "database";
-      const collectionsLabel: string = isCassandraAccount ? "tables" : "collections";
-      return `Provisioned throughput at the ${databaseLabel} level will be shared across all ${collectionsLabel} within the ${databaseLabel}.`;
-    });
-
-    this.throughput = editable.observable<number>();
-    this.maxThroughputRU = ko.observable<number>();
-    this.minThroughputRU = ko.observable<number>();
-    this.throughputSpendAckText = ko.observable<string>();
-    this.throughputSpendAck = ko.observable<boolean>(false);
-    this.isAutoPilotSelected = ko.observable<boolean>(false);
-    this.maxAutoPilotThroughputSet = ko.observable<number>(AutoPilotUtils.minAutoPilotThroughput);
-    this.autoPilotUsageCost = ko.pureComputed<string>(() => {
-      const autoPilot = this._isAutoPilotSelectedAndWhatTier();
-      if (!autoPilot) {
-        return "";
-      }
-      return PricingUtils.getAutoPilotV3SpendHtml(autoPilot.maxThroughput, true /* isDatabaseThroughput */);
-    });
-    this.throughputRangeText = ko.pureComputed<string>(() => {
-      if (this.isAutoPilotSelected()) {
-        return AutoPilotUtils.getAutoPilotHeaderText();
-      }
-      return `Throughput (${this.minThroughputRU().toLocaleString()} - ${this.maxThroughputRU().toLocaleString()} RU/s)`;
-    });
-
-    this.requestUnitsUsageCost = ko.computed(() => {
-      const offerThroughput: number = this.throughput();
-      if (
-        offerThroughput < this.minThroughputRU() ||
-        (offerThroughput > this.maxThroughputRU() && !this.canExceedMaximumValue())
-      ) {
-        return "";
-      }
-
-      const { databaseAccount: account } = userContext;
-      if (!account) {
-        return "";
-      }
-
-      const regions = account?.properties?.readLocations?.length || 1;
-      const multimaster = account?.properties?.enableMultipleWriteLocations || false;
-
-      let estimatedSpendAcknowledge: string;
-      let estimatedSpend: string;
-      if (!this.isAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
-          offerThroughput,
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
-        estimatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
-          offerThroughput,
-          userContext.portalEnv,
-          regions,
-          multimaster,
-          this.isAutoPilotSelected()
-        );
-      } else {
-        estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
-          this.maxAutoPilotThroughputSet(),
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
-        estimatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
-          this.maxAutoPilotThroughputSet(),
-          userContext.portalEnv,
-          regions,
-          multimaster,
-          this.isAutoPilotSelected()
-        );
-      }
-      // TODO: change throughputSpendAckText to be a computed value, instead of having this side effect
-      this.throughputSpendAckText(estimatedSpendAcknowledge);
-      return estimatedSpend;
-    });
-
-    this.canRequestSupport = ko.pureComputed(() => {
-      if (
-        configContext.platform !== Platform.Emulator &&
-        !userContext.isTryCosmosDBSubscription &&
-        configContext.platform !== Platform.Portal
-      ) {
-        const offerThroughput: number = this.throughput();
-        return offerThroughput <= 100000;
-      }
-
-      return false;
-    });
-
-    this.isFreeTierAccount = ko.computed<boolean>(() => {
-      return userContext?.databaseAccount?.properties?.enableFreeTier;
-    });
-
-    this.showUpsellMessage = ko.pureComputed(() => {
-      if (this.container.isServerlessEnabled()) {
-        return false;
-      }
-
-      if (this.isFreeTierAccount()) {
-        return this.databaseCreateNewShared();
-      }
-
-      return true;
-    });
-
-    this.maxThroughputRUText = ko.pureComputed(() => {
-      return this.maxThroughputRU().toLocaleString();
-    });
-
-    this.costsVisible = ko.pureComputed(() => {
-      return configContext.platform !== Platform.Emulator;
-    });
-
-    this.throughputSpendAckVisible = ko.pureComputed<boolean>(() => {
-      const autoscaleThroughput = this.maxAutoPilotThroughputSet() * 1;
-      if (this.isAutoPilotSelected()) {
-        return autoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K;
-      }
-
-      const selectedThroughput: number = this.throughput();
-      const maxRU: number = this.maxThroughputRU && this.maxThroughputRU();
-
-      const isMaxRUGreaterThanDefault: boolean = maxRU > SharedConstants.CollectionCreation.DefaultCollectionRUs100K;
-      const isThroughputSetGreaterThanDefault: boolean =
-        selectedThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K;
-
-      if (this.canExceedMaximumValue()) {
-        return isThroughputSetGreaterThanDefault;
-      }
-
-      return isThroughputSetGreaterThanDefault && isMaxRUGreaterThanDefault;
-    });
-
-    this.databaseCreateNewShared.subscribe((useShared: boolean) => {
-      this._updateThroughputLimitByDatabase();
-    });
-
-    this.resetData();
-
-    this.freeTierExceedThroughputTooltip = ko.pureComputed<string>(() =>
-      this.isFreeTierAccount() && !this.container.isFirstResourceCreated()
-        ? "The first 400 RU/s in this account are free. Billing will apply to any throughput beyond 400 RU/s."
-        : ""
-    );
-
-    this.upsellMessage = ko.pureComputed<string>(() => {
-      return PricingUtils.getUpsellMessage(
-        userContext.portalEnv,
-        this.isFreeTierAccount(),
-        this.container.isFirstResourceCreated(),
-        false
-      );
-    });
-
-    this.upsellMessageAriaLabel = ko.pureComputed<string>(() => {
-      return `${this.upsellMessage()}. Click ${this.isFreeTierAccount() ? "to learn more" : "for more details"}`;
-    });
-
-    this.upsellAnchorUrl = ko.pureComputed<string>(() => {
-      return this.isFreeTierAccount() ? Constants.Urls.freeTierInformation : Constants.Urls.cosmosPricing;
-    });
-
-    this.upsellAnchorText = ko.pureComputed<string>(() => {
-      return this.isFreeTierAccount() ? "Learn more" : "More details";
-    });
-  }
-
-  public onMoreDetailsKeyPress = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
-      this.showErrorDetails();
-      return false;
-    }
-    return true;
-  };
-
-  public open() {
-    super.open();
-    this.resetData();
-    const addDatabasePaneOpenMessage = {
-      subscriptionType: userContext.subscriptionType,
-      subscriptionQuotaId: userContext.quotaId,
-      defaultsCheck: {
-        throughput: this.throughput(),
-        flight: userContext.addCollectionFlight,
-      },
-      dataExplorerArea: Constants.Areas.ContextualPane,
-    };
-    const focusElement = document.getElementById("database-id");
-    focusElement && focusElement.focus();
-    TelemetryProcessor.trace(Action.CreateDatabase, ActionModifiers.Open, addDatabasePaneOpenMessage);
-  }
-
-  public submit() {
-    if (!this._isValid()) {
-      return;
-    }
-
-    const offerThroughput: number = this._computeOfferThroughput();
-
-    const addDatabasePaneStartMessage = {
-      database: ko.toJS({
-        id: this.databaseId(),
-        shared: this.databaseCreateNewShared(),
-      }),
-      offerThroughput,
-      subscriptionType: userContext.subscriptionType,
-      subscriptionQuotaId: userContext.quotaId,
-      defaultsCheck: {
-        flight: userContext.addCollectionFlight,
-      },
-      dataExplorerArea: Constants.Areas.ContextualPane,
-    };
-    const startKey: number = TelemetryProcessor.traceStart(Action.CreateDatabase, addDatabasePaneStartMessage);
-    this.formErrors("");
-    this.isExecuting(true);
-
-    const createDatabaseParams: DataModels.CreateDatabaseParams = {
-      databaseId: addDatabasePaneStartMessage.database.id,
-      databaseLevelThroughput: addDatabasePaneStartMessage.database.shared,
-    };
-
-    if (this.isAutoPilotSelected()) {
-      createDatabaseParams.autoPilotMaxThroughput = this.maxAutoPilotThroughputSet();
-    } else {
-      createDatabaseParams.offerThroughput = addDatabasePaneStartMessage.offerThroughput;
-    }
-
-    createDatabase(createDatabaseParams).then(
-      (database: DataModels.Database) => {
-        this._onCreateDatabaseSuccess(offerThroughput, startKey);
-      },
-      (error: any) => {
-        this._onCreateDatabaseFailure(error, offerThroughput, startKey);
-      }
-    );
-  }
-
-  public resetData() {
-    this.databaseId("");
-    this.databaseCreateNewShared(this.getSharedThroughputDefault());
-    this.isAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
-    this.maxAutoPilotThroughputSet(AutoPilotUtils.minAutoPilotThroughput);
-    this._updateThroughputLimitByDatabase();
-    this.throughputSpendAck(false);
-    super.resetData();
-  }
-
-  public getSharedThroughputDefault(): boolean {
-    const { subscriptionType } = userContext;
-
-    if (subscriptionType === SubscriptionType.EA || this.container.isServerlessEnabled()) {
-      return false;
-    }
-
-    return true;
-  }
-
-  private _onCreateDatabaseSuccess(offerThroughput: number, startKey: number): void {
-    this.isExecuting(false);
-    this.close();
-    this.container.refreshAllDatabases();
-    const addDatabasePaneSuccessMessage = {
-      database: ko.toJS({
-        id: this.databaseId(),
-        shared: this.databaseCreateNewShared(),
-      }),
-      offerThroughput: offerThroughput,
-      subscriptionType: userContext.subscriptionType,
-      subscriptionQuotaId: userContext.quotaId,
-      defaultsCheck: {
-        flight: userContext.addCollectionFlight,
-      },
-      dataExplorerArea: Constants.Areas.ContextualPane,
-    };
-    TelemetryProcessor.traceSuccess(Action.CreateDatabase, addDatabasePaneSuccessMessage, startKey);
-    this.resetData();
-  }
-
-  private _onCreateDatabaseFailure(error: any, offerThroughput: number, startKey: number): void {
-    this.isExecuting(false);
-    const errorMessage = getErrorMessage(error);
-    this.formErrors(errorMessage);
-    this.formErrorsDetails(errorMessage);
-    const addDatabasePaneFailedMessage = {
-      database: ko.toJS({
-        id: this.databaseId(),
-        shared: this.databaseCreateNewShared(),
-      }),
-      offerThroughput: offerThroughput,
-      subscriptionType: userContext.subscriptionType,
-      subscriptionQuotaId: userContext.quotaId,
-      defaultsCheck: {
-        flight: userContext.addCollectionFlight,
-      },
-      dataExplorerArea: Constants.Areas.ContextualPane,
-      error: errorMessage,
-      errorStack: getErrorStack(error),
-    };
-    TelemetryProcessor.traceFailure(Action.CreateDatabase, addDatabasePaneFailedMessage, startKey);
-  }
-
-  private _getThroughput(): number {
-    const throughput: number = this.throughput();
-    return isNaN(throughput) ? 0 : Number(throughput);
-  }
-
-  private _computeOfferThroughput(): number {
-    if (!this.canConfigureThroughput()) {
-      return undefined;
-    }
-
-    if (this.isAutoPilotSelected()) {
-      return undefined;
-    }
-
-    return this._getThroughput();
-  }
-
-  private _isValid(): boolean {
-    // TODO add feature flag that disables validation for customers with custom accounts
-    if (this.isAutoPilotSelected()) {
-      const autoPilot = this._isAutoPilotSelectedAndWhatTier();
-      if (
-        !autoPilot ||
-        !autoPilot.maxThroughput ||
-        !AutoPilotUtils.isValidAutoPilotThroughput(autoPilot.maxThroughput)
-      ) {
-        this.formErrors(
-          `Please enter a value greater than ${AutoPilotUtils.minAutoPilotThroughput} for autopilot throughput`
-        );
-        return false;
-      }
-    }
-    const throughput = this._getThroughput();
-
-    if (throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && !this.throughputSpendAck()) {
-      this.formErrors(`Please acknowledge the estimated daily spend.`);
-      return false;
-    }
-
-    const autoscaleThroughput = this.maxAutoPilotThroughputSet() * 1;
-
-    if (
-      this.isAutoPilotSelected() &&
-      autoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
-      !this.throughputSpendAck()
-    ) {
-      this.formErrors(`Please acknowledge the estimated monthly spend.`);
-      return false;
-    }
-
-    return true;
-  }
-
-  private _isAutoPilotSelectedAndWhatTier(): DataModels.AutoPilotCreationSettings {
-    if (this.isAutoPilotSelected() && this.maxAutoPilotThroughputSet()) {
-      return {
-        maxThroughput: this.maxAutoPilotThroughputSet() * 1,
-      };
-    }
-    return undefined;
-  }
-
-  private _updateThroughputLimitByDatabase() {
-    const throughputDefaults = this.container.collectionCreationDefaults.throughput;
-    this.throughput(throughputDefaults.shared);
-    this.maxThroughputRU(throughputDefaults.unlimitedmax);
-    this.minThroughputRU(throughputDefaults.unlimitedmin);
-  }
-}

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx

@@ -9,10 +9,7 @@ import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUti
 import Explorer from "../../Explorer";
 import { NotebookContentItem, NotebookContentItemType } from "../../Notebook/NotebookContentItem";
 import { ResourceTreeAdapter } from "../../Tree/ResourceTreeAdapter";
-import {
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
 import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
 
 interface Location {
@@ -42,7 +39,6 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
 }: CopyNotebookPanelProps) => {
   const [isExecuting, setIsExecuting] = useState<boolean>();
   const [formError, setFormError] = useState<string>("");
-  const [formErrorDetail, setFormErrorDetail] = useState<string>("");
   const [pinnedRepos, setPinnedRepos] = useState<IPinnedRepo[]>();
   const [selectedLocation, setSelectedLocation] = useState<Location>();
 
@@ -92,7 +88,6 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
     } catch (error) {
       const errorMessage = getErrorMessage(error);
       setFormError(`Failed to copy ${name} to ${destination}`);
-      setFormErrorDetail(`${errorMessage}`);
       handleError(errorMessage, "CopyNotebookPaneAdapter/submit", formError);
     } finally {
       clearMessage && clearMessage();
@@ -130,14 +125,10 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
     setSelectedLocation(option?.data);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const props: RightPaneFormProps = {
     formError,
-    formErrorDetail,
-    id: "copynotebookpane",
     isExecuting: isExecuting,
-    title: "Copy notebook",
     submitButtonText: "OK",
-    onClose: closePanel,
     onSubmit: () => submit(),
     expandConsole: () => container.expandConsole(),
   };
@@ -149,8 +140,8 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <CopyNotebookPaneComponent {...copyNotebookPaneProps} />
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx

@@ -130,8 +130,8 @@ describe("Delete Collection Confirmation Pane", () => {
         .hostNodes()
         .simulate("change", { target: { value: selectedCollectionId } });
 
-      expect(wrapper.exists(".genericPaneSubmitBtn")).toBe(true);
+      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find(".genericPaneSubmitBtn").hostNodes().simulate("click");
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
       expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
 
       wrapper.unmount();
@@ -151,8 +151,8 @@ describe("Delete Collection Confirmation Pane", () => {
         .hostNodes()
         .simulate("change", { target: { value: feedbackText } });
 
-      expect(wrapper.exists(".genericPaneSubmitBtn")).toBe(true);
+      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find(".genericPaneSubmitBtn").hostNodes().simulate("click");
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
       expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
 
       const deleteFeedback = new DeleteFeedback(

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -12,10 +12,7 @@ import { userContext } from "../../../UserContext";
 import { getCollectionName } from "../../../Utils/APITypeUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
-import {
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
 export interface DeleteCollectionConfirmationPaneProps {
   explorer: Explorer;
   closePanel: () => void;
@@ -35,7 +32,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
   };
   const collectionName = getCollectionName().toLocaleLowerCase();
   const paneTitle = "Delete " + collectionName;
-  const submit = async (): Promise<void> => {
+  const onSubmit = async (): Promise<void> => {
     const collection = explorer.findSelectedCollection();
     if (!collection || inputCollectionName !== collection.id()) {
       const errorMessage = "Input " + collectionName + " name does not match the selected " + collectionName;
@@ -100,19 +97,15 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
       );
     }
   };
-  const genericPaneProps: GenericRightPaneProps = {
+  const props: RightPaneFormProps = {
     formError: formError,
-    formErrorDetail: formError,
-    id: "deleteCollectionpane",
     isExecuting,
-    title: paneTitle,
     submitButtonText: "OK",
-    onClose: closePanel,
+    onSubmit,
-    onSubmit: submit,
     expandConsole: () => explorer.expandConsole(),
   };
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <div className="confirmDeleteInput">
@@ -150,6 +143,6 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
           )}
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.test.tsx

@@ -98,8 +98,8 @@ describe("Delete Database Confirmation Pane", () => {
         .find("#confirmDatabaseId")
         .hostNodes()
         .simulate("change", { target: { value: selectedDatabaseId } });
-      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
+      expect(wrapper.exists("button")).toBe(true);
-      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
+      wrapper.find("button").hostNodes().simulate("submit");
       expect(deleteDatabase).toHaveBeenCalledWith(selectedDatabaseId);
       wrapper.unmount();
     });

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

@@ -1,5 +1,5 @@
-import { useBoolean } from "@fluentui/react-hooks";
 import { Text, TextField } from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, useState } from "react";
 import { Areas } from "../../Common/Constants";
 import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
@@ -12,9 +12,8 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import { PanelFooterComponent } from "./PanelFooterComponent";
 import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
-import { PanelLoadingScreen } from "./PanelLoadingScreen";
+import { RightPaneForm, RightPaneFormProps } from "./RightPaneForm/RightPaneForm";
 
 interface DeleteDatabaseConfirmationPanelProps {
   explorer: Explorer;
@@ -23,36 +22,19 @@ interface DeleteDatabaseConfirmationPanelProps {
   selectedDatabase: Database;
 }
 
-export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseConfirmationPanelProps> = (
+export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseConfirmationPanelProps> = ({
-  props: DeleteDatabaseConfirmationPanelProps
+  explorer,
-): JSX.Element => {
+  openNotificationConsole,
+  closePanel,
+  selectedDatabase,
+}: DeleteDatabaseConfirmationPanelProps): JSX.Element => {
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
 
   const [formError, setFormError] = useState<string>("");
   const [databaseInput, setDatabaseInput] = useState<string>("");
   const [databaseFeedbackInput, setDatabaseFeedbackInput] = useState<string>("");
 
-  const getPanelErrorProps = (): PanelInfoErrorProps => {
+  const submit = async (): Promise<void> => {
-    if (formError) {
-      return {
-        messageType: "error",
-        message: formError,
-        showErrorDetails: true,
-        openNotificationConsole: props.openNotificationConsole,
-      };
-    }
-
-    return {
-      messageType: "warning",
-      showErrorDetails: false,
-      message:
-        "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
-    };
-  };
-
-  const submit = async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
-    const { selectedDatabase, explorer } = props;
-    event.preventDefault();
     if (selectedDatabase?.id() && databaseInput !== selectedDatabase.id()) {
       setFormError("Input database name does not match the selected database");
       logConsoleError(`Error while deleting collection ${selectedDatabase && selectedDatabase.id()}`);
@@ -69,7 +51,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
 
     try {
       await deleteDatabase(selectedDatabase.id());
-      props.closePanel();
+      closePanel();
       explorer.refreshAllDatabases();
       explorer.tabsManager.closeTabsByComparator((tab) => tab.node?.id() === selectedDatabase.id());
       explorer.selectedNode(undefined);
@@ -121,13 +103,27 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
   };
 
   const shouldRecordFeedback = (): boolean => {
-    const { explorer } = props;
     return explorer.isLastNonEmptyDatabase() || (explorer.isLastDatabase() && explorer.isSelectedDatabaseShared());
   };
 
+  const props: RightPaneFormProps = {
+    formError,
+    isExecuting: isLoading,
+    submitButtonText: "OK",
+    onSubmit: () => submit(),
+    expandConsole: openNotificationConsole,
+  };
+
+  const errorProps: PanelInfoErrorProps = {
+    messageType: "warning",
+    showErrorDetails: false,
+    message:
+      "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
+  };
+
   return (
-    <form className="panelFormWrapper" onSubmit={submit}>
+    <RightPaneForm {...props}>
-      <PanelInfoErrorComponent {...getPanelErrorProps()} />
+      {!formError && <PanelInfoErrorComponent {...errorProps} />}
       <div className="panelMainContent">
         <div className="confirmDeleteInput">
           <span className="mandatoryStar">* </span>
@@ -161,8 +157,6 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
           </div>
         )}
       </div>
-      <PanelFooterComponent buttonLabel="OK" />
+    </RightPaneForm>
-      {isLoading && <PanelLoadingScreen />}
-    </form>
   );
 };

src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.tsx

@@ -1,12 +1,10 @@
-import { useBoolean } from "@fluentui/react-hooks";
 import { IDropdownOption, IImageProps, Image, Stack, Text } from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, useState } from "react";
 import AddPropertyIcon from "../../../../images/Add-property.svg";
+import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import StoredProcedure from "../../Tree/StoredProcedure";
-import {
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
 import { InputParameter } from "./InputParameter";
 
 interface ExecuteSprocParamsPaneProps {
@@ -35,24 +33,11 @@ export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPanePro
   const [partitionValue, setPartitionValue] = useState<string>(); // Defaulting to undefined here is important. It is not the same partition key as ""
   const [selectedKey, setSelectedKey] = React.useState<IDropdownOption>({ key: "string", text: "" });
   const [formError, setFormError] = useState<string>("");
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
 
   const onPartitionKeyChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
     setSelectedKey(item);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
-    expandConsole,
-    formError: formError,
-    formErrorDetail: formErrorsDetails,
-    id: "executesprocparamspane",
-    isExecuting: isLoading,
-    title: "Input parameters",
-    submitButtonText: "Execute",
-    onClose: () => closePanel(),
-    onSubmit: () => submit(),
-  };
-
   const validateUnwrappedParams = (): boolean => {
     const unwrappedParams: UnwrappedExecuteSprocParam[] = paramKeyValues;
     for (let i = 0; i < unwrappedParams.length; i++) {
@@ -66,7 +51,7 @@ export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPanePro
 
   const setInvalidParamError = (invalidParam: string): void => {
     setFormError(`Invalid param specified: ${invalidParam}`);
-    setFormErrorsDetails(`Invalid param specified: ${invalidParam} is not a valid literal value`);
+    logConsoleError(`Invalid param specified: ${invalidParam} is not a valid literal value`);
   };
 
   const submit = (): void => {
@@ -128,8 +113,16 @@ export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPanePro
     setParamKeyValues(cloneParamKeyValue);
   };
 
+  const props: RightPaneFormProps = {
+    expandConsole,
+    formError: formError,
+    isExecuting: isLoading,
+    submitButtonText: "Execute",
+    onSubmit: () => submit(),
+  };
+
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <InputParameter
@@ -169,6 +162,6 @@ export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPanePro
           </Stack>
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };

src/Explorer/Panes/GenericRightPaneComponent/GenericRightPaneComponent.tsx

@@ -1,126 +0,0 @@
-import { IconButton, PrimaryButton } from "@fluentui/react";
-import React, { FunctionComponent, ReactNode } from "react";
-import ErrorRedIcon from "../../../../images/error_red.svg";
-import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";
-import { KeyCodes } from "../../../Common/Constants";
-
-export interface GenericRightPaneProps {
-  expandConsole: () => void;
-  formError: string;
-  formErrorDetail: string;
-  id: string;
-  isExecuting: boolean;
-  onClose: () => void;
-  onSubmit: () => void;
-  submitButtonText: string;
-  title: string;
-  isSubmitButtonHidden?: boolean;
-  children?: ReactNode;
-}
-
-export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps> = ({
-  expandConsole,
-  formError,
-  formErrorDetail,
-  id,
-  isExecuting,
-  onClose,
-  onSubmit,
-  submitButtonText,
-  title,
-  isSubmitButtonHidden,
-  children,
-}: GenericRightPaneProps) => {
-  const getPanelHeight = (): number => {
-    const notificationConsoleElement: HTMLElement = document.getElementById("explorerNotificationConsole");
-    return window.innerHeight - $(notificationConsoleElement).height();
-  };
-
-  const panelHeight: number = getPanelHeight();
-
-  const renderPanelHeader = (): JSX.Element => {
-    return (
-      <div className="firstdivbg headerline">
-        <span id="databaseTitle" role="heading" aria-level={2}>
-          {title}
-        </span>
-        <IconButton
-          ariaLabel="Close pane"
-          title="Close pane"
-          onClick={onClose}
-          tabIndex={0}
-          className="closePaneBtn"
-          iconProps={{ iconName: "Cancel" }}
-        />
-      </div>
-    );
-  };
-
-  const renderErrorSection = (): JSX.Element => {
-    return (
-      <div className="warningErrorContainer" aria-live="assertive" hidden={!formError}>
-        <div className="warningErrorContent">
-          <span>
-            <img className="paneErrorIcon" src={ErrorRedIcon} alt="Error" />
-          </span>
-          <span className="warningErrorDetailsLinkContainer">
-            <span className="formErrors" title={formError}>
-              {formError}
-            </span>
-            <a className="errorLink" role="link" hidden={!formErrorDetail} onClick={expandConsole}>
-              More details
-            </a>
-          </span>
-        </div>
-      </div>
-    );
-  };
-
-  const renderPanelFooter = (): JSX.Element => {
-    return (
-      <div className="paneFooter">
-        <div className="leftpanel-okbut">
-          <PrimaryButton
-            style={{ visibility: isSubmitButtonHidden ? "hidden" : "visible" }}
-            ariaLabel="Submit"
-            title="Submit"
-            onClick={onSubmit}
-            tabIndex={0}
-            className="genericPaneSubmitBtn"
-            text={submitButtonText}
-          />
-        </div>
-      </div>
-    );
-  };
-
-  const renderLoadingScreen = (): JSX.Element => {
-    return (
-      <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" hidden={!isExecuting}>
-        <img className="dataExplorerLoader" src={LoadingIndicatorIcon} />
-      </div>
-    );
-  };
-
-  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
-    if (event.keyCode === KeyCodes.Escape) {
-      onClose();
-      event.stopPropagation();
-    }
-  };
-
-  return (
-    <div tabIndex={-1} onKeyDown={onKeyDown}>
-      <div className="contextual-pane-out" onClick={onClose}></div>
-      <div className="contextual-pane" id={id} style={{ height: panelHeight }} onKeyDown={onKeyDown}>
-        <div className="panelContentWrapper">
-          {renderPanelHeader()}
-          {renderErrorSection()}
-          {children}
-          {renderPanelFooter()}
-        </div>
-        {renderLoadingScreen()}
-      </div>
-    </div>
-  );
-};

src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap

@@ -24,49 +24,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "_refreshSparkEnabledStateForAccount": [Function],
             "_resetNotebookWorkspace": [Function],
             "addCollectionText": [Function],
-            "addDatabasePane": AddDatabasePane {
-              "autoPilotUsageCost": [Function],
-              "canConfigureThroughput": [Function],
-              "canExceedMaximumValue": [Function],
-              "canRequestSupport": [Function],
-              "container": [Circular],
-              "costsVisible": [Function],
-              "databaseCreateNewShared": [Function],
-              "databaseId": [Function],
-              "databaseIdLabel": [Function],
-              "databaseIdPlaceHolder": [Function],
-              "databaseIdTooltipText": [Function],
-              "databaseLevelThroughputTooltipText": [Function],
-              "firstFieldHasFocus": [Function],
-              "formErrors": [Function],
-              "formErrorsDetails": [Function],
-              "freeTierExceedThroughputTooltip": [Function],
-              "id": "adddatabasepane",
-              "isAutoPilotSelected": [Function],
-              "isExecuting": [Function],
-              "isFreeTierAccount": [Function],
-              "isTemplateReady": [Function],
-              "maxAutoPilotThroughputSet": [Function],
-              "maxThroughputRU": [Function],
-              "maxThroughputRUText": [Function],
-              "minThroughputRU": [Function],
-              "onMoreDetailsKeyPress": [Function],
-              "requestUnitsUsageCost": [Function],
-              "ruToolTipText": [Function],
-              "showUpsellMessage": [Function],
-              "throughput": [Function],
-              "throughputRangeText": [Function],
-              "throughputSpendAck": [Function],
-              "throughputSpendAckText": [Function],
-              "throughputSpendAckVisible": [Function],
-              "title": [Function],
-              "upsellAnchorText": [Function],
-              "upsellAnchorUrl": [Function],
-              "upsellMessage": [Function],
-              "upsellMessageAriaLabel": [Function],
-              "visible": [Function],
-            },
-            "addDatabaseText": [Function],
             "arcadiaToken": [Function],
             "canExceedMaximumValue": [Function],
             "canSaveQueries": [Function],

src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx

@@ -1,5 +1,5 @@
-import { useBoolean } from "@fluentui/react-hooks";
 import { IImageProps, Image, ImageFit, Stack, TextField } from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, useState } from "react";
 import folderIcon from "../../../../images/folder_16x16.svg";
 import { logError } from "../../../Common/Logger";
@@ -8,10 +8,7 @@ import { userContext } from "../../../UserContext";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import QueryTab from "../../Tabs/QueryTab";
-import {
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
 
 interface LoadQueryPaneProps {
   explorer: Explorer;
@@ -24,7 +21,6 @@ export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({
 }: LoadQueryPaneProps): JSX.Element => {
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
   const [formError, setFormError] = useState<string>("");
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
   const [selectedFileName, setSelectedFileName] = useState<string>("");
   const [selectedFiles, setSelectedFiles] = useState<FileList>();
 
@@ -35,19 +31,6 @@ export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({
     className: "fileIcon",
   };
 
-  const title = "Load Query";
-  const genericPaneProps: GenericRightPaneProps = {
-    expandConsole: () => explorer.expandConsole(),
-    formError: formError,
-    formErrorDetail: formErrorsDetails,
-    id: "loadQueryPane",
-    isExecuting: isLoading,
-    title,
-    submitButtonText: "Load",
-    onClose: () => closePanel(),
-    onSubmit: () => submit(),
-  };
-
   const onFileSelected = (e: React.ChangeEvent<HTMLInputElement>): void => {
     const { files } = e.target;
     setSelectedFiles(files);
@@ -56,10 +39,8 @@ export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({
 
   const submit = async (): Promise<void> => {
     setFormError("");
-    setFormErrorsDetails("");
     if (!selectedFiles || selectedFiles.length === 0) {
       setFormError("No file specified");
-      setFormErrorsDetails("No file specified. Please input a file.");
       logConsoleError("Could not load query -- No file specified. Please input a file.");
       return;
     }
@@ -75,7 +56,6 @@ export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({
     } catch (error) {
       setLoadingFalse();
       setFormError("Failed to load query");
-      setFormErrorsDetails(`Failed to load query: ${error}`);
       logConsoleError(`Failed to load query from file ${file.name}: ${error}`);
     }
   };
@@ -100,14 +80,20 @@ export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({
 
     reader.onerror = (): void => {
       setFormError("Failed to load query");
-      setFormErrorsDetails(`Failed to load query`);
       logConsoleError(`Failed to load query from file ${file.name}`);
     };
     return reader.readAsText(file);
   };
+  const props: RightPaneFormProps = {
+    formError: formError,
+    isExecuting: isLoading,
+    submitButtonText: "Load",
+    onSubmit: () => submit(),
+    expandConsole: () => explorer.expandConsole(),
+  };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <Stack horizontal>
@@ -132,6 +118,6 @@ export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({
           </Stack>
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };

src/Explorer/Panes/LoadQueryPane/__snapshots__/LoadQueryPane.test.tsx.snap

@@ -1,16 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Load Query Pane should render Default properly 1`] = `
-<GenericRightPaneComponent
+<RightPaneForm
   expandConsole={[Function]}
   formError=""
-  formErrorDetail=""
-  id="loadQueryPane"
   isExecuting={false}
-  onClose={[Function]}
   onSubmit={[Function]}
   submitButtonText="Load"
-  title="Load Query"
 >
   <div
     className="panelFormWrapper"
@@ -58,5 +54,5 @@ exports[`Load Query Pane should render Default properly 1`] = `
       </Stack>
     </div>
   </div>
-</GenericRightPaneComponent>
+</RightPaneForm>
 `;

src/Explorer/Panes/NewVertexPanel/NewVertexPanel.test.tsx

@@ -1,4 +1,4 @@
-import { shallow, ShallowWrapper } from "enzyme";
+import { mount, shallow, ShallowWrapper } from "enzyme";
 import React from "react";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import Explorer from "../../Explorer";
@@ -36,7 +36,7 @@ describe("New Vertex Panel", () => {
   it("should call form submit method", () => {
     const onSubmitSpy = jest.fn();
 
-    const newWrapper = shallow(
+    const newWrapper = mount(
       <NewVertexPanel
         explorer={fakeExplorer}
         partitionKeyPropertyProp={undefined}
@@ -61,7 +61,7 @@ describe("New Vertex Panel", () => {
 
     const result = onSubmitSpy(fakeNewVertexData, onErrorSpy, onSuccessSpy);
 
-    const newWrapper = shallow(
+    const newWrapper = mount(
       <NewVertexPanel
         explorer={fakeExplorer}
         partitionKeyPropertyProp={undefined}

src/Explorer/Panes/NewVertexPanel/NewVertexPanel.tsx

@@ -3,9 +3,7 @@ import React, { FunctionComponent, useState } from "react";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import Explorer from "../../Explorer";
 import { NewVertexComponent } from "../../Graph/NewVertexComponent/NewVertexComponent";
-import { PanelFooterComponent } from "../PanelFooterComponent";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
-import { PanelInfoErrorComponent } from "../PanelInfoErrorComponent";
-import { PanelLoadingScreen } from "../PanelLoadingScreen";
 export interface INewVertexPanelProps {
   explorer: Explorer;
   partitionKeyPropertyProp: string;
@@ -21,14 +19,10 @@ export const NewVertexPanel: FunctionComponent<INewVertexPanelProps> = ({
 }: INewVertexPanelProps): JSX.Element => {
   let newVertexDataValue: ViewModels.NewVertexData;
   const [errorMessage, setErrorMessage] = useState<string>("");
-  const [showErrorDetails, setShowErrorDetails] = useState<boolean>(false);
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
-  const buttonLabel = "OK";
 
-  const submit = (event: React.MouseEvent<HTMLFormElement>) => {
+  const submit = () => {
-    event.preventDefault();
     setErrorMessage(undefined);
-    setShowErrorDetails(false);
     if (onSubmit !== undefined) {
       setLoadingTrue();
       onSubmit(newVertexDataValue, onError, onSuccess);
@@ -37,7 +31,6 @@ export const NewVertexPanel: FunctionComponent<INewVertexPanelProps> = ({
 
   const onError = (errorMsg: string) => {
     setErrorMessage(errorMsg);
-    setShowErrorDetails(true);
     setLoadingFalse();
   };
 
@@ -49,17 +42,16 @@ export const NewVertexPanel: FunctionComponent<INewVertexPanelProps> = ({
   const onChange = (newVertexData: ViewModels.NewVertexData) => {
     newVertexDataValue = newVertexData;
   };
+  const props: RightPaneFormProps = {
+    formError: errorMessage,
+    isExecuting: isLoading,
+    submitButtonText: "OK",
+    onSubmit: () => submit(),
+    expandConsole: openNotificationConsole,
+  };
 
   return (
-    <form className="panelFormWrapper" onSubmit={(event: React.MouseEvent<HTMLFormElement>) => submit(event)}>
+    <RightPaneForm {...props}>
-      {errorMessage && (
-        <PanelInfoErrorComponent
-          message={errorMessage}
-          messageType="error"
-          showErrorDetails={showErrorDetails}
-          openNotificationConsole={openNotificationConsole}
-        />
-      )}
       <div className="panelMainContent">
         <NewVertexComponent
           newVertexDataProp={newVertexDataValue}
@@ -67,8 +59,6 @@ export const NewVertexPanel: FunctionComponent<INewVertexPanelProps> = ({
           onChangeProp={onChange}
         />
       </div>
-      <PanelFooterComponent buttonLabel={buttonLabel} />
+    </RightPaneForm>
-      {isLoading && <PanelLoadingScreen />}
-    </form>
   );
 };

src/Explorer/Panes/NewVertexPanel/__snapshots__/NewVertexPanel.test.tsx.snap

@@ -1,9 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`New Vertex Panel should render default property 1`] = `
-<form
+<RightPaneForm
-  className="panelFormWrapper"
+  expandConsole={[Function]}
+  formError=""
+  isExecuting={false}
   onSubmit={[Function]}
+  submitButtonText="OK"
 >
   <div
     className="panelMainContent"
@@ -13,8 +16,5 @@ exports[`New Vertex Panel should render default property 1`] = `
       partitionKeyPropertyProp=""
     />
   </div>
-  <PanelFooterComponent
+</RightPaneForm>
-    buttonLabel="OK"
-  />
-</form>
 `;

src/Explorer/Panes/PaneComponents.ts

@@ -1,4 +1,3 @@
-import AddDatabasePaneTemplate from "./AddDatabasePane.html";
 import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
 export class PaneComponent {
   constructor(data: any) {
@@ -6,15 +5,6 @@ export class PaneComponent {
   }
 }
 
-export class AddDatabasePaneComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: AddDatabasePaneTemplate,
-    };
-  }
-}
-
 export class CassandraAddCollectionPaneComponent {
   constructor() {
     return {

src/Explorer/Panes/PanelInfoErrorComponent.tsx

@@ -8,6 +8,7 @@ export interface PanelInfoErrorProps {
   link?: string;
   linkText?: string;
   openNotificationConsole?: () => void;
+  formError?: boolean;
 }
 
 export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = ({

src/Explorer/Panes/PublishNotebookPane/PublishNotebookPane.tsx

@@ -7,15 +7,12 @@ import { JunoClient } from "../../../Juno/JunoClient";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
-import { CodeOfConductComponent } from "../../Controls/NotebookGallery/CodeOfConductComponent";
+import { CodeOfConduct } from "../../Controls/NotebookGallery/CodeOfConduct/CodeOfConduct";
 import { GalleryTab } from "../../Controls/NotebookGallery/GalleryViewerComponent";
 import Explorer from "../../Explorer";
 import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
 import { SnapshotRequest } from "../../Notebook/NotebookComponent/types";
-import {
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
 import { PublishNotebookPaneComponent, PublishNotebookPaneProps } from "./PublishNotebookPaneComponent";
 
 export interface PublishNotebookPaneAProps {
@@ -155,7 +152,6 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
       clearPublishingMessage();
       setIsExecuting(false);
     }
-
     closePanel();
   };
 
@@ -170,15 +166,11 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
     setFormErrorDetail("");
   };
 
-  const props: GenericRightPaneProps = {
+  const props: RightPaneFormProps = {
     formError: formError,
-    formErrorDetail: formErrorDetail,
-    id: "publishnotebookpane",
     isExecuting: isExecuting,
-    title: "Publish to gallery",
     submitButtonText: "Publish",
     onSubmit: () => submit(),
-    onClose: closePanel,
     expandConsole: () => container.expandConsole(),
     isSubmitButtonHidden: !isCodeOfConductAccepted,
   };
@@ -201,10 +193,10 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
     onTakeSnapshot,
   };
   return (
-    <GenericRightPaneComponent {...props}>
+    <RightPaneForm {...props}>
       {!isCodeOfConductAccepted ? (
         <div style={{ padding: "25px", marginTop: "10px" }}>
-          <CodeOfConductComponent
+          <CodeOfConduct
             junoClient={junoClient}
             onAcceptCodeOfConduct={(isAccepted) => {
               setIsCodeOfConductAccepted(isAccepted);
@@ -214,6 +206,6 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
       ) : (
         <PublishNotebookPaneComponent {...publishNotebookPaneProps} />
       )}
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };

src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx

@@ -1,5 +1,5 @@
-import { useBoolean } from "@fluentui/react-hooks";
 import { Text, TextField } from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, useState } from "react";
 import { Areas, SavedQueries } from "../../../Common/Constants";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
@@ -9,10 +9,7 @@ import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetr
 import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import QueryTab from "../../Tabs/QueryTab";
-import {
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
 
 interface SaveQueryPaneProps {
   explorer: Explorer;
@@ -25,32 +22,16 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
 }: SaveQueryPaneProps): JSX.Element => {
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
   const [formError, setFormError] = useState<string>("");
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
   const [queryName, setQueryName] = useState<string>("");
 
   const setupSaveQueriesText = `For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “${SavedQueries.DatabaseName}”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.`;
   const title = "Save Query";
   const { canSaveQueries } = explorer;
-  const genericPaneProps: GenericRightPaneProps = {
-    expandConsole: () => explorer.expandConsole(),
-    formError: formError,
-    formErrorDetail: formErrorsDetails,
-    id: "saveQueryPane",
-    isExecuting: isLoading,
-    title,
-    submitButtonText: canSaveQueries() ? "Save" : "Complete setup",
-    onClose: () => closePanel(),
-    onSubmit: () => {
-      canSaveQueries() ? submit() : setupQueries();
-    },
-  };
 
   const submit = async (): Promise<void> => {
     setFormError("");
-    setFormErrorsDetails("");
     if (!canSaveQueries()) {
       setFormError("Cannot save query");
-      setFormErrorsDetails("Failed to save query: account not set up to save queries");
       logConsoleError("Failed to save query: account not setup to save queries");
     }
 
@@ -148,8 +129,17 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
     }
   };
 
+  const props: RightPaneFormProps = {
+    expandConsole: () => explorer.expandConsole(),
+    formError: formError,
+    isExecuting: isLoading,
+    submitButtonText: canSaveQueries() ? "Save" : "Complete setup",
+    onSubmit: () => {
+      canSaveQueries() ? submit() : setupQueries();
+    },
+  };
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           {!canSaveQueries() ? (
@@ -158,6 +148,7 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
             <TextField
               id="saveQueryInput"
               label="Name"
+              autoFocus
               styles={{ fieldGroup: { width: 300 } }}
               onChange={(event, newInput?: string) => {
                 setQueryName(newInput);
@@ -166,6 +157,6 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
           )}
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };

src/Explorer/Panes/SaveQueryPane/__snapshots__/SaveQueryPane.test.tsx.snap

@@ -1,16 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Save Query Pane should render Default properly 1`] = `
-<GenericRightPaneComponent
+<RightPaneForm
   expandConsole={[Function]}
   formError=""
-  formErrorDetail=""
-  id="saveQueryPane"
   isExecuting={false}
-  onClose={[Function]}
   onSubmit={[Function]}
   submitButtonText="Complete setup"
-  title="Save Query"
 >
   <div
     className="panelFormWrapper"
@@ -25,5 +21,5 @@ exports[`Save Query Pane should render Default properly 1`] = `
       </Text>
     </div>
   </div>
-</GenericRightPaneComponent>
+</RightPaneForm>
 `;

src/Explorer/Panes/StringInputPane/StringInputPane.tsx

@@ -6,10 +6,7 @@ import Explorer from "../../Explorer";
 import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
 import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
 import NotebookV2Tab from "../../Tabs/NotebookV2Tab";
-import {
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
 
 export interface StringInputPanelProps {
   explorer: Explorer;
@@ -40,7 +37,6 @@ export const StringInputPane: FunctionComponent<StringInputPanelProps> = ({
 }: StringInputPanelProps): JSX.Element => {
   const [stringInput, setStringInput] = useState<string>(defaultInput);
   const [formErrors, setFormErrors] = useState<string>("");
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
   const [isExecuting, setIsExecuting] = useState<boolean>(false);
 
   const submit = async (): Promise<void> => {
@@ -51,7 +47,6 @@ export const StringInputPane: FunctionComponent<StringInputPanelProps> = ({
       return;
     } else {
       setFormErrors("");
-      setFormErrorsDetails("");
     }
 
     const clearMessage = logConsoleProgress(`${inProgressMessage} ${stringInput}`);
@@ -78,32 +73,26 @@ export const StringInputPane: FunctionComponent<StringInputPanelProps> = ({
         error = JSON.stringify(reason);
       }
 
-      // If it's an AjaxError (AjaxObservable), add more error
       if (reason?.response?.message) {
         error += `. ${reason.response.message}`;
       }
 
       setFormErrors(errorMessage);
-      setFormErrorsDetails(`${errorMessage}: ${error}`);
       logConsoleError(`${errorMessage} ${stringInput}: ${error}`);
     } finally {
       setIsExecuting(false);
       clearMessage();
     }
   };
-  const genericPaneProps: GenericRightPaneProps = {
+  const props: RightPaneFormProps = {
     formError: formErrors,
-    formErrorDetail: formErrorsDetails,
-    id: "stringInputPane",
     isExecuting: isExecuting,
-    title: paneTitle,
     submitButtonText: submitButtonLabel,
-    onClose: closePanel,
     onSubmit: submit,
     expandConsole: () => container.expandConsole(),
   };
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="paneMainContent">
         <TextField
           label={inputLabel}
@@ -117,6 +106,6 @@ export const StringInputPane: FunctionComponent<StringInputPanelProps> = ({
           aria-label={inputLabel}
         />
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };

src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.test.tsx

@@ -3,7 +3,7 @@ import * as ko from "knockout";
 import React from "react";
 import Explorer from "../../../Explorer";
 import QueryViewModel from "../../../Tables/QueryBuilder/QueryViewModel";
-import { TableQuerySelectPanel } from "./index";
+import { TableQuerySelectPanel } from "./TableQuerySelectPanel";
 
 describe("Table query select Panel", () => {
   const fakeExplorer = {} as Explorer;

src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.tsx

@@ -4,10 +4,7 @@ import { userContext } from "../../../../UserContext";
 import Explorer from "../../../Explorer";
 import * as Constants from "../../../Tables/Constants";
 import QueryViewModel from "../../../Tables/QueryBuilder/QueryViewModel";
-import {
+import { RightPaneForm, RightPaneFormProps } from "../../RightPaneForm/RightPaneForm";
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../../GenericRightPaneComponent/GenericRightPaneComponent";
 
 interface TableQuerySelectPanelProps {
   explorer: Explorer;
@@ -31,24 +28,20 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
   ]);
   const [isAvailableColumnChecked, setIsAvailableColumnChecked] = useState<boolean>(true);
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const onSubmit = (): void => {
-    formError: "",
-    formErrorDetail: "",
-    id: "querySelectPane",
-    isExecuting: false,
-    title: "Select Column",
-    submitButtonText: "OK",
-    onClose: () => closePanel(),
-    onSubmit: () => submit(),
-    expandConsole: () => explorer.expandConsole(),
-  };
-
-  const submit = (): void => {
     queryViewModel.selectText(getParameters());
     queryViewModel.getSelectMessage();
     closePanel();
   };
 
+  const props: RightPaneFormProps = {
+    formError: "",
+    isExecuting: false,
+    submitButtonText: "OK",
+    onSubmit,
+    expandConsole: () => explorer.expandConsole(),
+  };
+
   const handleClick = (isChecked: boolean, selectedColumn: string): void => {
     const columns = columnOptions.map((column) => {
       if (column.columnName === selectedColumn) {
@@ -128,7 +121,7 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <Text>Select the columns that you want to query.</Text>
@@ -153,6 +146,6 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
           </div>
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };

src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx

@@ -78,7 +78,7 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
     return uploadFile(file.name, fileContent);
   };
 
-  const genericPaneProps: RightPaneFormProps = {
+  const props: RightPaneFormProps = {
     expandConsole,
     formError: formErrors,
     isExecuting: isExecuting,
@@ -87,7 +87,7 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
   };
 
   return (
-    <RightPaneForm {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="paneMainContent">
         <Upload label="Select file to upload" accept={extensions} onUpload={updateSelectedFiles} />
       </div>

src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx

@@ -50,7 +50,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ explo
     setFiles(event.target.files);
   };
 
-  const genericPaneProps: RightPaneFormProps = {
+  const props: RightPaneFormProps = {
     expandConsole: () => explorer.expandConsole(),
     formError,
     isExecuting: isExecuting,
@@ -89,7 +89,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ explo
   };
 
   return (
-    <RightPaneForm {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="paneMainContent">
         <Upload
           label="Select JSON Files"

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -17,6 +17,7 @@ import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { userContext } from "../../UserContext";
+import { getDatabaseName } from "../../Utils/APITypeUtils";
 import { FeaturePanelLauncher } from "../Controls/FeaturePanel/FeaturePanelLauncher";
 import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
 import Explorer from "../Explorer";
@@ -290,7 +291,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     } else {
       items.push({
         iconSrc: AddDatabaseIcon,
-        title: this.container.addDatabaseText(),
+        title: "New " + getDatabaseName(),
         description: null,
         onClick: () => this.container.openAddDatabasePane(),
       });

src/Main.tsx

@@ -154,7 +154,6 @@ const App: React.FunctionComponent = () => {
         closePanel={closeSidePanel}
         isConsoleExpanded={isNotificationConsoleExpanded}
       />
-      <div data-bind='component: { name: "add-database-pane", params: {data: addDatabasePane} }' />
       <div data-bind='component: { name: "cassandra-add-collection-pane", params: { data: cassandraAddCollectionPane} }' />
       {showDialog && <Dialog {...dialogProps} />}
     </div>