feat(content-uploader): uploads items order change

src/elements/content-uploader/ContentUploader.tsx

@@ -1639,6 +1639,8 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
         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<ContentUploaderProps, State> {
                             onMouseLeave={this.handleModernizedMouseLeave}
                         >
                             <UploadsManagerBP
-                                items={mapToModernizedUploadItems(items, rootFolderId)}
+                                items={mapToModernizedUploadItems(uploadsManagerItems, rootFolderId)}
                                 isExpanded={isUploadsManagerExpanded}
                                 onToggle={this.toggleUploadsManager}
                                 onItemCancel={this.handleUploadsManagerItemCancel}
@@ -1693,7 +1695,7 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
                             isExpanded={isUploadsManagerExpanded}
                             isResumableUploadsEnabled={isResumableUploadsEnabled}
                             isVisible={isVisible}
-                            items={items}
+                            items={uploadsManagerItems}
                             onItemActionClick={this.onClick}
                             onRemoveActionClick={this.removeFileFromUploadQueue}
                             onUpgradeCTAClick={onUpgradeCTAClick}

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() });