[AAE-2200] Add dynamic title to attach-file-widget-dialog (#5594)

* [AAE-2200] Refactor content node component action

* [AAE-2200] Add dynamique title to attach-file-widget-dialog

* [AAE-2200] Add unit test

lib/process-services/src/lib/content-widget/attach-file-widget-dialog.component.html

@@ -1,6 +1,6 @@
 <header
     mat-dialog-title
-    data-automation-id="content-node-selector-title">{{data?.title}}
+    data-automation-id="content-node-selector-title">{{title}}
 </header>
 
 <mat-dialog-content class="adf-login-dialog-content">

lib/process-services/src/lib/content-widget/attach-file-widget-dialog.component.spec.ts

@@ -33,8 +33,8 @@ describe('AttachFileWidgetDialogComponent', () => {
     let widget: AttachFileWidgetDialogComponent;
     let fixture: ComponentFixture<AttachFileWidgetDialogComponent>;
     const data: AttachFileWidgetDialogComponentData = {
-        title: 'Move along citizen...',
-        actionName: 'move',
+        title: 'Choose along citizen...',
+        actionName: 'Choose',
         selected: new EventEmitter<any>(),
         ecmHost: 'http://fakeUrl.com/'
     };
@@ -144,5 +144,23 @@ describe('AttachFileWidgetDialogComponent', () => {
                 chooseButton.click();
             });
         });
+
+        it('should update the title when the selected node is a file', () => {
+            const fakeNode: Node = new Node({ id: 'fake', isFile: true});
+            contentNodePanel.componentInstance.select.emit([fakeNode]);
+            fixture.detectChanges();
+            const titleElement = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-title"]'));
+            expect(titleElement).not.toBeNull();
+            expect(titleElement.nativeElement.innerText).toBe('ATTACH-FILE.ACTIONS.CHOOSE_ITEM');
+        });
+
+        it('should update the title when the selected node is a folder', () => {
+            const fakeNode: Node = new Node({ id: 'fake', isFolder: true});
+            contentNodePanel.componentInstance.select.emit([fakeNode]);
+            fixture.detectChanges();
+            const titleElement = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-title"]'));
+            expect(titleElement).not.toBeNull();
+            expect(titleElement.nativeElement.innerText).toBe('ATTACH-FILE.ACTIONS.CHOOSE_IN');
+        });
    });
 });

lib/process-services/src/lib/content-widget/attach-file-widget-dialog.component.ts

@@ -17,7 +17,7 @@
 
 import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material';
-import { ExternalAlfrescoApiService, AlfrescoApiService, AuthenticationService, LoginDialogPanelComponent, SitesService, SearchService } from '@alfresco/adf-core';
+import { ExternalAlfrescoApiService, AlfrescoApiService, AuthenticationService, LoginDialogPanelComponent, SitesService, SearchService, TranslationService } from '@alfresco/adf-core';
 import { DocumentListService, ContentNodeSelectorService } from '@alfresco/adf-content-services';
 import { AttachFileWidgetDialogComponentData } from './attach-file-widget-dialog-component.interface';
 import { Node } from '@alfresco/js-api';
@@ -39,13 +39,18 @@ export class AttachFileWidgetDialogComponent {
     @ViewChild('adfLoginPanel')
     loginPanel: LoginDialogPanelComponent;
 
+    title: string;
+    action: string;
+    buttonActionName: string;
     chosenNode: Node[];
-    buttonActionName;
 
-    constructor(@Inject(MAT_DIALOG_DATA) public data: AttachFileWidgetDialogComponentData,
+    constructor(private translation: TranslationService,
+                @Inject(MAT_DIALOG_DATA) public data: AttachFileWidgetDialogComponentData,
                 private externalApiService: AlfrescoApiService) {
         (<any> externalApiService).init(data.ecmHost, data.context);
-        this.buttonActionName = data.actionName ? `ATTACH-FILE.ACTIONS.${data.actionName.toUpperCase()}` : 'ATTACH-FILE.ACTIONS.CHOOSE';
+        this.action = data.actionName ? data.actionName.toUpperCase() : 'CHOOSE';
+        this.buttonActionName = `ATTACH-FILE.ACTIONS.${this.action}`;
+        this.title = data.title;
     }
 
     isLoggedIn() {
@@ -66,6 +71,7 @@ export class AttachFileWidgetDialogComponent {
         } else {
             this.chosenNode = null;
         }
+        this.updateTitle(nodeList);
     }
 
     onClick() {
@@ -73,4 +79,17 @@ export class AttachFileWidgetDialogComponent {
         this.data.selected.complete();
     }
 
+    updateTitle(nodeList: Node[]): void {
+        if (this.action === 'CHOOSE' && nodeList) {
+            if (nodeList[0].isFile) {
+                this.title = this.getTitleTranslation(this.action + '_ITEM', nodeList[0].name);
+            } else if (nodeList[0].isFolder) {
+                this.title = this.getTitleTranslation(this.action + '_IN', nodeList[0].name);
+            }
+        }
+    }
+
+    getTitleTranslation(action: string, name: string): string {
+        return this.translation.instant(`ATTACH-FILE.ACTIONS.${action}`, { name });
+    }
 }

lib/process-services/src/lib/content-widget/attach-file-widget-dialog.service.ts

@@ -17,6 +17,7 @@
 
 import { MatDialog } from '@angular/material';
 import { EventEmitter, Injectable, Output } from '@angular/core';
+import { TranslationService } from '@alfresco/adf-core';
 import { Subject, Observable } from 'rxjs';
 import { AttachFileWidgetDialogComponentData } from './attach-file-widget-dialog-component.interface';
 import { Node } from '@alfresco/js-api';
@@ -31,7 +32,8 @@ export class AttachFileWidgetDialogService {
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
-    constructor(private dialog: MatDialog) {
+    constructor(private dialog: MatDialog,
+                private translation: TranslationService) {
     }
 
     /**
@@ -41,19 +43,18 @@ export class AttachFileWidgetDialogService {
      * @returns Information about the chosen file(s)
      */
     openLogin(ecmHost: string, actionName?: string, context?: string): Observable<Node[]> {
-        const titleString: string = `Please log in for ${ecmHost}`;
         const selected = new Subject<Node[]>();
         selected.subscribe({
             complete: this.close.bind(this)
         });
 
         const data: AttachFileWidgetDialogComponentData = {
-            title : titleString,
+            title : this.getLoginTitleTranslation(ecmHost),
             actionName,
             selected,
             ecmHost,
             context,
-            isSelectionValid: this.isNodeFile.bind(this),
+            isSelectionValid: this.isNodeValid.bind(this),
             showFilesInResult: true
         };
 
@@ -70,8 +71,11 @@ export class AttachFileWidgetDialogService {
         this.dialog.closeAll();
     }
 
-    private isNodeFile(entry: Node): boolean {
-        return entry.isFile;
+    private isNodeValid(entry: Node): boolean {
+        return entry.isFile || entry.isFolder;
     }
 
+    private getLoginTitleTranslation(ecmHost: string): string {
+        return this.translation.instant(`ATTACH-FILE.DIALOG.LOGIN`, { ecmHost });
+    }
 }

lib/process-services/src/lib/i18n/en.json

@@ -324,10 +324,15 @@
     }
   },
   "ATTACH-FILE": {
+    "DIALOG" : {
+      "LOGIN": "Please log in for {{ ecmHost }}"
+    },
     "ACTIONS": {
       "LOGIN": "Login",
       "CANCEL": "Cancel",
-      "CHOOSE": "Choose"
+      "CHOOSE": "Choose",
+      "CHOOSE_ITEM": "Choose {{ name }} to...",
+      "CHOOSE_IN": "Choose file in {{ name }}..."
     }
   }
 }