From 0e2e5e35a0616e754bad0db592741c2b2f020545 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Tue, 7 May 2019 17:31:22 +0100
Subject: [PATCH] [ADF-3126] i18n support for info drawer tabs (#4698)

* [ADF-3126] i18n support for info drawer tabs

* fix tests

* code fixes
---
 .../app/components/file-view/file-view.component.html  |  8 ++++----
 .../src/app/components/files/files.component.html      |  4 ++--
 docs/core/components/info-drawer-tab.component.md      |  2 +-
 docs/core/components/info-drawer.component.md          |  2 +-
 lib/core/info-drawer/info-drawer.component.html        |  6 +++---
 lib/core/info-drawer/info-drawer.component.spec.ts     | 10 ++++++++++
 lib/core/info-drawer/info-drawer.module.ts             |  4 +++-
 .../task-list/components/task-details.component.html   |  6 +++---
 8 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/demo-shell/src/app/components/file-view/file-view.component.html b/demo-shell/src/app/components/file-view/file-view.component.html
index d14163bbaf..e6274e0b69 100644
--- a/demo-shell/src/app/components/file-view/file-view.component.html
+++ b/demo-shell/src/app/components/file-view/file-view.component.html
@@ -3,11 +3,11 @@
     <ng-template let-node="node" #sidebarRightTemplate>
         <adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE' | translate">
 
-            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.COMMENTS' | translate">
+            <adf-info-drawer-tab label="APP.INFO_DRAWER.COMMENTS">
                 <adf-comments [nodeId]="nodeId" [readOnly]="!isCommentEnabled"></adf-comments>
             </adf-info-drawer-tab>
 
-            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.PROPERTIES' | translate">
+            <adf-info-drawer-tab label="APP.INFO_DRAWER.PROPERTIES">
                 <adf-content-metadata-card *ngIf="isPreset" [node]="node"
                                            [multi]="multi"
                                            [preset]="customPreset"
@@ -104,7 +104,7 @@
 
             </adf-info-drawer-tab>
 
-            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.VERSIONS' | translate">
+            <adf-info-drawer-tab label="APP.INFO_DRAWER.VERSIONS">
                 <mat-card>
                     <mat-card-content>
                         <adf-version-manager [node]="node"
@@ -120,7 +120,7 @@
     <ng-template let-node="node" #sidebarLeftTemplate>
         <adf-info-drawer [title]="'Viewer Options'">
 
-            <adf-info-drawer-tab [label]="'Settings'">
+            <adf-info-drawer-tab label="Settings">
                 <p class="toggle">
                     <mat-slide-toggle
                         id="adf-switch-custoname"
diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html
index 0be21ed52d..450ebec68d 100644
--- a/demo-shell/src/app/components/files/files.component.html
+++ b/demo-shell/src/app/components/files/files.component.html
@@ -447,13 +447,13 @@
             <div info-drawer-content>
 
                 <adf-info-drawer [title]="'Details'" *ngIf="documentList.selection[0]">
-                    <adf-info-drawer-tab [label]="'Properties'">
+                    <adf-info-drawer-tab label="Properties">
                         <adf-content-metadata-card
                             [node]="documentList.selection[0].entry"
                             [displayEmpty]="displayEmptyMetadata">
                         </adf-content-metadata-card>
                     </adf-info-drawer-tab>
-                    <adf-info-drawer-tab [label]="'Versions'">
+                    <adf-info-drawer-tab label="Versions">
                         <ng-container *ngIf="hasOneFileSelected();else choose_document_template">
                             <ng-container *ngIf="userHasPermissionToManageVersions(); else no_permission_to_versions">
                                 <adf-version-manager
diff --git a/docs/core/components/info-drawer-tab.component.md b/docs/core/components/info-drawer-tab.component.md
index 31707c6bb3..b3a0f54416 100644
--- a/docs/core/components/info-drawer-tab.component.md
+++ b/docs/core/components/info-drawer-tab.component.md
@@ -56,7 +56,7 @@ You can also combine `icon` and `label` properties.
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
 | icon | `string` | null | Icon to render for the tab. |
-| label | `string` | "" | The title of the tab. |
+| label | `string` | "" | The title of the tab (string or translation key). |
 
 ## Details
 
diff --git a/docs/core/components/info-drawer.component.md b/docs/core/components/info-drawer.component.md
index 49b2396d92..bdc8e35480 100644
--- a/docs/core/components/info-drawer.component.md
+++ b/docs/core/components/info-drawer.component.md
@@ -50,7 +50,7 @@ have any content you like:
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
 | selectedIndex | `number` | 0 | The selected index tab. |
-| title | `string \| null` | null | The title of the info drawer. |
+| title | `string \| null` | null | The title of the info drawer (string or translation key). |
 
 ### Events
 
diff --git a/lib/core/info-drawer/info-drawer.component.html b/lib/core/info-drawer/info-drawer.component.html
index 9b19b524e9..639a4385c7 100644
--- a/lib/core/info-drawer/info-drawer.component.html
+++ b/lib/core/info-drawer/info-drawer.component.html
@@ -1,5 +1,5 @@
 <adf-info-drawer-layout>
-    <div *ngIf="title" info-drawer-title>{{title}}</div>
+    <div *ngIf="title" info-drawer-title>{{ title | translate }}</div>
     <ng-content *ngIf="!title" info-drawer-title select="[info-drawer-title]"></ng-content>
 
     <ng-content info-drawer-buttons select="[info-drawer-buttons]"></ng-content>
@@ -9,12 +9,12 @@
     <ng-template #tabLayout>
         <mat-tab-group [(selectedIndex)]="selectedIndex" class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)">
             <mat-tab *ngFor="let contentBlock of contentBlocks"
-                [label]="contentBlock.label"
+                [label]="contentBlock.label | translate"
                 class="adf-info-drawer-tab">
 
                 <ng-template mat-tab-label>
                     <mat-icon *ngIf="contentBlock.icon">{{ contentBlock.icon }}</mat-icon>
-                    <span *ngIf="contentBlock.label">{{ contentBlock.label }}</span>
+                    <span *ngIf="contentBlock.label">{{ contentBlock.label | translate }}</span>
                 </ng-template>
 
                 <ng-container *ngTemplateOutlet="contentBlock.content"></ng-container>
diff --git a/lib/core/info-drawer/info-drawer.component.spec.ts b/lib/core/info-drawer/info-drawer.component.spec.ts
index 0bdf4d1faf..e69ee72e03 100644
--- a/lib/core/info-drawer/info-drawer.component.spec.ts
+++ b/lib/core/info-drawer/info-drawer.component.spec.ts
@@ -23,11 +23,14 @@ import { InfoDrawerComponent } from './info-drawer.component';
 import { setupTestBed } from '../testing/setupTestBed';
 import { CoreModule } from '../core.module';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { of } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
 
 describe('InfoDrawerComponent', () => {
     let element: HTMLElement;
     let component: InfoDrawerComponent;
     let fixture: ComponentFixture<InfoDrawerComponent>;
+    let translateService: TranslateService;
 
     setupTestBed({
         imports: [
@@ -37,6 +40,9 @@ describe('InfoDrawerComponent', () => {
     });
 
     beforeEach(() => {
+        translateService = TestBed.get(TranslateService);
+        spyOn(translateService, 'get').and.callFake((key) => of(key));
+
         fixture = TestBed.createComponent(InfoDrawerComponent);
         element = fixture.nativeElement;
         component = fixture.componentInstance;
@@ -87,6 +93,7 @@ class CustomInfoDrawerComponent extends InfoDrawerComponent {
 describe('Custom InfoDrawer', () => {
     let fixture: ComponentFixture<CustomInfoDrawerComponent>;
     let component: CustomInfoDrawerComponent;
+    let translateService: TranslateService;
 
     setupTestBed({
         imports: [
@@ -99,6 +106,9 @@ describe('Custom InfoDrawer', () => {
     });
 
     beforeEach(() => {
+        translateService = TestBed.get(TranslateService);
+        spyOn(translateService, 'get').and.callFake((key) => of(key));
+
         fixture = TestBed.createComponent(CustomInfoDrawerComponent);
         fixture.detectChanges();
         component = fixture.componentInstance;
diff --git a/lib/core/info-drawer/info-drawer.module.ts b/lib/core/info-drawer/info-drawer.module.ts
index 897177bc4f..2c493c2de3 100644
--- a/lib/core/info-drawer/info-drawer.module.ts
+++ b/lib/core/info-drawer/info-drawer.module.ts
@@ -21,6 +21,7 @@ import { MaterialModule } from '../material.module';
 
 import { InfoDrawerLayoutComponent, InfoDrawerTitleDirective, InfoDrawerButtonsDirective, InfoDrawerContentDirective } from './info-drawer-layout.component';
 import { InfoDrawerComponent, InfoDrawerTabComponent } from './info-drawer.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 export function declarations() {
     return [
@@ -36,7 +37,8 @@ export function declarations() {
 @NgModule({
     imports: [
         CommonModule,
-        MaterialModule
+        MaterialModule,
+        TranslateModule.forChild()
     ],
     declarations: declarations(),
     exports: declarations()
diff --git a/lib/process-services/task-list/components/task-details.component.html b/lib/process-services/task-list/components/task-details.component.html
index ac86217905..f1ba932ec0 100644
--- a/lib/process-services/task-list/components/task-details.component.html
+++ b/lib/process-services/task-list/components/task-details.component.html
@@ -79,8 +79,8 @@
             </div>
         </div>
         <div class="adf-task-details-core-sidebar">
-            <adf-info-drawer *ngIf="showHeaderContent" title="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TITLE' | translate }}" id="adf-task-details-core-sidebar-drawer" class="adf-task-details-core-sidebar-drawer">
-                <adf-info-drawer-tab label="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_DETAILS_TITLE' | translate }}">
+            <adf-info-drawer *ngIf="showHeaderContent" title="ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TITLE" id="adf-task-details-core-sidebar-drawer" class="adf-task-details-core-sidebar-drawer">
+                <adf-info-drawer-tab label="ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_DETAILS_TITLE">
                     <div class="adf-assignment-container" *ngIf="showAssignee">
                         <adf-people-search
                             (searchPeople)="searchUser($event)"
@@ -107,7 +107,7 @@
                     </adf-people>
                 </adf-info-drawer-tab>
 
-                <adf-info-drawer-tab label="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_ACTIVITY_TITLE' | translate }}">
+                <adf-info-drawer-tab label="ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_ACTIVITY_TITLE">
                     <mat-card *ngIf="showComments">
                         <mat-card-content>
                             <adf-comments #activitiComments