From 7399704d57ee6475b6a48abcd8063e4d2c8a8d29 Mon Sep 17 00:00:00 2001
From: Silviu Popa <silviucpopa@gmail.com>
Date: Mon, 27 Jul 2020 14:12:44 +0300
Subject: [PATCH] [ACA-3107] add possibility to hide task name from the sidenav
 (#5883)

* [ACA-3107] add possibility to hide task name from the sidenav

* add unit tesT

* add task header spinner

* update documentation

* fix unit test

* change expect

* add another check

* replace expect condition

* additional expect

* use ToBeTruthy

* simplify expect

* add unit tesT

* add task header spinner

* fix unit test

* change expect

* add another check

* additional expect

* use ToBeTruthy

* simplify expect

Co-authored-by: Silviu Popa <p3701014@L3700101120.ness.com>
---
 .../components/task-header-cloud.component.md |  1 +
 .../task-header-cloud.component.html          |  9 ++++++++-
 .../task-header-cloud.component.scss          | 10 ++++++++++
 .../task-header-cloud.component.spec.ts       | 19 +++++++++++++++++++
 .../components/task-header-cloud.component.ts |  4 ++++
 5 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/docs/process-services-cloud/components/task-header-cloud.component.md b/docs/process-services-cloud/components/task-header-cloud.component.md
index 6fb0f0b02b..86ce975c9b 100644
--- a/docs/process-services-cloud/components/task-header-cloud.component.md
+++ b/docs/process-services-cloud/components/task-header-cloud.component.md
@@ -27,6 +27,7 @@ Shows all the information related to a task.
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
 | appName | `string` | "" | (Required) The name of the application. |
+| showTitle | `boolean` | true | Show/Hide the task title |
 | taskId | `string` |  | (Required) The id of the task. |
 
 ### Events
diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.html b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.html
index 9de0215103..53bad84f0a 100644
--- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.html
@@ -1,9 +1,10 @@
-<h3 class="adf-task-title">{{ taskDetails?.name }}</h3>
+<h3 *ngIf="showTitle" class="adf-task-title">{{ taskDetails?.name }}</h3>
 
 <div class="adf-task-header-container">
     <mat-card *ngIf="isTaskValid()" class="adf-card-container">
         <mat-card-content>
             <adf-card-view
+                *ngIf="properties; else loadingTemplate"
                 [properties]="properties"
                 [editable]="isTaskEditable()"
                 [displayClearAction]="displayDateClearAction">
@@ -11,3 +12,9 @@
         </mat-card-content>
     </mat-card>
 </div>
+
+<ng-template #loadingTemplate>
+    <div class="adf-task-header-loading">
+        <mat-spinner></mat-spinner>
+    </div>
+</ng-template>
diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss
index 6f440a3cdc..8da05a7e79 100644
--- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss
@@ -22,6 +22,11 @@
         &-claim-controls {
             color: rgb(131, 131, 131);
         }
+
+        &-task-header-loading {
+            display: flex;
+            justify-content: center;
+        }
     }
 
     @media screen and  ($mat-small) {
@@ -32,3 +37,8 @@
         }
     }
 }
+
+.adf-task-header-loading {
+    display: flex;
+    justify-content: center;
+}
diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts
index 533f49fd68..56dd4db0aa 100644
--- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts
@@ -73,6 +73,18 @@ describe('TaskHeaderCloudComponent', () => {
             component.ngOnChanges();
         });
 
+        it('should hide the title if showTitle is false', () => {
+            component.showTitle = false;
+            fixture.detectChanges();
+            let taskTitle = fixture.debugElement.query(By.css('.adf-task-title'));
+            expect(taskTitle).toBeNull();
+
+            component.showTitle = true;
+            fixture.detectChanges();
+            taskTitle = fixture.debugElement.query(By.css('.adf-task-title'));
+            expect(taskTitle).toBeTruthy();
+        });
+
         it('should fectch task details when appName and taskId defined', async(() => {
             fixture.detectChanges();
             fixture.whenStable().then(() => {
@@ -188,6 +200,13 @@ describe('TaskHeaderCloudComponent', () => {
             description = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-description"]'));
             expect(description.nativeElement.value.trim()).toEqual('This is the description');
         });
+
+        it('should show loading spinner when properties are not loaded', () => {
+            component.properties = null;
+            fixture.detectChanges();
+            const loading = fixture.debugElement.query(By.css('.adf-task-header-loading'));
+            expect(loading).toBeTruthy();
+        });
     });
 
     describe('Task with parentTaskId', () => {
diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts
index f6c4a1c861..4da0f52b5d 100644
--- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts
+++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts
@@ -50,6 +50,10 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
     @Input()
     taskId: string;
 
+    /** Show/Hide the task title */
+    @Input()
+    showTitle: boolean = true;
+
     /** Emitted when the task is claimed. */
     @Output()
     claim: EventEmitter<any> = new EventEmitter<any>();