Migrate new graph vertex panel to react (#702)

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

src/Explorer/Tabs/GraphTab.tsx

@@ -1,24 +1,24 @@
 import * as ko from "knockout";
-import * as Q from "q";
-import * as ViewModels from "../../Contracts/ViewModels";
-import TabsBase from "./TabsBase";
-import { GraphExplorerAdapter } from "../Graph/GraphExplorerComponent/GraphExplorerAdapter";
-import { GraphAccessor, GraphExplorerError } from "../Graph/GraphExplorerComponent/GraphExplorer";
+import React from "react";
 import NewVertexIcon from "../../../images/NewVertex.svg";
 import StyleIcon from "../../../images/Style.svg";
-import GraphStylingPane from "../Panes/GraphStylingPane";
-import NewVertexPane from "../Panes/NewVertexPane";
 import { DatabaseAccount } from "../../Contracts/DataModels";
+import * as ViewModels from "../../Contracts/ViewModels";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
+import { GraphAccessor, GraphExplorerError } from "../Graph/GraphExplorerComponent/GraphExplorer";
+import { GraphExplorerAdapter } from "../Graph/GraphExplorerComponent/GraphExplorerAdapter";
+import { ContextualPaneBase } from "../Panes/ContextualPaneBase";
+import GraphStylingPane from "../Panes/GraphStylingPane";
+import { NewVertexPanel } from "../Panes/NewVertexPanel/NewVertexPanel";
 import template from "./GraphTab.html";
-
+import TabsBase from "./TabsBase";
 export interface GraphIconMap {
   [key: string]: { data: string; format: string };
 }
 
 export interface GraphConfig {
   nodeColor: ko.Observable<string>;
-  nodeColorKey: ko.Observable<string>; // map property to node color. Takes precedence over nodeColor unless null
+  nodeColorKey: ko.Observable<string>; // map property to node color. Takes precedence over nodeColor unless undefined
   linkColor: ko.Observable<string>;
   showNeighborType: ko.Observable<ViewModels.NeighborType>;
   nodeCaption: ko.Observable<string>;
@@ -53,21 +53,20 @@ export default class GraphTab extends TabsBase {
   private graphConfigUiData: ViewModels.GraphConfigUiData;
   private isFilterQueryLoading: ko.Observable<boolean>;
   private isValidQuery: ko.Observable<boolean>;
-  private newVertexPane: NewVertexPane;
   private graphStylingPane: GraphStylingPane;
   private collectionPartitionKeyProperty: string;
+  private contextualPane: ContextualPaneBase;
 
   constructor(options: GraphTabOptions) {
     super(options);
 
-    this.newVertexPane = options.collection && options.collection.container.newVertexPane;
     this.graphStylingPane = options.collection && options.collection.container.graphStylingPane;
     this.collectionPartitionKeyProperty = options.collectionPartitionKeyProperty;
 
     this.isNewVertexDisabled = ko.observable(false);
     this.isPropertyEditing = ko.observable(false);
     this.isGraphDisplayed = ko.observable(false);
-    this.graphAccessor = null;
+    this.graphAccessor = undefined;
     this.graphConfig = GraphTab.createGraphConfig();
     // TODO Merge this with this.graphConfig
     this.graphConfigUiData = GraphTab.createGraphConfigUiData(this.graphConfig);
@@ -99,8 +98,8 @@ export default class GraphTab extends TabsBase {
       masterKey: options.masterKey,
       onLoadStartKey: options.onLoadStartKey,
       onLoadStartKeyChange: (onLoadStartKey: number): void => {
-        if (onLoadStartKey == null) {
-          this.onLoadStartKey = null;
+        if (onLoadStartKey === undefined) {
+          this.onLoadStartKey = undefined;
         }
       },
       resourceId: options.account.id,
@@ -135,26 +134,31 @@ export default class GraphTab extends TabsBase {
 
   /* Command bar */
   private showNewVertexEditor(): void {
-    this.newVertexPane.open();
-    this.newVertexPane.setPartitionKeyProperty(this.collectionPartitionKeyProperty);
-    // TODO Must update GraphExplorer properties
-    this.newVertexPane.subscribeOnSubmitCreate((result: ViewModels.NewVertexData) => {
-      this.newVertexPane.formErrors(null);
-      this.newVertexPane.formErrorsDetails(null);
-      this.graphAccessor.addVertex(result).then(
-        () => {
-          this.newVertexPane.cancel();
-        },
-        (error: GraphExplorerError) => {
-          this.newVertexPane.formErrors(error.title);
-          if (!!error.details) {
-            this.newVertexPane.formErrorsDetails(error.details);
-          }
-        }
-      );
-    });
+    this.collection.container.openSidePanel(
+      "New Vertex",
+      <NewVertexPanel
+        explorer={this.collection.container}
+        partitionKeyPropertyProp={this.collectionPartitionKeyProperty}
+        openNotificationConsole={() => this.collection.container.expandConsole()}
+        onSubmit={(
+          result: ViewModels.NewVertexData,
+          onError: (errorMessage: string) => void,
+          onSuccess: () => void
+        ): void => {
+          this.graphAccessor.addVertex(result).then(
+            () => {
+              onSuccess();
+              this.contextualPane.cancel();
+            },
+            (error: GraphExplorerError) => {
+              onError(error.title);
+            }
+          );
+        }}
+      />
+    );
   }
-  public openStyling() {
+  public openStyling(): void {
     this.setDefaultGraphConfigValues();
     // Update the styling pane with this instance
     this.graphStylingPane.setData(this.graphConfigUiData);
@@ -164,13 +168,13 @@ export default class GraphTab extends TabsBase {
   public static createGraphConfig(): GraphConfig {
     return {
       nodeColor: ko.observable(GraphTab.NODE_COLOR),
-      nodeColorKey: ko.observable(null),
+      nodeColorKey: ko.observable(undefined),
       linkColor: ko.observable(GraphTab.LINK_COLOR),
       showNeighborType: ko.observable(ViewModels.NeighborType.TARGETS_ONLY),
       nodeCaption: ko.observable(GraphTab.DEFAULT_NODE_CAPTION),
       nodeSize: ko.observable(GraphTab.NODE_SIZE),
       linkWidth: ko.observable(GraphTab.LINK_WIDTH),
-      nodeIconKey: ko.observable(null),
+      nodeIconKey: ko.observable(undefined),
       iconsMap: ko.observable({}),
     };
   }
@@ -183,26 +187,29 @@ export default class GraphTab extends TabsBase {
       nodeCaptionChoice: ko.observable(graphConfig.nodeCaption()),
       nodeColorKeyChoice: ko.observable(graphConfig.nodeColorKey()),
       nodeIconChoice: ko.observable(graphConfig.nodeIconKey()),
-      nodeIconSet: ko.observable(null),
+      nodeIconSet: ko.observable(undefined),
     };
   }
 
   /**
-   * Make sure graph config values are not null
+   * Make sure graph config values are not undefined
    */
   private setDefaultGraphConfigValues() {
-    // Assign default values if null
-    if (this.graphConfigUiData.nodeCaptionChoice() === null && this.graphConfigUiData.nodeProperties().length > 1) {
+    // Assign default values if undefined
+    if (
+      this.graphConfigUiData.nodeCaptionChoice() === undefined &&
+      this.graphConfigUiData.nodeProperties().length > 1
+    ) {
       this.graphConfigUiData.nodeCaptionChoice(this.graphConfigUiData.nodeProperties()[0]);
     }
     if (
-      this.graphConfigUiData.nodeColorKeyChoice() === null &&
+      this.graphConfigUiData.nodeColorKeyChoice() === undefined &&
       this.graphConfigUiData.nodePropertiesWithNone().length > 1
     ) {
       this.graphConfigUiData.nodeColorKeyChoice(this.graphConfigUiData.nodePropertiesWithNone()[0]);
     }
     if (
-      this.graphConfigUiData.nodeIconChoice() === null &&
+      this.graphConfigUiData.nodeIconChoice() === undefined &&
       this.graphConfigUiData.nodePropertiesWithNone().length > 1
     ) {
       this.graphConfigUiData.nodeIconChoice(this.graphConfigUiData.nodePropertiesWithNone()[0]);