[ADF-4838] Upload Dialog - canceling a pending file cancels the file in progress (#5063)

* add automation id

* call cancel upload api only if file is not pending

* tests

* e2e

e2e/content-services/upload/cancel-upload.e2e.ts

@@ -79,7 +79,7 @@ describe('Upload component', async () => {
     });
 
     it('[C272792] Should be possible to cancel upload of a big file using row cancel icon', async () => {
-        await browser.executeScript('setTimeout(() => {document.querySelector("div[data-automation-id=\'cancel-upload-progress\']").click();}, 3000)');
+        await browser.executeScript('setTimeout(() => {document.querySelector("div[data-automation-id=\'cancel-upload-progress\']").click();}, 1000)');
 
         await contentServicesPage.uploadFile(largeFile.location);
 
@@ -90,7 +90,7 @@ describe('Upload component', async () => {
     });
 
     it('[C287790] Should be possible to cancel upload of a big file through the cancel uploads button', async () => {
-        await browser.executeScript(' setInterval(() => {document.querySelector("#adf-upload-dialog-cancel-all").click();' +
+        await browser.executeScript(' setTimeout(() => {document.querySelector("#adf-upload-dialog-cancel-all").click();' +
             'document.querySelector("#adf-upload-dialog-cancel").click();  }, 500)');
 
         await contentServicesPage.uploadFile(largeFile.location);
@@ -102,7 +102,7 @@ describe('Upload component', async () => {
     });
 
     it('[C272793] Should be able to cancel multiple files upload', async () => {
-        await browser.executeScript(' setInterval(() => {document.querySelector("#adf-upload-dialog-cancel-all").click();' +
+        await browser.executeScript(' setTimeout(() => {document.querySelector("#adf-upload-dialog-cancel-all").click();' +
             'document.querySelector("#adf-upload-dialog-cancel").click();  }, 500)');
 
         await uploadToggles.enableMultipleFileUpload();
@@ -115,4 +115,13 @@ describe('Upload component', async () => {
         await uploadToggles.disableMultipleFileUpload();
     });
 
+    it('[C315257] Should be able to cancel file in upload queue', async () => {
+        await uploadToggles.enableMultipleFileUpload();
+        await browser.executeScript('setTimeout(() => {document.querySelector("button[data-automation-id=\'cancel-upload-queue\']").click();}, 500)');
+        await contentServicesPage.uploadMultipleFile([largeFile.location, pngFileModel.location]);
+        await uploadDialog.fileIsCancelled(pngFileModel.name);
+        await uploadDialog.clickOnCloseButton();
+        await uploadDialog.dialogIsNotDisplayed();
+        await uploadToggles.disableMultipleFileUpload();
+    });
 });

lib/content-services/upload/components/file-uploading-list-row.component.html

@@ -82,6 +82,7 @@
         mat-icon-button
         *ngIf="file.status === FileUploadStatus.Pending"
         (click)="onCancel(file)"
+        data-automation-id="cancel-upload-queue"
         class="adf-file-uploading-row__group"
         title="{{ 'ADF_FILE_UPLOAD.BUTTON.CANCEL_FILE' | translate }}"
         [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CANCEL_FILE' | translate: { file: file.name }">

lib/content-services/upload/components/file-uploading-list.component.spec.ts

@@ -62,11 +62,25 @@ describe('FileUploadingListComponent', () => {
     });
 
     describe('cancelFile()', () => {
-        it('should call uploadService api when cancelling a file', () => {
+        it('should call cancelUpload service when cancelling a file', () => {
             component.cancelFile(file);
 
             expect(uploadService.cancelUpload).toHaveBeenCalledWith(file);
         });
+
+        it('should not call cancelUpload service when file has `Pending` status', () => {
+            file.status = FileUploadStatus.Pending;
+            component.cancelFile(file);
+
+            expect(uploadService.cancelUpload).not.toHaveBeenCalledWith(file);
+        });
+
+        it('should set `Cancelled` status on `Pending` file', () => {
+            file.status = FileUploadStatus.Pending;
+            component.cancelFile(file);
+
+            expect(file.status).toBe(FileUploadStatus.Cancelled);
+        });
     });
 
     describe('removeFile()', () => {
@@ -106,6 +120,40 @@ describe('FileUploadingListComponent', () => {
             expect(uploadService.cancelUpload).toHaveBeenCalled();
         });
 
+        it('should set `Deleted` status on file version instances when original is removed', () => {
+            component.files = <any> [
+                {
+                    data: {
+                        entry: { id: 'nodeId' }
+                    },
+                    name: 'file',
+                    status: FileUploadStatus.Complete,
+                    options: {
+                        newVersion: false
+                    }
+                },
+                {
+                    data: {
+                        entry: { id: 'nodeId' }
+                    },
+                    name: 'file_v1',
+                    status: FileUploadStatus.Complete,
+                    options: {
+                        newVersion: true
+                    }
+                }
+            ];
+
+            spyOn(nodesApiService, 'deleteNode').and.returnValue(of(component.files[0]));
+
+            component.removeFile(component.files[0]);
+            fixture.detectChanges();
+
+            expect(nodesApiService.deleteNode).toHaveBeenCalledTimes(1);
+            expect(component.files[0].status).toBe(FileUploadStatus.Deleted);
+            expect(component.files[1].status).toBe(FileUploadStatus.Deleted);
+        });
+
         describe('Events', () => {
 
             it('should throw an error event if delete file goes wrong', (done) => {

lib/content-services/upload/components/file-uploading-list.component.ts

@@ -65,8 +65,12 @@ export class FileUploadingListComponent {
      * @memberOf FileUploadingListComponent
      */
     cancelFile(file: FileModel): void {
+        if (file.status === FileUploadStatus.Pending) {
+            file.status = FileUploadStatus.Cancelled;
+        } else {
             this.uploadService.cancelUpload(file);
         }
+    }
 
     /**
      * Remove uploaded file
@@ -161,8 +165,9 @@ export class FileUploadingListComponent {
         this.files
             .filter(
                 (item) =>
-                    item.data.entry.id === file.data.entry.id &&
+                    item.options.newVersion &&
-                    item.options.newVersion
+                    item.data.entry.id === file.data.entry.id
+
             )
             .map((item) => {
                 item.status = FileUploadStatus.Deleted;