openstack-uicore-foundation 5.0.22 → 6.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/.claude/settings.local.json +13 -0
  2. package/lib/components/attendance-tracker.js.map +1 -1
  3. package/lib/components/clock.js.map +1 -1
  4. package/lib/components/extra-questions.js.map +1 -1
  5. package/lib/components/forms/simple-form.js.map +1 -1
  6. package/lib/components/free-text-search.js.map +1 -1
  7. package/lib/components/google-map.js.map +1 -1
  8. package/lib/components/index.js +1 -1
  9. package/lib/components/index.js.map +1 -1
  10. package/lib/components/inputs/access-levels-input.js.map +1 -1
  11. package/lib/components/inputs/attendee-input.js.map +1 -1
  12. package/lib/components/inputs/company-input-v2.js +1 -1
  13. package/lib/components/inputs/company-input-v2.js.map +1 -1
  14. package/lib/components/inputs/company-input.js.map +1 -1
  15. package/lib/components/inputs/country-dropdown.js.map +1 -1
  16. package/lib/components/inputs/country-input.js.map +1 -1
  17. package/lib/components/inputs/event-input.js.map +1 -1
  18. package/lib/components/inputs/group-input.js.map +1 -1
  19. package/lib/components/inputs/language-input.js.map +1 -1
  20. package/lib/components/inputs/member-input.js.map +1 -1
  21. package/lib/components/inputs/organization-input.js.map +1 -1
  22. package/lib/components/inputs/promocode-input.js.map +1 -1
  23. package/lib/components/inputs/registration-company-input.js.map +1 -1
  24. package/lib/components/inputs/speaker-input.js.map +1 -1
  25. package/lib/components/inputs/sponsor-input.js.map +1 -1
  26. package/lib/components/inputs/summit-input.js.map +1 -1
  27. package/lib/components/inputs/tag-input.js.map +1 -1
  28. package/lib/components/inputs/ticket-types-input.js.map +1 -1
  29. package/lib/components/inputs/upload-input-v2.js.map +1 -1
  30. package/lib/components/inputs/upload-input-v3.js +1 -1
  31. package/lib/components/inputs/upload-input-v3.js.map +1 -1
  32. package/lib/components/mui/cards/inline-card.js.map +1 -1
  33. package/lib/components/mui/cards/table-card.js.map +1 -1
  34. package/lib/components/mui/cards.js.map +1 -1
  35. package/lib/components/mui/form-item-table.js +1 -1
  36. package/lib/components/mui/form-item-table.js.map +1 -1
  37. package/lib/components/mui/formik-inputs/additional-input-list.js +1 -1
  38. package/lib/components/mui/formik-inputs/additional-input-list.js.map +1 -1
  39. package/lib/components/mui/formik-inputs/additional-input.js +1 -1
  40. package/lib/components/mui/formik-inputs/additional-input.js.map +1 -1
  41. package/lib/components/mui/formik-inputs/async-select.js +1 -1
  42. package/lib/components/mui/formik-inputs/async-select.js.map +1 -1
  43. package/lib/components/mui/formik-inputs/company-input.js +1 -1
  44. package/lib/components/mui/formik-inputs/company-input.js.map +1 -1
  45. package/lib/components/mui/formik-inputs/discount-field.js +1 -1
  46. package/lib/components/mui/formik-inputs/discount-field.js.map +1 -1
  47. package/lib/components/mui/formik-inputs/file-size-field.js +1 -1
  48. package/lib/components/mui/formik-inputs/file-size-field.js.map +1 -1
  49. package/lib/components/mui/formik-inputs/item-price-tiers.js +1 -1
  50. package/lib/components/mui/formik-inputs/item-price-tiers.js.map +1 -1
  51. package/lib/components/mui/formik-inputs/price-field.js +1 -1
  52. package/lib/components/mui/formik-inputs/price-field.js.map +1 -1
  53. package/lib/components/mui/formik-inputs/quantity-field.js +1 -1
  54. package/lib/components/mui/formik-inputs/quantity-field.js.map +1 -1
  55. package/lib/components/mui/formik-inputs/sponsor-input.js +1 -1
  56. package/lib/components/mui/formik-inputs/sponsor-input.js.map +1 -1
  57. package/lib/components/mui/formik-inputs/sponsorship-input.js +1 -1
  58. package/lib/components/mui/formik-inputs/sponsorship-input.js.map +1 -1
  59. package/lib/components/mui/formik-inputs/sponsorship-summit-select.js.map +1 -1
  60. package/lib/components/mui/formik-inputs/summit-addon-select.js.map +1 -1
  61. package/lib/components/mui/formik-inputs/textfield.js +1 -1
  62. package/lib/components/mui/formik-inputs/textfield.js.map +1 -1
  63. package/lib/components/mui/formik-inputs/upload.js +1 -1
  64. package/lib/components/mui/formik-inputs/upload.js.map +1 -1
  65. package/lib/components/mui/item-settings-modal.js +1 -1
  66. package/lib/components/mui/item-settings-modal.js.map +1 -1
  67. package/lib/components/mui/menu-button.js +1 -1
  68. package/lib/components/mui/menu-button.js.map +1 -1
  69. package/lib/components/mui/snackbar-notification.js.map +1 -1
  70. package/lib/components/mui/sponsor-addon-select.js.map +1 -1
  71. package/lib/components/mui/sponsor-order-grid.js.map +1 -1
  72. package/lib/components/mui/stripe-payment.js.map +1 -1
  73. package/lib/components/mui/summit-addon-select.js.map +1 -1
  74. package/lib/components/mui/summits-dropdown.js.map +1 -1
  75. package/lib/components/mui/table/extra-rows.js.map +1 -1
  76. package/lib/components/mui/upload-dialog.js +1 -1
  77. package/lib/components/mui/upload-dialog.js.map +1 -1
  78. package/lib/components/schedule-builder-view.js.map +1 -1
  79. package/lib/components/sponsored-project-input.js.map +1 -1
  80. package/lib/components/table-editable.js.map +1 -1
  81. package/lib/i18n.js.map +1 -1
  82. package/lib/security/abstract-auth-callback-route-v2.js.map +1 -1
  83. package/lib/security/abstract-auth-callback-route.js.map +1 -1
  84. package/lib/security/actions.js.map +1 -1
  85. package/lib/security/methods.js.map +1 -1
  86. package/lib/security/reducers.js.map +1 -1
  87. package/lib/security/session-checker.js.map +1 -1
  88. package/lib/utils/actions.js.map +1 -1
  89. package/lib/utils/methods.js.map +1 -1
  90. package/lib/utils/query-actions.js.map +1 -1
  91. package/lib/utils/questions-set.js.map +1 -1
  92. package/package.json +16 -16
  93. package/.claude/rules/openstack-uicore-foundation-components.md +0 -62
  94. package/.claude/rules/openstack-uicore-foundation-project.md +0 -64
  95. package/.claude/rules/openstack-uicore-foundation-security.md +0 -39
  96. package/.codegraph/config.json +0 -140
  97. package/docs/plans/2026-04-09-showconfirmdialog-react16-compat.md +0 -83
  98. package/docs/plans/2026-04-22-dropzone-pooling-ux.md +0 -129
  99. package/docs/plans/2026-04-23-uploadv3-duplicate-file-max-reached.md +0 -109
  100. package/docs/plans/2026-04-23-uploadv3-premature-complete-on-202.md +0 -99
@@ -1,129 +0,0 @@
1
- # Dropzone Polling UX Fix Plan
2
-
3
- Created: 2026-04-22
4
- Author: smarcet@gmail.com
5
- Status: VERIFIED
6
- Approved: Yes
7
- Iterations: 2
8
- Worktree: No
9
- Type: Bugfix
10
-
11
- ## Summary
12
-
13
- **Symptom:** After the last chunk is uploaded and the server returns HTTP 202 (async processing), both UploadInputV2 and UploadInputV3 immediately show the file as "Complete" / "success" — even though server-side processing hasn't finished and polling has just started.
14
- **Trigger:** Upload a file where the server returns HTTP 202 on the last chunk (async processing path). The file appears fully uploaded while `pollUploadStatus` is still polling in the background.
15
- **Root Cause:** `src/components/inputs/dropzone/index.js:313` — In the `sending` handler's custom `xhr.onload`, `dropzoneOnLoad(e)` is called unconditionally before checking the HTTP status code. For the 202 path, Dropzone.js processes the response through `_finishedUploading` → `finishedChunkUpload` → `chunksUploaded(file, done)` → `done()` → `_finished` → emits `success` event. This makes both V2 (Dropzone's default UI) and V3 (DropzoneV3 → UploadInputV3) mark the file as complete prematurely.
16
-
17
- ## Investigation
18
-
19
- - Dropzone.js v5.7.2 has a `chunksUploaded(file, done)` option (line 563 in dist/dropzone.js). It's called when all chunks have been uploaded successfully. The default implementation calls `done()` immediately, which triggers `_finished` → `success` event.
20
- - The `success` event sets `file.status = Dropzone.SUCCESS` and updates the file preview in V2's default template. In V3, DropzoneV3 maps `success` → `onFileCompleted` → UploadInputV3 sets `{complete: true}` → shows "Complete" with green check.
21
- - The polling code (`pollUploadStatus`) was added in commit `6bad1f7` but didn't account for the fact that Dropzone.js fires `success` on any 2xx response for the final chunk.
22
- - The `sending` event fires for EVERY chunk. The `xhr.onload` override is per-chunk. For intermediate chunks (200 without `name` field), Dropzone tracks chunk completion. Only when the last chunk response arrives does `finishedChunkUpload` trigger `chunksUploaded`.
23
-
24
- ## Behavior Contract
25
-
26
- **Given:** A file is being uploaded in chunks and the server returns HTTP 202 on the last chunk (indicating async server-side processing is needed)
27
- **When:** The last chunk's XHR response is received and processed
28
- **Currently (bug):** Dropzone.js immediately fires the `success` event, causing both V2 and V3 UIs to show the file as "Complete" / "success" while polling is still running
29
- **Expected (fix):** The `success` event should NOT fire until polling confirms server-side processing is complete (`data.status === 'complete'`). During the polling phase, the file should remain in its uploading/in-progress visual state.
30
- **Anti-regression:** HTTP 200 uploads (synchronous path where the response contains `name` field) must continue to fire `success` immediately as before. Component unmount cleanup must still clear polling intervals. Error handling during polling must still work.
31
-
32
- ## Fix Approach
33
-
34
- **Chosen:** Defer `chunksUploaded` done callback for 202 responses
35
- **Why:** Uses Dropzone.js's public `chunksUploaded` option to control when `_finished` (and thus `success`) fires. Single-file change in `dropzone/index.js` that fixes the UX for both V2 and V3 consumers. No internal API hacking.
36
-
37
- **Alternatives considered:**
38
- - *Suppress success via internal `_callbacks` manipulation:* Would require accessing Dropzone's private `_callbacks` object — fragile and version-dependent. Rejected.
39
- - *Add "Processing" state to V3 with new callback:* Better UX (shows "Processing..." text with indeterminate progress) but requires changes across 3 files. Can be done as a follow-up enhancement.
40
- - *Skip `dropzoneOnLoad` for 202:* Would break Dropzone's internal state (chunk tracking, file counters, queue advancement). Rejected.
41
-
42
- **Files:** `src/components/inputs/dropzone/index.js`
43
- **Strategy:**
44
- 1. In `getDjsConfig()`: Override `chunksUploaded` option with a conditional callback that checks `file._asyncProcessing`. If the flag is set, store the `done` callback on the file object instead of calling it — this prevents `_finished` and the `success` event.
45
- 2. In `sending` handler's `xhr.onload`: Set `file._asyncProcessing = true` BEFORE calling `dropzoneOnLoad(e)` when `xhr.status == 202`. This ensures the `chunksUploaded` callback sees the flag.
46
- 3. In `pollUploadStatus`: Accept the `file` parameter. When polling returns `status: 'complete'`, call the stored `done` callback (`file._chunksUploadedDone()`) to complete the Dropzone lifecycle — this fires `success`, updating both V2 and V3 UIs.
47
-
48
- **Tests:** `src/components/inputs/dropzone/__tests__/dropzone.test.js` (new file)
49
-
50
- ## Verification Scenario
51
-
52
- ### TS-001: File Upload with 202 Async Processing
53
- **Preconditions:** App is running, upload endpoint configured to return 202 for async processing
54
-
55
- | Step | Action | Expected Result (after fix) |
56
- |------|--------|-----------------------------|
57
- | 1 | Upload a file that triggers 202 response | File stays in uploading/progress state — NOT shown as "Complete" — while server processes |
58
- | 2 | Wait for polling to complete (server returns `status: 'complete'`) | File transitions to "Complete" / success state only now |
59
- | 3 | Upload a file that triggers 200 response (sync) | File immediately shows "Complete" / success (no regression) |
60
-
61
- ## Progress
62
-
63
- - [x] Task 1: Write Reproducing Test (RED)
64
- - [x] Task 2: Implement Fix at Root Cause
65
- - [x] Task 3: Quality Gate
66
- **Tasks:** 3 | **Done:** 3
67
-
68
- **Note:** Build fails with pre-existing PostCSS/SCSS error in schedule-print/styles.module.scss (unrelated to dropzone fix). All 97 tests pass.
69
-
70
- **Iteration 1 Fix:** Added polling guard (`file._pollingActive`) to prevent multiple intervals when server returns 202 for every chunk (not just the final one). Without this, each 202 chunk spawned a separate polling loop, causing request flood.
71
-
72
- **Iteration 2 Fix:** Fixed request flood (216 HTTP 200 requests for single file) and resource leak on upload cancellation:
73
- 1. **Root cause**: `file._asyncProcessing = true` was being set for EVERY 202 response. Server behavior: intermediate chunks return HTTP 200, final chunk returns HTTP 202 with `file_id`. The original Iteration 1 code set the flag at line 340 (before the `else if(xhr?.status == 202)` check), causing the flag to be set even for 200 responses, which deferred `chunksUploaded` for all uploads.
74
- 2. **Fix**: Move `file._asyncProcessing = true` inside the `else if(xhr?.status == 202)` branch AND guard it with `if (fileId)` check. Now the flag is only set when we receive the final 202 chunk with `file_id`.
75
- 3. **XHR tracking**: Added `this.activeXHRs` Map to track all active XHR requests per file.
76
- 4. **Cancellation support**: Cancel pending XHRs when file is removed or component unmounts, preventing resource waste.
77
- 5. **Chunk throttling**: Added `maxConcurrentChunks` prop (default: 3) to DropzoneJS, V2, and V3. Wraps Dropzone's `_uploadData` with a concurrency-limited queue. When `parallelChunkUploads: true`, only N chunks upload concurrently instead of all at once. Queue drains as chunks complete via `onChunkComplete()` callback in xhr.onload/onerror.
78
-
79
- ## Tasks
80
-
81
- ### Task 1: Write Reproducing Test (RED)
82
-
83
- **Objective:** Encode the Behavior Contract as a failing test BEFORE writing any fix code. Create test file for DropzoneJS component.
84
- **Files:** `src/components/inputs/dropzone/__tests__/dropzone.test.js` (new)
85
- **Entry point:** `DropzoneJS` component — specifically the `chunksUploaded` behavior when HTTP 202 is returned on the last chunk.
86
- **Test cases:**
87
- 1. `test_dropzone_202_response_should_not_fire_success_immediately` — Simulate a chunked upload where the last chunk returns 202. Verify that the Dropzone `success` event does NOT fire immediately (the `onFileCompleted` callback in the consumer should not be triggered).
88
- 2. `test_dropzone_202_polling_complete_fires_success` — After 202 triggers polling and polling returns `status: 'complete'`, verify that the `success` event fires and `onUploadComplete` is called.
89
- 3. `test_dropzone_200_response_fires_success_immediately` — (Anti-regression) Simulate a synchronous upload where the last chunk returns 200 with `name` field. Verify `success` fires immediately as before.
90
- **DoD:** Tests exist, run, and FAIL because the current code fires `success` immediately for 202.
91
- **Verify:** `npx jest src/components/inputs/dropzone/__tests__/dropzone.test.js`
92
-
93
- ### Task 2: Implement Fix at Root Cause
94
-
95
- **Objective:** Minimal change in `dropzone/index.js` that defers the `success` event for 202 responses until polling confirms completion.
96
- **Files:** `src/components/inputs/dropzone/index.js`
97
- **Strategy:**
98
- 1. In `getDjsConfig()`, after the `options.accept` assignment, add:
99
- ```javascript
100
- options.chunksUploaded = (file, done) => {
101
- if (file._asyncProcessing) {
102
- file._chunksUploadedDone = done;
103
- return;
104
- }
105
- done();
106
- };
107
- ```
108
- 2. In `setupEvents()` → `sending` handler → `xhr.onload`, add before `dropzoneOnLoad(e)`:
109
- ```javascript
110
- if (xhr?.status == 202) {
111
- file._asyncProcessing = true;
112
- }
113
- ```
114
- 3. In `pollUploadStatus`, add `file` parameter. When `data.status === 'complete'`:
115
- ```javascript
116
- if (file?._chunksUploadedDone) {
117
- file._chunksUploadedDone();
118
- }
119
- this.onUploadComplete(data);
120
- ```
121
- 4. Update the 202 branch in `xhr.onload` to pass `file` to `pollUploadStatus`.
122
- **DoD:** Reproducing test PASSES. Full test suite PASSES. Diff touches only `src/components/inputs/dropzone/index.js`.
123
- **Verify:** `npx jest src/components/inputs/dropzone/__tests__/dropzone.test.js && npx jest`
124
-
125
- ### Task 3: Quality Gate
126
-
127
- **Objective:** Lint + build clean, full suite re-run.
128
- **DoD:** Lint clean, build green, full suite green. No performance regressions (polling interval unchanged, no new allocations on hot paths).
129
- **Verify:** `npx jest && npm run build`
@@ -1,109 +0,0 @@
1
- # UploadInputV3 Duplicate File / Max Files Reached After Upload Fix Plan
2
-
3
- Created: 2026-04-23
4
- Author: smarcet@gmail.com
5
- Status: VERIFIED
6
- Approved: Yes
7
- Iterations: 0
8
- Worktree: No
9
- Type: Bugfix
10
-
11
- ## Summary
12
-
13
- **Symptom:** After uploading a file via UploadInputV3, the component shows "Maximum number of files has been reached" error and displays the file twice — once with the original filename (`image.png`) and once with the server-renamed/hashed filename (`image_e2eed7fb3bc6bd1b16f77beb0f375b82.png`).
14
- **Trigger:** Upload a single file when `maxFiles=1`. The server renames the file (adds hash). The component fails to clean up the transitional `uploadingFiles` entry because the renamed filename doesn't match.
15
- **Root Cause:** `src/components/inputs/upload-input-v3/index.js:164` — The `useEffect` cleanup compares `v.filename === f.name` to match completed `uploadingFiles` entries against `value` entries. When the server renames the file, this comparison fails, the stale completed entry persists, and the file appears twice.
16
-
17
- **Secondary issue:** `src/components/inputs/dropzone/index.js:156` — Missing `return` after `done('Max files reached.')` causes `done()` to be called a second time (without error), potentially accepting files that should be rejected.
18
-
19
- ## Investigation
20
-
21
- - **V3-specific bug.** V2 does not maintain `uploadingFiles` state — it relies on Dropzone's built-in preview and only renders from the `value` prop. V3 introduced `uploadingFiles` state for custom progress UI, with a `useEffect` that cleans up completed entries when `value` updates. This cleanup fails on server-renamed files.
22
- - **Flow:** `handleAddedFile` → `handleFileCompleted` (marks `complete:true` with original name) → parent updates `value` (with server-renamed filename) → `useEffect` compares `v.filename === f.name` → mismatch → stale entry persists.
23
- - **The `accept` callback** at `dropzone/index.js:155-159` has a missing `return` after rejecting with `done('Max files reached.')`, causing a fallthrough to `done()`.
24
-
25
- ## Behavior Contract
26
-
27
- **Given:** UploadInputV3 with `maxFiles=1`, a file is uploaded and the server renames it (response contains a different filename than the original)
28
- **When:** The parent updates the `value` prop with the server-returned file entry (containing the renamed filename)
29
- **Currently (bug):** The completed `uploadingFiles` entry (with original name) persists because `v.filename !== f.name`, causing the file to appear twice — once from `uploadingFiles` and once from `value`
30
- **Expected (fix):** When `value` updates with new entries, all completed `uploadingFiles` entries are removed regardless of filename, since `value` is the source of truth for uploaded files. The file appears exactly once (from `value`).
31
- **Anti-regression:** Files still uploading (not yet complete) must NOT be removed from `uploadingFiles` when `value` changes. Error file display, progress tracking, and file deletion functionality must remain intact.
32
-
33
- ## Fix Approach
34
-
35
- **Chosen:** Remove all completed entries on value change
36
- **Why:** The `value` prop is the authoritative source of truth for uploaded files. Once it changes to include new entries, any completed `uploadingFiles` entries are transitional and redundant — they exist only to bridge the visual gap between upload completion and parent state update. Removing all completed entries when `value` has entries is simple, handles server renames, and is semantically correct.
37
- **Alternatives considered:**
38
- - *Track server name through upload flow* — precise but complex; requires heuristic matching in `wrappedOnUploadComplete` to find which `uploadingFiles` entry corresponds to the response. Fragile for concurrent uploads.
39
- - *Fuzzy filename matching* — check if value entry's filename contains the base name; fragile, depends on server naming convention.
40
-
41
- **Files:**
42
- - `src/components/inputs/upload-input-v3/index.js` (primary fix — useEffect cleanup)
43
- - `src/components/inputs/dropzone/index.js` (secondary fix — missing return)
44
- - `src/components/inputs/upload-input-v3/__tests__/upload-input-v3.test.js` (reproducing test)
45
-
46
- **Strategy:** Change the `useEffect` at line 160-166 to remove all completed entries from `uploadingFiles` when `value` has entries, instead of matching by exact filename. Add missing `return` after `done('Max files reached.')` in the `accept` callback.
47
-
48
- **Tests:** Add test to `upload-input-v3.test.js` that simulates: file added → file completed → value updated with different filename → verify only one file entry visible (from value, not from uploadingFiles).
49
-
50
- ## Verification Scenario
51
-
52
- ### TS-001: Server-Renamed File Upload
53
- **Preconditions:** UploadInputV3 with maxFiles=1, server configured to rename uploaded files
54
-
55
- | Step | Action | Expected Result (after fix) |
56
- |------|--------|-----------------------------|
57
- | 1 | Upload a single file via UploadInputV3 | File appears as "Loading" then "Complete" |
58
- | 2 | Parent updates value with server-renamed file | File appears exactly once (from value), no duplicate entry, no "max files" error |
59
-
60
- ## Progress
61
-
62
- - [x] Task 1: Write Reproducing Test (RED)
63
- - [x] Task 2: Implement Fix at Root Cause
64
- - [x] Task 3: Quality Gate
65
- **Tasks:** 3 | **Done:** 3
66
-
67
- ## Tasks
68
-
69
- ### Task 1: Write Reproducing Test (RED)
70
-
71
- **Objective:** Encode the Behavior Contract as a failing test BEFORE writing any fix code.
72
- **Files:** `src/components/inputs/upload-input-v3/__tests__/upload-input-v3.test.js`
73
- **Entry point:** `UploadInputV3` component (rendered with mock DropzoneV3)
74
- **Test scenario:**
75
- 1. Render UploadInputV3 with `maxFiles=1` and `value=[]`
76
- 2. Simulate `onAddedFile({ name: 'image.png', size: 75000 })`
77
- 3. Simulate `onFileCompleted({ name: 'image.png', size: 75000 })`
78
- 4. Re-render with `value=[{ filename: 'image_abc123.png', size: 75000 }]` (server-renamed)
79
- 5. Assert: only ONE file entry with text `image_abc123.png` is visible; original `image.png` is NOT visible
80
- **DoD:** Test exists, named `test('cleans up completed uploading file when value updates with server-renamed filename')`, runs, fails because the stale `image.png` entry persists alongside `image_abc123.png`.
81
- **Verify:** `npx jest src/components/inputs/upload-input-v3/__tests__/upload-input-v3.test.js --verbose`
82
-
83
- ### Task 2: Implement Fix at Root Cause
84
-
85
- **Objective:** Minimal change to fix the useEffect cleanup and the missing return.
86
- **Files:**
87
- - `src/components/inputs/upload-input-v3/index.js` — change useEffect at line 160-166 to remove all completed entries when value has entries
88
- - `src/components/inputs/dropzone/index.js` — add `return` after `done('Max files reached.')` at line 156
89
- **Strategy:**
90
- 1. In `upload-input-v3/index.js`, change the useEffect cleanup from:
91
- ```javascript
92
- setUploadingFiles(prev => prev.filter(f => {
93
- if (!f.complete) return true;
94
- return !value.some(v => v.filename === f.name);
95
- }));
96
- ```
97
- To:
98
- ```javascript
99
- setUploadingFiles(prev => prev.filter(f => !f.complete));
100
- ```
101
- 2. In `dropzone/index.js`, add `return;` after `done('Max files reached.');` at line 156.
102
- **DoD:** Reproducing test PASSES. Full test suite PASSES. Diff touches root-cause files.
103
- **Verify:** `npx jest --verbose`
104
-
105
- ### Task 3: Quality Gate
106
-
107
- **Objective:** Lint + build clean, full suite re-run.
108
- **DoD:** Full suite green, no lint errors, build succeeds.
109
- **Verify:** `npx jest --verbose && npm run build-dev`
@@ -1,99 +0,0 @@
1
- # UploadInputV3 Premature Completion on HTTP 202 Fix Plan
2
-
3
- Created: 2026-04-23
4
- Author: smarcet@gmail.com
5
- Status: VERIFIED
6
- Approved: Yes
7
- Iterations: 0
8
- Worktree: No
9
- Type: Bugfix
10
-
11
- ## Summary
12
-
13
- **Symptom:** After uploading a file via UploadInputV3 that triggers HTTP 202 (async server processing), the file immediately shows as "Complete" instead of waiting for polling to confirm the server has finished processing.
14
- **Trigger:** Upload a file via UploadInputV3. Server returns HTTP 202 with `file_id`. Dropzone's `success` event fires immediately (before polling starts or completes), and V3's `handleFileCompleted` marks the file as `complete: true`.
15
- **Root Cause:** `src/components/inputs/upload-input-v3/index.js:153` — `handleFileCompleted()` unconditionally marks the file as `complete: true` when Dropzone's `success` event fires, without checking `file._asyncProcessing`. For non-chunked 202 uploads, `_finished()` is called directly by Dropzone (`dropzone.js:2707`), bypassing the `chunksUploaded` override that defers completion for chunked uploads.
16
-
17
- **Secondary issue:** `wrappedOnUploadComplete` at line 190 is a passthrough — it doesn't mark uploading files as complete. When polling finishes, `onUploadComplete` fires but the `uploadingFiles` entry isn't cleaned up because `complete` was never set (if the guard blocks `handleFileCompleted`).
18
-
19
- ## Investigation
20
-
21
- - **V3-specific bug.** V2 has zero handling for `success`/`onFileCompleted`/`complete` — it renders only from the `value` prop, which is updated after `onUploadComplete` (correctly waits for polling in the 202 case).
22
- - **Flow for non-chunked 202:** `xhr.onload` → `file._asyncProcessing = true` → `dropzoneOnLoad(e)` → `_finishedUploading` → `!chunked` → `_finished(files, response, e)` → emits `success` → DropzoneV3 `success` handler → `onFileCompleted` → `handleFileCompleted` marks `complete: true` → file shows "Complete" immediately. Polling starts AFTER `dropzoneOnLoad` returns, but the file already appears done.
23
- - **Chunking decision:** `file.upload.chunked = options.chunking && (options.forceChunking || file.size > options.chunkSize)`. Config sets `chunking: true` but not `forceChunking` (default `false`), and `chunkSize` defaults to 2MB. Files ≤ 2MB are uploaded as non-chunked, bypassing the `chunksUploaded` override entirely.
24
- - **`chunksUploaded` override** at `dropzone/index.js:164` correctly defers `done()` for chunked 202 uploads, but is never called for non-chunked uploads.
25
- - **`wrappedOnUploadComplete`** at `upload-input-v3/index.js:190` just passes through to the parent — it doesn't update `uploadingFiles` state at all.
26
-
27
- ## Behavior Contract
28
-
29
- **Given:** UploadInputV3 with a file upload that returns HTTP 202 (async processing), where `file._asyncProcessing` is set to `true` on the Dropzone file object
30
- **When:** Dropzone's `success` event fires (immediately after `_finishedUploading` calls `_finished` for non-chunked uploads, or via `chunksUploaded` for chunked uploads)
31
- **Currently (bug):** `handleFileCompleted` marks the file as `complete: true` immediately, showing "Complete" in the UI before polling confirms server processing is done
32
- **Expected (fix):** When `file._asyncProcessing` is true, `handleFileCompleted` does NOT mark the file as complete. The file stays in "Loading" state. When polling finishes and `onUploadComplete` fires (via `wrappedOnUploadComplete`), uploading files are marked complete, enabling the existing useEffect cleanup to remove them when `value` updates.
33
- **Anti-regression:** Synchronous uploads (HTTP 200) must still mark files as "Complete" immediately via `handleFileCompleted`. File deletion, error display, progress tracking, and the existing server-renamed-filename cleanup must remain intact.
34
-
35
- ## Fix Approach
36
-
37
- **Chosen:** Guard in V3 handlers
38
- **Why:** The `_asyncProcessing` flag is already set on the Dropzone file object before `success` fires. V3 just needs to check it in `handleFileCompleted` and mark files complete in `wrappedOnUploadComplete`. No changes to DropzoneJS or DropzoneV3 — purely V3 state management.
39
- **Alternatives considered:**
40
- - *Guard in DropzoneV3 success handler* — would work but touches the shared wrapper file used by all upload versions, increasing regression surface.
41
- - *Override _finishedUploading in DropzoneJS* — fixes at the Dropzone level but patches library internals, fragile across Dropzone upgrades.
42
-
43
- **Files:**
44
- - `src/components/inputs/upload-input-v3/index.js` (primary fix — handleFileCompleted guard + wrappedOnUploadComplete)
45
- - `src/components/inputs/upload-input-v3/__tests__/upload-input-v3.test.js` (reproducing test)
46
-
47
- **Strategy:**
48
- 1. In `handleFileCompleted`: check `file._asyncProcessing` — if true, return early (don't mark complete)
49
- 2. In `wrappedOnUploadComplete`: before calling the parent callback, mark all uploading files as `complete: true` via `setUploadingFiles`. This ensures cleanup works for both sync (where `handleFileCompleted` already set it) and async (where it was skipped).
50
-
51
- **Tests:** Add test to `upload-input-v3.test.js` that simulates: file added → file completed with `_asyncProcessing: true` → verify file still shows "Loading" (not "Complete").
52
-
53
- ## Verification Scenario
54
-
55
- ### TS-001: Async Upload Processing State
56
- **Preconditions:** UploadInputV3 with `maxFiles=1`, server configured to return HTTP 202 for uploads
57
-
58
- | Step | Action | Expected Result (after fix) |
59
- |------|--------|-----------------------------|
60
- | 1 | Upload a file that triggers HTTP 202 async processing | File shows "Loading" with progress bar, NOT "Complete" |
61
- | 2 | Wait for polling to return `status: 'complete'` and parent to update value | File transitions to "Complete" (from value section), no duplicate entries |
62
-
63
- ## Progress
64
-
65
- - [x] Task 1: Write Reproducing Test (RED)
66
- - [x] Task 2: Implement Fix at Root Cause
67
- - [x] Task 3: Quality Gate
68
- **Tasks:** 3 | **Done:** 3
69
-
70
- ## Tasks
71
-
72
- ### Task 1: Write Reproducing Test (RED)
73
-
74
- **Objective:** Encode the Behavior Contract as a failing test BEFORE writing any fix code.
75
- **Files:** `src/components/inputs/upload-input-v3/__tests__/upload-input-v3.test.js`
76
- **Entry point:** `UploadInputV3` component (rendered with mock DropzoneV3)
77
- **Test scenario:**
78
- 1. Render UploadInputV3 with `maxFiles=1` and `value=[]`
79
- 2. Simulate `onAddedFile({ name: 'video.mp4', size: 5000000 })`
80
- 3. Simulate `onFileCompleted({ name: 'video.mp4', size: 5000000, _asyncProcessing: true })`
81
- 4. Assert: file still shows "Loading" (not "Complete") — the `_asyncProcessing` flag should prevent marking as complete
82
- **DoD:** Test exists, named `test('does not mark file as complete when _asyncProcessing is true')`, runs, fails because `handleFileCompleted` currently ignores `_asyncProcessing` and marks complete unconditionally.
83
- **Verify:** `npx jest src/components/inputs/upload-input-v3/__tests__/upload-input-v3.test.js --verbose`
84
-
85
- ### Task 2: Implement Fix at Root Cause
86
-
87
- **Objective:** Minimal change to `handleFileCompleted` and `wrappedOnUploadComplete` to prevent premature completion on HTTP 202.
88
- **Files:** `src/components/inputs/upload-input-v3/index.js`
89
- **Strategy:**
90
- 1. In `handleFileCompleted` (line 153): add early return when `file._asyncProcessing` is true
91
- 2. In `wrappedOnUploadComplete` (line 190): add `setUploadingFiles(prev => prev.map(f => ({ ...f, complete: true })))` before calling the parent callback, so all uploading files are marked complete when the server confirms processing is done
92
- **DoD:** Reproducing test PASSES. Full test suite PASSES. Diff touches root-cause file only.
93
- **Verify:** `npx jest --verbose`
94
-
95
- ### Task 3: Quality Gate
96
-
97
- **Objective:** Full suite re-run, build clean.
98
- **DoD:** Full suite green, build succeeds, no performance regressions.
99
- **Verify:** `npx jest --verbose && npm run build-dev`