Remove genericRightPaneComponent and create RightPaneWrapper with form (#679)

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

src/Explorer/Panes/RightPaneForm/RightPaneForm.test.tsx

@@ -0,0 +1,50 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { mount, ReactWrapper } from "enzyme";
+import React from "react";
+import { RightPaneForm } from "./RightPaneForm";
+
+const onClose = jest.fn();
+const onSubmit = jest.fn();
+const expandConsole = jest.fn();
+
+const props = {
+  closePanel: (): void => undefined,
+  expandConsole,
+  formError: "",
+  formErrorDetail: "",
+  id: "loadQueryPane",
+  isExecuting: false,
+  title: "Load Query Pane",
+  submitButtonText: "Load",
+  onClose,
+  onSubmit,
+};
+
+describe("Load Query Pane", () => {
+  let wrapper: ReactWrapper;
+
+  it("should render Default properly", () => {
+    wrapper = mount(<RightPaneForm {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+  it("should call close method click cancel icon", () => {
+    render(<RightPaneForm {...props} />);
+    fireEvent.click(screen.getByTestId("closePaneBtn"));
+    expect(onClose).toHaveBeenCalled();
+  });
+  it("should call submit method enter in form", () => {
+    render(<RightPaneForm {...props} />);
+    fireEvent.click(screen.getByTestId("submit"));
+    expect(onSubmit).toHaveBeenCalled();
+  });
+  it("should call submit method click on submit button", () => {
+    render(<RightPaneForm {...props} />);
+    fireEvent.click(screen.getByTestId("submit"));
+    expect(onSubmit).toHaveBeenCalled();
+  });
+  it("should render error in header", () => {
+    render(<RightPaneForm {...props} formError="file already Exist" />);
+    expect(screen.getByTestId("errorIcon")).toBeDefined();
+    expect(screen.getByTestId("panelmessage").innerHTML).toEqual("file already Exist");
+  });
+});

src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx

@@ -0,0 +1,96 @@
+import { IconButton } from "@fluentui/react";
+import React, { FunctionComponent, ReactNode } from "react";
+import { KeyCodes } from "../../../Common/Constants";
+import { PanelFooterComponent } from "../PanelFooterComponent";
+import { PanelInfoErrorComponent, PanelInfoErrorProps } from "../PanelInfoErrorComponent";
+import { PanelLoadingScreen } from "../PanelLoadingScreen";
+
+export interface RightPaneFormProps {
+  expandConsole: () => void;
+  formError: string;
+  formErrorDetail: string;
+  id: string;
+  isExecuting: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+  submitButtonText: string;
+  title: string;
+  isSubmitButtonHidden?: boolean;
+  children?: ReactNode;
+}
+
+export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
+  expandConsole,
+  formError,
+  formErrorDetail,
+  id,
+  isExecuting,
+  onClose,
+  onSubmit,
+  submitButtonText,
+  title,
+  isSubmitButtonHidden = false,
+  children,
+}: RightPaneFormProps) => {
+  const getPanelHeight = (): number => {
+    const notificationConsoleElement: HTMLElement = document.getElementById("explorerNotificationConsole");
+    return window.innerHeight - $(notificationConsoleElement).height();
+  };
+
+  const panelHeight: number = getPanelHeight();
+
+  const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    onSubmit();
+  };
+  const renderPanelHeader = (): JSX.Element => {
+    return (
+      <div className="firstdivbg headerline">
+        <span id="databaseTitle" role="heading" aria-level={2}>
+          {title}
+        </span>
+        <IconButton
+          ariaLabel="Close pane"
+          title="Close pane"
+          data-testid="closePaneBtn"
+          onClick={onClose}
+          tabIndex={0}
+          className="closePaneBtn"
+          iconProps={{ iconName: "Cancel" }}
+        />
+      </div>
+    );
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+    if (event.keyCode === KeyCodes.Escape) {
+      onClose();
+      event.stopPropagation();
+    }
+  };
+
+  const panelInfoErrorProps: PanelInfoErrorProps = {
+    messageType: "error",
+    message: formError,
+    formError: formError !== "",
+    showErrorDetails: formErrorDetail !== "",
+    openNotificationConsole: expandConsole,
+  };
+
+  return (
+    <div tabIndex={-1} onKeyDown={onKeyDown}>
+      <div className="contextual-pane-out" onClick={onClose}></div>
+      <div className="contextual-pane" id={id} style={{ height: panelHeight }} onKeyDown={onKeyDown}>
+        <div className="panelContentWrapper">
+          {renderPanelHeader()}
+          <PanelInfoErrorComponent {...panelInfoErrorProps} />
+          <form className="panelFormWrapper" onSubmit={handleOnSubmit}>
+            {children}
+            {!isSubmitButtonHidden && <PanelFooterComponent buttonLabel={submitButtonText} />}
+          </form>
+        </div>
+        {isExecuting && <PanelLoadingScreen />}
+      </div>
+    </div>
+  );
+};