Merge branch 'genericRightPaneComponent' of https://github.com/Azure/cosmos-explorer into move_add_Database_Panel_to_react

src/Explorer/Panes/CopyNotebookPane.tsx

@@ -0,0 +1,194 @@
+import ko from "knockout";
+import { IDropdownOption } from "office-ui-fabric-react";
+import * as React from "react";
+import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
+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 { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
+import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
+import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPane/CopyNotebookPaneComponent";
+import { RightPaneForm, RightPaneFormProps } from "./RightPaneForm/RightPaneForm";
+
+interface Location {
+  type: "MyNotebooks" | "GitHub";
+
+  // GitHub
+  owner?: string;
+  repo?: string;
+  branch?: string;
+}
+
+export class CopyNotebookPaneAdapter implements ReactAdapter {
+  private static readonly BranchNameWhiteSpace = "   ";
+
+  parameters: ko.Observable<number>;
+  private isOpened: boolean;
+  private isExecuting: boolean;
+  private formError: string;
+  private formErrorDetail: string;
+  private name: string;
+  private content: string;
+  private pinnedRepos: IPinnedRepo[];
+  private selectedLocation: Location;
+
+  constructor(
+    private container: Explorer,
+    private junoClient: JunoClient,
+    private gitHubOAuthService: GitHubOAuthService
+  ) {
+    this.parameters = ko.observable(Date.now());
+    this.reset();
+    this.triggerRender();
+  }
+
+  public renderComponent(): JSX.Element {
+    if (!this.isOpened) {
+      return undefined;
+    }
+
+    const genericPaneProps: RightPaneFormProps = {
+      container: this.container,
+      formError: this.formError,
+      formErrorDetail: this.formErrorDetail,
+      id: "copynotebookpane",
+      isExecuting: this.isExecuting,
+      title: "Copy notebook",
+      submitButtonText: "OK",
+      onClose: () => this.close(),
+      onSubmit: () => this.submit(),
+    };
+
+    const copyNotebookPaneProps: CopyNotebookPaneProps = {
+      name: this.name,
+      pinnedRepos: this.pinnedRepos,
+      onDropDownChange: this.onDropDownChange,
+    };
+
+    return (
+      <RightPaneForm {...genericPaneProps}>
+        <CopyNotebookPaneComponent {...copyNotebookPaneProps} />
+      </RightPaneForm>
+    );
+  }
+
+  public triggerRender(): void {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
+
+  public async open(name: string, content: string): Promise<void> {
+    this.name = name;
+    this.content = content;
+
+    this.isOpened = true;
+    this.triggerRender();
+
+    if (this.gitHubOAuthService.isLoggedIn()) {
+      const response = await this.junoClient.getPinnedRepos(this.gitHubOAuthService.getTokenObservable()()?.scope);
+      if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
+        handleError(`Received HTTP ${response.status} when fetching pinned repos`, "CopyNotebookPaneAdapter/submit");
+      }
+
+      if (response.data?.length > 0) {
+        this.pinnedRepos = response.data;
+        this.triggerRender();
+      }
+    }
+  }
+
+  public close(): void {
+    this.reset();
+    this.triggerRender();
+  }
+
+  public async submit(): Promise<void> {
+    let destination: string = this.selectedLocation?.type;
+    let clearMessage: () => void;
+    this.isExecuting = true;
+    this.triggerRender();
+
+    try {
+      if (!this.selectedLocation) {
+        throw new Error(`No location selected`);
+      }
+
+      if (this.selectedLocation.type === "GitHub") {
+        destination = `${destination} - ${GitHubUtils.toRepoFullName(
+          this.selectedLocation.owner,
+          this.selectedLocation.repo
+        )} - ${this.selectedLocation.branch}`;
+      }
+
+      clearMessage = NotificationConsoleUtils.logConsoleProgress(`Copying ${this.name} to ${destination}`);
+
+      const notebookContentItem = await this.copyNotebook(this.selectedLocation);
+      if (!notebookContentItem) {
+        throw new Error(`Failed to upload ${this.name}`);
+      }
+
+      NotificationConsoleUtils.logConsoleInfo(`Successfully copied ${this.name} to ${destination}`);
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      this.formError = `Failed to copy ${this.name} to ${destination}`;
+      this.formErrorDetail = `${errorMessage}`;
+      handleError(errorMessage, "CopyNotebookPaneAdapter/submit", this.formError);
+      return;
+    } finally {
+      clearMessage && clearMessage();
+      this.isExecuting = false;
+      this.triggerRender();
+    }
+
+    this.close();
+  }
+
+  private copyNotebook = async (location: Location): Promise<NotebookContentItem> => {
+    let parent: NotebookContentItem;
+    switch (location.type) {
+      case "MyNotebooks":
+        parent = {
+          name: ResourceTreeAdapter.MyNotebooksTitle,
+          path: this.container.getNotebookBasePath(),
+          type: NotebookContentItemType.Directory,
+        };
+        break;
+
+      case "GitHub":
+        parent = {
+          name: ResourceTreeAdapter.GitHubReposTitle,
+          path: GitHubUtils.toContentUri(
+            this.selectedLocation.owner,
+            this.selectedLocation.repo,
+            this.selectedLocation.branch,
+            ""
+          ),
+          type: NotebookContentItemType.Directory,
+        };
+        break;
+
+      default:
+        throw new Error(`Unsupported location type ${location.type}`);
+    }
+
+    return this.container.uploadFile(this.name, this.content, parent);
+  };
+
+  private onDropDownChange = (_: React.FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {
+    this.selectedLocation = option?.data;
+  };
+
+  private reset = (): void => {
+    this.isOpened = false;
+    this.isExecuting = false;
+    this.formError = undefined;
+    this.formErrorDetail = undefined;
+    this.name = undefined;
+    this.content = undefined;
+    this.pinnedRepos = undefined;
+    this.selectedLocation = undefined;
+  };
+}

src/Explorer/Panes/GenericRightPaneComponent/GenericRightPaneComponent.tsx

@@ -19,10 +19,6 @@ export interface GenericRightPaneProps {
   children?: ReactNode;
 }
 
-export interface GenericRightPaneState {
-  panelHeight: number;
-}
-
 export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps> = ({
   container,
   formError,

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> = (
-  props: PanelFooterProps
-): JSX.Element => (
+export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = ({
+  buttonLabel,
+}: 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> = (
-  props: PanelInfoErrorProps
-): JSX.Element => {
+export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = ({
+  message,
+  messageType,
+  showErrorDetails,
+  link,
+  linkText,
+  openNotificationConsole,
+  formError = true,
+}: PanelInfoErrorProps): JSX.Element => {
   let icon: JSX.Element;
-  if (props.messageType === "error") {
-    icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" />;
-  } else if (props.messageType === "warning") {
-    icon = <Icon iconName="WarningSolid" className="panelWarningIcon" />;
-  } else if (props.messageType === "info") {
-    icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" />;
+  if (messageType === "error") {
+    icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" data-testid="errorIcon" />;
+  } else if (messageType === "warning") {
+    icon = <Icon iconName="WarningSolid" className="panelWarningIcon" data-testid="warningIcon" />;
+  } else if (messageType === "info") {
+    icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" data-testid="InfoIcon" />;
   }
 
   return (
-    <Stack className="panelInfoErrorContainer" horizontal verticalAlign="start">
-      {icon}
-      <span className="panelWarningErrorDetailsLinkContainer">
-        <Text className="panelWarningErrorMessage" variant="small">
-          {props.message}{" "}
-          {props.link && props.linkText && (
-            <Link target="_blank" href={props.link}>
-              {props.linkText}
-            </Link>
+    formError && (
+      <Stack className="panelInfoErrorContainer" horizontal verticalAlign="start">
+        {icon}
+        <span className="panelWarningErrorDetailsLinkContainer">
+          <Text className="panelWarningErrorMessage" variant="small" data-testid="panelmessage">
+            {message}
+            {link && linkText && (
+              <Link target="_blank" href={link}>
+                {linkText}
+              </Link>
+            )}
+          </Text>
+          {showErrorDetails && (
+            <a className="paneErrorLink" role="link" onClick={openNotificationConsole}>
+              More details
+            </a>
           )}
-        </Text>
-        {props.showErrorDetails && (
-          <a className="paneErrorLink" role="link" onClick={props.openNotificationConsole}>
-            More details
-          </a>
-        )}
-      </span>
-    </Stack>
+        </span>
+      </Stack>
+    )
   );
 };

src/Explorer/Panes/PublishNotebookPaneAdapter.tsx

@@ -13,11 +13,8 @@ import { CodeOfConductComponent } from "../Controls/NotebookGallery/CodeOfConduc
 import { GalleryTab } from "../Controls/NotebookGallery/GalleryViewerComponent";
 import Explorer from "../Explorer";
 import * as FileSystemUtil from "../Notebook/FileSystemUtil";
-import {
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "./GenericRightPaneComponent/GenericRightPaneComponent";
 import { PublishNotebookPaneComponent, PublishNotebookPaneProps } from "./PublishNotebookPaneComponent";
+import { RightPaneForm, RightPaneFormProps } from "./RightPaneForm/RightPaneForm";
 
 export class PublishNotebookPaneAdapter implements ReactAdapter {
   parameters: ko.Observable<number>;
@@ -47,7 +44,7 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
       return undefined;
     }
 
-    const props: GenericRightPaneProps = {
+    const props: RightPaneFormProps = {
       container: this.container,
       formError: this.formError,
       formErrorDetail: this.formErrorDetail,
@@ -77,7 +74,7 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
     };
 
     return (
-      <GenericRightPaneComponent {...props}>
+      <RightPaneForm {...props}>
         {!this.isCodeOfConductAccepted ? (
           <div style={{ padding: "15px", marginTop: "10px" }}>
             <CodeOfConductComponent
@@ -91,7 +88,7 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
         ) : (
           <PublishNotebookPaneComponent {...publishNotebookPaneProps} />
         )}
-      </GenericRightPaneComponent>
+      </RightPaneForm>
     );
   }
 

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 Explorer from "../../Explorer";
+import { RightPaneForm } from "./RightPaneForm";
+
+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(<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,101 @@
+import { IconButton } from "office-ui-fabric-react/lib/Button";
+import React, { FunctionComponent, ReactNode } from "react";
+import { KeyCodes } from "../../../Common/Constants";
+import Explorer from "../../Explorer";
+import { PanelFooterComponent } from "../PanelFooterComponent";
+import { PanelInfoErrorComponent, PanelInfoErrorProps } from "../PanelInfoErrorComponent";
+import { PanelLoadingScreen } from "../PanelLoadingScreen";
+
+export interface RightPaneFormProps {
+  container: Explorer;
+  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> = ({
+  container,
+  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 showErrorDetail = (): void => {
+    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()}
+          <PanelInfoErrorComponent {...panelInfoErrorProps} />
+          <form className="panelFormWrapper" onSubmit={handleOnSubmit}>
+            {children}
+            {!isSubmitButtonHidden && <PanelFooterComponent buttonLabel={submitButtonText} />}
+          </form>
+        </div>
+        {isExecuting && <PanelLoadingScreen />}
+      </div>
+    </div>
+  );
+};

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

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

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Settings Pane should render Default properly 1`] = `
-<GenericRightPaneComponent
+<RightPaneForm
   container={
     Explorer {
       "_closeModalDialog": [Function],
@@ -748,11 +748,11 @@ exports[`Settings Pane should render Default properly 1`] = `
       </div>
     </div>
   </div>
-</GenericRightPaneComponent>
+</RightPaneForm>
 `;
 
 exports[`Settings Pane should render Gremlin properly 1`] = `
-<GenericRightPaneComponent
+<RightPaneForm
   container={
     Explorer {
       "_closeModalDialog": [Function],
@@ -1424,5 +1424,5 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
       </div>
     </div>
   </div>
-</GenericRightPaneComponent>
+</RightPaneForm>
 `;

src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx

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

src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx

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

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Upload Items Pane should render Default properly 1`] = `
-<GenericRightPaneComponent
+<RightPaneForm
   container={
     Explorer {
       "_closeModalDialog": [Function],
@@ -630,8 +630,10 @@ exports[`Upload Items Pane should render Default properly 1`] = `
       multiple={true}
       onUpload={[Function]}
       tabIndex={0}
-      tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON documents. The combined size of all files in an individual upload operation must be less than 2 MB. You can perform multiple upload operations for larger data sets."
+      tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON
+ documents. The combined size of all files in an individual upload operation must be less than 2 MB. You
+ can perform multiple upload operations for larger data sets."
     />
   </div>
-</GenericRightPaneComponent>
+</RightPaneForm>
 `;

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

@@ -645,11 +645,13 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
         >
           <StyledIconBase
             className="panelWarningIcon"
+            data-testid="warningIcon"
             iconName="WarningSolid"
             key=".0:$.0"
           >
             <IconBase
               className="panelWarningIcon"
+              data-testid="warningIcon"
               iconName="WarningSolid"
               styles={[Function]}
               theme={
@@ -930,6 +932,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                 aria-hidden={true}
                 className="panelWarningIcon root-142"
                 data-icon-name="WarningSolid"
+                data-testid="warningIcon"
               >
                 
               </i>
@@ -941,13 +944,14 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           >
             <Text
               className="panelWarningErrorMessage"
+              data-testid="panelmessage"
               variant="small"
             >
               <span
                 className="panelWarningErrorMessage css-143"
+                data-testid="panelmessage"
               >
                 Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
-                 
               </span>
             </Text>
           </span>
@@ -1650,11 +1654,15 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
         className="panelFooter"
       >
         <CustomizedPrimaryButton
+          ariaLabel="OK"
+          data-testid="submit"
           id="sidePanelOkButton"
           text="OK"
           type="submit"
         >
           <PrimaryButton
+            ariaLabel="OK"
+            data-testid="submit"
             id="sidePanelOkButton"
             text="OK"
             theme={
@@ -1933,6 +1941,8 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
             type="submit"
           >
             <CustomizedDefaultButton
+              ariaLabel="OK"
+              data-testid="submit"
               id="sidePanelOkButton"
               onRenderDescription={[Function]}
               primary={true}
@@ -2213,6 +2223,8 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
               type="submit"
             >
               <DefaultButton
+                ariaLabel="OK"
+                data-testid="submit"
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
                 primary={true}
@@ -2493,7 +2505,9 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                 type="submit"
               >
                 <BaseButton
+                  ariaLabel="OK"
                   baseClassName="ms-Button"
+                  data-testid="submit"
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
                   primary={true}
@@ -3319,8 +3333,10 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                   variantClassName="ms-Button--primary"
                 >
                   <button
+                    aria-label="OK"
                     className="ms-Button ms-Button--primary root-156"
                     data-is-focusable={true}
+                    data-testid="submit"
                     id="sidePanelOkButton"
                     onClick={[Function]}
                     onKeyDown={[Function]}