From 0ee08f7ec081bc5e9bd0922d16f52535b6e28624 Mon Sep 17 00:00:00 2001
From: siva kumar <siva.kumar@muraai.com>
Date: Thu, 5 Nov 2020 17:57:34 +0530
Subject: [PATCH] [ACA-828] Add showTitle input in TaskCloudForm component
 (#6318)

* [ACA-828] Add showTitle input in TaskCloudForm component

* Fixed comment
---
 .../components/task-form-cloud.component.md   |  1 +
 .../form/components/form-cloud.component.html |  2 +-
 .../components/task-form-cloud.component.html |  8 ++---
 .../task-form-cloud.component.spec.ts         | 30 +++++++++++++++++++
 .../components/task-form-cloud.component.ts   |  4 +++
 5 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/docs/process-services-cloud/components/task-form-cloud.component.md b/docs/process-services-cloud/components/task-form-cloud.component.md
index 086b04ed2f..d2e0cef03f 100644
--- a/docs/process-services-cloud/components/task-form-cloud.component.md
+++ b/docs/process-services-cloud/components/task-form-cloud.component.md
@@ -37,6 +37,7 @@ Save and Complete buttons get disabled when at least one of the form's inputs ar
 | ------------------ | --------- | ------------- | ----------------------------------------------- |
 | appName            | `string`  | ""            | App id to fetch corresponding form and values.  |
 | readOnly           | `boolean` | false         | Toggle readonly state of the task.              |
+| showTitle          | `boolean` | true          | Toggle rendering of the form title.             |
 | showCancelButton   | `boolean` | true          | Toggle rendering of the `Cancel` button.        |
 | showCompleteButton | `boolean` | true          | Toggle rendering of the `Complete` button.      |
 | showRefreshButton  | `boolean` | false         | Toggle rendering of the `Refresh` button.       |
diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
index 5c1bc1c342..9af182ad1f 100644
--- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
@@ -5,7 +5,7 @@
 
 <div *ngIf="hasForm()" class="adf-form-container">
     <mat-card>
-        <mat-card-header>
+        <mat-card-header *ngIf="showTitle || showRefreshButton || showValidationIcon">
             <mat-card-title>
                 <h4>
                     <div *ngIf="showValidationIcon" class="adf-form-validation-button">
diff --git a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.html b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.html
index 9a5c83fc04..9125860c29 100644
--- a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.html
@@ -3,6 +3,7 @@
                     [appName]="appName"
                     [appVersion]="taskDetails.appVersion"
                     [taskId]="taskId"
+                    [showTitle]="showTitle"
                     [processInstanceId]="taskDetails.processInstanceId"
                     [readOnly]="isReadOnly()"
                     [showRefreshButton]="showRefreshButton"
@@ -21,14 +22,11 @@
 
     <ng-template #withoutForm>
         <mat-card class="adf-task-form-container">
-            <mat-card-header>
+            <mat-card-header *ngIf="showTitle">
                 <mat-card-title>
                     <h4>
                         <span class="adf-form-title">
-                            {{taskDetails.name}}
-                            <ng-container *ngIf="!taskDetails.name">
-                                {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}
-                            </ng-container>
+                            {{ taskDetails?.name || 'FORM.FORM_RENDERER.NAMELESS_TASK' | translate }}
                         </span>
                     </h4>
                 </mat-card-title>
diff --git a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.spec.ts
index c01b6f5ec0..ea27248913 100644
--- a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.spec.ts
@@ -416,4 +416,34 @@ describe('TaskFormCloudComponent', () => {
             expect(loadingTemplate).toBeNull();
         });
     });
+
+    it('should display task name as title on no form template if showTitle is true', () => {
+        component.taskId = taskDetails.id;
+
+        fixture.detectChanges();
+        const noFormTemplateTitle = debugElement.query(By.css('.adf-form-title'));
+
+        expect(noFormTemplateTitle.nativeElement.innerText).toEqual('Task1');
+    });
+
+    it('should display default name as title on no form template if the task name empty/undefined', () => {
+        const mockTaskDetailsWithOutName = { id: 'mock-task-id', name: null, formKey: null };
+        getTaskSpy.and.returnValue(of(mockTaskDetailsWithOutName));
+        component.taskId = 'mock-task-id';
+
+        fixture.detectChanges();
+        const noFormTemplateTitle = debugElement.query(By.css('.adf-form-title'));
+
+        expect(noFormTemplateTitle.nativeElement.innerText).toEqual('FORM.FORM_RENDERER.NAMELESS_TASK');
+    });
+
+    it('should not display no form title if showTitle is set to false', () => {
+        component.taskId = taskDetails.id;
+        component.showTitle = false;
+
+        fixture.detectChanges();
+        const noFormTemplateTitle = debugElement.query(By.css('.adf-form-title'));
+
+        expect(noFormTemplateTitle).toBeNull();
+    });
 });
diff --git a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.ts b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.ts
index 05db0aa2fa..6afca55e11 100644
--- a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.ts
+++ b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.ts
@@ -41,6 +41,10 @@ export class TaskFormCloudComponent implements OnInit, OnChanges {
     @Input()
     taskId: string;
 
+    /** Toggle rendering of the form title. */
+    @Input()
+    showTitle: boolean = true;
+
     /** Toggle rendering of the `Refresh` button. */
     @Input()
     showRefreshButton = false;