From 9cb01e2085fc2ea6a44258396c85ba250ef405b2 Mon Sep 17 00:00:00 2001
From: jacekpluta <73617938+jacekpluta@users.noreply.github.com>
Date: Tue, 30 Jul 2024 14:56:03 +0200
Subject: [PATCH] [MNT-24128] in ADW/ADF, when downloading a ZIP from a
 selection of files and folders, display a progress bar (#9957)

---
 .../download-zip/download-zip.dialog.html     | 10 +++++--
 .../download-zip/download-zip.dialog.scss     | 12 +++++++++
 .../download-zip/download-zip.dialog.spec.ts  | 25 ++++++++++++++++++
 .../download-zip.dialog.stories.component.ts  |  7 ++---
 .../download-zip/download-zip.dialog.ts       |  9 ++++++-
 lib/core/src/lib/i18n/en.json                 |  3 ++-
 .../content-rest-api/model/download-status.ts | 26 +++++++++++++++++++
 .../api/content-rest-api/model/download.ts    |  4 ++-
 .../src/api/content-rest-api/model/index.ts   |  9 ++++---
 9 files changed, 93 insertions(+), 12 deletions(-)
 create mode 100644 lib/js-api/src/api/content-rest-api/model/download-status.ts

diff --git a/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.html b/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.html
index 5da7e68718..8633f2513f 100755
--- a/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.html
+++ b/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()">
diff --git a/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.scss b/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.scss
index 8c9a585c27..5d72450236 100755
--- a/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.scss
+++ b/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;
+        }
+    }
+}
diff --git a/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.spec.ts b/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.spec.ts
index b8628d4fa4..40561fc1b0 100755
--- a/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.spec.ts
+++ b/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);
+    });
 });
diff --git a/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.stories.component.ts b/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.stories.component.ts
index 13d9a8e372..7521a6b646 100644
--- a/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.stories.component.ts
+++ b/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;
         }
     }
 
diff --git a/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.ts b/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.ts
index effe8cda70..b2e4c45999 100755
--- a/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.ts
+++ b/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(() => {
diff --git a/lib/core/src/lib/i18n/en.json b/lib/core/src/lib/i18n/en.json
index 72e69bb173..50eb0530a6 100644
--- a/lib/core/src/lib/i18n/en.json
+++ b/lib/core/src/lib/i18n/en.json
@@ -107,7 +107,8 @@
         "ACTIONS": {
           "CANCEL": "Cancel"
         },
-        "TITLE": "Adding files to zip, this could take a few minutes"
+        "TITLE": "Adding files to zip, this could take a few minutes",
+        "COMPLETE": "complete"
       },
       "EDIT_JSON": {
         "CLOSE": "Close",
diff --git a/lib/js-api/src/api/content-rest-api/model/download-status.ts b/lib/js-api/src/api/content-rest-api/model/download-status.ts
new file mode 100644
index 0000000000..1632122ebb
--- /dev/null
+++ b/lib/js-api/src/api/content-rest-api/model/download-status.ts
@@ -0,0 +1,26 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const FileDownloadStatus = {
+    PENDING: 'PENDING',
+    CANCELLED: 'CANCELLED',
+    IN_PROGRESS: 'IN_PROGRESS',
+    DONE: 'DONE',
+    MAX_CONTENT_SIZE_EXCEEDED: 'MAX_CONTENT_SIZE_EXCEEDED'
+} as const;
+
+export type DownloadStatus = keyof typeof FileDownloadStatus;
diff --git a/lib/js-api/src/api/content-rest-api/model/download.ts b/lib/js-api/src/api/content-rest-api/model/download.ts
index a8d5cae204..71a914db9a 100644
--- a/lib/js-api/src/api/content-rest-api/model/download.ts
+++ b/lib/js-api/src/api/content-rest-api/model/download.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+import { DownloadStatus } from './download-status';
+
 export interface Download {
     /**
      * number of files added so far in the zip
@@ -39,5 +41,5 @@ export interface Download {
     /**
      * the current status of the download node creation
      */
-    status?: 'PENDING' | 'CANCELLED' | 'IN_PROGRESS' | 'DONE' | 'MAX_CONTENT_SIZE_EXCEEDED' | string;
+    status?: DownloadStatus;
 }
diff --git a/lib/js-api/src/api/content-rest-api/model/index.ts b/lib/js-api/src/api/content-rest-api/model/index.ts
index 16ad8dad1d..4d421b0043 100644
--- a/lib/js-api/src/api/content-rest-api/model/index.ts
+++ b/lib/js-api/src/api/content-rest-api/model/index.ts
@@ -68,6 +68,7 @@ export * from './deletedNodesPagingList';
 export * from './directAccessUrl';
 export * from './directAccessUrlEntry';
 export * from './download';
+export * from './download-status';
 export * from './downloadBodyCreate';
 export * from './downloadEntry';
 export * from './errorError';
@@ -162,10 +163,10 @@ export * from './siteMember';
 export * from './siteMemberEntry';
 export * from './siteMemberPaging';
 export * from './siteMemberPagingList';
-export * from  './siteGroup';
-export * from  './siteGroupEntry';
-export * from  './siteGroupPaging';
-export * from  './siteGroupPagingList';
+export * from './siteGroup';
+export * from './siteGroupEntry';
+export * from './siteGroupPaging';
+export * from './siteGroupPagingList';
 export * from './siteMembershipApprovalBody';
 export * from './siteMembershipBodyCreate';
 export * from './siteMembershipBodyUpdate';