[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>

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

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>

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;
+}

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', () => {

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>();