[MNT-24128] in ADW/ADF, when downloading a ZIP from a selection of files and folders, display a progress bar (#9957)

lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.html

@@ -1,6 +1,12 @@
 <h1 matDialogTitle>{{ 'CORE.DIALOG.DOWNLOAD_ZIP.TITLE' | translate }}</h1>
-<div mat-dialog-content>
-    <mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
+<div mat-dialog-content class="adf-dialog-content">
+    <mat-progress-bar value="{{ percentageDone }}" color="primary" mode="determinate"></mat-progress-bar>
+    <div class="adf-dialog-content-progress-text">
+        <span class="adf-dialog-content-progress-text-percentage">
+            {{ percentageDone }}%
+        </span>
+        {{ 'CORE.DIALOG.DOWNLOAD_ZIP.COMPLETE' | translate }}
+    </div>
 </div>
 <mat-dialog-actions align="end">
     <button class="adf-download-zip-dialog-button" mat-button color="primary" id="cancel-button" (click)="cancelDownload()">

lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.scss

@@ -1,3 +1,15 @@
 .adf-download-zip-dialog-button {
     text-transform: uppercase;
 }
+
+.adf-dialog-content:has(.adf-dialog-content-progress-text) {
+    padding: 0;
+
+    .adf-dialog-content-progress-text {
+        margin-top: 4px;
+
+        &-percentage {
+            font-weight: 900;
+        }
+    }
+}

lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.spec.ts

@@ -19,6 +19,7 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { DownloadZipDialogComponent } from './download-zip.dialog';
 import { DownloadZipService } from './services/download-zip.service';
+import { DownloadEntry, FileDownloadStatus } from '@alfresco/js-api';
 import { EMPTY, Observable, of } from 'rxjs';
 import { AlfrescoApiService, AlfrescoApiServiceMock, RedirectAuthService, TranslationMock, TranslationService } from '@alfresco/adf-core';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
@@ -167,4 +168,28 @@ describe('DownloadZipDialogComponent', () => {
         expect(component.cancelDownload).toHaveBeenCalled();
         expect(component.download).not.toHaveBeenCalled();
     });
+
+    it('should waitForDownload and display correct download %', () => {
+        const downloadEntry$: Observable<DownloadEntry> = new Observable((observer) => {
+            observer.next({
+                entry: {
+                    filesAdded: 10,
+                    bytesAdded: 1000,
+                    id: '1',
+                    totalFiles: 10,
+                    totalBytes: 1000,
+                    status: FileDownloadStatus.DONE
+                }
+            });
+            observer.complete();
+        });
+
+        const downloadZipSpy = spyOn(downloadZipService, 'getDownload').and.callFake(() => downloadEntry$);
+
+        component.waitAndDownload('1', 'testUrl', 'filename');
+        fixture.detectChanges();
+
+        expect(downloadZipSpy).toHaveBeenCalledWith('1');
+        expect(component.percentageDone).toBe(100);
+    });
 });

lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.stories.component.ts

@@ -19,6 +19,7 @@ import { Component, Input, OnInit, OnChanges } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { DownloadZipDialogComponent } from './download-zip.dialog';
 import { zipNode, downloadEntry } from './mock/download-zip-data.mock';
+import { FileDownloadStatus } from '@alfresco/js-api';
 
 @Component({
     selector: 'adf-download-zip-dialog-storybook',
@@ -38,11 +39,11 @@ export class DownloadZipDialogStorybookComponent implements OnInit, OnChanges {
         this.setEntryStatus(this.showLoading);
     }
 
-    setEntryStatus(isLoading: boolean){
+    setEntryStatus(isLoading: boolean) {
         if (!isLoading) {
-            downloadEntry.entry.status = 'DONE';
+            downloadEntry.entry.status = FileDownloadStatus.DONE;
         } else {
-            downloadEntry.entry.status = 'PACKING';
+            downloadEntry.entry.status = FileDownloadStatus.IN_PROGRESS;
         }
     }
 

lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.ts

@@ -20,6 +20,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { NodesApiService } from '../../common/services/nodes-api.service';
 import { DownloadZipService } from './services/download-zip.service';
 import { ContentService } from '../../common/services/content.service';
+import { FileDownloadStatus } from '@alfresco/js-api';
 
 @Component({
     selector: 'adf-download-zip-dialog',
@@ -32,6 +33,7 @@ export class DownloadZipDialogComponent implements OnInit {
     // flag for async threads
     cancelled = false;
     downloadId: string;
+    percentageDone = 0;
 
     constructor(
         private dialogRef: MatDialogRef<DownloadZipDialogComponent>,
@@ -79,7 +81,12 @@ export class DownloadZipDialogComponent implements OnInit {
 
         this.downloadZipService.getDownload(downloadId).subscribe((downloadEntry) => {
             if (downloadEntry.entry) {
-                if (downloadEntry.entry.status === 'DONE') {
+                if (downloadEntry.entry.status === FileDownloadStatus.IN_PROGRESS) {
+                    this.percentageDone = Number(((downloadEntry.entry.bytesAdded * 100) / downloadEntry.entry.totalBytes).toFixed(2));
+                }
+
+                if (downloadEntry.entry.status === FileDownloadStatus.DONE) {
+                    this.percentageDone = 100;
                     this.download(url, fileName);
                 } else {
                     setTimeout(() => {