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

package.json

@@ -147,7 +147,7 @@
         "@box/types": "^2.1.8",
         "@box/unified-share-modal": "^2.15.16",
         "@box/user-selector": "^1.76.19",
-        "@box/uploads-manager": "^1.14.0",
+        "@box/uploads-manager": "^1.15.0",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@chromatic-com/storybook": "^4.0.1",
         "@commitlint/cli": "^19.8.0",
@@ -314,7 +314,7 @@
         "@box/types": "^2.1.8",
         "@box/unified-share-modal": "^2.15.16",
         "@box/user-selector": "^1.76.19",
-        "@box/uploads-manager": "^1.14.0",
+        "@box/uploads-manager": "^1.15.0",
         "@hapi/address": "^2.1.4",
         "@tanstack/react-virtual": "^3.13.12",
         "axios": "^0.31.1",

src/api/uploads/FolderUploadNode.js

@@ -180,6 +180,11 @@ class FolderUploadNode {
         const folderObject: FolderUploadItem = {
             extension: '',
             name: this.name,
+            options: {
+                ...this.fileAPIOptions,
+                folderId: this.folderId,
+                uploadInitTimestamp: Date.now(),
+            },
             status: STATUS_COMPLETE,
             isFolder: true,
             size: 1,

src/api/uploads/__tests__/FolderUploadNode.test.js

@@ -145,6 +145,7 @@ describe('api/uploads/FolderUploadNode', () => {
             expect(folderUploadNodeInstance.addFolderToUploadQueue).toHaveBeenCalledWith({
                 extension: '',
                 name,
+                options: expect.objectContaining({ folderId, uploadInitTimestamp: expect.any(Number) }),
                 status: STATUS_COMPLETE,
                 isFolder: true,
                 size: 1,
@@ -167,6 +168,7 @@ describe('api/uploads/FolderUploadNode', () => {
             expect(folderUploadNodeInstance.addFolderToUploadQueue).toHaveBeenCalledWith({
                 extension: '',
                 name,
+                options: expect.objectContaining({ folderId, uploadInitTimestamp: expect.any(Number) }),
                 status: STATUS_COMPLETE,
                 isFolder: true,
                 size: 1,

src/common/types/upload.js

@@ -57,6 +57,7 @@ type UploadItem = {
     api: PlainUploadAPI | MultiputUploadAPI,
     boxFile?: BoxItem,
     bytesUploadedOnLastResume?: number,
+    dedupeKey?: string,
     error?: Object,
     extension: string,
     file: UploadFile,

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 { getUploadItemKey, mapToModernizedUploadItems } from './utils/mapToModernizedUploadItem';
 import API from '../../api';
 import Browser from '../../utils/Browser';
 import Internationalize from '../common/Internationalize';
@@ -486,8 +487,9 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
         }
 
         const newItems = this.getNewDataTransferItems(dataTransferItems);
-        newItems.forEach(item => {
-            this.itemIdsRef.current[getDataTransferItemId(item, rootFolderId)] = true;
+        const dedupeKeys = newItems.map(item => getDataTransferItemId(item, rootFolderId));
+        dedupeKeys.forEach(key => {
+            this.itemIdsRef.current[key] = true;
         });
 
         if (newItems.length === 0) {
@@ -496,15 +498,17 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
 
         const fileAPIOptions = getDataTransferItemAPIOptions(newItems[0]);
         const { folderId = rootFolderId } = fileAPIOptions;
-        const folderUploads = newItems.map(item => {
+        const dropTimestamp = Date.now();
+        const folderUploads = newItems.map((item, index) => {
             const folderUpload = this.getFolderUploadAPI(folderId);
             folderUpload.buildFolderTreeFromDataTransferItem(item);
             return {
                 api: folderUpload,
+                dedupeKey: dedupeKeys[index],
                 extension: '',
                 isFolder: true,
                 name: folderUpload.folder.name,
-                options: fileAPIOptions,
+                options: { ...fileAPIOptions, uploadInitTimestamp: dropTimestamp + index },
                 progress: 0,
                 size: 1,
                 status: STATUS_PENDING,
@@ -569,7 +573,7 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
                     extension: '',
                     isFolder: true,
                     name: folderUpload.folder.name,
-                    options: apiOptions,
+                    options: { uploadInitTimestamp: Date.now(), ...apiOptions },
                     progress: 0,
                     size: 1,
                     status: STATUS_PENDING,
@@ -740,7 +744,7 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
         const { api } = item;
         api.cancel();
 
-        // Remove the file ID from itemIdsRef to allow re-uploading the same file
+        // Remove dedupe IDs from itemIdsRef to allow re-uploading the same item
         if (item.file) {
             const { rootFolderId } = this.props;
 
@@ -754,6 +758,11 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
             delete this.itemIdsRef.current[simpleFileId];
             delete this.itemIdsRef.current[fullFileId];
 
+            const newItemIds = { ...this.itemIdsRef.current };
+            this.setState({ itemIds: newItemIds });
+        } else if (item.dedupeKey) {
+            // Folder items stash the dedupe key written in addFolderDataTransferItemsToUploadQueue
+            delete this.itemIdsRef.current[item.dedupeKey];
             const newItemIds = { ...this.itemIdsRef.current };
             this.setState({ itemIds: newItemIds });
         }
@@ -1222,6 +1231,34 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
         }
     };
 
+    /**
+     * Find legacy UploadItem by the client-side key used by the modernized uploads manager.
+     */
+    findItemByUploadKey = (key: string): UploadItem | undefined => {
+        const { rootFolderId } = this.props;
+        return this.state.items.find(item => getUploadItemKey(item, rootFolderId) === key);
+    };
+
+    handleModernizedItemAction = (key: string) => {
+        const item = this.findItemByUploadKey(key);
+        if (item) {
+            this.onClick(item);
+        } else {
+            // eslint-disable-next-line no-console
+            console.warn(`ContentUploader: no upload item found for key "${key}" on action.`);
+        }
+    };
+
+    handleModernizedItemRemove = (key: string) => {
+        const item = this.findItemByUploadKey(key);
+        if (item) {
+            this.removeFileFromUploadQueue(item);
+        } else {
+            // eslint-disable-next-line no-console
+            console.warn(`ContentUploader: no upload item found for key "${key}" on remove.`);
+        }
+    };
+
     /**
      * Empties the items queue
      *
@@ -1285,6 +1322,7 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
             messages,
             onClose,
             onUpgradeCTAClick,
+            rootFolderId,
             theme,
             useUploadsManager,
         }: ContentUploaderProps = this.props;
@@ -1306,7 +1344,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

@@ -255,6 +255,28 @@ describe('elements/content-uploader/ContentUploader', () => {
             expect(newFiles[0]).toBe(file);
         });
 
+        test('should clear dedupeKey from itemIds when canceling a folder item', () => {
+            const folderItem = {
+                api: { cancel: jest.fn() },
+                dedupeKey: 'shared',
+                isFolder: true,
+                name: 'shared',
+                status: STATUS_PENDING,
+            };
+
+            wrapper.setState({
+                items: [folderItem],
+                itemIds: { shared: true },
+            });
+            instance.itemsRef.current = [folderItem];
+            instance.itemIdsRef.current = { shared: true };
+
+            instance.removeFileFromUploadQueue(folderItem);
+
+            expect(instance.itemIdsRef.current.shared).toBeUndefined();
+            expect(wrapper.state().itemIds.shared).toBeUndefined();
+        });
+
         test.each`
             view                       | action
             ${VIEW_ERROR}              | ${'should not'}
@@ -757,6 +779,29 @@ describe('elements/content-uploader/ContentUploader', () => {
             expect(instance.addToQueue).toBeCalledTimes(1);
             expect(instance.addToQueue.mock.calls[0][0].length).toBe(mockFoldersList.length);
         });
+
+        test('should stash dedupeKey on each folder item so it can be cleared on cancel', async () => {
+            jest.spyOn(UploaderUtils, 'getDataTransferItemId').mockImplementation(item => `key-${item}`);
+            jest.spyOn(UploaderUtils, 'getDataTransferItemAPIOptions').mockReturnValue({});
+
+            const wrapper = getWrapper();
+            const instance = wrapper.instance();
+            const mockFoldersList = ['folder1', 'folder2'];
+            const mockFolderUpload = { folder: { name: 'mockFolder' } };
+            mockFolderUpload.buildFolderTreeFromDataTransferItem = jest.fn();
+
+            instance.addToQueue = jest.fn();
+            instance.getFolderUploadAPI = jest.fn().mockReturnValue(mockFolderUpload);
+            instance.getNewDataTransferItems = jest.fn().mockReturnValue(mockFoldersList);
+
+            await instance.addFolderDataTransferItemsToUploadQueue(mockFoldersList, jest.fn());
+
+            const queuedItems = instance.addToQueue.mock.calls[0][0];
+            expect(queuedItems[0].dedupeKey).toBe('key-folder1');
+            expect(queuedItems[1].dedupeKey).toBe('key-folder2');
+            expect(instance.itemIdsRef.current['key-folder1']).toBe(true);
+            expect(instance.itemIdsRef.current['key-folder2']).toBe(true);
+        });
     });
 
     describe('render()', () => {
@@ -775,18 +820,131 @@ 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();
+            });
+
+            test('should not crash when state contains a folder item without a file', () => {
+                const wrapper = getWrapper({ enableModernizedUploads: true, rootFolderId: '0' });
+                const folderItem = {
+                    name: 'my-folder',
+                    extension: '',
+                    progress: 0,
+                    status: STATUS_PENDING,
+                    isFolder: true,
+                    api: {},
+                };
+                wrapper.setState({ items: [folderItem] });
+
+                expect(() => wrapper.find(UploadsManagerBP).prop('items')).not.toThrow();
+                const items = wrapper.find(UploadsManagerBP).prop('items');
+                expect(items).toHaveLength(1);
+                expect(items[0]).toMatchObject({ name: 'my-folder', isFolder: true });
+            });
+
+            test('should resolve folder item handler via modernized id', () => {
+                const wrapper = getWrapper({ enableModernizedUploads: true, rootFolderId: '0' });
+                const folderItem = {
+                    name: 'my-folder',
+                    extension: '',
+                    progress: 0,
+                    status: STATUS_PENDING,
+                    isFolder: true,
+                    api: {},
+                };
+                wrapper.setState({ items: [folderItem] });
+                const instance = wrapper.instance();
+                const onClickSpy = jest.spyOn(instance, 'onClick').mockImplementation(() => {});
+
+                const folderId = wrapper.find(UploadsManagerBP).prop('items')[0].id;
+                wrapper.find(UploadsManagerBP).prop('onItemCancel')(folderId);
+
+                expect(onClickSpy).toHaveBeenCalledWith(folderItem);
             });
         });
     });