[ACA-3745] Folder - update metadata default copies the name in the title field (#5923)

* add title input

* title form control

* i18n

* update tests

lib/content-services/src/lib/dialogs/folder.dialog.html

@@ -23,8 +23,13 @@
             </mat-hint>
         </mat-form-field>
 
-        <br />
+        <mat-form-field class="adf-full-width">
-        <br />
+            <input
+                id="adf-folder-title-input"
+                matInput
+                placeholder="{{ 'CORE.FOLDER_DIALOG.FOLDER_TITLE.LABEL' | translate }}"
+                [formControl]="form.controls['title']"/>
+        </mat-form-field>
 
         <mat-form-field class="adf-full-width">
             <textarea

lib/content-services/src/lib/dialogs/folder.dialog.spec.ts

@@ -62,6 +62,7 @@ describe('FolderDialogComponent', () => {
                     id: 'node-id',
                     name: 'folder-name',
                     properties: {
+                        ['cm:title']: 'folder-title',
                         ['cm:description']: 'folder-description'
                     }
                 }
@@ -71,6 +72,7 @@ describe('FolderDialogComponent', () => {
 
         it('should init form with folder name and description', () => {
             expect(component.name).toBe('folder-name');
+            expect(component.title).toBe('folder-title');
             expect(component.description).toBe('folder-description');
         });
 
@@ -82,9 +84,11 @@ describe('FolderDialogComponent', () => {
 
         it('should update form input', () => {
             component.form.controls['name'].setValue('folder-name-update');
+            component.form.controls['title'].setValue('folder-title-update');
             component.form.controls['description'].setValue('folder-description-update');
 
             expect(component.name).toBe('folder-name-update');
+            expect(component.title).toBe('folder-title-update');
             expect(component.description).toBe('folder-description-update');
         });
 
@@ -92,6 +96,7 @@ describe('FolderDialogComponent', () => {
             spyOn(nodesApi, 'updateNode').and.returnValue(of({}));
 
             component.form.controls['name'].setValue('folder-name-update');
+            component.form.controls['title'].setValue('folder-title-update');
             component.form.controls['description'].setValue('folder-description-update');
 
             component.submit();
@@ -101,7 +106,7 @@ describe('FolderDialogComponent', () => {
                 {
                     name: 'folder-name-update',
                     properties: {
-                        'cm:title': 'folder-name-update',
+                        'cm:title': 'folder-title-update',
                         'cm:description': 'folder-description-update'
                     }
                 }
@@ -189,6 +194,7 @@ describe('FolderDialogComponent', () => {
             spyOn(nodesApi, 'createFolder').and.returnValue(of({}));
 
             component.form.controls['name'].setValue('folder-name-update');
+            component.form.controls['title'].setValue('folder-title-update');
             component.form.controls['description'].setValue('folder-description-update');
 
             component.submit();
@@ -198,7 +204,7 @@ describe('FolderDialogComponent', () => {
                 {
                     name: 'folder-name-update',
                     properties: {
-                        'cm:title': 'folder-name-update',
+                        'cm:title': 'folder-title-update',
                         'cm:description': 'folder-description-update'
                     },
                     nodeType: 'cm:folder'
@@ -210,6 +216,7 @@ describe('FolderDialogComponent', () => {
                 spyOn(nodesApi, 'createFolder').and.returnValue(of({}));
 
                 component.form.controls['name'].setValue('folder-name-update');
+                component.form.controls['title'].setValue('folder-title-update');
                 component.form.controls['description'].setValue('folder-description-update');
                 component.nodeType = 'cm:sushi';
 
@@ -220,7 +227,7 @@ describe('FolderDialogComponent', () => {
                     {
                         name: 'folder-name-update',
                         properties: {
-                            'cm:title': 'folder-name-update',
+                            'cm:title': 'folder-title-update',
                             'cm:description': 'folder-description-update'
                         },
                         nodeType: 'cm:sushi'
@@ -234,6 +241,7 @@ describe('FolderDialogComponent', () => {
             };
 
             component.form.controls['name'].setValue('name');
+            component.form.controls['title'].setValue('title');
             component.form.controls['description'].setValue('description');
 
             spyOn(nodesApi, 'createFolder').and.returnValue(of(folder));

lib/content-services/src/lib/dialogs/folder.dialog.ts

@@ -74,13 +74,15 @@ export class FolderDialogComponent implements OnInit {
     ngOnInit() {
         const { folder } = this.data;
         let name = '';
+        let title = '';
         let description = '';
 
         if (folder) {
             const { properties } = folder;
 
             name = folder.name || '';
-            description = properties ? properties['cm:description'] : '';
+            title = properties?.['cm:title'] ?? '';
+            description = properties?.['cm:description'] ?? '';
         }
 
         const validators = {
@@ -94,6 +96,7 @@ export class FolderDialogComponent implements OnInit {
 
         this.form = this.formBuilder.group({
             name: [ name, validators.name ],
+            title: [ title ],
             description: [ description ]
         });
     }
@@ -104,6 +107,12 @@ export class FolderDialogComponent implements OnInit {
         return (name || '').trim();
     }
 
+    get title(): string {
+        const { title } = this.form.value;
+
+        return (title || '').trim();
+    }
+
     get description(): string {
         const { description } = this.form.value;
 
@@ -111,7 +120,7 @@ export class FolderDialogComponent implements OnInit {
     }
 
     private get properties(): any {
-        const { name: title, description } = this;
+        const { title, description } = this;
 
         return {
             'cm:title': title,

lib/core/i18n/en.json

@@ -111,6 +111,9 @@
       "FOLDER_DESCRIPTION": {
         "LABEL": "Description"
       },
+      "FOLDER_TITLE": {
+        "LABEL": "Title"
+      },
       "CREATE_BUTTON": {
         "LABEL": "Create"
       },