[ADF- 4871][TaskHeaderCloudComponent] Add Candidate Users/Groups properties (#5189)

* [ADF-4871] [TaskHeaderCloudComponent] Add Candidate Users/Groups properties

* Added Candidate users/groups properties to the task heade cloud component.

* * Created CardViewArrayItemComponent
* Modified FullName pipe to return username or email incase fullname missing.
* Added candidate Users/Groups properties to the taskcloudheader component.
* Added two service into task-cloudservice
* Updated Demoshell card-view with new widget

* * Fixed failing unit test

* * Fixed comments.

* * Refactored CardViewArrayItem model
* Fixed comments.

* * Changed candidate group icon

demo-shell/src/app/components/card-view/card-view.component.ts

@@ -28,7 +28,8 @@ import {
     CardViewUpdateService,
     CardViewMapItemModel,
     UpdateNotification,
-    DecimalNumberPipe
+    DecimalNumberPipe,
+    CardViewArrayItemModel
 } from '@alfresco/adf-core';
 import { of, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -148,6 +149,14 @@ export class CardViewComponent implements OnInit, OnDestroy {
                 clickCallBack: () => {
                     this.respondToCardClick();
                 }
+            }),
+            new CardViewArrayItemModel({
+                label: 'CardView Array of items',
+                value: of(['Zlatan', 'Lionel Messi', 'Mohamed', 'Ronaldo']),
+                key: 'array',
+                icon: 'directions_bike',
+                default: 'Empty',
+                noOfItemsToDisplay: 2
             })
         ];
     }

docs/core/components/card-view.component.md

@@ -87,6 +87,14 @@ Defining properties from Typescript:
         options$: of([{ key: 'one', label: 'One' }, { key: 'two', label: 'Two' }]),
         key: 'select'
     }),
+    new CardViewArrayItemModel({
+        label: 'Array of items',
+        value: '',
+        items$: of(['One', 'Two', 'Three', 'Four']),
+        key: 'array',
+        default: 'Empty',
+        noOfItemsToDisplay: 2
+    })
     ...
 ]
 ```
@@ -116,6 +124,7 @@ You define the property list, the [`CardViewComponent`](../../core/components/ca
 -   [**CardViewFloatItemModel**](#card-float-item) - _for float items_
 -   [**CardViewKeyValuePairsItemModel**](#card-key-value-pairs-item) - _for key-value-pairs items_
 -   [**CardViewSelectItemModel**](#card-select-item) - _for select items_
+-   [**CardViewArrayItemModel**](#card-array-item) - _for array items_
 
 Each of these types implements the [Card View Item interface](../interfaces/card-view-item.interface.md):
 
@@ -336,6 +345,21 @@ const selectItemProperty = new CardViewSelectItemModel(options);
 | value | string |  | The original data value for the item |
 | options$\* | [`Observable`](http://reactivex.io/documentation/observable.html)<[`CardViewSelectItemOption`](../../../lib/core/card-view/interfaces/card-view-selectitem-properties.interface.ts)\[]> |  | The original data value for the item |
 
+#### Card Array Item
+
+[`CardViewArrayItemModel`](../../../lib/core/card-view/models/card-view-arrayitem.model.ts) is a property type for array properties.
+
+```ts
+const arrayItemProperty = new CardViewArrayItemModel(items);
+```
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| label\* | string |  | Item label |
+| key\* | string |  | Identifying key (important when editing the item) |
+| editable | boolean | false | Toggles whether the item is editable |
+| value | [`Observable`](http://reactivex.io/documentation/observable.html)<`string`\[]> |  | The original data value for the item |
+
 ## See also
 
 -   [Card View Update service](../services/card-view-update.service.md)

docs/process-services-cloud/components/task-header-cloud.component.md

@@ -43,7 +43,7 @@ The component populates an internal array of
 
 By default all properties are displayed:
 
-**_assignee_**, **_status_**, **_priority_**, **_dueDate_**, **_category_**, **_parentName_**, **_created_**, **_id_**, **_description_**, **_formName_**.
+**_assignee_**, **_status_**, **_priority_**, **_dueDate_**, **_category_**, **_parentName_**, **_created_**, **_id_**, **_description_**, **_formName_**, **_candidateUsers_**, **_candidateGroups_**.
 
 However, you can also choose which properties to show using a configuration in `app.config.json`:
 

lib/core/card-view/card-view.module.scss

@@ -1,3 +1,4 @@
+@import './components/card-view-arrayitem/card-view-arrayitem.component';
 @import './components/card-view-dateitem/card-view-dateitem.component';
 @import './components/card-view-textitem/card-view-textitem.component';
 @import './components/card-view/card-view.component';
@@ -8,4 +9,5 @@
     @include adf-card-view-textitem-theme($theme);
     @include adf-card-view-theme($theme);
     @include mat-datetimepicker-theme($theme);
+    @include adf-card-view-array-item-theme($theme);
 }

lib/core/card-view/card-view.module.ts

@@ -26,7 +26,10 @@ import {
     MatInputModule,
     MatCheckboxModule,
     MatNativeDateModule,
-    MatSelectModule
+    MatSelectModule,
+    MatChipsModule,
+    MatMenuModule,
+    MatCardModule
 } from '@angular/material';
 import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -41,6 +44,7 @@ import { CardViewMapItemComponent } from './components/card-view-mapitem/card-vi
 import { CardViewTextItemComponent } from './components/card-view-textitem/card-view-textitem.component';
 import { CardViewKeyValuePairsItemComponent } from './components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component';
 import { CardViewSelectItemComponent } from './components/card-view-selectitem/card-view-selectitem.component';
+import { CardViewArrayItemComponent } from './components/card-view-arrayitem/card-view-arrayitem.component';
 
 @NgModule({
     imports: [
@@ -56,6 +60,9 @@ import { CardViewSelectItemComponent } from './components/card-view-selectitem/c
         MatIconModule,
         MatSelectModule,
         MatButtonModule,
+        MatChipsModule,
+        MatMenuModule,
+        MatCardModule,
         MatDatetimepickerModule,
         MatNativeDatetimeModule
     ],
@@ -68,7 +75,8 @@ import { CardViewSelectItemComponent } from './components/card-view-selectitem/c
         CardViewKeyValuePairsItemComponent,
         CardViewSelectItemComponent,
         CardViewItemDispatcherComponent,
-        CardViewContentProxyDirective
+        CardViewContentProxyDirective,
+        CardViewArrayItemComponent
     ],
     entryComponents: [
         CardViewBoolItemComponent,
@@ -76,7 +84,8 @@ import { CardViewSelectItemComponent } from './components/card-view-selectitem/c
         CardViewMapItemComponent,
         CardViewTextItemComponent,
         CardViewSelectItemComponent,
-        CardViewKeyValuePairsItemComponent
+        CardViewKeyValuePairsItemComponent,
+        CardViewArrayItemComponent
     ],
     exports: [
         CardViewComponent,
@@ -85,7 +94,8 @@ import { CardViewSelectItemComponent } from './components/card-view-selectitem/c
         CardViewMapItemComponent,
         CardViewTextItemComponent,
         CardViewSelectItemComponent,
-        CardViewKeyValuePairsItemComponent
+        CardViewKeyValuePairsItemComponent,
+        CardViewArrayItemComponent
     ]
 })
 export class CardViewModule {}

lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html

@@ -0,0 +1,49 @@
+
+<div [attr.data-automation-id]="'card-array-label-' + property.key" class="adf-property-label">{{ property.label | translate }}</div>
+<div class="adf-property-value" (click)="clicked()">
+    <ng-container *ngIf="(property.displayValue | async) as items; else elseEmptyValueBlock">
+        <mat-chip-list *ngIf="items.length > 0; else elseEmptyValueBlock" data-automation-id="card-arrayitem-chip-list-container">
+            <ng-container *ngIf="displayCount() > 0; else withOutDisplayCount" >
+                <mat-chip
+                    *ngFor="let item of items.slice(0, displayCount())"
+                    (click)="clicked()"
+                    [attr.data-automation-id]="'card-arrayitem-chip-' + item">
+                    <mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
+                    <span>{{item}}</span>
+                </mat-chip>
+                <mat-chip
+                    *ngIf="items.length > displayCount()"
+                    data-automation-id="card-arrayitem-more-chip"
+                    [matMenuTriggerFor]="menu">
+                    <span>{{items.length - displayCount()}} {{'CORE.CARDVIEW.MORE' | translate}}</span>
+                </mat-chip>
+            </ng-container>
+            <ng-template #withOutDisplayCount>
+                <mat-chip
+                    *ngFor="let item of items"
+                    (click)="clicked()"
+                    [attr.data-automation-id]="'card-arrayitem-chip-' + item">
+                    <mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
+                    <span>{{item}}</span>
+                </mat-chip>
+            </ng-template>
+        </mat-chip-list>
+        <mat-menu #menu="matMenu">
+            <mat-card class="adf-array-item-more-chip-container">
+                <mat-card-content>
+                    <mat-chip-list>
+                        <mat-chip (click)="clicked()"
+                            *ngFor="let item of items.slice(displayCount(), items.length)"
+                            [attr.data-automation-id]="'card-arrayitem-chip-' + item">
+                        <mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
+                        <span>{{item}}</span>
+                        </mat-chip>
+                    </mat-chip-list>
+                </mat-card-content>
+            </mat-card>
+        </mat-menu>
+    </ng-container>
+    <ng-template #elseEmptyValueBlock>
+        <span  data-automation-id="card-arrayitem-default">{{ property.default | translate }}</span>
+    </ng-template>
+</div>

lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss

@@ -0,0 +1,33 @@
+@mixin adf-card-view-array-item-theme($theme) {
+
+    .adf {
+        &-array-item-icon {
+            font-size: 16px;
+            padding-top: 8px;
+        }
+
+        &-array-item-more-chip-container {
+            &.mat-card {
+                box-shadow: none;
+            }
+
+            &.mat-card {
+                max-height: 300px;
+                overflow-y: auto;
+            }
+
+            .mat-chip {
+                cursor: pointer;
+            }
+        }
+
+        &-property-value {
+            .mat-chip-list {
+                cursor: pointer;
+            }
+            .mat-chip {
+                cursor: pointer;
+            }
+        }
+    }
+}

lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.spec.ts

@@ -0,0 +1,107 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { of } from 'rxjs';
+import { setupTestBed } from '../../../testing/setupTestBed';
+import { CoreTestingModule } from '../../../testing/core.testing.module';
+import { CardViewArrayItemComponent } from './card-view-arrayitem.component';
+import { CardViewArrayItemModel } from '../../models/card-view-arrayitem.model';
+import { By } from '@angular/platform-browser';
+
+describe('CardViewArrayItemComponent', () => {
+    let component: CardViewArrayItemComponent;
+    let fixture: ComponentFixture<CardViewArrayItemComponent>;
+
+    const mockData = ['Zlatan', 'Lionel Messi', 'Mohamed', 'Ronaldo'];
+    const mockDefaultProps = {
+        label: 'Array of items',
+        value: of(mockData),
+        key: 'array',
+        icon: 'person'
+    };
+    setupTestBed({
+        imports: [CoreTestingModule]
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CardViewArrayItemComponent);
+        component = fixture.componentInstance;
+        component.property = new CardViewArrayItemModel(mockDefaultProps);
+    });
+
+    it('should create CardViewArrayItemComponent', () => {
+        expect(component instanceof CardViewArrayItemComponent).toBeTruthy();
+    });
+
+    describe('Rendering', () => {
+        it('should render the label', () => {
+            fixture.detectChanges();
+
+            const labelValue = fixture.debugElement.query(By.css('.adf-property-label'));
+            expect(labelValue).not.toBeNull();
+            expect(labelValue.nativeElement.innerText).toBe('Array of items');
+        });
+
+        it('should render chip list', () => {
+            component.property = new CardViewArrayItemModel({
+                ...mockDefaultProps,
+                editable: true
+            });
+            fixture.detectChanges();
+
+            const chiplistContainer = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-chip-list-container"]'));
+            const chip1 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-Zlatan"] span');
+            const chip2 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-Lionel Messi"] span');
+
+            expect(chiplistContainer).not.toBeNull();
+            expect(chip1.innerText).toEqual('Zlatan');
+            expect(chip2.innerText).toEqual('Lionel Messi');
+        });
+
+        it('should render all values if noOfItemsToDisplay is not defined', () => {
+            fixture.detectChanges();
+
+            const chiplistContainer = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-chip-list-container"]'));
+            const moreElement = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-more-chip"]'));
+            const chip = fixture.nativeElement.querySelectorAll('mat-chip');
+
+            expect(chiplistContainer).not.toBeNull();
+            expect(moreElement).toBeNull();
+            expect(chip.length).toBe(4);
+        });
+
+        it('should render only two values along with more item chip if noOfItemsToDisplay is set to 2', () => {
+            component.property = new CardViewArrayItemModel({
+                ...mockDefaultProps,
+                noOfItemsToDisplay: 2
+            });
+            fixture.detectChanges();
+
+            const chiplistContainer = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-chip-list-container"]'));
+            const chip = fixture.debugElement.queryAll(By.css('mat-chip'));
+
+            expect(chiplistContainer).not.toBeNull();
+            expect(chip.length).toBe(3);
+            expect(chip[2].nativeElement.innerText).toBe('2 CORE.CARDVIEW.MORE');
+        });
+    });
+});

lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts

@@ -0,0 +1,46 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input } from '@angular/core';
+import { CardViewArrayItemModel } from '../../models/card-view-arrayitem.model';
+import { CardViewUpdateService } from '../../services/card-view-update.service';
+
+@Component({
+  selector: 'adf-card-view-arrayitem',
+  templateUrl: './card-view-arrayitem.component.html',
+  styleUrls: ['./card-view-arrayitem.component.scss']
+})
+export class CardViewArrayItemComponent {
+
+    /** The CardViewArrayItemModel of data used to populate the cardView array items. */
+    @Input()
+    property: CardViewArrayItemModel;
+
+    constructor(private cardViewUpdateService: CardViewUpdateService) {}
+
+    clicked(): void {
+        this.cardViewUpdateService.clicked(this.property);
+    }
+
+    hasIcon(): boolean {
+        return !!this.property.icon;
+    }
+
+    displayCount(): number {
+        return this.property.noOfItemsToDisplay ? this.property.noOfItemsToDisplay : 0;
+    }
+}

lib/core/card-view/components/card-view.components.ts

@@ -23,3 +23,4 @@ export * from './card-view-mapitem/card-view-mapitem.component';
 export * from './card-view-textitem/card-view-textitem.component';
 export * from './card-view-selectitem/card-view-selectitem.component';
 export * from './card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component';
+export * from  './card-view-arrayitem/card-view-arrayitem.component';

lib/core/card-view/interfaces/card-view-arrayitem-properties.interface.ts

@@ -0,0 +1,22 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CardViewItemProperties } from './card-view-item-properties.interface';
+
+export interface CardViewArrayItemProperties extends CardViewItemProperties {
+    noOfItemsToDisplay?: number;
+}

lib/core/card-view/models/card-view-arrayitem.model.ts

@@ -0,0 +1,38 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CardViewItem } from '../interfaces/card-view-item.interface';
+import { DynamicComponentModel } from '../../services/dynamic-component-mapper.service';
+import { CardViewBaseItemModel } from './card-view-baseitem.model';
+import { Observable } from 'rxjs';
+import { CardViewArrayItemProperties } from '../interfaces/card-view-arrayitem-properties.interface';
+
+export class CardViewArrayItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
+
+    type: string = 'array';
+    value: Observable<string[]>;
+    noOfItemsToDisplay: number;
+
+    constructor(cardViewArrayItemProperties: CardViewArrayItemProperties) {
+        super(cardViewArrayItemProperties);
+        this.noOfItemsToDisplay = cardViewArrayItemProperties.noOfItemsToDisplay;
+    }
+
+    get displayValue(): Observable<string[]> {
+        return this.value;
+    }
+}

lib/core/card-view/models/card-view.models.ts

@@ -25,3 +25,4 @@ export * from './card-view-mapitem.model';
 export * from './card-view-textitem.model';
 export * from './card-view-keyvaluepairs.model';
 export * from './card-view-selectitem.model';
+export * from './card-view-arrayitem.model';

lib/core/card-view/public-api.ts

@@ -22,7 +22,8 @@ export {
     CardViewMapItemComponent,
     CardViewTextItemComponent,
     CardViewSelectItemComponent,
-    CardViewKeyValuePairsItemComponent
+    CardViewKeyValuePairsItemComponent,
+    CardViewArrayItemComponent
 } from './components/card-view.components';
 
 export * from './interfaces/card-view.interfaces';

lib/core/card-view/services/card-item-types.service.ts

@@ -23,6 +23,7 @@ import { CardViewSelectItemComponent } from '../components/card-view-selectitem/
 import { CardViewBoolItemComponent } from '../components/card-view-boolitem/card-view-boolitem.component';
 import { CardViewKeyValuePairsItemComponent } from '../components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component';
 import { DynamicComponentMapper, DynamicComponentResolveFunction, DynamicComponentResolver } from '../../services/dynamic-component-mapper.service';
+import { CardViewArrayItemComponent } from '../components/card-view-arrayitem/card-view-arrayitem.component';
 
 @Injectable({
     providedIn: 'root'
@@ -40,6 +41,7 @@ export class CardItemTypeService extends DynamicComponentMapper {
         'datetime': DynamicComponentResolver.fromType(CardViewDateItemComponent),
         'bool': DynamicComponentResolver.fromType(CardViewBoolItemComponent),
         'map': DynamicComponentResolver.fromType(CardViewMapItemComponent),
-        'keyvaluepairs': DynamicComponentResolver.fromType(CardViewKeyValuePairsItemComponent)
+        'keyvaluepairs': DynamicComponentResolver.fromType(CardViewKeyValuePairsItemComponent),
+        'array': DynamicComponentResolver.fromType(CardViewArrayItemComponent)
     };
 }

lib/core/i18n/en.json

@@ -175,7 +175,8 @@
       "VALIDATORS": {
         "FLOAT_VALIDATION_ERROR": "Use a number format",
         "INT_VALIDATION_ERROR": "Use an integer format"
-      }
+      },
+      "MORE": "More"
     },
     "METADATA": {
       "BASIC": {

lib/core/pipes/full-name.pipe.spec.ts

@@ -45,4 +45,14 @@ describe('FullNamePipe', () => {
         const user = {firstName : 'Abc', lastName : 'Xyz'};
         expect(pipe.transform(user)).toBe('Abc Xyz');
     });
+
+    it('should return username when firstName and lastName are not available', () => {
+        const user = {firstName : '', lastName : '', username: 'username'};
+        expect(pipe.transform(user)).toBe('username');
+    });
+
+    it('should return user eamil when firstName, lastName and username are not available', () => {
+        const user = {firstName : '', lastName : '', username: '', email: 'abcXyz@gmail.com'};
+        expect(pipe.transform(user)).toBe('abcXyz@gmail.com');
+    });
 });

lib/core/pipes/full-name.pipe.ts

@@ -29,6 +29,9 @@ export class FullNamePipe implements PipeTransform {
                 fullName += fullName.length > 0 ? ' ' : '';
                 fullName += user.lastName;
             }
+            if (!fullName) {
+                fullName += user.username ? user.username : user.email ? user.email : '';
+            }
         }
         return fullName;
     }

lib/process-services-cloud/src/lib/i18n/en.json

@@ -208,7 +208,11 @@
       "DESCRIPTION": "Description",
       "DESCRIPTION_DEFAULT": "No description",
       "FORM_NAME": "Form Name",
-      "FORM_NAME_DEFAULT": "No form"
+      "FORM_NAME_DEFAULT": "No form",
+      "CANDIDATE_USERS": "Candidate Users",
+      "CANDIDATE_USERS_DEFAULT": "No Candidate Users",
+      "CANDIDATE_GROUPS": "Candidate Groups",
+      "CANDIDATE_GROUPS_DEFAULT": "No Candidate Groups"
     },
     "FORM_VALIDATION": {
         "INVALID_FIELD": "Enter a different value"

lib/process-services-cloud/src/lib/task/services/task-cloud.service.spec.ts

@@ -60,6 +60,26 @@ describe('Task Cloud Service', () => {
         };
     }
 
+    function returnFakeCandidateUsersResults() {
+        return {
+            oauth2Auth: {
+                callCustomApi : () => {
+                    return Promise.resolve(['mockuser1', 'mockuser2', 'mockuser3']);
+                }
+            }
+        };
+    }
+
+    function returnFakeCandidateGroupResults() {
+        return {
+            oauth2Auth: {
+                callCustomApi : () => {
+                    return Promise.resolve(['mockgroup1', 'mockgroup2', 'mockgroup3']);
+                }
+            }
+        };
+    }
+
     setupTestBed({
         imports: [
             CoreModule.forRoot()
@@ -312,4 +332,76 @@ describe('Task Cloud Service', () => {
                 done();
             });
     });
+
+    it('should return the candidate users by appName and taskId', (done) => {
+        const appName = 'taskp-app';
+        const taskId = '68d54a8f';
+        spyOn(alfrescoApiMock, 'getInstance').and.callFake(returnFakeCandidateUsersResults);
+        service.getCandidateUsers(appName, taskId).subscribe((res: string[]) => {
+            expect(res).toBeDefined();
+            expect(res).not.toBeNull();
+            expect(res.length).toBe(3);
+            expect(res[0]).toBe('mockuser1');
+            expect(res[1]).toBe('mockuser2');
+            done();
+        });
+    });
+
+    it('should log message and return empty array if appName is not defined when fetching candidate users', (done) => {
+        const appName = null;
+        const taskId = '68d54a8f';
+        spyOn(alfrescoApiMock, 'getInstance').and.callFake(returnFakeCandidateUsersResults);
+        service.getCandidateUsers(appName, taskId).subscribe(
+            (res: any[]) => {
+                expect(res.length).toBe(0);
+                done();
+            });
+    });
+
+    it('should log message and return empty array if taskId is not defined when fetching candidate users', (done) => {
+        const appName = 'task-app';
+        const taskId = null;
+        spyOn(alfrescoApiMock, 'getInstance').and.callFake(returnFakeCandidateUsersResults);
+        service.getCandidateUsers(appName, taskId).subscribe(
+            (res: any[]) => {
+                expect(res.length).toBe(0);
+                done();
+            });
+    });
+
+    it('should return the candidate groups by appName and taskId', (done) => {
+        const appName = 'taskp-app';
+        const taskId = '68d54a8f';
+        spyOn(alfrescoApiMock, 'getInstance').and.callFake(returnFakeCandidateGroupResults);
+        service.getCandidateGroups(appName, taskId).subscribe((res: string[]) => {
+            expect(res).toBeDefined();
+            expect(res).not.toBeNull();
+            expect(res.length).toBe(3);
+            expect(res[0]).toBe('mockgroup1');
+            expect(res[1]).toBe('mockgroup2');
+            done();
+        });
+    });
+
+    it('should log message and return empty array if appName is not defined when fetching candidate groups', (done) => {
+        const appName = null;
+        const taskId = '68d54a8f';
+        spyOn(alfrescoApiMock, 'getInstance').and.callFake(returnFakeCandidateGroupResults);
+        service.getCandidateGroups(appName, taskId).subscribe(
+            (res: any[]) => {
+                expect(res.length).toBe(0);
+                done();
+            });
+    });
+
+    it('should log message and return empty array if taskId is not defined when fetching candidate groups', (done) => {
+        const appName = 'task-app';
+        const taskId = null;
+        spyOn(alfrescoApiMock, 'getInstance').and.callFake(returnFakeCandidateGroupResults);
+        service.getCandidateGroups(appName, taskId).subscribe(
+            (res: any[]) => {
+                expect(res.length).toBe(0);
+                done();
+            });
+    });
 });

lib/process-services-cloud/src/lib/task/services/task-cloud.service.ts

@@ -17,7 +17,7 @@
 
 import { Injectable } from '@angular/core';
 import { AlfrescoApiService, LogService, AppConfigService, IdentityUserService } from '@alfresco/adf-core';
-import { from, throwError, Observable } from 'rxjs';
+import { from, throwError, Observable, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { TaskDetailsCloudModel, StartTaskCloudResponseModel } from '../start-task/models/task-details-cloud.model';
 import { BaseCloudService } from '../../services/base-cloud.service';
@@ -246,6 +246,60 @@ export class TaskCloudService extends BaseCloudService {
         }
     }
 
+    /**
+     * Gets candidate users of the task.
+     * @param appName Name of the app
+     * @param taskId ID of the task
+     * @returns Candidate users
+     */
+    getCandidateUsers(appName: string, taskId: string): Observable<string[]> {
+        if ((appName || appName === '') && taskId) {
+            const queryUrl = `${this.getBasePath(appName)}/query/v1/tasks/${taskId}/candidate-users`;
+            return from(this.apiService.getInstance()
+                .oauth2Auth.callCustomApi(queryUrl, 'GET',
+                    null, null, null,
+                    null, null,
+                    this.contentTypes, this.accepts,
+                    this.returnType, null, null)
+            ).pipe(
+                map((response: string[]) => {
+                    return response;
+                }),
+                catchError((err) => this.handleError(err))
+            );
+        } else {
+            this.logService.error('AppName and TaskId are mandatory to get candidate user');
+            return of([]);
+        }
+    }
+
+    /**
+     * Gets candidate groups of the task.
+     * @param appName Name of the app
+     * @param taskId ID of the task
+     * @returns Candidate groups
+     */
+    getCandidateGroups(appName: string, taskId: string): Observable<string[]> {
+        if ((appName || appName === '') && taskId) {
+            const queryUrl = `${this.getBasePath(appName)}/query/v1/tasks/${taskId}/candidate-groups`;
+            return from(this.apiService.getInstance()
+                .oauth2Auth.callCustomApi(queryUrl, 'GET',
+                    null, null, null,
+                    null, null,
+                    this.contentTypes, this.accepts,
+                    this.returnType, null, null)
+            ).pipe(
+                map((response: string[]) => {
+                    return response;
+                }),
+                catchError((err) => this.handleError(err))
+            );
+        } else {
+            this.logService.error('AppName and TaskId are mandatory to get candidate groups');
+            return of([]);
+        }
+    }
+
     private isAssignedToMe(assignee: string): boolean {
         const currentUser = this.identityUserService.getCurrentUserInfo().username;
         return assignee === currentUser;

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

@@ -32,8 +32,12 @@ describe('TaskHeaderCloudComponent', () => {
     let service: TaskCloudService;
     let appConfigService: AppConfigService;
     let identityUserService: IdentityUserService;
+    let getCandidateGroupsSpy: jasmine.Spy;
+    let getCandidateUsersSpy: jasmine.Spy;
 
     const identityUserMock = { username: 'testuser', firstName: 'fake-identity-first-name', lastName: 'fake-identity-last-name', email: 'fakeIdentity@email.com' };
+    const mockCandidateUsers = ['mockuser1', 'mockuser2', 'mockuser3'];
+    const mockCandidateGroups = ['mockgroup1', 'mockgroup2', 'mockgroup3'];
 
     setupTestBed({
         imports: [
@@ -53,6 +57,8 @@ describe('TaskHeaderCloudComponent', () => {
         identityUserService = TestBed.get(IdentityUserService);
         appConfigService = TestBed.get(AppConfigService);
         spyOn(service, 'getTaskById').and.returnValue(of(assignedTaskDetailsCloudMock));
+        getCandidateUsersSpy = spyOn(service, 'getCandidateUsers').and.returnValue(of(mockCandidateUsers));
+        getCandidateGroupsSpy = spyOn(service, 'getCandidateGroups').and.returnValue(of(mockCandidateGroups));
         spyOn(identityUserService, 'getCurrentUserInfo').and.returnValue(identityUserMock);
     });
 
@@ -151,6 +157,60 @@ describe('TaskHeaderCloudComponent', () => {
         });
     }));
 
+    it('should display candidate user', async(() => {
+        component.ngOnInit();
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            const candidateUser1 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockuser1"] span');
+            const candidateUser2 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockuser2"] span');
+            expect(getCandidateUsersSpy).toHaveBeenCalled();
+            expect(candidateUser1.innerText).toBe('mockuser1');
+            expect(candidateUser2.innerText).toBe('mockuser2');
+        });
+    }));
+
+    it('should display placeholder if no candidate users', async(() => {
+        component.ngOnInit();
+        getCandidateUsersSpy.and.returnValue(of([]));
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            const labelValue = fixture.debugElement.query(By.css('[data-automation-id="card-array-label-candidateUsers"]'));
+            const defaultElement = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-default"]'));
+            expect(labelValue.nativeElement.innerText).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_USERS');
+            expect(defaultElement.nativeElement.innerText).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_USERS_DEFAULT');
+        });
+
+    }));
+
+    it('should display candidate groups', async(() => {
+        component.ngOnInit();
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            const candidateGroup1 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockgroup1"] span');
+            const candidateGroup2 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockgroup2"] span');
+            expect(getCandidateGroupsSpy).toHaveBeenCalled();
+            expect(candidateGroup1.innerText).toBe('mockgroup1');
+            expect(candidateGroup2.innerText).toBe('mockgroup2');
+        });
+    }));
+
+    it('should display placeholder if no candidate groups', async(() => {
+        component.ngOnInit();
+        getCandidateGroupsSpy.and.returnValue(of([]));
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            const labelValue = fixture.debugElement.query(By.css('[data-automation-id="card-array-label-candidateGroups"]'));
+            const defaultElement = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-default"]'));
+            expect(labelValue.nativeElement.innerText).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_GROUPS');
+            expect(defaultElement.nativeElement.innerText).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_GROUPS_DEFAULT');
+        });
+
+    }));
+
     describe('Config Filtering', () => {
 
         it('should show only the properties from the configuration file', async(() => {

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

@@ -21,6 +21,7 @@ import {
     CardViewItem,
     CardViewTextItemModel,
     CardViewBaseItemModel,
+    CardViewArrayItemModel,
     TranslationService,
     AppConfigService,
     UpdateNotification,
@@ -29,7 +30,7 @@ import {
 import { TaskDetailsCloudModel, TaskStatusEnum } from '../../start-task/models/task-details-cloud.model';
 import { Router } from '@angular/router';
 import { TaskCloudService } from '../../services/task-cloud.service';
-import { Subject } from 'rxjs';
+import { Subject, Observable } from 'rxjs';
 import { NumericFieldValidator } from '../../../validators/numeric-field.validator';
 import { takeUntil } from 'rxjs/operators';
 
@@ -197,10 +198,38 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy {
                     multiline: true,
                     editable: true
                 }
+            ),
+            new CardViewArrayItemModel(
+                {
+                    label: 'ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_USERS',
+                    value: this.getCandidateUsers(),
+                    key: 'candidateUsers',
+                    icon: 'person',
+                    default: this.translationService.instant('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_USERS_DEFAULT'),
+                    noOfItemsToDisplay: 2
+                }
+            ),
+            new CardViewArrayItemModel(
+                {
+                    label: 'ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_GROUPS',
+                    value: this.getCandidateGroups(),
+                    key: 'candidateGroups',
+                    icon: 'group',
+                    default: this.translationService.instant('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_GROUPS_DEFAULT'),
+                    noOfItemsToDisplay: 2
+                }
             )
         ];
     }
 
+    private getCandidateUsers(): Observable<string[]> {
+        return this.taskCloudService.getCandidateUsers(this.appName, this.taskId);
+    }
+
+    private getCandidateGroups(): Observable<string[]> {
+        return this.taskCloudService.getCandidateGroups(this.appName, this.taskId);
+    }
+
     /**
      * Refresh the card data
      */