remove genericRightPaneComponent and create RightPaneWrapper with form

src/Explorer/Panes/CopyNotebookPane.tsx

@@ -1,18 +1,18 @@
 import ko from "knockout";
+import { IDropdownOption } from "office-ui-fabric-react";
 import * as React from "react";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
-import { JunoClient, IPinnedRepo } from "../../Juno/JunoClient";
+import { HttpStatusCodes } from "../../Common/Constants";
+import { getErrorMessage, handleError } from "../../Common/ErrorHandlingUtils";
+import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
+import { IPinnedRepo, JunoClient } from "../../Juno/JunoClient";
+import * as GitHubUtils from "../../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "./GenericRightPaneComponent";
+import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
-import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
-import { IDropdownOption } from "office-ui-fabric-react";
-import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
-import { HttpStatusCodes } from "../../Common/Constants";
-import * as GitHubUtils from "../../Utils/GitHubUtils";
-import { NotebookContentItemType, NotebookContentItem } from "../Notebook/NotebookContentItem";
 import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
-import { handleError, getErrorMessage } from "../../Common/ErrorHandlingUtils";
+import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "./RightPaneWrapper/RightPaneWrapper";
 
 interface Location {
   type: "MyNotebooks" | "GitHub";
@@ -51,7 +51,7 @@ export class CopyNotebookPaneAdapter implements ReactAdapter {
       return undefined;
     }
 
-    const genericPaneProps: GenericRightPaneProps = {
+    const genericPaneProps: RightPaneWrapperProps = {
       container: this.container,
       formError: this.formError,
       formErrorDetail: this.formErrorDetail,
@@ -70,9 +70,9 @@ export class CopyNotebookPaneAdapter implements ReactAdapter {
     };
 
     return (
-      <GenericRightPaneComponent {...genericPaneProps}>
+      <RightPaneWrapper {...genericPaneProps}>
         <CopyNotebookPaneComponent {...copyNotebookPaneProps} />
-      </GenericRightPaneComponent>
+      </RightPaneWrapper>
     );
   }
 

src/Explorer/Panes/DeleteCollectionConfirmationPanel/index.tsx

@@ -11,7 +11,7 @@ import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcesso
 import { userContext } from "../../../UserContext";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
 export interface DeleteCollectionConfirmationPanelProps {
   explorer: Explorer;
   collectionName: string;
@@ -97,7 +97,7 @@ export const DeleteCollectionConfirmationPanel: FunctionComponent<DeleteCollecti
       );
     }
   };
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneWrapperProps = {
     container: explorer,
     formError: formError,
     formErrorDetail: formError,
@@ -109,7 +109,7 @@ export const DeleteCollectionConfirmationPanel: FunctionComponent<DeleteCollecti
     onSubmit: submit,
   };
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneWrapper {...genericPaneProps}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <div className="confirmDeleteInput">
@@ -147,6 +147,6 @@ export const DeleteCollectionConfirmationPanel: FunctionComponent<DeleteCollecti
           )}
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneWrapper>
   );
 };

src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx

@@ -4,7 +4,7 @@ import React, { FunctionComponent, useState } from "react";
 import AddPropertyIcon from "../../../../images/Add-property.svg";
 import Explorer from "../../Explorer";
 import StoredProcedure from "../../Tree/StoredProcedure";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
 import { InputParameter } from "./InputParameter";
 
 interface ExecuteSprocParamsPaneProps {
@@ -39,7 +39,7 @@ export const ExecuteSprocParamsPanel: FunctionComponent<ExecuteSprocParamsPanePr
     setSelectedKey(item);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneWrapperProps = {
     container: explorer,
     formError: formError,
     formErrorDetail: formErrorsDetails,
@@ -120,7 +120,7 @@ export const ExecuteSprocParamsPanel: FunctionComponent<ExecuteSprocParamsPanePr
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneWrapper {...genericPaneProps}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <InputParameter
@@ -160,6 +160,6 @@ export const ExecuteSprocParamsPanel: FunctionComponent<ExecuteSprocParamsPanePr
           </Stack>
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneWrapper>
   );
 };

src/Explorer/Panes/LoadQueryPanel/index.tsx

@@ -8,7 +8,7 @@ import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Ut
 import Explorer from "../../Explorer";
 import QueryTab from "../../Tabs/QueryTab";
 import { Collection } from "..//../../Contracts/ViewModels";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
 
 interface LoadQueryPanelProps {
   explorer: Explorer;
@@ -33,7 +33,7 @@ export const LoadQueryPanel: FunctionComponent<LoadQueryPanelProps> = ({
   };
 
   const title = "Load Query";
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneWrapperProps = {
     container: explorer,
     formError: formError,
     formErrorDetail: formErrorsDetails,
@@ -104,7 +104,7 @@ export const LoadQueryPanel: FunctionComponent<LoadQueryPanelProps> = ({
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneWrapper {...genericPaneProps}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <Stack horizontal>
@@ -129,6 +129,6 @@ export const LoadQueryPanel: FunctionComponent<LoadQueryPanelProps> = ({
           </Stack>
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneWrapper>
   );
 };

src/Explorer/Panes/PanelFooterComponent.tsx

@@ -1,14 +1,20 @@
-import React from "react";
 import { PrimaryButton } from "office-ui-fabric-react";
+import React from "react";
 
 export interface PanelFooterProps {
   buttonLabel: string;
 }
 
-export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = (
+export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = ({
-  props: PanelFooterProps
+  buttonLabel,
-): JSX.Element => (
+}: PanelFooterProps): JSX.Element => (
   <div className="panelFooter">
-    <PrimaryButton type="submit" id="sidePanelOkButton" text={props.buttonLabel} />
+    <PrimaryButton
+      type="submit"
+      id="sidePanelOkButton"
+      text={buttonLabel}
+      ariaLabel={buttonLabel}
+      data-testid="submit"
+    />
   </div>
 );

src/Explorer/Panes/PanelInfoErrorComponent.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { Icon, Link, Stack, Text } from "office-ui-fabric-react";
+import React from "react";
 
 export interface PanelInfoErrorProps {
   message: string;
@@ -8,38 +8,47 @@ export interface PanelInfoErrorProps {
   link?: string;
   linkText?: string;
   openNotificationConsole?: () => void;
+  formError?: boolean;
 }
 
-export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = (
+export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = ({
-  props: PanelInfoErrorProps
+  message,
-): JSX.Element => {
+  messageType,
+  showErrorDetails,
+  link,
+  linkText,
+  openNotificationConsole,
+  formError = true,
+}: PanelInfoErrorProps): JSX.Element => {
   let icon: JSX.Element;
-  if (props.messageType === "error") {
+  if (messageType === "error") {
-    icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" />;
+    icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" data-testid="errorIcon" />;
-  } else if (props.messageType === "warning") {
+  } else if (messageType === "warning") {
-    icon = <Icon iconName="WarningSolid" className="panelWarningIcon" />;
+    icon = <Icon iconName="WarningSolid" className="panelWarningIcon" data-testid="warningIcon" />;
-  } else if (props.messageType === "info") {
+  } else if (messageType === "info") {
-    icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" />;
+    icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" data-testid="InfoIcon" />;
   }
 
   return (
+    formError && (
       <Stack className="panelInfoErrorContainer" horizontal verticalAlign="start">
         {icon}
         <span className="panelWarningErrorDetailsLinkContainer">
-        <Text className="panelWarningErrorMessage" variant="small">
+          <Text className="panelWarningErrorMessage" variant="small" data-testid="panelmessage">
-          {props.message}{" "}
+            {message}
-          {props.link && props.linkText && (
+            {link && linkText && (
-            <Link target="_blank" href={props.link}>
+              <Link target="_blank" href={link}>
-              {props.linkText}
+                {linkText}
               </Link>
             )}
           </Text>
-        {props.showErrorDetails && (
+          {showErrorDetails && (
-          <a className="paneErrorLink" role="link" onClick={props.openNotificationConsole}>
+            <a className="paneErrorLink" role="link" onClick={openNotificationConsole}>
               More details
             </a>
           )}
         </span>
       </Stack>
+    )
   );
 };

src/Explorer/Panes/PublishNotebookPaneAdapter.tsx

@@ -1,20 +1,20 @@
+import { toJS } from "@nteract/commutable";
+import { ImmutableNotebook } from "@nteract/commutable/src";
 import ko from "knockout";
 import * as React from "react";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
-import Explorer from "../Explorer";
-import { JunoClient } from "../../Juno/JunoClient";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "./GenericRightPaneComponent";
-import { PublishNotebookPaneComponent, PublishNotebookPaneProps } from "./PublishNotebookPaneComponent";
-import { ImmutableNotebook } from "@nteract/commutable/src";
-import { toJS } from "@nteract/commutable";
-import { CodeOfConductComponent } from "../Controls/NotebookGallery/CodeOfConductComponent";
 import { HttpStatusCodes } from "../../Common/Constants";
-import { handleError, getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { getErrorMessage, getErrorStack, handleError } from "../../Common/ErrorHandlingUtils";
-import { GalleryTab } from "../Controls/NotebookGallery/GalleryViewerComponent";
+import { JunoClient } from "../../Juno/JunoClient";
-import { traceFailure, traceStart, traceSuccess } from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
+import { traceFailure, traceStart, traceSuccess } from "../../Shared/Telemetry/TelemetryProcessor";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { CodeOfConductComponent } from "../Controls/NotebookGallery/CodeOfConductComponent";
+import { GalleryTab } from "../Controls/NotebookGallery/GalleryViewerComponent";
+import Explorer from "../Explorer";
 import * as FileSystemUtil from "../Notebook/FileSystemUtil";
+import { PublishNotebookPaneComponent, PublishNotebookPaneProps } from "./PublishNotebookPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "./RightPaneWrapper/RightPaneWrapper";
 
 export class PublishNotebookPaneAdapter implements ReactAdapter {
   parameters: ko.Observable<number>;
@@ -44,7 +44,7 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
       return undefined;
     }
 
-    const props: GenericRightPaneProps = {
+    const props: RightPaneWrapperProps = {
       container: this.container,
       formError: this.formError,
       formErrorDetail: this.formErrorDetail,
@@ -74,7 +74,7 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
     };
 
     return (
-      <GenericRightPaneComponent {...props}>
+      <RightPaneWrapper {...props}>
         {!this.isCodeOfConductAccepted ? (
           <div style={{ padding: "15px", marginTop: "10px" }}>
             <CodeOfConductComponent
@@ -88,7 +88,7 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
         ) : (
           <PublishNotebookPaneComponent {...publishNotebookPaneProps} />
         )}
-      </GenericRightPaneComponent>
+      </RightPaneWrapper>
     );
   }
 

src/Explorer/Panes/RightPaneWrapper/RightPaneWrapper.test.tsx

@@ -0,0 +1,50 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { mount, ReactWrapper } from "enzyme";
+import React from "react";
+import Explorer from "../../Explorer";
+import { RightPaneWrapper } from "./RightPaneWrapper";
+
+const onClose = jest.fn();
+const onSubmit = jest.fn();
+
+const props = {
+  closePanel: (): void => undefined,
+  container: new Explorer(),
+  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(<RightPaneWrapper {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+  it("should call close method click cancel icon", () => {
+    render(<RightPaneWrapper {...props} />);
+    fireEvent.click(screen.getByTestId("closePaneBtn"));
+    expect(onClose).toHaveBeenCalled();
+  });
+  it("should call submit method enter in form", () => {
+    render(<RightPaneWrapper {...props} />);
+    fireEvent.click(screen.getByTestId("submit"));
+    expect(onSubmit).toHaveBeenCalled();
+  });
+  it("should call submit method click on submit button", () => {
+    render(<RightPaneWrapper {...props} />);
+    fireEvent.click(screen.getByTestId("submit"));
+    expect(onSubmit).toHaveBeenCalled();
+  });
+  it("should render error in header", () => {
+    render(<RightPaneWrapper {...props} formError="file already Exist" />);
+    expect(screen.getByTestId("errorIcon")).toBeDefined();
+    expect(screen.getByTestId("panelmessage").innerHTML).toEqual("file already Exist");
+  });
+});

src/Explorer/Panes/RightPaneWrapper/RightPaneWrapper.tsx

@@ -1,11 +1,12 @@
-import { IconButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
+import { IconButton } from "office-ui-fabric-react/lib/Button";
 import React, { FunctionComponent, ReactNode } from "react";
-import ErrorRedIcon from "../../../../images/error_red.svg";
-import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";
 import { KeyCodes } from "../../../Common/Constants";
 import Explorer from "../../Explorer";
+import { PanelFooterComponent } from "../PanelFooterComponent";
+import { PanelInfoErrorComponent, PanelInfoErrorProps } from "../PanelInfoErrorComponent";
+import { PanelLoadingScreen } from "../PanelLoadingScreen";
 
-export interface GenericRightPaneProps {
+export interface RightPaneWrapperProps {
   container: Explorer;
   formError: string;
   formErrorDetail: string;
@@ -23,7 +24,7 @@ export interface GenericRightPaneState {
   panelHeight: number;
 }
 
-export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps> = ({
+export const RightPaneWrapper: FunctionComponent<RightPaneWrapperProps> = ({
   container,
   formError,
   formErrorDetail,
@@ -33,9 +34,9 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
   onSubmit,
   submitButtonText,
   title,
-  isSubmitButtonHidden,
+  isSubmitButtonHidden = false,
   children,
-}: GenericRightPaneProps) => {
+}: RightPaneWrapperProps) => {
   const getPanelHeight = (): number => {
     const notificationConsoleElement: HTMLElement = document.getElementById("explorerNotificationConsole");
     return window.innerHeight - $(notificationConsoleElement).height();
@@ -43,6 +44,10 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
 
   const panelHeight: number = getPanelHeight();
 
+  const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    onSubmit();
+  };
   const renderPanelHeader = (): JSX.Element => {
     return (
       <div className="firstdivbg headerline">
@@ -52,6 +57,7 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
         <IconButton
           ariaLabel="Close pane"
           title="Close pane"
+          data-testid="closePaneBtn"
           onClick={onClose}
           tabIndex={0}
           className="closePaneBtn"
@@ -61,52 +67,6 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
     );
   };
 
-  const renderErrorSection = (): JSX.Element => {
-    return (
-      <div className="warningErrorContainer" aria-live="assertive" hidden={!formError}>
-        <div className="warningErrorContent">
-          <span>
-            <img className="paneErrorIcon" src={ErrorRedIcon} alt="Error" />
-          </span>
-          <span className="warningErrorDetailsLinkContainer">
-            <span className="formErrors" title={formError}>
-              {formError}
-            </span>
-            <a className="errorLink" role="link" hidden={!formErrorDetail} onClick={showErrorDetail}>
-              More details
-            </a>
-          </span>
-        </div>
-      </div>
-    );
-  };
-
-  const renderPanelFooter = (): JSX.Element => {
-    return (
-      <div className="paneFooter">
-        <div className="leftpanel-okbut">
-          <PrimaryButton
-            style={{ visibility: isSubmitButtonHidden ? "hidden" : "visible" }}
-            ariaLabel="Submit"
-            title="Submit"
-            onClick={onSubmit}
-            tabIndex={0}
-            className="genericPaneSubmitBtn"
-            text={submitButtonText}
-          />
-        </div>
-      </div>
-    );
-  };
-
-  const renderLoadingScreen = (): JSX.Element => {
-    return (
-      <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" hidden={!isExecuting}>
-        <img className="dataExplorerLoader" src={LoadingIndicatorIcon} />
-      </div>
-    );
-  };
-
   const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
     if (event.keyCode === KeyCodes.Escape) {
       onClose();
@@ -118,17 +78,27 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
     container.expandConsole();
   };
 
+  const panelInfoErrorProps: PanelInfoErrorProps = {
+    messageType: "error",
+    message: formError,
+    formError: formError !== "",
+    showErrorDetails: formErrorDetail !== "",
+    openNotificationConsole: showErrorDetail,
+  };
+
   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()}
-          {renderErrorSection()}
+          <PanelInfoErrorComponent {...panelInfoErrorProps} />
+          <form className="panelFormWrapper" onSubmit={handleOnSubmit}>
             {children}
-          {renderPanelFooter()}
+            {!isSubmitButtonHidden && <PanelFooterComponent buttonLabel={submitButtonText} />}
+          </form>
         </div>
-        {renderLoadingScreen()}
+        {isExecuting && <PanelLoadingScreen />}
       </div>
     </div>
   );

src/Explorer/Panes/SaveQueryPanel/index.tsx

@@ -9,7 +9,7 @@ import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetr
 import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import QueryTab from "../../Tabs/QueryTab";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
 
 interface SaveQueryPanelProps {
   explorer: Explorer;
@@ -28,7 +28,7 @@ export const SaveQueryPanel: FunctionComponent<SaveQueryPanelProps> = ({
   const setupSaveQueriesText = `For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “${SavedQueries.DatabaseName}”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.`;
   const title = "Save Query";
   const { canSaveQueries } = explorer;
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneWrapperProps = {
     container: explorer,
     formError: formError,
     formErrorDetail: formErrorsDetails,
@@ -146,7 +146,7 @@ export const SaveQueryPanel: FunctionComponent<SaveQueryPanelProps> = ({
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneWrapper {...genericPaneProps}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           {!canSaveQueries() ? (
@@ -163,6 +163,6 @@ export const SaveQueryPanel: FunctionComponent<SaveQueryPanelProps> = ({
           )}
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneWrapper>
   );
 };

src/Explorer/Panes/SettingsPane/index.tsx

@@ -8,7 +8,7 @@ import * as StringUtility from "../../../Shared/StringUtility";
 import { userContext } from "../../../UserContext";
 import { logConsoleInfo } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
 
 export interface SettingsPaneProps {
   explorer: Explorer;
@@ -103,7 +103,7 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
     setGraphAutoVizDisabled(option.key);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneWrapperProps = {
     container,
     formError: formErrors,
     formErrorDetail: "",
@@ -128,7 +128,7 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
     setPageOption(option.key);
   };
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneWrapper {...genericPaneProps}>
       <div className="paneMainContent">
         {shouldShowQueryPageOptions && (
           <div className="settingsSection">
@@ -248,6 +248,6 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
           </div>
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneWrapper>
   );
 };

src/Explorer/Panes/Tables/TableQuerySelectPanel/index.tsx

@@ -4,7 +4,7 @@ import { userContext } from "../../../../UserContext";
 import Explorer from "../../../Explorer";
 import * as Constants from "../../../Tables/Constants";
 import QueryViewModel from "../../../Tables/QueryBuilder/QueryViewModel";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../../GenericRightPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "../../RightPaneWrapper/RightPaneWrapper";
 
 interface TableQuerySelectPanelProps {
   explorer: Explorer;
@@ -28,7 +28,7 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
   ]);
   const [isAvailableColumnChecked, setIsAvailableColumnChecked] = useState<boolean>(true);
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneWrapperProps = {
     container: explorer,
     formError: "",
     formErrorDetail: "",
@@ -125,7 +125,7 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneWrapper {...genericPaneProps}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <Text>Select the columns that you want to query.</Text>
@@ -150,6 +150,6 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
           </div>
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneWrapper>
   );
 };

src/Explorer/Panes/UploadFilePane/index.tsx

@@ -3,7 +3,7 @@ import { Upload } from "../../../Common/Upload";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
 
 export interface UploadFilePanelProps {
   explorer: Explorer;
@@ -89,7 +89,7 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
     return uploadFile(file.name, fileContent);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneWrapperProps = {
     container: container,
     formError: formErrors,
     formErrorDetail: formErrorsDetails,
@@ -102,10 +102,10 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneWrapper {...genericPaneProps}>
       <div className="paneMainContent">
         <Upload label={selectFileInputLabel} accept={extensions} onUpload={updateSelectedFiles} />
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneWrapper>
   );
 };

src/Explorer/Panes/UploadItemsPane/index.tsx

@@ -6,7 +6,7 @@ import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import { UploadDetails, UploadDetailsRecord } from "../../../workers/upload/definitions";
 import Explorer from "../../Explorer";
 import { getErrorMessage } from "../../Tables/Utilities";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
 
 export interface UploadItemsPaneProps {
   explorer: Explorer;
@@ -73,7 +73,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
     setFiles(event.target.files);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneWrapperProps = {
     container: explorer,
     formError,
     formErrorDetail,
@@ -115,7 +115,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneWrapper {...genericPaneProps}>
       <div className="paneMainContent">
         <Upload
           label="Select JSON Files"
@@ -141,6 +141,6 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
           </div>
         )}
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneWrapper>
   );
 };