[ACA-4677] Added download functionality on DownloadPromptDialog (#8467)

* [ACA-4677] Added download functionality on DownloadPromptDialog

* [ACA-4677] Added downloadFile event emitter documentation to ViewerComponent README. Updated reference of NonResponsiveDialog to DownloadPromptDialog

* [ACA-4677] Corrected typo in documentation for downloadFile event

* [ACA-4677] Updated test case to check for method call via actual event handling instead of calling the method manually

docs/core/components/viewer.component.md

@@ -85,12 +85,13 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
 
 ### Events
 
-| Name | Type | Description |
+| Name             | Type                                                                                                                            | Description                                                                |
-| ---- | ---- | ----------- |
+|------------------|---------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|
-| navigateBefore | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<KeyboardEvent \| MouseEvent>` | Emitted when user clicks 'Navigate Before' ("&lt;") button. |
+| navigateBefore   | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<KeyboardEvent \| MouseEvent>`                                       | Emitted when user clicks 'Navigate Before' ("&lt;") button.                |
-| navigateNext | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<KeyboardEvent \| MouseEvent>` | Emitted when user clicks 'Navigate Next' (">") button. |
+| navigateNext     | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<KeyboardEvent \| MouseEvent>`                                       | Emitted when user clicks 'Navigate Next' (">") button.                     |
-| showViewerChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the viewer close |
+| showViewerChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>`                                                           | Emitted when the viewer close                                              |
-| submitFile | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob)`>` | Emitted when the img is submitted in the img viewer. |
+| submitFile       | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob)`>` | Emitted when the img is submitted in the img viewer.                       |
+| downloadFile     | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`void`](https://developer.mozilla.org/en-US/docs/Web/API/Blob)`>` | Emitted when download button is clicked on the Download File Prompt. |
 
 ## Keyboard shortcuts
 

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html

@@ -21,6 +21,7 @@
     [urlFile]="urlFileContent"
     [tracks]="tracks"
     [readOnly]="readOnly"
+    (downloadFile)="onDownloadFile()"
     (navigateBefore)="onNavigateBeforeClick($event)"
     (navigateNext)="onNavigateNextClick($event)"
     (showViewerChange)="onClose()"

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts

@@ -26,19 +26,20 @@ import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extension
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { NodeEntry, VersionEntry } from '@alfresco/js-api';
-import { AlfrescoViewerComponent, RenditionService } from '@alfresco/adf-content-services';
+import { AlfrescoViewerComponent, NodeActionsService, RenditionService } from '@alfresco/adf-content-services';
 import {
     CoreTestingModule,
     setupTestBed,
     EventMock,
-    ViewUtilService
+    ViewUtilService, ViewerComponent
 } from '@alfresco/adf-core';
 import { NodesApiService } from '../../common/services/nodes-api.service';
 import { UploadService } from '../../common/services/upload.service';
 import { FileModel } from '../../common/models/file.model';
 import { throwError } from 'rxjs';
-import { Component } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ESCAPE } from '@angular/cdk/keycodes';
+import { By } from '@angular/platform-browser';
 
 @Component({
     selector: 'adf-viewer-container-toolbar',
@@ -149,6 +150,7 @@ describe('AlfrescoViewerComponent', () => {
     let extensionService: AppExtensionService;
     let renditionService: RenditionService;
     let viewUtilService: ViewUtilService;
+    let nodeActionsService: NodeActionsService;
 
     setupTestBed({
         imports: [
@@ -174,7 +176,8 @@ describe('AlfrescoViewerComponent', () => {
             },
             {provide: Location, useClass: SpyLocation},
             MatDialog
-        ]
+        ],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA]
     });
 
     beforeEach(() => {
@@ -188,6 +191,7 @@ describe('AlfrescoViewerComponent', () => {
         extensionService = TestBed.inject(AppExtensionService);
         renditionService = TestBed.inject(RenditionService);
         viewUtilService = TestBed.inject(ViewUtilService);
+        nodeActionsService = TestBed.inject(NodeActionsService);
     });
 
     afterEach(() => {
@@ -350,6 +354,15 @@ describe('AlfrescoViewerComponent', () => {
         expect(component.nodeId).toBe('id1');
     }));
 
+    it('should download file when downloadFile event is emitted', () => {
+        spyOn(nodeActionsService, 'downloadNode');
+        const viewerComponent = fixture.debugElement.query(By.directive(ViewerComponent));
+        viewerComponent.triggerEventHandler('downloadFile');
+
+        fixture.detectChanges();
+        expect(nodeActionsService.downloadNode).toHaveBeenCalled();
+    });
+
     describe('Viewer Example Component Rendering', () => {
 
         it('should use custom toolbar', (done) => {

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts

@@ -60,6 +60,7 @@ import { ContentService } from '../../common/services/content.service';
 import { NodesApiService } from '../../common/services/nodes-api.service';
 import { UploadService } from '../../common/services/upload.service';
 import { FileModel } from '../../common/models/file.model';
+import { NodeActionsService } from '../../document-list';
 
 @Component({
     selector: 'adf-alfresco-viewer',
@@ -238,7 +239,8 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
                 private contentService: ContentService,
                 private uploadService: UploadService,
                 public dialog: MatDialog,
-                private cdr: ChangeDetectorRef) {
+                private cdr: ChangeDetectorRef,
+                private nodeActionsService: NodeActionsService) {
         renditionService.maxRetries = this.maxRetries;
 
     }
@@ -449,4 +451,7 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
         this.onDestroy$.complete();
     }
 
+    onDownloadFile() {
+        this.nodeActionsService.downloadNode(this.nodeEntry);
+    }
 }

lib/core/src/lib/viewer/components/viewer.component.spec.ts

@@ -675,5 +675,15 @@ describe('ViewerComponent', () => {
             flush();
             discardPeriodicTasks();
         }));
+
+        it('should emit downloadFileEvent when DownloadPromptDialog return DownloadPromptActions.DOWNLOAD on close', fakeAsync( () => {
+            dialogOpenSpy.and.returnValue({ afterClosed: () => of(DownloadPromptActions.DOWNLOAD) } as any);
+            spyOn(component.downloadFile, 'emit');
+            fixture.detectChanges();
+            tick(3000);
+            fixture.detectChanges();
+
+            expect(component.downloadFile.emit).toHaveBeenCalled();
+        }));
     });
 });

lib/core/src/lib/viewer/components/viewer.component.ts

@@ -190,6 +190,12 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
      * */
     downloadPromptReminderDelay: number = 15;
 
+    /**
+     * Emitted when user clicks on download button on download prompt dialog.
+     * */
+    @Output()
+    downloadFile: EventEmitter<void> = new EventEmitter<void>();
+
     /** Emitted when user clicks 'Navigate Before' ("<") button. */
     @Output()
     navigateBefore = new EventEmitter<MouseEvent | KeyboardEvent>();
@@ -388,7 +394,10 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
             this.isDialogVisible = true;
             this.dialog.open(DownloadPromptDialogComponent, { disableClose: true }).afterClosed().pipe(first()).subscribe((result: DownloadPromptActions) => {
                 this.isDialogVisible = false;
-                if (result === DownloadPromptActions.WAIT) {
+                if (result === DownloadPromptActions.DOWNLOAD) {
+                    this.downloadFile.emit();
+                    this.onClose();
+                } else if (result === DownloadPromptActions.WAIT) {
                     if (this.enableDownloadPromptReminder) {
                         this.clearDownloadPromptTimeouts();
                         this.downloadPromptReminderTimer = window.setTimeout(() => {