Remove generic right pane component (#790)

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

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

@@ -1,4 +1,4 @@
-import { shallow, ShallowWrapper } from "enzyme";
+import { mount, shallow, ShallowWrapper } from "enzyme";
 import React from "react";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import Explorer from "../../Explorer";
@@ -36,7 +36,7 @@ describe("New Vertex Panel", () => {
   it("should call form submit method", () => {
     const onSubmitSpy = jest.fn();
 
-    const newWrapper = shallow(
+    const newWrapper = mount(
       <NewVertexPanel
         explorer={fakeExplorer}
         partitionKeyPropertyProp={undefined}
@@ -61,7 +61,7 @@ describe("New Vertex Panel", () => {
 
     const result = onSubmitSpy(fakeNewVertexData, onErrorSpy, onSuccessSpy);
 
-    const newWrapper = shallow(
+    const newWrapper = mount(
       <NewVertexPanel
         explorer={fakeExplorer}
         partitionKeyPropertyProp={undefined}

src/Explorer/Panes/NewVertexPanel/NewVertexPanel.tsx

@@ -3,9 +3,7 @@ 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";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 export interface INewVertexPanelProps {
   explorer: Explorer;
   partitionKeyPropertyProp: string;
@@ -21,14 +19,10 @@ export const NewVertexPanel: FunctionComponent<INewVertexPanelProps> = ({
 }: 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();
+  const submit = () => {
     setErrorMessage(undefined);
-    setShowErrorDetails(false);
     if (onSubmit !== undefined) {
       setLoadingTrue();
       onSubmit(newVertexDataValue, onError, onSuccess);
@@ -37,7 +31,6 @@ export const NewVertexPanel: FunctionComponent<INewVertexPanelProps> = ({
 
   const onError = (errorMsg: string) => {
     setErrorMessage(errorMsg);
-    setShowErrorDetails(true);
     setLoadingFalse();
   };
 
@@ -49,17 +42,16 @@ export const NewVertexPanel: FunctionComponent<INewVertexPanelProps> = ({
   const onChange = (newVertexData: ViewModels.NewVertexData) => {
     newVertexDataValue = newVertexData;
   };
+  const props: RightPaneFormProps = {
+    formError: errorMessage,
+    isExecuting: isLoading,
+    submitButtonText: "OK",
+    onSubmit: () => submit(),
+    expandConsole: openNotificationConsole,
+  };
 
   return (
-    <form className="panelFormWrapper" onSubmit={(event: React.MouseEvent<HTMLFormElement>) => submit(event)}>
-      {errorMessage && (
-        <PanelInfoErrorComponent
-          message={errorMessage}
-          messageType="error"
-          showErrorDetails={showErrorDetails}
-          openNotificationConsole={openNotificationConsole}
-        />
-      )}
+    <RightPaneForm {...props}>
       <div className="panelMainContent">
         <NewVertexComponent
           newVertexDataProp={newVertexDataValue}
@@ -67,8 +59,6 @@ export const NewVertexPanel: FunctionComponent<INewVertexPanelProps> = ({
           onChangeProp={onChange}
         />
       </div>
-      <PanelFooterComponent buttonLabel={buttonLabel} />
-      {isLoading && <PanelLoadingScreen />}
-    </form>
+    </RightPaneForm>
   );
 };

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

@@ -1,9 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`New Vertex Panel should render default property 1`] = `
-<form
-  className="panelFormWrapper"
+<RightPaneForm
+  expandConsole={[Function]}
+  formError=""
+  isExecuting={false}
   onSubmit={[Function]}
+  submitButtonText="OK"
 >
   <div
     className="panelMainContent"
@@ -13,8 +16,5 @@ exports[`New Vertex Panel should render default property 1`] = `
       partitionKeyPropertyProp=""
     />
   </div>
-  <PanelFooterComponent
-    buttonLabel="OK"
-  />
-</form>
+</RightPaneForm>
 `;