[ADF-1772] fix for application name title translation (#2572)

* fix for ADF-1772

Enabling translation for application-list-component title

* [ADF-1772] fix translation for default application name

added unit tests for checking this fix

ng2-components/ng2-activiti-tasklist/src/components/apps-list.component.html

@@ -2,7 +2,7 @@
     <mat-list *ngIf="isList()" class="adf-app-list">
         <mat-list-item class="adf-app-list-item" (click)="selectApp(app)" (keyup.enter)="selectApp(app)" *ngFor="let app of appList" tabindex="0" role="button" title="{{app.name}}">
             <mat-icon matListIcon>touch_app</mat-icon>
-            <span matLine>{{app.name}}</span>
+            <span matLine>{{getAppName(app) | async}}</span>
         </mat-list-item>
     </mat-list>
     <div fxLayout="row wrap" *ngIf="isGrid()" class="adf-app-listgrid">
@@ -13,7 +13,7 @@
                     fxLayout="column"
                     role="button"
                     class="adf-app-listgrid-item-card"
-                    title="{{app.name}}"
+                    title="{{getAppName(app) | async}}"
                     [ngClass]="[getTheme(app)]"
                     (click)="selectApp(app)"
                     (keyup.enter)="selectApp(app)">
@@ -21,7 +21,7 @@
                             <mat-icon class="adf-app-listgrid-item-card-logo-icon">{{getBackgroundIcon(app)}}</mat-icon>
                         </div>
                         <div mat-card-title class="adf-app-listgrid-item-card-title">
-                            <h1>{{app.name | translate}}</h1>
+                            <h1>{{getAppName(app) | async}}</h1>
                         </div>
                         <div mat-card-subtitle class="adf-app-listgrid-item-card-subtitle" fxFlex="1 0 auto">
                             <p>{{app.description}}</p>

ng2-components/ng2-activiti-tasklist/src/components/apps-list.component.spec.ts

@@ -129,6 +129,30 @@ describe('AppsListComponent', () => {
         expect(emitSpy).toHaveBeenCalled();
     });
 
+    describe('intenationalization', () => {
+
+        fit('should provide a translation for the default application name, when app name is not provided', () => {
+            const appDataMock = {
+                defaultAppId: 'tasks',
+                name: null
+            };
+            component.getAppName(appDataMock).subscribe((name) => {
+                expect(name).toBe('ADF_TASK_LIST.APPS.TASK_APP_NAME');
+            });
+        });
+
+        fit('should provide the application name, when it exists', () => {
+            const appDataMock = {
+                defaultAppId: 'uiu',
+                name: 'the-name'
+            };
+
+            component.getAppName(appDataMock).subscribe((name) => {
+                expect(name).toBe(appDataMock.name);
+            });
+        });
+    });
+
     describe('layout', () => {
 
         it('should display a grid by default', () => {

ng2-components/ng2-activiti-tasklist/src/components/apps-list.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { AppsProcessService } from 'ng2-alfresco-core';
+import { AppsProcessService, TranslationService } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Observable';
 import { Observer } from 'rxjs/Observer';
 import { AppDefinitionRepresentationModel } from '../models/filter.model';
@@ -60,8 +60,10 @@ export class AppsListComponent implements OnInit {
 
     private iconsMDL: IconModel;
 
-    constructor(private appsProcessService: AppsProcessService) {
-        this.apps$ = new Observable<AppDefinitionRepresentationModel>(observer => this.appsObserver = observer).share();
+    constructor(
+        private appsProcessService: AppsProcessService,
+        private translationService: TranslationService) {
+            this.apps$ = new Observable<AppDefinitionRepresentationModel>(observer => this.appsObserver = observer).share();
     }
 
     ngOnInit() {
@@ -77,11 +79,11 @@ export class AppsListComponent implements OnInit {
     }
 
     private load() {
-        this.appsProcessService.getDeployedApplications().subscribe(
+        this.appsProcessService.getDeployedApplications()
+        .subscribe(
             (res: AppDefinitionRepresentationModel[]) => {
                 this.filterApps(res).forEach((app: AppDefinitionRepresentationModel) => {
-                    if (app.defaultAppId === AppsListComponent.DEFAULT_TASKS_APP) {
-                        app.name = AppsListComponent.DEFAULT_TASKS_APP_NAME;
+                    if (this.isDefaultApp(app)) {
                         app.theme = AppsListComponent.DEFAULT_TASKS_APP_THEME;
                         app.icon = AppsListComponent.DEFAULT_TASKS_APP_ICON;
                         this.appsObserver.next(app);
@@ -96,6 +98,16 @@ export class AppsListComponent implements OnInit {
         );
     }
 
+    isDefaultApp(app) {
+        return app.defaultAppId === AppsListComponent.DEFAULT_TASKS_APP;
+    }
+
+    getAppName(app) {
+        return this.isDefaultApp(app)
+            ? this.translationService.get(AppsListComponent.DEFAULT_TASKS_APP_NAME)
+            : Observable.of(app.name);
+    }
+
     /**
      * Pass the selected app as next
      * @param app