From: Daniel Kutyła <daniel.kutyla@contractors.roche.com>
Date: Thu, 25 Nov 2021 16:16:31 +0000 (+0100)
Subject: 18169: Fixed upload cancelation on a single file
X-Git-Tag: 2.4.0~29^2
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/e3ca6297f8ec9f3504074291ce6cd10babeb69bf

18169: Fixed upload cancelation on a single file

Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla@contractors.roche.com>
---

diff --git a/cypress/integration/collection.spec.js b/cypress/integration/collection.spec.js
index e46be0c3..eb06a06c 100644
--- a/cypress/integration/collection.spec.js
+++ b/cypress/integration/collection.spec.js
@@ -795,14 +795,16 @@ describe('Collection panel tests', function () {
     });
 
     describe('file upload', () => {
-        it('allows to cancel running upload', () => {
+        beforeEach(() => {
             cy.createCollection(adminUser.token, {
                 name: `Test collection ${Math.floor(Math.random() * 999999)}`,
                 owner_uuid: activeUser.user.uuid,
                 manifest_text: ". 37b51d194a7513e45b56f6524f2d51f2+3 0:3:bar\n"
             })
                 .as('testCollection1');
+        });
 
+        it('allows to cancel running upload', () => {
             cy.getAll('@testCollection1')
                 .then(function([testCollection1]) {
                     cy.loginAs(activeUser);
@@ -815,12 +817,8 @@ describe('Collection panel tests', function () {
                         cy.get('[data-cy=drag-and-drop]').upload(content, '5mb_a.bin');
                         cy.get('[data-cy=drag-and-drop]').upload(content, '5mb_b.bin');
 
-                        cy.wait(1000);
-
                         cy.get('[data-cy=form-submit-btn]').click();
 
-                        cy.wait(10);
-
                         cy.get('button').contains('Cancel').click();
 
                         cy.get('[data-cy=form-submit-btn]').should('not.exist');
@@ -829,13 +827,6 @@ describe('Collection panel tests', function () {
         });
 
         it('allows to cancel single file from the running upload', () => {
-            cy.createCollection(adminUser.token, {
-                name: `Test collection ${Math.floor(Math.random() * 999999)}`,
-                owner_uuid: activeUser.user.uuid,
-                manifest_text: ". 37b51d194a7513e45b56f6524f2d51f2+3 0:3:bar\n"
-            })
-                .as('testCollection1');
-
             cy.getAll('@testCollection1')
                 .then(function([testCollection1]) {
                     cy.loginAs(activeUser);
@@ -848,13 +839,35 @@ describe('Collection panel tests', function () {
                         cy.get('[data-cy=drag-and-drop]').upload(content, '5mb_a.bin');
                         cy.get('[data-cy=drag-and-drop]').upload(content, '5mb_b.bin');
 
-                        cy.wait(1000);
+                        cy.get('[data-cy=form-submit-btn]').click();
+
+                        cy.get('button[aria-label=Remove]').eq(1).click();
+
+                        cy.get('[data-cy=form-submit-btn]').should('not.exist');
+
+                        cy.get('[data-cy=collection-files-panel]').contains('5mb_a.bin').should('exist');
+                    });
+                });
+        });
+
+        it('allows to cancel all files from the running upload', () => {
+            cy.getAll('@testCollection1')
+                .then(function([testCollection1]) {
+                    cy.loginAs(activeUser);
+
+                    cy.goToPath(`/collections/${testCollection1.uuid}`);
+
+                    cy.get('[data-cy=upload-button]').click();
+
+                    cy.fixture('files/5mb.bin', 'base64').then(content => {
+                        cy.get('[data-cy=drag-and-drop]').upload(content, '5mb_a.bin');
+                        cy.get('[data-cy=drag-and-drop]').upload(content, '5mb_b.bin');
 
                         cy.get('[data-cy=form-submit-btn]').click();
 
-                        cy.wait(10);
+                        cy.get('button[aria-label=Remove]').click({ multiple: true });
 
-                        cy.get('button[aria-label=Remove]').eq(1).click();
+                        cy.get('[data-cy=form-submit-btn]').should('not.exist');
                     });
                 });
         });
diff --git a/src/components/file-upload/file-upload.tsx b/src/components/file-upload/file-upload.tsx
index 579746a6..54d5b5db 100644
--- a/src/components/file-upload/file-upload.tsx
+++ b/src/components/file-upload/file-upload.tsx
@@ -123,6 +123,17 @@ export const FileUpload = withStyles(styles)(
             if (!disabled) {
                 onDelete(file);
             }
+
+            let interval = setInterval(() => {
+                const key = Object.keys((window as any).cancelTokens).find(key => key.indexOf(file.file.name) > -1);
+
+                if (key) {
+                    clearInterval(interval);
+                    (window as any).cancelTokens[key]();
+                    delete (window as any).cancelTokens[key];
+                }
+            }, 100);
+
         }
         render() {
             const { classes, onDrop, disabled, files } = this.props;
diff --git a/src/store/file-uploader/file-uploader-reducer.ts b/src/store/file-uploader/file-uploader-reducer.ts
index bade4c8f..4218fbee 100644
--- a/src/store/file-uploader/file-uploader-reducer.ts
+++ b/src/store/file-uploader/file-uploader-reducer.ts
@@ -41,24 +41,22 @@ export const fileUploaderReducer = (state: UploaderState = initialState, action:
             const idToDelete: number = file.id;
             const updatedState = state.filter(file => file.id !== idToDelete);
 
-            const key: string | undefined = Object.keys((window as any).cancelTokens)
-                .find(key => key.indexOf(file.file.name) > -1);
-
-            if (key) {
-                (window as any).cancelTokens[key]();
-                delete (window as any).cancelTokens[key];
-            }
-
             return updatedState;
         },
         CANCEL_FILES_UPLOAD: () => {
-            Object.keys((window as any).cancelTokens)
-                .forEach((key) => {
-                    (window as any).cancelTokens[key]();
-                    delete (window as any).cancelTokens[key];
-                });
+            state.forEach((file) => {
+                let interval = setInterval(() => {
+                    const key = Object.keys((window as any).cancelTokens).find(key => key.indexOf(file.file.name) > -1);
+    
+                    if (key) {
+                        clearInterval(interval);
+                        (window as any).cancelTokens[key]();
+                        delete (window as any).cancelTokens[key];
+                    }
+                }, 100);
+            });
 
-            return state;
+            return [];
         },
         START_UPLOAD: () => {
             const startTime = Date.now();