diff --git a/src/elements/content-uploader/ContentUploader.tsx b/src/elements/content-uploader/ContentUploader.tsx index 04af3e3720..2ddaef8120 100644 --- a/src/elements/content-uploader/ContentUploader.tsx +++ b/src/elements/content-uploader/ContentUploader.tsx @@ -1639,6 +1639,8 @@ 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); + const uploadsManagerItems = enableModernizedUploads ? items.slice().reverse() : items; + const styleClassName = classNames('bcu', className, { 'be-app-element': !useUploadsManager, be: !useUploadsManager, @@ -1663,7 +1665,7 @@ class ContentUploader extends Component { onMouseLeave={this.handleModernizedMouseLeave} > { isExpanded={isUploadsManagerExpanded} isResumableUploadsEnabled={isResumableUploadsEnabled} isVisible={isVisible} - items={items} + items={uploadsManagerItems} 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() });