[WC-3460]: FileUploader pre-release QA & decision review

packages/pluggableWidgets/file-uploader-web/src/components/ActionsBar.tsx

@@ -59,11 +59,7 @@ const DefaultActionsBar = observer(function DefaultActionsBar(props: ButtonsBarP
     }, [props.store]);
 
     if (props.store.fileStatus === "rejected") {
-        return (
-            <div className={"entry-details-actions"}>
-                <RetryButton store={props.store} />
-            </div>
-        );
+        return <RejectedActionsBar store={props.store} />;
     }
 
     return (
@@ -84,6 +80,26 @@ const DefaultActionsBar = observer(function DefaultActionsBar(props: ButtonsBarP
     );
 });
 
+function RejectedActionsBar({ store }: ButtonsBarProps): ReactElement {
+    const translations = useTranslationsStore();
+
+    const onDismiss = useCallback(() => {
+        store.dismiss();
+    }, [store]);
+
+    return (
+        <div className={"entry-details-actions"}>
+            <RetryButton store={store} />
+            <ActionButton
+                icon={<span className={"remove-icon"} aria-hidden />}
+                title={translations.get("removeButtonTextMessage")}
+                action={onDismiss}
+                isDisabled={false}
+            />
+        </div>
+    );
+}
+
 function DismissActionsBar({ store }: ButtonsBarProps): ReactElement {
     const translations = useTranslationsStore();
 

packages/pluggableWidgets/file-uploader-web/src/components/Dropzone.tsx

@@ -16,23 +16,28 @@ interface DropzoneProps {
 
 export const Dropzone = observer(
     ({ warningMessage, onDrop, maxSize, acceptFileTypes, disabled }: DropzoneProps): ReactElement => {
-        const { getRootProps, getInputProps, isDragAccept, isDragReject } = useDropzone({
+        const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone({
             onDrop,
             maxSize: maxSize || undefined,
             accept: acceptFileTypes,
             disabled
         });
 
         const translations = useTranslationsStore();
-        const [type, msg] = getMessage(translations, isDragAccept, isDragReject);
+        const [type, msg] = getMessage(
+            translations,
+            isDragActive && isDragAccept,
+            isDragActive && isDragReject,
+            warningMessage
+        );
 
         return (
             <Fragment>
                 <div
                     className={classNames("dropzone", {
                         active: type === "active",
                         disabled,
-                        warning: !!warningMessage || type === "warning"
+                        warning: type === "warning"
                     })}
                     {...getRootProps()}
                 >
@@ -52,14 +57,18 @@ type MessageType = "active" | "warning" | "idle";
 function getMessage(
     translations: TranslationsStore,
     isDragAccept: boolean,
-    isDragReject: boolean
+    isDragReject: boolean,
+    warningMessage?: string
 ): [MessageType, string] {
     if (isDragAccept) {
         return ["active", translations.get("dropzoneAcceptedMessage")];
     }
     if (isDragReject) {
         return ["warning", translations.get("dropzoneRejectedMessage")];
     }
+    if (warningMessage) {
+        return ["warning", warningMessage];
+    }
 
     return ["idle", translations.get("dropzoneIdleMessage")];
 }

packages/pluggableWidgets/file-uploader-web/src/components/FileUploaderRoot.tsx

@@ -28,6 +28,8 @@ export const FileUploaderRoot = observer((props: FileUploaderContainerProps): Re
         warningMessage = translations.get("uploadLimitReachedMessage", rootStore.maxTotalFiles.toString());
     } else if (rootStore.createActionFailed) {
         warningMessage = translations.get("unavailableCreateActionMessage");
+    } else if (rootStore.files.some(f => f.fileStatus === "validationError")) {
+        warningMessage = translations.get("dropzoneRejectedMessage");
     }
 
     return (

packages/pluggableWidgets/file-uploader-web/src/stores/FileUploaderStore.ts

@@ -190,8 +190,8 @@ export class FileUploaderStore {
 
     get sortedFiles(): FileStore[] {
         return [...this.files].sort((a, b) => {
-            const isErrorA = a.fileStatus === "validationError" ? 1 : 0;
-            const isErrorB = b.fileStatus === "validationError" ? 1 : 0;
+            const isErrorA = a.fileStatus === "validationError" || a.fileStatus === "rejected" ? 1 : 0;
+            const isErrorB = b.fileStatus === "validationError" || b.fileStatus === "rejected" ? 1 : 0;
             return isErrorA - isErrorB;
         });
     }

packages/pluggableWidgets/file-uploader-web/src/stores/__tests__/FileUploaderStore.spec.ts

@@ -344,7 +344,7 @@ describe("FileStore.canRetry — reacts to freed slots", () => {
 // ─── FileStore.retry ─────────────────────────────────────────────────────────
 
 describe("FileStore.retry", () => {
-    test("transitions rejected file to queued", () => {
+    test("transitions rejected file to uploading via queue reaction", () => {
         const store = buildStore({
             maxFilesPerUpload: dynamic(new Big(3)),
             maxFilesPerBatch: unavailableDynamic()
@@ -1018,3 +1018,33 @@ describe("upload queue — end-to-end", () => {
         expect(store.files.filter(f => f.fileStatus === "uploading")).toHaveLength(0);
     });
 });
+
+describe("FileUploaderStore validationError files tracking", () => {
+    test("has validationError files after rejected drop", () => {
+        const store = buildStore();
+        store.processDrop([], [{ file: makeFile("bad.exe"), errors: [{ code: "file-invalid-type", message: "bad" }] }]);
+        expect(store.files.some(f => f.fileStatus === "validationError")).toBe(true);
+    });
+
+    test("no validationError files after all are dismissed", () => {
+        const store = buildStore();
+        store.processDrop([], [{ file: makeFile("bad.exe"), errors: [{ code: "file-invalid-type", message: "bad" }] }]);
+        const errorFile = store.files.find(f => f.fileStatus === "validationError")!;
+        store.dismissFile(errorFile);
+        expect(store.files.some(f => f.fileStatus === "validationError")).toBe(false);
+    });
+
+    test("validationError files remain when one dismissed but others exist", () => {
+        const store = buildStore();
+        store.processDrop(
+            [],
+            [
+                { file: makeFile("a.exe"), errors: [{ code: "file-invalid-type", message: "bad" }] },
+                { file: makeFile("b.exe"), errors: [{ code: "file-invalid-type", message: "bad" }] }
+            ]
+        );
+        const firstError = store.files.find(f => f.fileStatus === "validationError")!;
+        store.dismissFile(firstError);
+        expect(store.files.some(f => f.fileStatus === "validationError")).toBe(true);
+    });
+});