From 999caa9a970de390f606828942d2dc8c71b09520 Mon Sep 17 00:00:00 2001 From: Hleb Kryshyn Date: Mon, 22 Jun 2026 13:53:43 +0200 Subject: [PATCH 1/2] feat(content-uploader): uploads items order change --- .../content-uploader/ContentUploader.tsx | 9 +++- .../__tests__/ContentUploader.test.js | 41 +++++++++++++++++++ 2 files changed, 48 insertions(+), 2 deletions(-) diff --git a/src/elements/content-uploader/ContentUploader.tsx b/src/elements/content-uploader/ContentUploader.tsx index 04af3e3720..afbc395446 100644 --- a/src/elements/content-uploader/ContentUploader.tsx +++ b/src/elements/content-uploader/ContentUploader.tsx @@ -1639,6 +1639,11 @@ class ContentUploader extends Component { const isLoading = items.some(item => item.status === STATUS_IN_PROGRESS); const isDone = items.every(item => item.status === STATUS_COMPLETE || item.status === STATUS_STAGED); + // The modernized uploads manager surfaces the most recently added item on top, while the + // internal queue stays in FIFO order so upload sequencing, fileLimit, and dedupe are + // unaffected. slice() avoids mutating state.items. The legacy UI keeps the original order. + const managerItems = enableModernizedUploads ? items.slice().reverse() : items; + const styleClassName = classNames('bcu', className, { 'be-app-element': !useUploadsManager, be: !useUploadsManager, @@ -1663,7 +1668,7 @@ class ContentUploader extends Component { onMouseLeave={this.handleModernizedMouseLeave} > { isExpanded={isUploadsManagerExpanded} isResumableUploadsEnabled={isResumableUploadsEnabled} isVisible={isVisible} - items={items} + items={managerItems} onItemActionClick={this.onClick} onRemoveActionClick={this.removeFileFromUploadQueue} onUpgradeCTAClick={onUpgradeCTAClick} diff --git a/src/elements/content-uploader/__tests__/ContentUploader.test.js b/src/elements/content-uploader/__tests__/ContentUploader.test.js index 18277aab46..34f6b5a600 100644 --- a/src/elements/content-uploader/__tests__/ContentUploader.test.js +++ b/src/elements/content-uploader/__tests__/ContentUploader.test.js @@ -680,6 +680,47 @@ describe('elements/content-uploader/ContentUploader', () => { }); }); + describe('uploads manager display order (newest on top)', () => { + const orderedItems = [ + { name: 'first.txt', status: STATUS_COMPLETE }, + { name: 'second.txt', status: STATUS_IN_PROGRESS }, + { name: 'third.txt', status: STATUS_PENDING }, + ]; + + test('modernized manager renders the most recently added item on top', () => { + const wrapper = getWrapper({ enableModernizedUploads: true, useUploadsManager: true }); + wrapper.setState({ items: orderedItems }); + + const renderedNames = wrapper + .find(UploadsManagerBP) + .prop('items') + .map(item => item.name); + + expect(renderedNames).toEqual(['third.txt', 'second.txt', 'first.txt']); + }); + + test('legacy manager preserves the original upload order', () => { + const wrapper = getWrapper({ useUploadsManager: true }); + wrapper.setState({ items: orderedItems }); + + const renderedNames = wrapper + .find(UploadsManager) + .prop('items') + .map(item => item.name); + + expect(renderedNames).toEqual(['first.txt', 'second.txt', 'third.txt']); + }); + + test('display reversal does not mutate the internal items collection (upload order preserved)', () => { + const wrapper = getWrapper({ enableModernizedUploads: true, useUploadsManager: true }); + wrapper.setState({ items: orderedItems }); + + wrapper.find(UploadsManagerBP); + + expect(wrapper.state().items.map(item => item.name)).toEqual(['first.txt', 'second.txt', 'third.txt']); + }); + }); + describe('controlled isExpanded / onToggle', () => { test('uses isExpanded prop value when in controlled mode', () => { const wrapper = getWrapper({ enableModernizedUploads: true, isExpanded: true, onToggle: jest.fn() }); From ef55e0f20fdab68af41d41c820438e46e83c27d3 Mon Sep 17 00:00:00 2001 From: Hleb Kryshyn Date: Thu, 25 Jun 2026 20:23:04 +0200 Subject: [PATCH 2/2] feat(content-uploader): remove comments, rename variables --- src/elements/content-uploader/ContentUploader.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/elements/content-uploader/ContentUploader.tsx b/src/elements/content-uploader/ContentUploader.tsx index afbc395446..2ddaef8120 100644 --- a/src/elements/content-uploader/ContentUploader.tsx +++ b/src/elements/content-uploader/ContentUploader.tsx @@ -1639,10 +1639,7 @@ class ContentUploader extends Component { const isLoading = items.some(item => item.status === STATUS_IN_PROGRESS); const isDone = items.every(item => item.status === STATUS_COMPLETE || item.status === STATUS_STAGED); - // The modernized uploads manager surfaces the most recently added item on top, while the - // internal queue stays in FIFO order so upload sequencing, fileLimit, and dedupe are - // unaffected. slice() avoids mutating state.items. The legacy UI keeps the original order. - const managerItems = enableModernizedUploads ? items.slice().reverse() : items; + const uploadsManagerItems = enableModernizedUploads ? items.slice().reverse() : items; const styleClassName = classNames('bcu', className, { 'be-app-element': !useUploadsManager, @@ -1668,7 +1665,7 @@ class ContentUploader extends Component { onMouseLeave={this.handleModernizedMouseLeave} > { isExpanded={isUploadsManagerExpanded} isResumableUploadsEnabled={isResumableUploadsEnabled} isVisible={isVisible} - items={managerItems} + items={uploadsManagerItems} onItemActionClick={this.onClick} onRemoveActionClick={this.removeFileFromUploadQueue} onUpgradeCTAClick={onUpgradeCTAClick}