[ADF-3934] PeoplCloudComponent - add dynamic placeholder (#4548)

* [ADF-3934]  PeoplCloudComponent - add dynamic placeholder

* [ADF-3934] - fix tests

* [AF-3934] - PR changes

* [ADF-3934] - remove unnecesary test

* [ADF-3934] - lint

demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.html

@@ -40,6 +40,7 @@
                 [appName]="peopleAppName"
                 [roles]="peopleRoles"
                 [appName]="peopleAppName"
+                [title]="'ADF_TASK_LIST.START_TASK.FORM.LABEL.ASSIGNEE'"
                 [mode]="peopleMode"></adf-cloud-people>
         </div>
 

docs/process-services-cloud/components/people-cloud.component.md

@@ -29,6 +29,7 @@ Allows one or more users to be selected (with auto-suggestion) based on the inpu
 | preSelectUsers | [`IdentityUserModel`](../../../lib/core/userinfo/models/identity-user.model.ts)`[]` |  | Array of users to be pre-selected. All users in the array are pre-selected in multi selection mode, but only the first user is pre-selected in single selection mode. Mandatory properties are: id, email, username |
 | roles | `string[]` |  | Role names of the users to be listed. |
 | validate | `Boolean` | false | This flag enables the validation on the preSelectUsers passed as input. In case the flag is true the components call the identity service to verify the validity of the information passed as input. Otherwise, no check will be done. |
+| title | `string` |  | Translation key for the input placeholder |
 
 ### Events
 

lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.html

@@ -1,6 +1,6 @@
 <form>
 <mat-form-field class="adf-people-cloud">
-    <mat-label id="assignee-id">{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.ASSIGNEE' | translate}}</mat-label>
+    <mat-label id="title-id">{{ title | translate }}</mat-label>
     <mat-chip-list #userChipList *ngIf="isMultipleMode(); else singleSelection">
       <mat-chip
         *ngFor="let user of selectedUsers$ | async"

lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.spec.ts

@@ -145,6 +145,25 @@ describe('PeopleCloudComponent', () => {
                 expect(errorMessage.textContent).toContain('ADF_CLOUD_START_TASK.ERROR.MESSAGE');
             });
         }));
+
+        it('should populate placeholder when title is present', async(() => {
+            component.title = 'TITLE_KEY';
+            fixture.detectChanges();
+            const matLabel: HTMLInputElement = <HTMLInputElement> element.querySelector('mat-label');
+            fixture.whenStable().then( () => {
+                fixture.detectChanges();
+                expect(matLabel.textContent).toEqual('TITLE_KEY');
+            });
+        }));
+
+        it('should not populate placeholder when title is present', async(() => {
+            const matLabel: HTMLInputElement = <HTMLInputElement> element.querySelector('mat-label');
+            fixture.detectChanges();
+            fixture.whenStable().then( () => {
+                fixture.detectChanges();
+                expect(matLabel.textContent).toEqual('');
+            });
+        }));
     });
 
     describe('when application name defined', () => {
@@ -543,7 +562,7 @@ describe('PeopleCloudComponent', () => {
             component.preSelectUsers = <any> [{ id: mockUsers[0].id }, { id: mockUsers[1].id }];
             component.ngOnChanges({ 'preSelectUsers': change });
             fixture.detectChanges();
-            component.filterPreselectUsers().then((result) => {
+            component.filterPreselectUsers().then((result: any) => {
                 fixture.detectChanges();
                 expect(findByIdSpy).toHaveBeenCalled();
                 expect(component.userExists(result[0])).toEqual(true);
@@ -636,5 +655,20 @@ describe('PeopleCloudComponent', () => {
                 });
             });
         }));
+
+        it('should populate placeholder when title is present', () => {
+            fixture.detectChanges();
+            component.title = 'ADF_TASK_LIST.START_TASK.FORM.LABEL.ASSIGNEE';
+            const inputHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('mat-label');
+            fixture.detectChanges();
+            expect(inputHTMLElement.textContent).toEqual('ADF_TASK_LIST.START_TASK.FORM.LABEL.ASSIGNEE');
+        });
+
+        it('should not populate placeholder when title is present', () => {
+            fixture.detectChanges();
+            const inputHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('mat-label');
+            fixture.detectChanges();
+            expect(inputHTMLElement.textContent).toEqual('');
+        });
     });
 });

lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.ts

@@ -71,6 +71,11 @@ export class PeopleCloudComponent implements OnInit, OnChanges {
     @Input()
     preSelectUsers: IdentityUserModel[];
 
+    /** Placeholder translation key
+     */
+    @Input()
+    title: string;
+
     /** Emitted when a user is selected. */
     @Output()
     selectUser: EventEmitter<IdentityUserModel> = new EventEmitter<IdentityUserModel>();

lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.html

@@ -64,6 +64,7 @@
                     [appName]="appName"
                     [preSelectUsers]="[currentUser]"
                     (selectUser)="onAssigneeSelect($event)"
+                    [title]="'ADF_TASK_LIST.START_TASK.FORM.LABEL.ASSIGNEE'"
                     (removeUser)="onAssigneeRemove()"></adf-cloud-people>
             </div>