[WC-3363] Fileuploader: dismiss action for validation errors

[yordan-st]

Pull request type

Bug fix (non-breaking change which fixes an issue)

---

Description

• Fixed an issue where the "Invalid file format" validation error had no way to be dismissed
• Each rejected file entry now has a dismiss (✕) button that removes the entry and clears the yellow dropzone warning
• Yellow warning persists as long as any rejected files remain in the list; clears when the last one is dismissed
• Dropping a new batch clears previous rejected entries and sets the warning only if the new batch also contains rejections

What should be covered while testing?

Single rejected file

• Configure File Uploader with restricted formats (e.g. PDF only)
• Drop one unsupported file — yellow warning appears, rejected entry visible
• Click dismiss (✕) on the entry — entry removed, yellow warning disappears

Mixed batch (valid + invalid)

• Drop a batch with one unsupported and one supported file
• Yellow warning appears; both entries visible (supported file uploading, rejected file showing error)
• Confirm yellow warning stays after the valid file finishes uploading
• Click dismiss on the rejected entry — entry removed, yellow warning disappears

Multiple rejected files

• Drop two unsupported files
• Both rejected entries visible, yellow warning present
• Dismiss one — yellow warning stays (one entry remains)
• Dismiss the second — yellow warning disappears

New drop clears old rejections

• Drop one unsupported file — rejected entry visible, yellow warning present
• Drop one supported file — rejected entry from the previous drop disappears immediately and yellow warning clears immediately on drop (before upload completes)

[github-actions]

AI Code Review

⚠️ Approved with suggestions — low-severity items only, safe to merge

---

What was reviewed

File	Change
packages/pluggableWidgets/file-uploader-web/CHANGELOG.md	Keep a Changelog entry added under Unreleased/Fixed
packages/pluggableWidgets/file-uploader-web/src/components/ActionsBar.tsx	New DismissActionsBar component; early-return for validationError status
packages/pluggableWidgets/file-uploader-web/src/components/Dropzone.tsx	Bug fix: gates drag-reject message on isDragActive to suppress ghost warning
packages/pluggableWidgets/file-uploader-web/src/stores/FileStore.ts	New dismiss() action registered in makeObservable
packages/pluggableWidgets/file-uploader-web/src/stores/FileUploaderStore.ts	New dismissFile() / dismissValidationErrors() actions; processDrop now clears prior rejections
packages/pluggableWidgets/file-uploader-web/src/components/__tests__/DismissActionsBar.spec.tsx	New unit tests for DismissActionsBar via ActionsBar
packages/pluggableWidgets/file-uploader-web/src/stores/__tests__/FileStore.spec.ts	New unit test for FileStore.dismiss()
packages/pluggableWidgets/file-uploader-web/src/stores/__tests__/FileUploaderStore.spec.ts	New unit tests for dismissFile() and processDrop() error message behaviour
packages/pluggableWidgets/file-uploader-web/src/ui/FileUploader.scss	&.invalid restyle: scoped opacity, removed display:none on actions

Skipped (out of scope): dist/, pnpm-lock.yaml

---

Findings

⚠️ Low — is a no-op when file is not in the list asserts stale errorMessage incorrectly

File: packages/pluggableWidgets/file-uploader-web/src/stores/__tests__/FileUploaderStore.spec.ts lines 65–77

Note: The test sets store.errorMessage = "Some files may not be uploadable." and then calls store.dismissFile(fileB) where fileB is not in the list. After the filter, fileA (a validationError file) still remains, so setMessage() is never called — the message is preserved only because the guard (!this.files.some(f => f.fileStatus === "validationError")) is false, not because the method is a no-op overall. The test accidentally passes for the right behaviour but the assertion comment is misleading. Consider renaming the test to "keeps errorMessage when dismissed file is not in the list and validationErrors remain" to accurately describe what is actually exercised.

---

⚠️ Low — makeStore() bypasses makeObservable; MobX reactivity not exercised in store tests

File: packages/pluggableWidgets/file-uploader-web/src/stores/__tests__/FileUploaderStore.spec.ts lines 14–29

Note: Object.create(FileUploaderStore.prototype) followed by Object.assign(store, {...}) skips the constructor, so makeObservable is never called. The tests therefore exercise plain JS object mutation rather than MobX actions/observables. This is fine for the current assertions, but if a future test relies on reaction, computed, or autorun, it will silently not work. A short comment explaining the intentional trade-off would prevent confusion for future contributors:

// Object.create bypasses the constructor intentionally — makeObservable not needed
// for these pure logic assertions.

---

⚠️ Low — Array index used as key for custom action buttons (pre-existing, now newly visible)

File: packages/pluggableWidgets/file-uploader-web/src/components/ActionsBar.tsx line 34

Note: key={i} uses the array index. This is pre-existing code not introduced by this PR, but since ActionsBar is being reviewed now it is worth noting. If custom buttons are reordered or conditionally included, React may reuse DOM nodes incorrectly. A stable key such as a.buttonCaption.value or a dedicated id from the XML property would be safer.

---

Positives

• dismissValidationErrors() is correctly kept private — the internal clean-up on new drop is an implementation detail not needed on the public API.
• dismiss: action is correctly registered in makeObservable in FileStore, ensuring MobX tracks the state mutation through dismissFile.
• The isDragActive && isDragReject guard in Dropzone.tsx is a precise, minimal fix for the ghost-warning bug — no over-engineering.
• All three new test files cover the main happy path, the edge cases (last-validation-error cleared, other files unaffected), and the UI interaction (click → dismiss() called) — good coverage breadth.
• CHANGELOG entry is present and correctly formatted under [Unreleased] / Fixed.