[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/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",