[ACA-828] Add showTitle input in TaskCloudForm component (#6318)

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

* Fixed comment

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

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

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}}
+                            {{ taskDetails?.name || 'FORM.FORM_RENDERER.NAMELESS_TASK' | translate }}
-                            <ng-container *ngIf="!taskDetails.name">
-                                {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}
-                            </ng-container>
                         </span>
                     </h4>
                 </mat-card-title>

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

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;