Remove genericRightPaneComponent and create RightPaneWrapper with form (#679)

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

package-lock.json

@@ -6123,24 +6123,6 @@
             "tslib": "^1.10.0"
           }
         },
-        "@types/react": {
-          "version": "16.14.5",
-          "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
-          "integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
-          "requires": {
-            "@types/prop-types": "*",
-            "@types/scheduler": "*",
-            "csstype": "^3.0.2"
-          }
-        },
-        "@types/react-dom": {
-          "version": "16.9.12",
-          "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.12.tgz",
-          "integrity": "sha512-i7NPZZpPte3jtVOoW+eLB7G/jsX5OM6GqQnH+lC0nq0rqwlK0x8WcMEvYDgFWqWhWMlTltTimzdMax6wYfZssA==",
-          "requires": {
-            "@types/react": "^16"
-          }
-        },
         "@uifabric/foundation": {
           "version": "7.9.26",
           "resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-7.9.26.tgz",
@@ -6189,11 +6171,6 @@
             "tslib": "^1.10.0"
           }
         },
-        "csstype": {
-          "version": "3.0.8",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-          "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
-        },
         "office-ui-fabric-react": {
           "version": "7.168.2",
           "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-7.168.2.tgz",
@@ -6237,24 +6214,6 @@
             "tslib": "^1.10.0"
           }
         },
-        "@types/react": {
-          "version": "16.14.5",
-          "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
-          "integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
-          "requires": {
-            "@types/prop-types": "*",
-            "@types/scheduler": "*",
-            "csstype": "^3.0.2"
-          }
-        },
-        "@types/react-dom": {
-          "version": "16.9.12",
-          "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.12.tgz",
-          "integrity": "sha512-i7NPZZpPte3jtVOoW+eLB7G/jsX5OM6GqQnH+lC0nq0rqwlK0x8WcMEvYDgFWqWhWMlTltTimzdMax6wYfZssA==",
-          "requires": {
-            "@types/react": "^16"
-          }
-        },
         "@uifabric/styling": {
           "version": "7.19.0",
           "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-7.19.0.tgz",
@@ -6279,11 +6238,6 @@
             "prop-types": "^15.7.2",
             "tslib": "^1.10.0"
           }
-        },
-        "csstype": {
-          "version": "3.0.8",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-          "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
         }
       }
     },
@@ -6426,24 +6380,6 @@
             "tslib": "^1.10.0"
           }
         },
-        "@types/react": {
-          "version": "16.14.5",
-          "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
-          "integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
-          "requires": {
-            "@types/prop-types": "*",
-            "@types/scheduler": "*",
-            "csstype": "^3.0.2"
-          }
-        },
-        "@types/react-dom": {
-          "version": "16.9.12",
-          "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.12.tgz",
-          "integrity": "sha512-i7NPZZpPte3jtVOoW+eLB7G/jsX5OM6GqQnH+lC0nq0rqwlK0x8WcMEvYDgFWqWhWMlTltTimzdMax6wYfZssA==",
-          "requires": {
-            "@types/react": "^16"
-          }
-        },
         "@uifabric/foundation": {
           "version": "7.9.26",
           "resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-7.9.26.tgz",
@@ -6492,11 +6428,6 @@
             "tslib": "^1.10.0"
           }
         },
-        "csstype": {
-          "version": "3.0.8",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-          "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
-        },
         "office-ui-fabric-react": {
           "version": "7.168.2",
           "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-7.168.2.tgz",
@@ -6540,24 +6471,6 @@
             "tslib": "^1.10.0"
           }
         },
-        "@types/react": {
-          "version": "16.14.5",
-          "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
-          "integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
-          "requires": {
-            "@types/prop-types": "*",
-            "@types/scheduler": "*",
-            "csstype": "^3.0.2"
-          }
-        },
-        "@types/react-dom": {
-          "version": "16.9.12",
-          "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.12.tgz",
-          "integrity": "sha512-i7NPZZpPte3jtVOoW+eLB7G/jsX5OM6GqQnH+lC0nq0rqwlK0x8WcMEvYDgFWqWhWMlTltTimzdMax6wYfZssA==",
-          "requires": {
-            "@types/react": "^16"
-          }
-        },
         "@uifabric/utilities": {
           "version": "7.33.5",
           "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.33.5.tgz",
@@ -6569,11 +6482,6 @@
             "prop-types": "^15.7.2",
             "tslib": "^1.10.0"
           }
-        },
-        "csstype": {
-          "version": "3.0.8",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-          "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
         }
       }
     },

src/Explorer/Panes/GenericRightPaneComponent/GenericRightPaneComponent.tsx

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

src/Explorer/Panes/PanelFooterComponent.tsx

@@ -1,14 +1,20 @@
-import React from "react";
 import { PrimaryButton } from "@fluentui/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

@@ -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 (
-    <Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
+    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/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>
+  );
+};

src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx

@@ -2,10 +2,7 @@ import React, { ChangeEvent, FunctionComponent, useState } from "react";
 import { Upload } from "../../../Common/Upload/Upload";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
 import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
-import {
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
 
 export interface UploadFilePanelProps {
   expandConsole: () => void;
@@ -91,7 +88,7 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
     return uploadFile(file.name, fileContent);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneFormProps = {
     expandConsole,
     formError: formErrors,
     formErrorDetail: formErrorsDetails,
@@ -104,10 +101,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 {
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
 
 export interface UploadItemsPaneProps {
   explorer: Explorer;
@@ -70,7 +67,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
     setFiles(event.target.files);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneFormProps = {
     expandConsole: () => explorer.expandConsole(),
     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
   expandConsole={[Function]}
   formError=""
   formErrorDetail=""
@@ -23,5 +23,5 @@ exports[`Upload Items Pane should render Default properly 1`] = `
       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

@@ -1288,18 +1288,20 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
       <Stack
         className="panelInfoErrorContainer"
         horizontal={true}
-        verticalAlign="center"
+        verticalAlign="start"
       >
         <div
           className="ms-Stack panelInfoErrorContainer css-202"
         >
           <StyledIconBase
             className="panelWarningIcon"
+            data-testid="warningIcon"
             iconName="WarningSolid"
             key=".0:$.0"
           >
             <IconBase
               className="panelWarningIcon"
+              data-testid="warningIcon"
               iconName="WarningSolid"
               styles={[Function]}
               theme={
@@ -1580,6 +1582,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                 aria-hidden={true}
                 className="panelWarningIcon root-204"
                 data-icon-name="WarningSolid"
+                data-testid="warningIcon"
               >
                 
               </i>
@@ -1591,13 +1594,14 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           >
             <Text
               className="panelWarningErrorMessage"
+              data-testid="panelmessage"
               variant="small"
             >
               <span
                 className="panelWarningErrorMessage css-205"
+                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>
@@ -2298,11 +2302,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={
@@ -2581,6 +2589,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}
@@ -2861,6 +2871,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}
@@ -3141,7 +3153,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}
@@ -3995,8 +4009,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-218"
                     data-is-focusable={true}
+                    data-testid="submit"
                     id="sidePanelOkButton"
                     onClick={[Function]}
                     onKeyDown={[Function]}

test/notebooks/upload.spec.ts

@@ -19,7 +19,7 @@ test("Notebooks", async () => {
   await explorer.click('[data-test="My Notebooks"] [aria-label="More"]');
   await explorer.click('button[role="menuitem"]:has-text("Upload File")');
   await explorer.setInputFiles("#importFileInput", path.join(__dirname, fileToUpload));
-  await explorer.click('[aria-label="Submit"]');
+  await explorer.click('[aria-label="Upload"]');
   await explorer.click(`[data-test="${fileToUpload}"] [aria-label="More"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete")');
   await explorer.click('button:has-text("Delete")');