Migrate Add Database Panel to React (#597)

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

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

@@ -3,48 +3,38 @@ 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", () => {
+describe("Right Pane Form", () => {
   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"));
+    fireEvent.click(screen.getByLabelText("Load"));
     expect(onSubmit).toHaveBeenCalled();
   });
   it("should call submit method click on submit button", () => {
     render(<RightPaneForm {...props} />);
-    fireEvent.click(screen.getByTestId("submit"));
+    fireEvent.click(screen.getByLabelText("Load"));
     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");
+    expect(screen.getByLabelText("error")).toBeDefined();
+    expect(screen.getByLabelText("message").innerHTML).toEqual("file already Exist");
   });
 });

src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx

@@ -1,6 +1,4 @@
-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";
@@ -9,12 +7,9 @@ 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;
 }
@@ -23,51 +18,16 @@ 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",
@@ -78,19 +38,13 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
   };
 
   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>
+    <>
+      <PanelInfoErrorComponent {...panelInfoErrorProps} />
+      <form className="panelFormWrapper" onSubmit={handleOnSubmit}>
+        {children}
+        {!isSubmitButtonHidden && <PanelFooterComponent buttonLabel={submitButtonText} />}
+      </form>
+      {isExecuting && <PanelLoadingScreen />}
+    </>
   );
 };