feat(uploads-manager): integrate shared feature into ContentUploader

src/elements/content-uploader/ContentUploader.tsx

@@ -12,6 +12,7 @@ import { AxiosRequestConfig, AxiosResponse } from 'axios';
 import DroppableContent from './DroppableContent';
 import Footer from './Footer';
 import UploadsManager from './UploadsManager';
+import { mapToModernizedUploadItems } from './utils/mapToModernizedUploadItem';
 import API from '../../api';
 import Browser from '../../utils/Browser';
 import Internationalize from '../common/Internationalize';
@@ -1219,6 +1220,28 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
         }
     };
 
+    /**
+     * Find legacy UploadItem by the id used by the modernized uploads manager.
+     */
+    findItemByModernizedId = (id: string): UploadItem | undefined => {
+        const { rootFolderId } = this.props;
+        return this.state.items.find(item => getFileId(item.file, rootFolderId) === id);
+    };
+
+    handleModernizedItemAction = (id: string) => {
+        const item = this.findItemByModernizedId(id);
+        if (item) {
+            this.onClick(item);
+        }
+    };
+
+    handleModernizedItemRemove = (id: string) => {
+        const item = this.findItemByModernizedId(id);
+        if (item) {
+            this.removeFileFromUploadQueue(item);
+        }
+    };
+
     /**
      * Empties the items queue
      *
@@ -1282,6 +1305,7 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
             messages,
             onClose,
             onUpgradeCTAClick,
+            rootFolderId,
             theme,
             useUploadsManager,
         }: ContentUploaderProps = this.props;
@@ -1303,7 +1327,14 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
                 return (
                     <div ref={measureRef} className={styleClassName} id={this.id}>
                         <ThemingStyles selector={`#${this.id}`} theme={theme} />
-                        <UploadsManagerBP items={[]} />
+                        <UploadsManagerBP
+                            items={mapToModernizedUploadItems(items, rootFolderId)}
+                            isExpanded={isUploadsManagerExpanded}
+                            onToggle={this.toggleUploadsManager}
+                            onItemCancel={this.handleModernizedItemAction}
+                            onItemRetry={this.handleModernizedItemAction}
+                            onItemRemove={this.handleModernizedItemRemove}
+                        />
                     </div>
                 );
             }

src/elements/content-uploader/__tests__/ContentUploader.test.js

@@ -7,6 +7,7 @@ import { ContentUploaderComponent, CHUNKED_UPLOAD_MIN_SIZE_BYTES } from '../Cont
 import Footer from '../Footer';
 import UploadsManager from '../UploadsManager';
 import DroppableContent from '../DroppableContent';
+import { UploadsManager as UploadsManagerBP } from '@box/uploads-manager';
 import {
     STATUS_PENDING,
     STATUS_IN_PROGRESS,
@@ -775,18 +776,93 @@ describe('elements/content-uploader/ContentUploader', () => {
                 expect(wrapper.find(UploadsManagerBP)).toHaveLength(0);
             });
 
-            test('should render modernized UploadsManager when enableModernizedUploads is true', () => {
+            test('should render modernized UploadsManagerBP when enableModernizedUploads is true', () => {
                 const wrapper = getWrapper({ enableModernizedUploads: true });
                 expect(wrapper.find(UploadsManagerBP)).toHaveLength(1);
                 expect(wrapper.find(UploadsManager)).toHaveLength(0);
                 expect(wrapper.find(DroppableContent)).toHaveLength(0);
             });
 
-            test('should render modernized UploadsManager when enableModernizedUploads is true and useUploadsManager is true', () => {
+            test('should render modernized UploadsManagerBP even when useUploadsManager is true', () => {
                 const wrapper = getWrapper({ enableModernizedUploads: true, useUploadsManager: true });
                 expect(wrapper.find(UploadsManagerBP)).toHaveLength(1);
                 expect(wrapper.find(UploadsManager)).toHaveLength(0);
-                expect(wrapper.find(DroppableContent)).toHaveLength(0);
+            });
+
+            test('should map state.items to modernized item shape', () => {
+                const wrapper = getWrapper({ enableModernizedUploads: true });
+                wrapper.setState({
+                    items: [
+                        {
+                            name: 'foo.pdf',
+                            extension: 'pdf',
+                            progress: 42,
+                            status: STATUS_IN_PROGRESS,
+                            file: { name: 'foo.pdf' },
+                        },
+                    ],
+                });
+                const items = wrapper.find(UploadsManagerBP).prop('items');
+                expect(items).toHaveLength(1);
+                expect(items[0]).toMatchObject({
+                    name: 'foo.pdf',
+                    extension: 'pdf',
+                    progress: 42,
+                    status: 'uploading',
+                });
+            });
+
+            test('should pass isExpanded from state', () => {
+                const wrapper = getWrapper({ enableModernizedUploads: true });
+                wrapper.setState({ isUploadsManagerExpanded: true });
+                expect(wrapper.find(UploadsManagerBP).prop('isExpanded')).toBe(true);
+            });
+
+            test('should call onClick when onItemCancel is invoked', () => {
+                const wrapper = getWrapper({ enableModernizedUploads: true });
+                const item = {
+                    name: 'foo.pdf',
+                    extension: 'pdf',
+                    progress: 0,
+                    status: STATUS_PENDING,
+                    file: { name: 'foo.pdf' },
+                };
+                wrapper.setState({ items: [item] });
+                const instance = wrapper.instance();
+                const onClickSpy = jest.spyOn(instance, 'onClick').mockImplementation(() => {});
+
+                wrapper.find(UploadsManagerBP).prop('onItemCancel')('foo.pdf');
+
+                expect(onClickSpy).toHaveBeenCalledWith(item);
+            });
+
+            test('should call removeFileFromUploadQueue when onItemRemove is invoked', () => {
+                const wrapper = getWrapper({ enableModernizedUploads: true });
+                const item = {
+                    name: 'foo.pdf',
+                    extension: 'pdf',
+                    progress: 0,
+                    status: STATUS_COMPLETE,
+                    file: { name: 'foo.pdf' },
+                };
+                wrapper.setState({ items: [item] });
+                const instance = wrapper.instance();
+                const removeSpy = jest.spyOn(instance, 'removeFileFromUploadQueue').mockImplementation(() => {});
+
+                wrapper.find(UploadsManagerBP).prop('onItemRemove')('foo.pdf');
+
+                expect(removeSpy).toHaveBeenCalledWith(item);
+            });
+
+            test('should no-op when modernized id does not match any item', () => {
+                const wrapper = getWrapper({ enableModernizedUploads: true });
+                wrapper.setState({ items: [] });
+                const instance = wrapper.instance();
+                const onClickSpy = jest.spyOn(instance, 'onClick').mockImplementation(() => {});
+
+                wrapper.find(UploadsManagerBP).prop('onItemCancel')('missing-id');
+
+                expect(onClickSpy).not.toHaveBeenCalled();
             });
         });
     });

src/elements/content-uploader/utils/__tests__/mapToModernizedUploadItem.test.ts

@@ -0,0 +1,79 @@
+import {
+    STATUS_PENDING,
+    STATUS_IN_PROGRESS,
+    STATUS_STAGED,
+    STATUS_COMPLETE,
+    STATUS_ERROR,
+} from '../../../../constants';
+import { mapToModernizedUploadItem, mapToModernizedUploadItems } from '../mapToModernizedUploadItem';
+
+const buildLegacyItem = (overrides = {}) => ({
+    name: 'foo.pdf',
+    extension: 'pdf',
+    progress: 50,
+    status: STATUS_IN_PROGRESS,
+    size: 100,
+    file: { name: 'foo.pdf' } as File,
+    api: {} as never,
+    ...overrides,
+});
+
+describe('mapToModernizedUploadItem()', () => {
+    test('maps core fields', () => {
+        const result = mapToModernizedUploadItem(buildLegacyItem(), '0');
+        expect(result).toEqual({
+            id: 'foo.pdf',
+            name: 'foo.pdf',
+            extension: 'pdf',
+            progress: 50,
+            status: 'uploading',
+            isFolder: undefined,
+            errorMessage: undefined,
+        });
+    });
+
+    test.each([
+        [STATUS_PENDING, 'pending'],
+        [STATUS_IN_PROGRESS, 'uploading'],
+        [STATUS_STAGED, 'staged'],
+        [STATUS_COMPLETE, 'complete'],
+        [STATUS_ERROR, 'error'],
+    ])('maps legacy status %s to modernized %s', (legacy, modernized) => {
+        const result = mapToModernizedUploadItem(buildLegacyItem({ status: legacy }), '0');
+        expect(result.status).toBe(modernized);
+    });
+
+    test('extracts errorMessage from item.error', () => {
+        const result = mapToModernizedUploadItem(
+            buildLegacyItem({ status: STATUS_ERROR, error: { message: 'Boom' } }),
+            '0',
+        );
+        expect(result.errorMessage).toBe('Boom');
+    });
+
+    test('forwards isFolder', () => {
+        const result = mapToModernizedUploadItem(buildLegacyItem({ isFolder: true }), '0');
+        expect(result.isFolder).toBe(true);
+    });
+
+    test('defaults missing extension and progress', () => {
+        const result = mapToModernizedUploadItem(
+            buildLegacyItem({ extension: undefined, progress: undefined }),
+            '0',
+        );
+        expect(result.extension).toBe('');
+        expect(result.progress).toBe(0);
+    });
+});
+
+describe('mapToModernizedUploadItems()', () => {
+    test('maps a list', () => {
+        const result = mapToModernizedUploadItems(
+            [buildLegacyItem({ name: 'a.pdf', file: { name: 'a.pdf' } as File }), buildLegacyItem({ name: 'b.pdf', file: { name: 'b.pdf' } as File })],
+            '0',
+        );
+        expect(result).toHaveLength(2);
+        expect(result[0].id).toBe('a.pdf');
+        expect(result[1].id).toBe('b.pdf');
+    });
+});

src/elements/content-uploader/utils/mapToModernizedUploadItem.ts

@@ -0,0 +1,47 @@
+import {
+    STATUS_PENDING,
+    STATUS_IN_PROGRESS,
+    STATUS_STAGED,
+    STATUS_COMPLETE,
+    STATUS_ERROR,
+} from '../../../constants';
+import { getFileId } from '../../../utils/uploads';
+import { UploadItem as LegacyUploadItem } from '../../../common/types/upload';
+
+type ModernizedStatus = 'pending' | 'uploading' | 'staged' | 'complete' | 'error' | 'canceled';
+
+export interface ModernizedUploadItem {
+    id: string;
+    name: string;
+    extension: string;
+    progress: number;
+    status: ModernizedStatus;
+    isFolder?: boolean;
+    errorMessage?: string;
+}
+
+const STATUS_MAP: Record<string, ModernizedStatus> = {
+    [STATUS_PENDING]: 'pending',
+    [STATUS_IN_PROGRESS]: 'uploading',
+    [STATUS_STAGED]: 'staged',
+    [STATUS_COMPLETE]: 'complete',
+    [STATUS_ERROR]: 'error',
+};
+
+export function mapToModernizedUploadItem(item: LegacyUploadItem, rootFolderId: string): ModernizedUploadItem {
+    const errorMessage = item.error ? (item.error as { message?: string }).message : undefined;
+
+    return {
+        id: getFileId(item.file, rootFolderId),
+        name: item.name,
+        extension: item.extension ?? '',
+        progress: item.progress ?? 0,
+        status: STATUS_MAP[item.status] ?? 'pending',
+        isFolder: item.isFolder,
+        errorMessage,
+    };
+}
+
+export function mapToModernizedUploadItems(items: LegacyUploadItem[], rootFolderId: string): ModernizedUploadItem[] {
+    return items.map(item => mapToModernizedUploadItem(item, rootFolderId));
+}