[WIP]Cleanup/removed knockout database confirmation panel (#546)

* complete delete database component ui in react

* fixed functional issue and added feedback input

* test cases for deleteDatabaseConfirmationPanel

* Removed Q and fixed PR change request

* removed knockout database confirmation panel and references

* delete deleteDatabaseConfirmationPane.html

* remove test

Co-authored-by: Steve Faulkner <471400+southpolesteve@users.noreply.github.com>

src/Contracts/ViewModels.ts

@@ -88,7 +88,6 @@ export interface Database extends TreeNode {
   loadCollections(): Promise<void>;
   findCollectionWithId(collectionId: string): Collection;
   openAddCollection(database: Database, event: MouseEvent): void;
-  onDeleteDatabaseContextMenuClick(source: Database, event: MouseEvent | KeyboardEvent): void;
   onSettingsClick: () => void;
   loadOffer(): Promise<void>;
   getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;

src/Explorer/ComponentRegisterer.test.ts

@@ -77,10 +77,6 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("delete-collection-confirmation-pane")).toBe(true);
   });
 
-  it("should register delete-database-confirmation-pane component", () => {
-    expect(ko.components.isRegistered("delete-database-confirmation-pane")).toBe(true);
-  });
-
   it("should register save-query-pane component", () => {
     expect(ko.components.isRegistered("save-query-pane")).toBe(true);
   });

src/Explorer/ComponentRegisterer.ts

@@ -64,10 +64,7 @@ ko.components.register(
   "delete-collection-confirmation-pane",
   new PaneComponents.DeleteCollectionConfirmationPaneComponent()
 );
-ko.components.register(
+
-  "delete-database-confirmation-pane",
-  new PaneComponents.DeleteDatabaseConfirmationPaneComponent()
-);
 ko.components.register("graph-new-vertex-pane", new PaneComponents.GraphNewVertexPaneComponent());
 ko.components.register("graph-styling-pane", new PaneComponents.GraphStylingPaneComponent());
 ko.components.register("table-add-entity-pane", new PaneComponents.TableAddEntityPaneComponent());

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

@@ -1,17 +1,19 @@
 import { shallow } from "enzyme";
-import React from "react";
-import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
-import { collection } from "./TestUtils";
-import * as DataModels from "../../../Contracts/DataModels";
 import ko from "knockout";
-import { TtlType, isDirty } from "./SettingsUtils";
+import React from "react";
+import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
+import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
 import Explorer from "../../Explorer";
+import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
+import { SettingsComponent, SettingsComponentProps, SettingsComponentState } from "./SettingsComponent";
+import { isDirty, TtlType } from "./SettingsUtils";
+import { collection } from "./TestUtils";
 jest.mock("../../../Common/dataAccess/getIndexTransformationProgress", () => ({
   getIndexTransformationProgress: jest.fn().mockReturnValue(undefined),
 }));
-import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 jest.mock("../../../Common/dataAccess/updateCollection", () => ({
   updateCollection: jest.fn().mockReturnValue({
     id: undefined,
@@ -29,8 +31,6 @@ jest.mock("../../../Common/dataAccess/updateCollection", () => ({
     analyticalStorageTtl: undefined,
   } as MongoDBCollectionResource),
 }));
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
 jest.mock("../../../Common/dataAccess/updateOffer", () => ({
   updateOffer: jest.fn().mockReturnValue({} as DataModels.Offer),
 }));
@@ -134,7 +134,6 @@ describe("SettingsComponent", () => {
       loadCollections: undefined,
       findCollectionWithId: undefined,
       openAddCollection: undefined,
-      onDeleteDatabaseContextMenuClick: undefined,
       readSettings: undefined,
       onSettingsClick: undefined,
       loadOffer: undefined,

src/Explorer/Controls/Settings/SettingsUtils.test.tsx

@@ -1,23 +1,23 @@
-import { collection } from "./TestUtils";
+import ko from "knockout";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
 import {
   getMongoIndexType,
+  getMongoIndexTypeText,
   getMongoNotification,
   getSanitizedInputValue,
   hasDatabaseSharedThroughput,
   isDirty,
+  isIndexTransforming,
   MongoIndexTypes,
   MongoNotificationType,
+  MongoWildcardPlaceHolder,
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
-  MongoWildcardPlaceHolder,
-  getMongoIndexTypeText,
   SingleFieldText,
   WildcardText,
-  isIndexTransforming,
 } from "./SettingsUtils";
-import * as DataModels from "../../../Contracts/DataModels";
+import { collection } from "./TestUtils";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import ko from "knockout";
 
 describe("SettingsUtils", () => {
   it("hasDatabaseSharedThroughput", () => {
@@ -42,7 +42,6 @@ describe("SettingsUtils", () => {
         loadCollections: undefined,
         findCollectionWithId: undefined,
         openAddCollection: undefined,
-        onDeleteDatabaseContextMenuClick: undefined,
         readSettings: undefined,
         onSettingsClick: undefined,
         loadOffer: undefined,

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

@@ -172,21 +172,6 @@ exports[`SettingsComponent renders 1`] = `
                     "title": [Function],
                     "visible": [Function],
                   },
-                  DeleteDatabaseConfirmationPane {
-                    "container": [Circular],
-                    "databaseDeleteFeedback": [Function],
-                    "databaseIdConfirmation": [Function],
-                    "databaseIdConfirmationText": [Function],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "deletedatabaseconfirmationpane",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "recordDeleteFeedback": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
                   GraphStylingPane {
                     "container": [Circular],
                     "firstFieldHasFocus": [Function],
@@ -737,21 +722,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "deleteCollectionText": [Function],
-                "deleteDatabaseConfirmationPane": DeleteDatabaseConfirmationPane {
-                  "container": [Circular],
-                  "databaseDeleteFeedback": [Function],
-                  "databaseIdConfirmation": [Function],
-                  "databaseIdConfirmationText": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "deletedatabaseconfirmationpane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "recordDeleteFeedback": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 "deleteDatabaseText": [Function],
                 "editTableEntityPane": EditTableEntityPane {
                   "addButtonLabel": "Add Property",
@@ -1188,21 +1158,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                DeleteDatabaseConfirmationPane {
-                  "container": [Circular],
-                  "databaseDeleteFeedback": [Function],
-                  "databaseIdConfirmation": [Function],
-                  "databaseIdConfirmationText": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "deletedatabaseconfirmationpane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "recordDeleteFeedback": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 GraphStylingPane {
                   "container": [Circular],
                   "firstFieldHasFocus": [Function],
@@ -1753,21 +1708,6 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "deleteCollectionText": [Function],
-              "deleteDatabaseConfirmationPane": DeleteDatabaseConfirmationPane {
-                "container": [Circular],
-                "databaseDeleteFeedback": [Function],
-                "databaseIdConfirmation": [Function],
-                "databaseIdConfirmationText": [Function],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "deletedatabaseconfirmationpane",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "recordDeleteFeedback": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
               "deleteDatabaseText": [Function],
               "editTableEntityPane": EditTableEntityPane {
                 "addButtonLabel": "Add Property",
@@ -2217,21 +2157,6 @@ exports[`SettingsComponent renders 1`] = `
                     "title": [Function],
                     "visible": [Function],
                   },
-                  DeleteDatabaseConfirmationPane {
-                    "container": [Circular],
-                    "databaseDeleteFeedback": [Function],
-                    "databaseIdConfirmation": [Function],
-                    "databaseIdConfirmationText": [Function],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "deletedatabaseconfirmationpane",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "recordDeleteFeedback": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
                   GraphStylingPane {
                     "container": [Circular],
                     "firstFieldHasFocus": [Function],
@@ -2782,21 +2707,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "deleteCollectionText": [Function],
-                "deleteDatabaseConfirmationPane": DeleteDatabaseConfirmationPane {
-                  "container": [Circular],
-                  "databaseDeleteFeedback": [Function],
-                  "databaseIdConfirmation": [Function],
-                  "databaseIdConfirmationText": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "deletedatabaseconfirmationpane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "recordDeleteFeedback": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 "deleteDatabaseText": [Function],
                 "editTableEntityPane": EditTableEntityPane {
                   "addButtonLabel": "Add Property",
@@ -3233,21 +3143,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                DeleteDatabaseConfirmationPane {
-                  "container": [Circular],
-                  "databaseDeleteFeedback": [Function],
-                  "databaseIdConfirmation": [Function],
-                  "databaseIdConfirmationText": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "deletedatabaseconfirmationpane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "recordDeleteFeedback": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 GraphStylingPane {
                   "container": [Circular],
                   "firstFieldHasFocus": [Function],
@@ -3798,21 +3693,6 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "deleteCollectionText": [Function],
-              "deleteDatabaseConfirmationPane": DeleteDatabaseConfirmationPane {
-                "container": [Circular],
-                "databaseDeleteFeedback": [Function],
-                "databaseIdConfirmation": [Function],
-                "databaseIdConfirmationText": [Function],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "deletedatabaseconfirmationpane",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "recordDeleteFeedback": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
               "deleteDatabaseText": [Function],
               "editTableEntityPane": EditTableEntityPane {
                 "addButtonLabel": "Add Property",

src/Explorer/Explorer.tsx

@@ -55,7 +55,6 @@ import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
 import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
 import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
 import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
-import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPane";
 import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
 import { ExecuteSprocParamsPanel } from "./Panes/ExecuteSprocParamsPanel";
 import GraphStylingPane from "./Panes/GraphStylingPane";
@@ -204,7 +203,6 @@ export default class Explorer {
   public addDatabasePane: AddDatabasePane;
   public addCollectionPane: AddCollectionPane;
   public deleteCollectionConfirmationPane: DeleteCollectionConfirmationPane;
-  public deleteDatabaseConfirmationPane: DeleteDatabaseConfirmationPane;
   public graphStylingPane: GraphStylingPane;
   public addTableEntityPane: AddTableEntityPane;
   public editTableEntityPane: EditTableEntityPane;
@@ -564,13 +562,6 @@ export default class Explorer {
       container: this,
     });
 
-    this.deleteDatabaseConfirmationPane = new DeleteDatabaseConfirmationPane({
-      id: "deletedatabaseconfirmationpane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.graphStylingPane = new GraphStylingPane({
       id: "graphstylingpane",
       visible: ko.observable<boolean>(false),
@@ -661,7 +652,6 @@ export default class Explorer {
       this.addDatabasePane,
       this.addCollectionPane,
       this.deleteCollectionConfirmationPane,
-      this.deleteDatabaseConfirmationPane,
       this.graphStylingPane,
       this.addTableEntityPane,
       this.editTableEntityPane,
@@ -767,8 +757,6 @@ export default class Explorer {
         this.editTableEntityPane.title("Edit Table Row");
         this.deleteCollectionConfirmationPane.title("Delete Table");
         this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
-        this.deleteDatabaseConfirmationPane.title("Delete Keyspace");
-        this.deleteDatabaseConfirmationPane.databaseIdConfirmationText("Confirm by typing the keyspace id");
         this.tableDataClient = new CassandraAPIDataClient();
         break;
     }

src/Explorer/Panes/DeleteDatabaseConfirmationPane.html

@@ -1,109 +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" id="deletedatabaseconfirmationpane">
-    <!-- Delete Databaes Confirmation form - Start -->
-    <div class="contextual-pane-in">
-      <form
-        class="paneContentContainer"
-        data-bind="
-                    submit: submit"
-      >
-        <!-- Delete Database Confirmation header - Start -->
-        <div class="firstdivbg headerline">
-          <span role="heading" aria-level="2" data-bind="text: title"></span>
-          <div
-            class="closeImg"
-            role="button"
-            aria-label="Close pane"
-            tabindex="0"
-            data-bind="
-                            click: cancel, event: { keypress: onCloseKeyPress }"
-          >
-            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
-          </div>
-        </div>
-        <!-- Delete Database Confirmation header - End -->
-
-        <div class="warningErrorContainer" data-bind="visible: !formErrors()">
-          <div class="warningErrorContent">
-            <span><img class="paneWarningIcon" src="/warning.svg" alt="Warning" /></span>
-            <span class="warningErrorDetailsLinkContainer">
-              Warning! The action you are about to take cannot be undone. Continuing will permanently delete this
-              resource and all of its children resources.
-            </span>
-          </div>
-        </div>
-
-        <!-- Delete Database Confirmation 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="click: showErrorDetails">More details</a>
-            </span>
-          </div>
-        </div>
-        <!-- Delete Database Confirmation errors - End -->
-
-        <!-- Delete Database Confirmation inputs - Start -->
-        <div class="paneMainContent">
-          <div>
-            <span class="mandatoryStar">*</span> <span data-bind="text: databaseIdConfirmationText"></span>
-            <p>
-              <input
-                type="text"
-                name="databaseIdConfirmation"
-                data-test="confirmDatabaseId"
-                required
-                class="collid"
-                data-bind="value: databaseIdConfirmation, hasFocus: firstFieldHasFocus"
-                aria-label="Confirm by typing the database id"
-              />
-            </p>
-          </div>
-          <div data-bind="visible: recordDeleteFeedback">
-            <div>Help us improve Azure Cosmos DB!</div>
-            <div>What is the reason why you are deleting this database?</div>
-            <p>
-              <textarea
-                type="text"
-                data-test="databaseDeleteFeedback"
-                name="databaseDeleteFeedback"
-                rows="3"
-                cols="53"
-                maxlength="512"
-                class="collid"
-                data-bind="value: databaseDeleteFeedback"
-                aria-label="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
-              >
-              </textarea>
-            </p>
-          </div>
-        </div>
-        <div class="paneFooter">
-          <div class="leftpanel-okbut">
-            <input type="submit" data-test="deleteDatabase" value="OK" class="btncreatecoll1" />
-          </div>
-        </div>
-        <!-- Delete Database Confirmation inputs - End -->
-      </form>
-    </div>
-    <!-- Delete Database Confirmation form - Start -->
-    <!-- Loader - Start -->
-    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
-      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
-    </div>
-    <!-- Loader - End -->
-  </div>
-</div>

src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts

@@ -1,127 +0,0 @@
-jest.mock("../../Common/dataAccess/deleteDatabase");
-jest.mock("../../Shared/Telemetry/TelemetryProcessor");
-import * as ko from "knockout";
-import Q from "q";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import DeleteDatabaseConfirmationPane from "./DeleteDatabaseConfirmationPane";
-import DeleteFeedback from "../../Common/DeleteFeedback";
-import Explorer from "../Explorer";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { TreeNode } from "../../Contracts/ViewModels";
-import { TabsManager } from "../Tabs/TabsManager";
-import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
-
-describe("Delete Database Confirmation Pane", () => {
-  describe("Explorer.isLastDatabase() and Explorer.isLastNonEmptyDatabase()", () => {
-    let explorer: Explorer;
-
-    beforeAll(() => {
-      (deleteDatabase as jest.Mock).mockResolvedValue(undefined);
-    });
-
-    beforeEach(() => {
-      explorer = new Explorer();
-    });
-
-    it("should be true if only 1 database", () => {
-      let database = {} as ViewModels.Database;
-      explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-      expect(explorer.isLastDatabase()).toBe(true);
-    });
-
-    it("should be false if only 2 databases", () => {
-      let database = {} as ViewModels.Database;
-      let database2 = {} as ViewModels.Database;
-      explorer.databases = ko.observableArray<ViewModels.Database>([database, database2]);
-      expect(explorer.isLastDatabase()).toBe(false);
-    });
-
-    it("should be false if not last empty database", () => {
-      let database = {} as ViewModels.Database;
-      explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-      expect(explorer.isLastNonEmptyDatabase()).toBe(false);
-    });
-
-    it("should be true if last non empty database", () => {
-      let database = {} as ViewModels.Database;
-      database.collections = ko.observableArray<ViewModels.Collection>([{} as ViewModels.Collection]);
-      explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-      expect(explorer.isLastNonEmptyDatabase()).toBe(true);
-    });
-  });
-
-  describe("shouldRecordFeedback()", () => {
-    it("should return true if last non empty database or is last database that has shared throughput, else false", () => {
-      let fakeExplorer = {} as Explorer;
-
-      let pane = new DeleteDatabaseConfirmationPane({
-        id: "deletedatabaseconfirmationpane",
-        visible: ko.observable<boolean>(false),
-        container: fakeExplorer as any,
-      });
-
-      fakeExplorer.isLastNonEmptyDatabase = () => true;
-      pane.container = fakeExplorer as any;
-      expect(pane.shouldRecordFeedback()).toBe(true);
-
-      fakeExplorer.isLastDatabase = () => true;
-      fakeExplorer.isSelectedDatabaseShared = () => true;
-      pane.container = fakeExplorer as any;
-      expect(pane.shouldRecordFeedback()).toBe(true);
-
-      fakeExplorer.isLastNonEmptyDatabase = () => false;
-      fakeExplorer.isLastDatabase = () => true;
-      fakeExplorer.isSelectedDatabaseShared = () => false;
-      pane.container = fakeExplorer as any;
-      expect(pane.shouldRecordFeedback()).toBe(false);
-    });
-  });
-
-  describe("submit()", () => {
-    it("on submit() it should log feedback if last non empty database or is last database that has shared throughput", () => {
-      let selectedDatabaseId = "testDB";
-      let fakeExplorer = {} as Explorer;
-      fakeExplorer.findSelectedDatabase = () => {
-        return {
-          id: ko.observable<string>(selectedDatabaseId),
-          rid: "test",
-          collections: ko.observableArray<ViewModels.Collection>(),
-        } as ViewModels.Database;
-      };
-      fakeExplorer.refreshAllDatabases = () => Q.resolve();
-      fakeExplorer.selectedDatabaseId = ko.computed<string>(() => selectedDatabaseId);
-      fakeExplorer.isSelectedDatabaseShared = () => false;
-      const SubscriptionId = "testId";
-      const AccountName = "testAccount";
-      fakeExplorer.databaseAccount = ko.observable<DataModels.DatabaseAccount>({
-        id: SubscriptionId,
-        name: AccountName,
-      } as DataModels.DatabaseAccount);
-      fakeExplorer.defaultExperience = ko.observable<string>("DocumentDB");
-      fakeExplorer.isPreferredApiCassandra = ko.computed(() => {
-        return false;
-      });
-      fakeExplorer.selectedNode = ko.observable<TreeNode>();
-      fakeExplorer.tabsManager = new TabsManager();
-      fakeExplorer.isLastNonEmptyDatabase = () => true;
-
-      let pane = new DeleteDatabaseConfirmationPane({
-        id: "deletedatabaseconfirmationpane",
-        visible: ko.observable<boolean>(false),
-        container: fakeExplorer as any,
-      });
-      pane.databaseIdConfirmation = ko.observable<string>(selectedDatabaseId);
-      const Feedback = "my feedback";
-      pane.databaseDeleteFeedback(Feedback);
-
-      return pane.submit().then(() => {
-        let deleteFeedback = new DeleteFeedback(SubscriptionId, AccountName, DataModels.ApiKind.SQL, Feedback);
-        expect(TelemetryProcessor.trace).toHaveBeenCalledWith(Action.DeleteDatabase, ActionModifiers.Mark, {
-          message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
-        });
-      });
-    });
-  });
-});

src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts

@@ -1,143 +0,0 @@
-import * as ko from "knockout";
-import Q from "q";
-import * as Constants from "../../Common/Constants";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { CassandraAPIDataClient } from "../Tables/TableDataClient";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
-import { ContextualPaneBase } from "./ContextualPaneBase";
-import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
-import DeleteFeedback from "../../Common/DeleteFeedback";
-
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
-import { ARMError } from "../../Utils/arm/request";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-
-export default class DeleteDatabaseConfirmationPane extends ContextualPaneBase {
-  public databaseIdConfirmationText: ko.Observable<string>;
-  public databaseIdConfirmation: ko.Observable<string>;
-  public databaseDeleteFeedback: ko.Observable<string>;
-  public recordDeleteFeedback: ko.Observable<boolean>;
-
-  constructor(options: ViewModels.PaneOptions) {
-    super(options);
-    this.databaseIdConfirmationText = ko.observable<string>("Confirm by typing the database id");
-    this.databaseIdConfirmation = ko.observable<string>();
-    this.databaseDeleteFeedback = ko.observable<string>();
-    this.recordDeleteFeedback = ko.observable<boolean>(false);
-    this.title("Delete Database");
-    this.resetData();
-  }
-
-  public submit(): Q.Promise<any> {
-    if (!this._isValid()) {
-      const selectedDatabase: ViewModels.Database = this.container.findSelectedDatabase();
-      this.formErrors("Input database name does not match the selected database");
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        `Error while deleting collection ${selectedDatabase && selectedDatabase.id()}: ${this.formErrors()}`
-      );
-      return Q.resolve();
-    }
-
-    this.formErrors("");
-    this.isExecuting(true);
-    const selectedDatabase = this.container.findSelectedDatabase();
-    const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDatabase, {
-      databaseId: selectedDatabase.id(),
-      dataExplorerArea: Constants.Areas.ContextualPane,
-      paneTitle: this.title(),
-    });
-    return Q(
-      deleteDatabase(selectedDatabase.id()).then(
-        () => {
-          this.isExecuting(false);
-          this.close();
-          this.container.refreshAllDatabases();
-          this.container.tabsManager.closeTabsByComparator((tab) => tab.node?.id() === selectedDatabase.id());
-          this.container.selectedNode(null);
-          selectedDatabase
-            .collections()
-            .forEach((collection: ViewModels.Collection) =>
-              this.container.tabsManager.closeTabsByComparator(
-                (tab) =>
-                  tab.node?.id() === collection.id() &&
-                  (tab.node as ViewModels.Collection).databaseId === collection.databaseId
-              )
-            );
-          this.resetData();
-          TelemetryProcessor.traceSuccess(
-            Action.DeleteDatabase,
-            {
-              databaseId: selectedDatabase.id(),
-              dataExplorerArea: Constants.Areas.ContextualPane,
-              paneTitle: this.title(),
-            },
-            startKey
-          );
-
-          if (this.shouldRecordFeedback()) {
-            let deleteFeedback = new DeleteFeedback(
-              this.container.databaseAccount().id,
-              this.container.databaseAccount().name,
-              DefaultExperienceUtility.getApiKindFromDefaultExperience(this.container.defaultExperience()),
-              this.databaseDeleteFeedback()
-            );
-
-            TelemetryProcessor.trace(Action.DeleteDatabase, ActionModifiers.Mark, {
-              message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
-            });
-
-            this.databaseDeleteFeedback("");
-          }
-        },
-        (error: any) => {
-          this.isExecuting(false);
-          const errorMessage = getErrorMessage(error);
-          this.formErrors(errorMessage);
-          this.formErrorsDetails(errorMessage);
-          TelemetryProcessor.traceFailure(
-            Action.DeleteDatabase,
-            {
-              databaseId: selectedDatabase.id(),
-              dataExplorerArea: Constants.Areas.ContextualPane,
-              paneTitle: this.title(),
-              error: errorMessage,
-              errorStack: getErrorStack(error),
-            },
-            startKey
-          );
-        }
-      )
-    );
-  }
-
-  public resetData() {
-    this.databaseIdConfirmation("");
-    super.resetData();
-  }
-
-  public async open() {
-    await this.container.loadSelectedDatabaseOffer();
-    this.recordDeleteFeedback(this.shouldRecordFeedback());
-    super.open();
-  }
-
-  public shouldRecordFeedback(): boolean {
-    return (
-      this.container.isLastNonEmptyDatabase() ||
-      (this.container.isLastDatabase() && this.container.isSelectedDatabaseShared())
-    );
-  }
-
-  private _isValid(): boolean {
-    const selectedDatabase = this.container.findSelectedDatabase();
-    if (!selectedDatabase) {
-      return false;
-    }
-
-    return this.databaseIdConfirmation() === selectedDatabase.id();
-  }
-}

src/Explorer/Panes/PaneComponents.ts

@@ -3,7 +3,6 @@ import AddDatabasePaneTemplate from "./AddDatabasePane.html";
 import BrowseQueriesPaneTemplate from "./BrowseQueriesPane.html";
 import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
 import DeleteCollectionConfirmationPaneTemplate from "./DeleteCollectionConfirmationPane.html";
-import DeleteDatabaseConfirmationPaneTemplate from "./DeleteDatabaseConfirmationPane.html";
 import GitHubReposPaneTemplate from "./GitHubReposPane.html";
 import GraphNewVertexPaneTemplate from "./GraphNewVertexPane.html";
 import GraphStylingPaneTemplate from "./GraphStylingPane.html";
@@ -49,15 +48,6 @@ export class DeleteCollectionConfirmationPaneComponent {
   }
 }
 
-export class DeleteDatabaseConfirmationPaneComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: DeleteDatabaseConfirmationPaneTemplate,
-    };
-  }
-}
-
 export class GraphNewVertexPaneComponent {
   constructor() {
     return {

src/Explorer/Panes/SettingsPane/__snapshots__/index.test.tsx.snap

@@ -148,21 +148,6 @@ exports[`Settings Pane should render Default properly 1`] = `
           "title": [Function],
           "visible": [Function],
         },
-        DeleteDatabaseConfirmationPane {
-          "container": [Circular],
-          "databaseDeleteFeedback": [Function],
-          "databaseIdConfirmation": [Function],
-          "databaseIdConfirmationText": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "deletedatabaseconfirmationpane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "recordDeleteFeedback": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
         GraphStylingPane {
           "container": [Circular],
           "firstFieldHasFocus": [Function],
@@ -713,21 +698,6 @@ exports[`Settings Pane should render Default properly 1`] = `
         "visible": [Function],
       },
       "deleteCollectionText": [Function],
-      "deleteDatabaseConfirmationPane": DeleteDatabaseConfirmationPane {
-        "container": [Circular],
-        "databaseDeleteFeedback": [Function],
-        "databaseIdConfirmation": [Function],
-        "databaseIdConfirmationText": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "deletedatabaseconfirmationpane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "recordDeleteFeedback": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "deleteDatabaseText": [Function],
       "editTableEntityPane": EditTableEntityPane {
         "addButtonLabel": "Add Property",
@@ -1252,21 +1222,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
           "title": [Function],
           "visible": [Function],
         },
-        DeleteDatabaseConfirmationPane {
-          "container": [Circular],
-          "databaseDeleteFeedback": [Function],
-          "databaseIdConfirmation": [Function],
-          "databaseIdConfirmationText": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "deletedatabaseconfirmationpane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "recordDeleteFeedback": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
         GraphStylingPane {
           "container": [Circular],
           "firstFieldHasFocus": [Function],
@@ -1817,21 +1772,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
         "visible": [Function],
       },
       "deleteCollectionText": [Function],
-      "deleteDatabaseConfirmationPane": DeleteDatabaseConfirmationPane {
-        "container": [Circular],
-        "databaseDeleteFeedback": [Function],
-        "databaseIdConfirmation": [Function],
-        "databaseIdConfirmationText": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "deletedatabaseconfirmationpane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "recordDeleteFeedback": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "deleteDatabaseText": [Function],
       "editTableEntityPane": EditTableEntityPane {
         "addButtonLabel": "Add Property",

src/Explorer/Panes/UploadItemsPane/__snapshots__/index.test.tsx.snap

@@ -148,21 +148,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
           "title": [Function],
           "visible": [Function],
         },
-        DeleteDatabaseConfirmationPane {
-          "container": [Circular],
-          "databaseDeleteFeedback": [Function],
-          "databaseIdConfirmation": [Function],
-          "databaseIdConfirmationText": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "deletedatabaseconfirmationpane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "recordDeleteFeedback": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
         GraphStylingPane {
           "container": [Circular],
           "firstFieldHasFocus": [Function],
@@ -713,21 +698,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
         "visible": [Function],
       },
       "deleteCollectionText": [Function],
-      "deleteDatabaseConfirmationPane": DeleteDatabaseConfirmationPane {
-        "container": [Circular],
-        "databaseDeleteFeedback": [Function],
-        "databaseIdConfirmation": [Function],
-        "databaseIdConfirmationText": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "deletedatabaseconfirmationpane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "recordDeleteFeedback": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "deleteDatabaseText": [Function],
       "editTableEntityPane": EditTableEntityPane {
         "addButtonLabel": "Add Property",

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

@@ -149,21 +149,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           "title": [Function],
           "visible": [Function],
         },
-        DeleteDatabaseConfirmationPane {
-          "container": [Circular],
-          "databaseDeleteFeedback": [Function],
-          "databaseIdConfirmation": [Function],
-          "databaseIdConfirmationText": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "deletedatabaseconfirmationpane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "recordDeleteFeedback": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
         GraphStylingPane {
           "container": [Circular],
           "firstFieldHasFocus": [Function],
@@ -714,21 +699,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
         "visible": [Function],
       },
       "deleteCollectionText": [Function],
-      "deleteDatabaseConfirmationPane": DeleteDatabaseConfirmationPane {
-        "container": [Circular],
-        "databaseDeleteFeedback": [Function],
-        "databaseIdConfirmation": [Function],
-        "databaseIdConfirmationText": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "deletedatabaseconfirmationpane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "recordDeleteFeedback": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "deleteDatabaseText": [Function],
       "editTableEntityPane": EditTableEntityPane {
         "addButtonLabel": "Add Property",

src/Explorer/Tree/Database.ts

@@ -142,10 +142,6 @@ export default class Database implements ViewModels.Database {
     );
   }
 
-  public onDeleteDatabaseContextMenuClick(source: ViewModels.Database, event: MouseEvent | KeyboardEvent) {
-    this.container.deleteDatabaseConfirmationPane.open();
-  }
-
   public selectDatabase() {
     this.container.selectedNode(this);
     TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {

src/Main.tsx

@@ -232,7 +232,6 @@ const App: React.FunctionComponent = () => {
       <div data-bind='component: { name: "add-database-pane", params: {data: addDatabasePane} }' />
       <div data-bind='component: { name: "add-collection-pane", params: { data: addCollectionPane} }' />
       <div data-bind='component: { name: "delete-collection-confirmation-pane", params: { data: deleteCollectionConfirmationPane} }' />
-      <div data-bind='component: { name: "delete-database-confirmation-pane", params: { data: deleteDatabaseConfirmationPane} }' />
       <div data-bind='component: { name: "graph-new-vertex-pane", params: { data: newVertexPane} }' />
       <div data-bind='component: { name: "graph-styling-pane", params: { data: graphStylingPane} }' />
       <div data-bind='component: { name: "table-add-entity-pane", params: { data: addTableEntityPane} }' />