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

[yordan-st]

Pull request type

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

Description

Pre-release QA and decision review for file-uploader-web covering changes introduced by WC-3361 (upload queue, concurrent upload limit, total file limit feedback, retry for over-limit files, list ordering) and WC-3363 (dismiss for invalid-format rejections, yellow warning lifecycle).

Two bugs found and fixed:

• sortedFiles was only pushing validationError entries to the end of the list; rejected (over-limit) files were sorting alongside successful uploads. Fixed to push both validationError and rejected below all other entries.
• Invalid-format drops produced per-entry error messages but no yellow warning banner on the dropzone. Fixed by wiring the new hasValidationErrors computed into FileUploaderRoot warningMessage logic — banner appears when validationError files are present and clears when all are dismissed.

What should be covered while testing?

File limit feedback

• Set maxFilesPerUpload = 3. Drop 3 files → dropzone greys out + "Maximum file count of 3 reached." message appears
• While at limit, remove one uploaded file → dropzone re-enables, message disappears
• Set maxFilesPerUpload = 0 or leave empty → dropzone never disables, no message ever shown

Upload queue

• Set maxFilesPerBatch = 2. Drop 5 files → exactly 2 show "Uploading…", remaining 3 show "Waiting…" with no progress bar
• One upload completes → next queued file auto-starts (now 2 uploading again)
• Leave maxFilesPerBatch empty → all dropped files start uploading simultaneously
• Simulate upload error (network off) → that slot frees up, next queued file starts automatically

Retry for over-limit rejections

• Set maxFilesPerUpload = 2. Drop 4 files → 2 upload, 2 appear as rejected with retry button greyed out
• Remove one uploaded file → retry button on one rejected file becomes enabled
• Click retry → that file starts uploading; remaining rejected files still show greyed retry
• Upload failure does NOT auto-promote remaining queued or rejected files

Dismiss for invalid-format rejections

• Configure allowed formats (e.g. PDF only). Drop an unsupported file → yellow warning appears on dropzone + rejected entry with ✕ button
• Click ✕ on the entry → entry removed, yellow warning clears
• Drop 2 unsupported files → dismiss one → yellow warning still visible; dismiss the second → warning clears
• Drop an invalid file, then drop a valid file → previous invalid entry clears immediately, yellow warning clears on drop

List ordering

• Mixed session (some uploaded, some rejected/invalid) → successful files always render above rejected and invalid entries

Regression checks

• Set readOnlyMode = true → dropzone is not rendered, no errors
• Switch uploadMode to images → queue, limit, and dismiss behavior works identically to files mode
• Upload without any limits configured → no regressions in standard upload flow

[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/src/components/ActionsBar.tsx	Added RejectedActionsBar with dismiss button for over-limit rejections
packages/pluggableWidgets/file-uploader-web/src/components/Dropzone.tsx	Added statusMessage prop; gated drag-state flags behind isDragActive; moved messages inline; removed Fragment/.dropzone-message
packages/pluggableWidgets/file-uploader-web/src/components/FileUploaderRoot.tsx	Split warning vs status message; wired hasValidationErrors inline check
packages/pluggableWidgets/file-uploader-web/src/stores/FileStore.ts	remove() now calls dismissFile instead of setting removedFile status
packages/pluggableWidgets/file-uploader-web/src/stores/FileUploaderStore.ts	sortedFiles now pushes both validationError and rejected to end
packages/pluggableWidgets/file-uploader-web/src/stores/__tests__/FileUploaderStore.spec.ts	Added 3 new tests for validationError tracking; updated one test description
packages/pluggableWidgets/file-uploader-web/src/ui/FileUploader.scss	Replaced .dropzone-message block with .inline-icon inside .upload-text; added warning text color
packages/pluggableWidgets/file-uploader-web/openspec/	New openspec artifacts (design, proposal, tasks)
packages/pluggableWidgets/combobox-web/openspec/	File renames only (no content change)

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

CI note: Build checks still queued/in-progress at review time; Snyk license/security checks erroring (pre-existing, not introduced by this PR).

---

Findings

⚠️ Low — upload-text loses its default color in disabled state

File: packages/pluggableWidgets/file-uploader-web/src/ui/FileUploader.scss lines 98–117
Note: .upload-text has a default color of $file-gray-light. The new .warning .upload-text override correctly sets warning text to $file-dropzone-color. However, the .disabled state does not explicitly set a text color — it only dims .file-icon via opacity. This is almost certainly fine because the idle default grey applies, but it's worth confirming that disabled text should remain grey (not warning-amber) and that the cascade is intentional. If .warning and .disabled classes can coexist (they shouldn't currently, but defensive layering is cheap), the warning color would win.

---

⚠️ Low — RejectedActionsBar has no observer wrapper

File: packages/pluggableWidgets/file-uploader-web/src/components/ActionsBar.tsx line 83
Note: RejectedActionsBar is a plain function component that reads store.dismiss() but doesn't read observable state directly — so no observer is strictly required. However, its sibling DismissActionsBar (line 103) also lacks observer for the same reason. This is consistent and fine as-is, but worth a second look if store fields are later read inside either component.

---

⚠️ Low — Warning banner always shows the generic rejected message

File: packages/pluggableWidgets/file-uploader-web/src/components/FileUploaderRoot.tsx line 32–33
Note: When validationError files are present, the banner always shows translations.get("dropzoneRejectedMessage") — the generic "Some files may not be uploadable." string. Individual FileStore entries carry specific error descriptions (e.g. "File format is not supported…"). This is a design decision (generic banner, specific per-entry text) and is noted as intentional in the proposal. No code change needed — just confirming it's deliberate rather than an oversight.

---

Positives

• The isDragActive guard is the right fix for the react-dropzone v14 isDragReject persistence bug. Gating both isDragAccept and isDragReject behind isDragActive is clean and minimal — no custom state, no upstream workaround required.
• FileStore.remove() now delegates to dismissFile on the root store, making default-button and custom-button behavior consistent. The removedFile status correctly remains in the FileStatus union for the markMissing() path — that distinction is preserved cleanly.
• sortedFiles fix (pushing both validationError and rejected to end) is a two-line, low-risk change with immediate visual benefit and is covered by the existing sort tests.
• The statusMessage / warningMessage split is semantically clear. The getMessage() function's priority order (drag state → warningMessage → statusMessage → idle) is unambiguous and matches the intended UX.
• New tests in FileUploaderStore.spec.ts use buildStore() + processDrop() end-to-end rather than manual mock objects — the right pattern for this store.
• CHANGELOG entry is present and user-facing (describes observable behavior, not implementation details). ✅

[iobuhov]

LGTM