[AAE-2200] Fix upload dialog title (#5583)

* [AAE-2200] Fix dialog title

* [AAE-2200] Title from translation ressources and refactor

* [AAE-2200] Add unit test for title

* [AAE-2200] Fix lint in test

lib/content-services/src/lib/content-node-selector/content-node-dialog.service.ts

@@ -136,10 +136,8 @@ export class ContentNodeDialogService {
                 complete: this.close.bind(this)
             });
 
-            const title = this.getTitleTranslation(action, contentEntry.name);
-
             const data: ContentNodeSelectorComponentData = {
-                title: title,
+                title: this.getTitleTranslation(action, contentEntry.name),
                 actionName: action,
                 currentFolderId: contentEntry.parentId,
                 imageResolver: this.imageResolver.bind(this),
@@ -181,7 +179,7 @@ export class ContentNodeDialogService {
         });
 
         const data: ContentNodeSelectorComponentData = {
-            title: `${action} '${contentEntry.name}' to ...`,
+            title: this.getTitleTranslation(action, contentEntry.name),
             actionName: action,
             currentFolderId: contentEntry.id,
             imageResolver: this.imageResolver.bind(this),
@@ -208,7 +206,7 @@ export class ContentNodeDialogService {
         });
 
         const data: ContentNodeSelectorComponentData = {
-            title: `${action} '${contentEntry.name}' to ...`,
+            title: this.getTitleTranslation(action, contentEntry.name),
             actionName: action,
             currentFolderId: contentEntry.id,
             imageResolver: this.imageResolver.bind(this),

lib/content-services/src/lib/content-node-selector/content-node-selector.component.html

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

lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts

@@ -33,8 +33,8 @@ describe('ContentNodeSelectorDialogComponent', () => {
     let component: ContentNodeSelectorComponent;
     let fixture: ComponentFixture<ContentNodeSelectorComponent>;
     const data: any = {
-        title: 'Move along citizen...',
+        title: 'Choose along citizen...',
-        actionName: 'move',
+        actionName: 'choose',
         select: new EventEmitter<Node>(),
         rowFilter: (shareDataRow: ShareDataRow) => shareDataRow.node.entry.name === 'impossible-name',
         imageResolver: () => 'piccolo',
@@ -71,14 +71,14 @@ describe('ContentNodeSelectorDialogComponent', () => {
         it('should show the INJECTED title', () => {
             const titleElement = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-title"]'));
             expect(titleElement).not.toBeNull();
-            expect(titleElement.nativeElement.innerText).toBe('Move along citizen...');
+            expect(titleElement.nativeElement.innerText).toBe('Choose along citizen...');
         });
 
         it('should have the INJECTED actionName on the name of the choose button', () => {
             const actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
-            expect(component.buttonActionName).toBe('NODE_SELECTOR.MOVE');
+            expect(component.buttonActionName).toBe('NODE_SELECTOR.CHOOSE');
             expect(actionButton).not.toBeNull();
-            expect(actionButton.nativeElement.innerText).toBe('NODE_SELECTOR.MOVE');
+            expect(actionButton.nativeElement.innerText).toBe('NODE_SELECTOR.CHOOSE');
         });
 
         it('should pass through the injected currentFolderId to the documentList', () => {
@@ -156,4 +156,16 @@ describe('ContentNodeSelectorDialogComponent', () => {
             expect(actionButton.nativeElement.disabled).toBeFalsy();
         });
     });
+
+    describe('Title', () => {
+
+        it('should be updated when a node is chosen', () => {
+            component.onSelect([new Node({ id: 'fake', name: 'fake-node' })]);
+            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('NODE_SELECTOR.CHOOSE_ITEM');
+       });
+   });
 });

lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts

@@ -17,6 +17,7 @@
 
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material';
+import { TranslationService } from '@alfresco/adf-core';
 import { Node } from '@alfresco/js-api';
 import { ContentNodeSelectorComponentData } from './content-node-selector.component-data.interface';
 
@@ -28,11 +29,16 @@ import { ContentNodeSelectorComponentData } from './content-node-selector.compon
 })
 export class ContentNodeSelectorComponent {
 
+    title: string;
+    action: string;
     buttonActionName: string;
     chosenNode: Node[];
 
-    constructor(@Inject(MAT_DIALOG_DATA) public data: ContentNodeSelectorComponentData) {
+    constructor(public translation: TranslationService,
-        this.buttonActionName = data.actionName ? `NODE_SELECTOR.${data.actionName.toUpperCase()}` : 'NODE_SELECTOR.CHOOSE';
+                @Inject(MAT_DIALOG_DATA) public data: ContentNodeSelectorComponentData) {
+        this.action = data.actionName.toUpperCase();
+        this.buttonActionName = data.actionName ? `NODE_SELECTOR.${this.action}` : 'NODE_SELECTOR.CHOOSE';
+        this.title = data.title;
     }
 
     close() {
@@ -41,10 +47,21 @@ export class ContentNodeSelectorComponent {
 
     onSelect(nodeList: Node[]) {
         this.chosenNode = nodeList;
+        this.updateTitle(nodeList);
     }
 
     onClick(): void {
         this.data.select.next(this.chosenNode);
         this.data.select.complete();
     }
+
+    updateTitle(nodeList: Node[]): void {
+        if (this.action === 'CHOOSE' && nodeList) {
+            this.title = this.getTitleTranslation(this.action, nodeList[0].name);
+        }
+    }
+
+    getTitleTranslation(action: string, name: string): string {
+        return this.translation.instant(`NODE_SELECTOR.${action}_ITEM`, { name });
+    }
 }

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

@@ -71,6 +71,7 @@
   "NODE_SELECTOR": {
     "CANCEL": "Cancel",
     "CHOOSE": "Choose",
+    "CHOOSE_ITEM": "Choose '{{ name }}' to...",
     "COPY": "Copy",
     "COPY_ITEM": "Copy '{{ name }}' to...",
     "MOVE": "Move",