Some panel use GenenricRightPanel and Some panel use RightPanelForm

src/Explorer/Panes/CopyNotebookPane.tsx

@@ -12,7 +12,7 @@ import Explorer from "../Explorer";
 import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
 import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
 import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
-import { RightPaneWrapper, RightPaneWrapperProps } from "./RightPaneWrapper/RightPaneWrapper";
+import { RightPaneForm, RightPaneFormProps } from "./RightPaneForm/RightPaneForm";
 
 interface Location {
   type: "MyNotebooks" | "GitHub";
@@ -51,7 +51,7 @@ export class CopyNotebookPaneAdapter implements ReactAdapter {
       return undefined;
     }
 
-    const genericPaneProps: RightPaneWrapperProps = {
+    const genericPaneProps: RightPaneFormProps = {
       container: this.container,
       formError: this.formError,
       formErrorDetail: this.formErrorDetail,
@@ -70,9 +70,9 @@ export class CopyNotebookPaneAdapter implements ReactAdapter {
     };
 
     return (
-      <RightPaneWrapper {...genericPaneProps}>
+      <RightPaneForm {...genericPaneProps}>
         <CopyNotebookPaneComponent {...copyNotebookPaneProps} />
-      </RightPaneWrapper>
+      </RightPaneForm>
     );
   }
 

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 { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 export interface DeleteCollectionConfirmationPanelProps {
   explorer: Explorer;
   collectionName: string;
@@ -97,7 +97,7 @@ export const DeleteCollectionConfirmationPanel: FunctionComponent<DeleteCollecti
       );
     }
   };
-  const genericPaneProps: RightPaneWrapperProps = {
+  const genericPaneProps: RightPaneFormProps = {
     container: explorer,
     formError: formError,
     formErrorDetail: formError,
@@ -109,7 +109,7 @@ export const DeleteCollectionConfirmationPanel: FunctionComponent<DeleteCollecti
     onSubmit: submit,
   };
   return (
-    <RightPaneWrapper {...genericPaneProps}>
+    <RightPaneForm {...genericPaneProps}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <div className="confirmDeleteInput">
@@ -147,6 +147,6 @@ export const DeleteCollectionConfirmationPanel: FunctionComponent<DeleteCollecti
           )}
         </div>
       </div>
-    </RightPaneWrapper>
+    </RightPaneForm>
   );
 };

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 { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
+import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
 import { InputParameter } from "./InputParameter";
 
 interface ExecuteSprocParamsPaneProps {
@@ -39,7 +39,7 @@ export const ExecuteSprocParamsPanel: FunctionComponent<ExecuteSprocParamsPanePr
     setSelectedKey(item);
   };
 
-  const genericPaneProps: RightPaneWrapperProps = {
+  const genericPaneProps: GenericRightPaneProps = {
     container: explorer,
     formError: formError,
     formErrorDetail: formErrorsDetails,
@@ -120,7 +120,7 @@ export const ExecuteSprocParamsPanel: FunctionComponent<ExecuteSprocParamsPanePr
   };
 
   return (
-    <RightPaneWrapper {...genericPaneProps}>
+    <GenericRightPaneComponent {...genericPaneProps}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <InputParameter
@@ -160,6 +160,6 @@ export const ExecuteSprocParamsPanel: FunctionComponent<ExecuteSprocParamsPanePr
           </Stack>
         </div>
       </div>
-    </RightPaneWrapper>
+    </GenericRightPaneComponent>
   );
 };

src/Explorer/Panes/GenericRightPaneComponent/index.tsx

@@ -0,0 +1,135 @@
+import { IconButton, PrimaryButton } 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";
+
+export interface GenericRightPaneProps {
+  container: Explorer;
+  formError: string;
+  formErrorDetail: string;
+  id: string;
+  isExecuting: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+  submitButtonText: string;
+  title: string;
+  isSubmitButtonHidden?: boolean;
+  children?: ReactNode;
+}
+
+export interface GenericRightPaneState {
+  panelHeight: number;
+}
+
+export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps> = ({
+  container,
+  formError,
+  formErrorDetail,
+  id,
+  isExecuting,
+  onClose,
+  onSubmit,
+  submitButtonText,
+  title,
+  isSubmitButtonHidden,
+  children,
+}: GenericRightPaneProps) => {
+  const getPanelHeight = (): number => {
+    const notificationConsoleElement: HTMLElement = document.getElementById("explorerNotificationConsole");
+    return window.innerHeight - $(notificationConsoleElement).height();
+  };
+
+  const panelHeight: number = getPanelHeight();
+
+  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"
+          onClick={onClose}
+          tabIndex={0}
+          className="closePaneBtn"
+          iconProps={{ iconName: "Cancel" }}
+        />
+      </div>
+    );
+  };
+
+  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();
+      event.stopPropagation();
+    }
+  };
+
+  const showErrorDetail = (): void => {
+    container.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()}
+          {renderErrorSection()}
+          {children}
+          {renderPanelFooter()}
+        </div>
+        {renderLoadingScreen()}
+      </div>
+    </div>
+  );
+};

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 { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
+import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
 
 interface LoadQueryPanelProps {
   explorer: Explorer;
@@ -33,7 +33,7 @@ export const LoadQueryPanel: FunctionComponent<LoadQueryPanelProps> = ({
   };
 
   const title = "Load Query";
-  const genericPaneProps: RightPaneWrapperProps = {
+  const genericPaneProps: GenericRightPaneProps = {
     container: explorer,
     formError: formError,
     formErrorDetail: formErrorsDetails,
@@ -104,7 +104,7 @@ export const LoadQueryPanel: FunctionComponent<LoadQueryPanelProps> = ({
   };
 
   return (
-    <RightPaneWrapper {...genericPaneProps}>
+    <GenericRightPaneComponent {...genericPaneProps}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <Stack horizontal>
@@ -129,6 +129,6 @@ export const LoadQueryPanel: FunctionComponent<LoadQueryPanelProps> = ({
           </Stack>
         </div>
       </div>
-    </RightPaneWrapper>
+    </GenericRightPaneComponent>
   );
 };

src/Explorer/Panes/PublishNotebookPaneAdapter.tsx

@@ -14,7 +14,7 @@ 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";
+import { RightPaneForm, RightPaneFormProps } from "./RightPaneForm/RightPaneForm";
 
 export class PublishNotebookPaneAdapter implements ReactAdapter {
   parameters: ko.Observable<number>;
@@ -44,7 +44,7 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
       return undefined;
     }
 
-    const props: RightPaneWrapperProps = {
+    const props: RightPaneFormProps = {
       container: this.container,
       formError: this.formError,
       formErrorDetail: this.formErrorDetail,
@@ -74,7 +74,7 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
     };
 
     return (
-      <RightPaneWrapper {...props}>
+      <RightPaneForm {...props}>
         {!this.isCodeOfConductAccepted ? (
           <div style={{ padding: "15px", marginTop: "10px" }}>
             <CodeOfConductComponent
@@ -88,7 +88,7 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
         ) : (
           <PublishNotebookPaneComponent {...publishNotebookPaneProps} />
         )}
-      </RightPaneWrapper>
+      </RightPaneForm>
     );
   }
 

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

@@ -2,7 +2,7 @@ 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";
+import { RightPaneForm } from "./RightPaneForm";
 
 const onClose = jest.fn();
 const onSubmit = jest.fn();
@@ -24,26 +24,26 @@ describe("Load Query Pane", () => {
   let wrapper: ReactWrapper;
 
   it("should render Default properly", () => {
-    wrapper = mount(<RightPaneWrapper {...props} />);
+    wrapper = mount(<RightPaneForm {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
   it("should call close method click cancel icon", () => {
-    render(<RightPaneWrapper {...props} />);
+    render(<RightPaneForm {...props} />);
     fireEvent.click(screen.getByTestId("closePaneBtn"));
     expect(onClose).toHaveBeenCalled();
   });
   it("should call submit method enter in form", () => {
-    render(<RightPaneWrapper {...props} />);
+    render(<RightPaneForm {...props} />);
     fireEvent.click(screen.getByTestId("submit"));
     expect(onSubmit).toHaveBeenCalled();
   });
   it("should call submit method click on submit button", () => {
-    render(<RightPaneWrapper {...props} />);
+    render(<RightPaneForm {...props} />);
     fireEvent.click(screen.getByTestId("submit"));
     expect(onSubmit).toHaveBeenCalled();
   });
   it("should render error in header", () => {
-    render(<RightPaneWrapper {...props} formError="file already Exist" />);
+    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

@@ -6,7 +6,7 @@ import { PanelFooterComponent } from "../PanelFooterComponent";
 import { PanelInfoErrorComponent, PanelInfoErrorProps } from "../PanelInfoErrorComponent";
 import { PanelLoadingScreen } from "../PanelLoadingScreen";
 
-export interface RightPaneWrapperProps {
+export interface RightPaneFormProps {
   container: Explorer;
   formError: string;
   formErrorDetail: string;
@@ -24,7 +24,7 @@ export interface GenericRightPaneState {
   panelHeight: number;
 }
 
-export const RightPaneWrapper: FunctionComponent<RightPaneWrapperProps> = ({
+export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
   container,
   formError,
   formErrorDetail,
@@ -36,7 +36,7 @@ export const RightPaneWrapper: FunctionComponent<RightPaneWrapperProps> = ({
   title,
   isSubmitButtonHidden = false,
   children,
-}: RightPaneWrapperProps) => {
+}: RightPaneFormProps) => {
   const getPanelHeight = (): number => {
     const notificationConsoleElement: HTMLElement = document.getElementById("explorerNotificationConsole");
     return window.innerHeight - $(notificationConsoleElement).height();

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 { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
+import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
 
 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: RightPaneWrapperProps = {
+  const genericPaneProps: GenericRightPaneProps = {
     container: explorer,
     formError: formError,
     formErrorDetail: formErrorsDetails,
@@ -146,7 +146,7 @@ export const SaveQueryPanel: FunctionComponent<SaveQueryPanelProps> = ({
   };
 
   return (
-    <RightPaneWrapper {...genericPaneProps}>
+    <GenericRightPaneComponent {...genericPaneProps}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           {!canSaveQueries() ? (
@@ -163,6 +163,6 @@ export const SaveQueryPanel: FunctionComponent<SaveQueryPanelProps> = ({
           )}
         </div>
       </div>
-    </RightPaneWrapper>
+    </GenericRightPaneComponent>
   );
 };

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 { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 export interface SettingsPaneProps {
   explorer: Explorer;
@@ -103,7 +103,7 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
     setGraphAutoVizDisabled(option.key);
   };
 
-  const genericPaneProps: RightPaneWrapperProps = {
+  const genericPaneProps: RightPaneFormProps = {
     container,
     formError: formErrors,
     formErrorDetail: "",
@@ -128,7 +128,7 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
     setPageOption(option.key);
   };
   return (
-    <RightPaneWrapper {...genericPaneProps}>
+    <RightPaneForm {...genericPaneProps}>
       <div className="paneMainContent">
         {shouldShowQueryPageOptions && (
           <div className="settingsSection">
@@ -248,6 +248,6 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
           </div>
         </div>
       </div>
-    </RightPaneWrapper>
+    </RightPaneForm>
   );
 };

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 { RightPaneWrapper, RightPaneWrapperProps } from "../../RightPaneWrapper/RightPaneWrapper";
+import { GenericRightPaneComponent, GenericRightPaneProps } from "../../GenericRightPaneComponent";
 
 interface TableQuerySelectPanelProps {
   explorer: Explorer;
@@ -28,7 +28,7 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
   ]);
   const [isAvailableColumnChecked, setIsAvailableColumnChecked] = useState<boolean>(true);
 
-  const genericPaneProps: RightPaneWrapperProps = {
+  const genericPaneProps: GenericRightPaneProps = {
     container: explorer,
     formError: "",
     formErrorDetail: "",
@@ -125,7 +125,7 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
   };
 
   return (
-    <RightPaneWrapper {...genericPaneProps}>
+    <GenericRightPaneComponent {...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>
-    </RightPaneWrapper>
+    </GenericRightPaneComponent>
   );
 };

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 { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 export interface UploadFilePanelProps {
   explorer: Explorer;
@@ -89,7 +89,7 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
     return uploadFile(file.name, fileContent);
   };
 
-  const genericPaneProps: RightPaneWrapperProps = {
+  const genericPaneProps: RightPaneFormProps = {
     container: container,
     formError: formErrors,
     formErrorDetail: formErrorsDetails,
@@ -102,10 +102,10 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
   };
 
   return (
-    <RightPaneWrapper {...genericPaneProps}>
+    <RightPaneForm {...genericPaneProps}>
       <div className="paneMainContent">
         <Upload label={selectFileInputLabel} accept={extensions} onUpload={updateSelectedFiles} />
       </div>
-    </RightPaneWrapper>
+    </RightPaneForm>
   );
 };

src/Explorer/Panes/UploadItemsPane/index.tsx

@@ -6,7 +6,7 @@ import { userContext } from "../../../UserContext";
 import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import { getErrorMessage } from "../../Tables/Utilities";
-import { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 export interface UploadItemsPaneProps {
   explorer: Explorer;
@@ -67,7 +67,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
     setFiles(event.target.files);
   };
 
-  const genericPaneProps: RightPaneWrapperProps = {
+  const genericPaneProps: RightPaneFormProps = {
     container: explorer,
     formError,
     formErrorDetail,
@@ -110,7 +110,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
   };
 
   return (
-    <RightPaneWrapper {...genericPaneProps}>
+    <RightPaneForm {...genericPaneProps}>
       <div className="paneMainContent">
         <Upload
           label="Select JSON Files"
@@ -136,6 +136,6 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
           </div>
         )}
       </div>
-    </RightPaneWrapper>
+    </RightPaneForm>
   );
 };