Move setup notebooks panel to react (#673)

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>
2025-12-21 09:51:11 +00:00 · 2021-04-21 08:21:03 +05:30
parent b6d60dcc7b
commit d58fececac
17 changed files with 1939 additions and 409 deletions
--- a/src/Explorer/Panes/BrowseQueriesPanel/index.test.tsx
+++ b/src/Explorer/Panes/BrowseQueriesPanel/index.test.tsx
@@ -10,7 +10,7 @@ describe("Browse queries panel", () => {
  const fakeExplorer = {} as Explorer;
  fakeExplorer.canSaveQueries = ko.computed<boolean>(() => true);
  const fakeClientQuery = {} as QueriesClient;
-  const fakeQueryData = {} as Query[];
+  const fakeQueryData = [] as Query[];
  fakeClientQuery.getQueries = async () => fakeQueryData;
  fakeExplorer.queriesClient = fakeClientQuery;
  const props = {
--- a/src/Explorer/Panes/PaneComponents.ts
+++ b/src/Explorer/Panes/PaneComponents.ts
@@ -4,7 +4,6 @@ import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.htm
 import GitHubReposPaneTemplate from "./GitHubReposPane.html";
 import GraphNewVertexPaneTemplate from "./GraphNewVertexPane.html";
 import GraphStylingPaneTemplate from "./GraphStylingPane.html";
-import SetupNotebooksPaneTemplate from "./SetupNotebooksPane.html";
 import StringInputPaneTemplate from "./StringInputPane.html";
 import TableAddEntityPaneTemplate from "./Tables/TableAddEntityPane.html";
 import TableEditEntityPaneTemplate from "./Tables/TableEditEntityPane.html";
@@ -86,15 +85,6 @@ export class StringInputPaneComponent {
  }
 }

-export class SetupNotebooksPaneComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: SetupNotebooksPaneTemplate,
-    };
-  }
-}
-
 export class GitHubReposPaneComponent {
  constructor() {
    return {
--- a/src/Explorer/Panes/SettingsPane/snapshots/index.test.tsx.snap
+++ b/src/Explorer/Panes/SettingsPane/snapshots/index.test.tsx.snap
@@ -300,20 +300,6 @@ exports[`Settings Pane should render Default properly 1`] = `
          "title": [Function],
          "visible": [Function],
        },
-        SetupNotebooksPane {
-          "container": [Circular],
-          "description": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "setupnotebookspane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onCompleteSetupClick": [Function],
-          "onCompleteSetupKeyPress": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
      ],
      "_refreshSparkEnabledStateForAccount": [Function],
      "_resetNotebookWorkspace": [Function],
@@ -698,20 +684,6 @@ exports[`Settings Pane should render Default properly 1`] = `
      "setInProgressConsoleDataIdToBeDeleted": undefined,
      "setIsNotificationConsoleExpanded": undefined,
      "setNotificationConsoleData": undefined,
-      "setupNotebooksPane": SetupNotebooksPane {
-        "container": [Circular],
-        "description": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "setupnotebookspane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onCompleteSetupClick": [Function],
-        "onCompleteSetupKeyPress": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
      "signInAad": [Function],
      "sparkClusterConnectionInfo": [Function],
      "splitter": Splitter {
@@ -1185,20 +1157,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
          "title": [Function],
          "visible": [Function],
        },
-        SetupNotebooksPane {
-          "container": [Circular],
-          "description": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "setupnotebookspane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onCompleteSetupClick": [Function],
-          "onCompleteSetupKeyPress": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
      ],
      "_refreshSparkEnabledStateForAccount": [Function],
      "_resetNotebookWorkspace": [Function],
@@ -1583,20 +1541,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
      "setInProgressConsoleDataIdToBeDeleted": undefined,
      "setIsNotificationConsoleExpanded": undefined,
      "setNotificationConsoleData": undefined,
-      "setupNotebooksPane": SetupNotebooksPane {
-        "container": [Circular],
-        "description": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "setupnotebookspane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onCompleteSetupClick": [Function],
-        "onCompleteSetupKeyPress": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
      "signInAad": [Function],
      "sparkClusterConnectionInfo": [Function],
      "splitter": Splitter {
--- a/src/Explorer/Panes/SetupNotebooksPane.html
+++ b/src/Explorer/Panes/SetupNotebooksPane.html
@@ -1,45 +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="setupnotebookspane">
-    <!-- Setup notebooks form -- Start -->
-    <div class="contextual-pane-in">
-      <div class="paneContentContainer">
-        <!-- Setup notebooks 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>
-        <!-- Setup notebooks header - End -->
-
-        <div class="paneMainContent">
-          <div class="pkPadding">
-            <div data-bind="text: description"></div>
-            <button
-              id="completeSetupBtn"
-              class="btncreatecoll1 btnSetupQueries"
-              type="button"
-              aria-label="Complete setup"
-              data-bind="click: onCompleteSetupClick, event: { keypress: onCompleteSetupKeyPress }"
-            >
-              Complete setup
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Setup notebooks form - Start -->
-    <!-- Loader - Start -->
-    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
-      <img class="dataExplorerLoader" alt="loading indicator image" src="/LoadingIndicator_3Squares.gif" />
-    </div>
-    <!-- Loader - End -->
-  </div>
-</div>
--- a/src/Explorer/Panes/SetupNotebooksPane.ts
+++ b/src/Explorer/Panes/SetupNotebooksPane.ts
@@ -1,107 +0,0 @@
-import * as ViewModels from "../../Contracts/ViewModels";
-import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import { Areas, KeyCodes } from "../../Common/Constants";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
-import { ContextualPaneBase } from "./ContextualPaneBase";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import * as ko from "knockout";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-
-export class SetupNotebooksPane extends ContextualPaneBase {
-  private description: ko.Observable<string>;
-
-  constructor(options: ViewModels.PaneOptions) {
-    super(options);
-
-    this.description = ko.observable<string>();
-    this.resetData();
-  }
-
-  public openWithTitleAndDescription(title: string, description: string) {
-    this.title(title);
-    this.description(description);
-
-    this.open();
-  }
-
-  public open() {
-    super.open();
-    const completeSetupBtn = document.getElementById("completeSetupBtn");
-    completeSetupBtn && completeSetupBtn.focus();
-  }
-
-  public submit() {
-    // override default behavior because this is not a form
-  }
-
-  public onCompleteSetupClick = async (src: any, event: MouseEvent) => {
-    await this.setupNotebookWorkspace();
-  };
-
-  public onCompleteSetupKeyPress = async (src: any, event: KeyboardEvent) => {
-    if (event.keyCode === KeyCodes.Space || event.keyCode === KeyCodes.Enter) {
-      await this.setupNotebookWorkspace();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-
-  public async setupNotebookWorkspace(): Promise<void> {
-    if (!this.container) {
-      return;
-    }
-
-    const startKey: number = TelemetryProcessor.traceStart(Action.CreateNotebookWorkspace, {
-      dataExplorerArea: Areas.ContextualPane,
-      paneTitle: this.title(),
-    });
-    const id = NotificationConsoleUtils.logConsoleMessage(
-      ConsoleDataType.InProgress,
-      "Creating a new default notebook workspace"
-    );
-    try {
-      this.isExecuting(true);
-      await this.container.notebookWorkspaceManager.createNotebookWorkspaceAsync(
-        this.container.databaseAccount() && this.container.databaseAccount().id,
-        "default"
-      );
-      this.container.isAccountReady.valueHasMutated(); // re-trigger init notebooks
-      this.close();
-      TelemetryProcessor.traceSuccess(
-        Action.CreateNotebookWorkspace,
-        {
-          dataExplorerArea: Areas.ContextualPane,
-          paneTitle: this.title(),
-        },
-        startKey
-      );
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Info,
-        "Successfully created a default notebook workspace for the account"
-      );
-    } catch (error) {
-      const errorMessage = getErrorMessage(error);
-      TelemetryProcessor.traceFailure(
-        Action.CreateNotebookWorkspace,
-        {
-          dataExplorerArea: Areas.ContextualPane,
-          paneTitle: this.title(),
-          error: errorMessage,
-          errorStack: getErrorStack(error),
-        },
-        startKey
-      );
-      this.formErrors("Failed to setup a default notebook workspace");
-      this.formErrorsDetails(`Failed to setup a default notebook workspace: ${errorMessage}`);
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        `Failed to create a default notebook workspace: ${errorMessage}`
-      );
-    } finally {
-      this.isExecuting(false);
-      NotificationConsoleUtils.clearInProgressMessageWithId(id);
-    }
-  }
-}
--- a/src/Explorer/Panes/SetupNotebooksPanel/SetupNotebooksPanel.test.tsx
+++ b/src/Explorer/Panes/SetupNotebooksPanel/SetupNotebooksPanel.test.tsx
@@ -0,0 +1,50 @@
+import { mount } from "enzyme";
+import { PrimaryButton } from "office-ui-fabric-react";
+import React from "react";
+import Explorer from "../../Explorer";
+import { SetupNoteBooksPanel } from "./SetupNotebooksPanel";
+
+describe("Setup Notebooks Panel", () => {
+  it("should render Default properly", () => {
+    const fakeExplorer = {} as Explorer;
+    const props = {
+      explorer: fakeExplorer,
+      closePanel: (): void => undefined,
+      openNotificationConsole: (): void => undefined,
+      panelTitle: "",
+      panelDescription: "",
+    };
+    const wrapper = mount(<SetupNoteBooksPanel {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should render button", () => {
+    const fakeExplorer = {} as Explorer;
+    const props = {
+      explorer: fakeExplorer,
+      closePanel: (): void => undefined,
+      openNotificationConsole: (): void => undefined,
+      panelTitle: "",
+      panelDescription: "",
+    };
+    const wrapper = mount(<SetupNoteBooksPanel {...props} />);
+    const button = wrapper.find("PrimaryButton").first();
+    expect(button).toBeDefined();
+  });
+
+  it("Button onClick should call onCompleteSetup", () => {
+    const onCompleteSetupClick = jest.fn();
+    const wrapper = mount(<PrimaryButton onClick={onCompleteSetupClick} />);
+    wrapper.find("button").simulate("click");
+
+    expect(onCompleteSetupClick).toHaveBeenCalled();
+  });
+
+  it("Button onKeyPress should call onCompleteSetupKeyPress", () => {
+    const onCompleteSetupKeyPress = jest.fn();
+    const wrapper = mount(<PrimaryButton onKeyPress={onCompleteSetupKeyPress} />);
+    wrapper.find("button").simulate("keypress");
+
+    expect(onCompleteSetupKeyPress).toHaveBeenCalled();
+  });
+});
--- a/src/Explorer/Panes/SetupNotebooksPanel/SetupNotebooksPanel.tsx
+++ b/src/Explorer/Panes/SetupNotebooksPanel/SetupNotebooksPanel.tsx
@@ -0,0 +1,125 @@
+import { useBoolean } from "@uifabric/react-hooks";
+import { PrimaryButton } from "office-ui-fabric-react";
+import React, { FunctionComponent, KeyboardEvent, useState } from "react";
+import { Areas, NormalizedEventKey } from "../../../Common/Constants";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../../UserContext";
+import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
+import Explorer from "../../Explorer";
+import { PanelInfoErrorComponent } from "../PanelInfoErrorComponent";
+import { PanelLoadingScreen } from "../PanelLoadingScreen";
+interface SetupNoteBooksPanelProps {
+  explorer: Explorer;
+  closePanel: () => void;
+  openNotificationConsole: () => void;
+  panelTitle: string;
+  panelDescription: string;
+}
+
+export const SetupNoteBooksPanel: FunctionComponent<SetupNoteBooksPanelProps> = ({
+  explorer,
+  closePanel,
+  openNotificationConsole,
+  panelTitle,
+  panelDescription,
+}: SetupNoteBooksPanelProps): JSX.Element => {
+  const title = panelTitle;
+  const description = panelDescription;
+  const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
+  const [errorMessage, setErrorMessage] = useState<string>("");
+  const [showErrorDetails, setShowErrorDetails] = useState<boolean>(false);
+
+  const onCompleteSetupClick = async () => {
+    await setupNotebookWorkspace();
+  };
+
+  const onCompleteSetupKeyPress = async (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === " " || event.key === NormalizedEventKey.Enter) {
+      await setupNotebookWorkspace();
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  };
+
+  const setupNotebookWorkspace = async (): Promise<void> => {
+    if (!explorer) {
+      return;
+    }
+
+    const startKey: number = TelemetryProcessor.traceStart(Action.CreateNotebookWorkspace, {
+      dataExplorerArea: Areas.ContextualPane,
+      paneTitle: title,
+    });
+
+    const clear = NotificationConsoleUtils.logConsoleProgress("Creating a new default notebook workspace");
+
+    try {
+      setLoadingTrue();
+      await explorer.notebookWorkspaceManager.createNotebookWorkspaceAsync(
+        userContext.databaseAccount && userContext.databaseAccount.id,
+        "default"
+      );
+      explorer.isAccountReady.valueHasMutated(); // re-trigger init notebooks
+
+      closePanel();
+
+      TelemetryProcessor.traceSuccess(
+        Action.CreateNotebookWorkspace,
+        {
+          dataExplorerArea: Areas.ContextualPane,
+          paneTitle: title,
+        },
+        startKey
+      );
+      NotificationConsoleUtils.logConsoleInfo("Successfully created a default notebook workspace for the account");
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      TelemetryProcessor.traceFailure(
+        Action.CreateNotebookWorkspace,
+        {
+          dataExplorerArea: Areas.ContextualPane,
+          paneTitle: title,
+          error: errorMessage,
+          errorStack: getErrorStack(error),
+        },
+        startKey
+      );
+      setErrorMessage(`Failed to setup a default notebook workspace: ${errorMessage}`);
+      setShowErrorDetails(true);
+      NotificationConsoleUtils.logConsoleError(`Failed to create a default notebook workspace: ${errorMessage}`);
+    } finally {
+      setLoadingFalse();
+      clear();
+    }
+  };
+
+  return (
+    <form className="panelFormWrapper">
+      {errorMessage && (
+        <PanelInfoErrorComponent
+          message={errorMessage}
+          messageType="error"
+          showErrorDetails={showErrorDetails}
+          openNotificationConsole={openNotificationConsole}
+        />
+      )}
+      <div className="panelMainContent">
+        <div className="pkPadding">
+          <div>{description}</div>
+          <PrimaryButton
+            id="completeSetupBtn"
+            className="btncreatecoll1 btnSetupQueries"
+            text="Complete Setup"
+            onClick={onCompleteSetupClick}
+            onKeyPress={onCompleteSetupKeyPress}
+            aria-label="Complete setup"
+          />
+        </div>
+      </div>
+      {isLoading && <PanelLoadingScreen />}
+    </form>
+  );
+};
--- a/src/Explorer/Panes/SetupNotebooksPanel/snapshots/SetupNotebooksPanel.test.tsx.snap
+++ b/src/Explorer/Panes/SetupNotebooksPanel/snapshots/SetupNotebooksPanel.test.tsx.snap
--- a/src/Explorer/Panes/UploadItemsPane/snapshots/index.test.tsx.snap
+++ b/src/Explorer/Panes/UploadItemsPane/snapshots/index.test.tsx.snap
@@ -300,20 +300,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
          "title": [Function],
          "visible": [Function],
        },
-        SetupNotebooksPane {
-          "container": [Circular],
-          "description": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "setupnotebookspane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onCompleteSetupClick": [Function],
-          "onCompleteSetupKeyPress": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
      ],
      "_refreshSparkEnabledStateForAccount": [Function],
      "_resetNotebookWorkspace": [Function],
@@ -698,20 +684,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
      "setInProgressConsoleDataIdToBeDeleted": undefined,
      "setIsNotificationConsoleExpanded": undefined,
      "setNotificationConsoleData": undefined,
-      "setupNotebooksPane": SetupNotebooksPane {
-        "container": [Circular],
-        "description": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "setupnotebookspane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onCompleteSetupClick": [Function],
-        "onCompleteSetupKeyPress": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
      "signInAad": [Function],
      "sparkClusterConnectionInfo": [Function],
      "splitter": Splitter {
--- a/src/Explorer/Panes/snapshots/DeleteDatabaseConfirmationPanel.test.tsx.snap
+++ b/src/Explorer/Panes/snapshots/DeleteDatabaseConfirmationPanel.test.tsx.snap
@@ -301,20 +301,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
          "title": [Function],
          "visible": [Function],
        },
-        SetupNotebooksPane {
-          "container": [Circular],
-          "description": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "setupnotebookspane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onCompleteSetupClick": [Function],
-          "onCompleteSetupKeyPress": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
      ],
      "_refreshSparkEnabledStateForAccount": [Function],
      "_resetNotebookWorkspace": [Function],
@@ -703,20 +689,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
      "setInProgressConsoleDataIdToBeDeleted": undefined,
      "setIsNotificationConsoleExpanded": undefined,
      "setNotificationConsoleData": undefined,
-      "setupNotebooksPane": SetupNotebooksPane {
-        "container": [Circular],
-        "description": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "setupnotebookspane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onCompleteSetupClick": [Function],
-        "onCompleteSetupKeyPress": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
      "signInAad": [Function],
      "sparkClusterConnectionInfo": [Function],
      "splitter": Splitter {