Migrate new graph vertex panel to react (#702)

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

src/Explorer/Panes/NewVertexPanel/NewVertexPanel.less

@@ -0,0 +1,10 @@
+@import "../../../../less/Common/Constants";
+
+.newvertexContainer {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  white-space: nowrap;
+  .flex-display();
+  .flex-direction();
+}

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

@@ -0,0 +1,78 @@
+import { shallow, ShallowWrapper } from "enzyme";
+import React from "react";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import Explorer from "../../Explorer";
+import { NewVertexPanel } from "./NewVertexPanel";
+
+describe("New Vertex Panel", () => {
+  let fakeExplorer: Explorer;
+  let wrapper: ShallowWrapper;
+
+  beforeEach(() => {
+    fakeExplorer = new Explorer();
+  });
+
+  it("should render default property", () => {
+    const props = {
+      explorer: fakeExplorer,
+      partitionKeyPropertyProp: "",
+      onSubmit: (): void => undefined,
+      openNotificationConsole: (): void => undefined,
+    };
+    wrapper = shallow(<NewVertexPanel {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should render button in footer", () => {
+    const button = wrapper.find("PrimaryButton").first();
+    expect(button).toBeDefined();
+  });
+
+  it("should render form", () => {
+    const form = wrapper.find("form").first();
+    expect(form).toBeDefined();
+  });
+
+  it("should call form submit method", () => {
+    const onSubmitSpy = jest.fn();
+
+    const newWrapper = shallow(
+      <NewVertexPanel
+        explorer={fakeExplorer}
+        partitionKeyPropertyProp={undefined}
+        openNotificationConsole={(): void => undefined}
+        onSubmit={onSubmitSpy}
+      />
+    );
+    //eslint-disable-next-line
+    newWrapper.find("form").simulate("submit", { preventDefault: () => {} });
+
+    expect(onSubmitSpy).toHaveBeenCalled();
+  });
+
+  it("should call error and success scenario method", () => {
+    const onSubmitSpy = jest.fn();
+    const onErrorSpy = jest.fn();
+    const onSuccessSpy = jest.fn();
+    const fakeNewVertexData: ViewModels.NewVertexData = {
+      label: "",
+      properties: [],
+    };
+
+    const result = onSubmitSpy(fakeNewVertexData, onErrorSpy, onSuccessSpy);
+
+    const newWrapper = shallow(
+      <NewVertexPanel
+        explorer={fakeExplorer}
+        partitionKeyPropertyProp={undefined}
+        openNotificationConsole={(): void => undefined}
+        onSubmit={onSubmitSpy}
+      />
+    );
+    //eslint-disable-next-line
+    newWrapper.find("form").simulate("submit", { preventDefault: () => {} });
+
+    expect(result).toBeUndefined();
+    expect(onSubmitSpy).toHaveBeenCalledWith(fakeNewVertexData, onErrorSpy, onSuccessSpy);
+  });
+});

src/Explorer/Panes/NewVertexPanel/NewVertexPanel.tsx

@@ -0,0 +1,74 @@
+import { useBoolean } from "@uifabric/react-hooks";
+import React, { FunctionComponent, useState } from "react";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import Explorer from "../../Explorer";
+import { NewVertexComponent } from "../../Graph/NewVertexComponent/NewVertexComponent";
+import { PanelFooterComponent } from "../PanelFooterComponent";
+import { PanelInfoErrorComponent } from "../PanelInfoErrorComponent";
+import { PanelLoadingScreen } from "../PanelLoadingScreen";
+export interface INewVertexPanelProps {
+  explorer: Explorer;
+  partitionKeyPropertyProp: string;
+  onSubmit: (result: ViewModels.NewVertexData, onError: (errorMsg: string) => void, onSuccess: () => void) => void;
+  openNotificationConsole: () => void;
+}
+
+export const NewVertexPanel: FunctionComponent<INewVertexPanelProps> = ({
+  explorer,
+  partitionKeyPropertyProp,
+  onSubmit,
+  openNotificationConsole,
+}: INewVertexPanelProps): JSX.Element => {
+  let newVertexDataValue: ViewModels.NewVertexData;
+  const [errorMessage, setErrorMessage] = useState<string>("");
+  const [showErrorDetails, setShowErrorDetails] = useState<boolean>(false);
+  const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
+  const buttonLabel = "OK";
+
+  const submit = (event: React.MouseEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setErrorMessage(undefined);
+    setShowErrorDetails(false);
+    if (onSubmit !== undefined) {
+      setLoadingTrue();
+      onSubmit(newVertexDataValue, onError, onSuccess);
+    }
+  };
+
+  const onError = (errorMsg: string) => {
+    setErrorMessage(errorMsg);
+    setShowErrorDetails(true);
+    setLoadingFalse();
+  };
+
+  const onSuccess = () => {
+    setLoadingFalse();
+    explorer.closeSidePanel();
+  };
+
+  const onChange = (newVertexData: ViewModels.NewVertexData) => {
+    newVertexDataValue = newVertexData;
+  };
+
+  return (
+    <form className="panelFormWrapper" onSubmit={(event: React.MouseEvent<HTMLFormElement>) => submit(event)}>
+      {errorMessage && (
+        <PanelInfoErrorComponent
+          message={errorMessage}
+          messageType="error"
+          showErrorDetails={showErrorDetails}
+          openNotificationConsole={openNotificationConsole}
+        />
+      )}
+      <div className="panelMainContent">
+        <NewVertexComponent
+          newVertexDataProp={newVertexDataValue}
+          partitionKeyPropertyProp={partitionKeyPropertyProp}
+          onChangeProp={onChange}
+        />
+      </div>
+      <PanelFooterComponent buttonLabel={buttonLabel} />
+      {isLoading && <PanelLoadingScreen />}
+    </form>
+  );
+};

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

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`New Vertex Panel should render default property 1`] = `
+<form
+  className="panelFormWrapper"
+  onSubmit={[Function]}
+>
+  <div
+    className="panelMainContent"
+  >
+    <NewVertexComponent
+      onChangeProp={[Function]}
+      partitionKeyPropertyProp=""
+    />
+  </div>
+  <PanelFooterComponent
+    buttonLabel="OK"
+  />
+</form>
+`;