[AAE-3638] - implement priority drodpown widget (#6351)

* [AAE-3638] - implement priority drodpown widget

* refactor task cloud service function

* fix remove value on card view text item and move priorities values in app.config.json

* revert app config unnecary changes

* PR changes

* fix unit test

* fix more unit tests

* PR changes

* create task cloud response model

* remove commented code

* fix e2e

* fix start task e2e and add return type

demo-shell/src/app.config.json

@@ -1165,6 +1165,28 @@
       ]
     }
   },
+  "adf-cloud-priority-values": [
+    {
+      "key": "0",
+      "value": "0",
+      "label": "ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.NOT_SET"
+    },
+    {
+      "key": "1",
+      "value": "1",
+      "label": "ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.LOW"
+    },
+    {
+      "key": "2",
+      "value": "2",
+      "label": "ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.NORMAL"
+    },
+    {
+      "key": "3",
+      "value": "3",
+      "label": "ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.HIGH"
+    }
+  ],
   "alfresco-deployed-apps": [
     {
       "name": "candidatebaseapp"

e2e/process-services-cloud/start-task/start-task-custom-app-cloud.e2e.ts

@@ -151,7 +151,7 @@ describe('Start Task', () => {
         await startTask.addName(standaloneTaskName);
         await startTask.addDescription('descriptions');
         await startTask.addDueDate('12/12/2018');
-        await startTask.addPriority('50');
+        await startTask.addPriority('Normal');
         await startTask.clickStartButton();
         await tasksCloudDemoPage.taskListCloudComponent().checkContentIsDisplayedByName(standaloneTaskName);
     });

e2e/process-services-cloud/task-header-cloud.e2e.ts

@@ -26,7 +26,6 @@ import {
     StringUtil,
     TaskHeaderCloudPage,
     TasksService,
-    StartTasksCloudPage,
     PeopleCloudComponentPage
 } from '@alfresco/adf-testing';
 import { browser } from 'protractor';
@@ -46,7 +45,6 @@ describe('Task Header cloud component', () => {
     const navigationBarPage = new NavigationBarPage();
     const appListCloudComponent = new AppListCloudPage();
     const tasksCloudDemoPage = new TasksCloudDemoPage();
-    const startTaskCloudPage = new StartTasksCloudPage();
     const peopleCloudComponentPage = new PeopleCloudComponentPage();
     const taskHeaderCloudPage = new TaskHeaderCloudPage();
 
@@ -70,7 +68,7 @@ describe('Task Header cloud component', () => {
     let groupInfo: any;
     let testUser: any;
     let unclaimedTask: any;
-    const priority = 30;
+    const priority = 0; // Not set
     const description = 'descriptionTask';
     const formatDate = 'MMM D, YYYY';
     const dateTimeFormat = 'MMM D, Y, H:mm';
@@ -148,7 +146,7 @@ describe('Task Header cloud component', () => {
         await expect(await taskHeaderCloudPage.getDescription())
             .toEqual(isValueInvalid(basicCreatedTask.entry.description) ? CONSTANTS.TASK_DETAILS.NO_DESCRIPTION : basicCreatedTask.entry.description);
         await expect(await taskHeaderCloudPage.getStatus()).toEqual('ASSIGNED');
-        await expect(await taskHeaderCloudPage.getPriority()).toEqual(basicCreatedTask.entry.priority.toString());
+        await expect(await taskHeaderCloudPage.getPriority()).toEqual('Not set');
         await expect(await taskHeaderCloudPage.getCategory()).toEqual(!basicCreatedTask.entry.category ?
             CONSTANTS.TASK_DETAILS.NO_CATEGORY : basicCreatedTask.entry.category);
         await expect(await taskHeaderCloudPage.getDueDate()).toEqual(isValueInvalid(basicCreatedTask.entry.dueDate) ?
@@ -172,7 +170,7 @@ describe('Task Header cloud component', () => {
         await expect(await taskHeaderCloudPage.getDescription())
             .toEqual(isValueInvalid(completedTask.entry.description) ? CONSTANTS.TASK_DETAILS.NO_DESCRIPTION : completedTask.entry.description);
         await expect(await taskHeaderCloudPage.getStatus()).toEqual('COMPLETED');
-        await expect(await taskHeaderCloudPage.getPriority()).toEqual(completedTask.entry.priority.toString());
+        await expect(await taskHeaderCloudPage.getReadonlyPriority()).toEqual('Not set');
         await expect(await taskHeaderCloudPage.getCategory()).toEqual(!completedTask.entry.category ?
             CONSTANTS.TASK_DETAILS.NO_CATEGORY : completedTask.entry.category);
         await expect(await taskHeaderCloudPage.getDueDate()).toEqual(isValueInvalid(completedTask.entry.dueDate) ?
@@ -196,7 +194,7 @@ describe('Task Header cloud component', () => {
         await expect(await taskHeaderCloudPage.getDescription())
             .toEqual(isValueInvalid(subTask.entry.description) ? CONSTANTS.TASK_DETAILS.NO_DESCRIPTION : subTask.entry.description);
         await expect(await taskHeaderCloudPage.getStatus()).toEqual('ASSIGNED');
-        await expect(await taskHeaderCloudPage.getPriority()).toEqual(subTask.entry.priority.toString());
+        await expect(await taskHeaderCloudPage.getPriority()).toEqual('Not set');
         await expect(await taskHeaderCloudPage.getCategory()).toEqual(!subTask.entry.category ?
             CONSTANTS.TASK_DETAILS.NO_CATEGORY : subTask.entry.category);
         await expect(await taskHeaderCloudPage.getDueDate()).toEqual(isValueInvalid(subTask.entry.dueDate) ? CONSTANTS.TASK_DETAILS.NO_DATE : subTaskCreatedDate);
@@ -208,30 +206,6 @@ describe('Task Header cloud component', () => {
             .toEqual(isValueInvalid(subTask.entry.parentTaskId) ? '' : subTask.entry.parentTaskId);
     });
 
-    it('[C309698] Should validate the Priority field', async () => {
-        const myTaskName = `Test_C309698_${StringUtil.generateRandomString()}`;
-        await tasksCloudDemoPage.clickStartNewTaskButton();
-        await startTaskCloudPage.addName(myTaskName);
-        await startTaskCloudPage.typePriorityOf('50');
-        await startTaskCloudPage.clickStartButton();
-        await tasksCloudDemoPage.taskFilterCloudComponent.clickTaskFilter('my-tasks');
-        await tasksCloudDemoPage.taskListCloudComponent().getDataTable().waitTillContentLoaded();
-
-        await tasksCloudDemoPage.taskListCloudComponent().checkContentIsDisplayedByName(myTaskName);
-        await tasksCloudDemoPage.taskListCloudComponent().selectRow(myTaskName);
-        await tasksCloudDemoPage.waitTillContentLoaded();
-
-        await taskHeaderCloudPage.checkTaskPropertyListIsDisplayed();
-
-        await taskHeaderCloudPage.priorityCardTextItem.enterTextField('$$%£W21');
-        const errorMessage = await taskHeaderCloudPage.priorityCardTextItem.getErrorMessage();
-        await expect(errorMessage).toBe('Enter a different value');
-
-        await taskHeaderCloudPage.priorityCardTextItem.enterTextField('600');
-        const currentValue = await taskHeaderCloudPage.priorityCardTextItem.getFieldValue();
-        await expect(currentValue).toBe('600');
-    });
-
     it('[C309698] Should validate the Priority field', async () => {
         await tasksCloudDemoPage.editTaskFilterCloud.openFilter();
         await tasksCloudDemoPage.editTaskFilterCloud.setStatusFilterDropDown('ALL');
@@ -246,7 +220,7 @@ describe('Task Header cloud component', () => {
         const currentAssignee = await taskHeaderCloudPage.assigneeCardTextItem.getFieldValue();
         await expect(currentAssignee).toBe('No assignee');
 
-        await taskHeaderCloudPage.priorityCardTextItem.checkElementIsReadonly();
+        await taskHeaderCloudPage.priorityCardSelectItem.checkElementIsReadonly();
         await taskHeaderCloudPage.statusCardTextItem.checkElementIsReadonly();
     });
 

e2e/process-services-cloud/task-list-properties-sort.e2e.ts

@@ -41,7 +41,7 @@ describe('Edit task filters and task list properties', () => {
     const candidateBaseApp = browser.params.resources.ACTIVITI_CLOUD_APPS.CANDIDATE_BASE_APP.name;
     let createdTask, notDisplayedTask, priorityTask, subTask,
         otherOwnerTask, testUser, groupInfo;
-    const priority = 30;
+    const priority = 1;
 
     beforeAll(async () => {
         await apiService.loginWithProfile('identityAdmin');

e2e/process-services-cloud/task-list-properties.e2e.ts

@@ -48,7 +48,7 @@ describe('Edit task filters and task list properties', () => {
     const noTasksFoundMessage = 'No Tasks Found';
     let createdTask, notAssigned, notDisplayedTask, processDefinition, processInstance, priorityTask, subTask,
         otherOwnerTask, testUser, groupInfo, simpleTask;
-    const priority = 30;
+    const priority = 1;
 
     const beforeDate = moment().add(-1, 'days').format('DD/MM/YYYY');
     const currentDate = DateUtil.formatDate('DD/MM/YYYY');
@@ -184,14 +184,14 @@ describe('Edit task filters and task list properties', () => {
         });
 
         it('[C297482] Should be able to see only tasks with specific priority when priority is set', async () => {
-            await tasksCloudDemoPage.editTaskFilterCloudComponent().setPriority(priority);
+            await tasksCloudDemoPage.editTaskFilterCloudComponent().setPriority('Low');
 
             await tasksCloudDemoPage.taskListCloudComponent().checkContentIsDisplayedByName(priorityTask.entry.name);
             await tasksCloudDemoPage.taskListCloudComponent().checkContentIsNotDisplayedByName(createdTask.entry.name);
         });
 
         it('[C297687] Should be able to see No tasks found when typing unused value for priority field', async () => {
-            await tasksCloudDemoPage.editTaskFilterCloudComponent().setPriority('87650');
+            await tasksCloudDemoPage.editTaskFilterCloudComponent().setPriority('Normal');
 
             await expect(await tasksCloudDemoPage.taskListCloudComponent().getNoTasksFoundMessage()).toEqual(noTasksFoundMessage);
         });

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

@@ -4,7 +4,7 @@
     <div class="adf-property-field">
         <div *ngIf="!isEditable()"
             class="adf-select-item-padding adf-property-value"
-            data-automation-class="read-only-value">{{ property.displayValue | async }}</div>
+            data-automation-class="read-only-value">{{ (property.displayValue | async) | translate }}</div>
         <div *ngIf="isEditable()">
             <mat-form-field class="adf-select-item-padding-editable adf-property-value">
                 <mat-select [(value)]="value"

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

@@ -395,6 +395,7 @@ describe('CardViewTextItemComponent', () => {
         });
 
         it('should clear value when clear value icon is clicked', async () => {
+            spyOn(component, 'update');
             component.property.value = 'testValue';
             component.property.icon = 'FAKE_ICON';
             component.property.clickable = true;
@@ -411,6 +412,7 @@ describe('CardViewTextItemComponent', () => {
             fixture.detectChanges();
             const elementValue = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
             expect(elementValue.nativeElement.textContent).toEqual('');
+            expect(component.update).toHaveBeenCalled();
         });
     });
 

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

@@ -176,6 +176,7 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
     clearValue() {
         this.editedValue = '';
         this.textInput.setValue('');
+        this.update();
     }
 
     copyToClipboard(valueToCopy: string) {

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

@@ -73,7 +73,8 @@
           "CANDIDATE_GROUP": "Candidate Group",
           "FORM": "Form",
           "DATE": "Choose Date",
-          "NONE": "None"
+          "NONE": "None",
+          "PRIORITY": "Priority"
         },
         "ACTION": {
           "START": "Start",
@@ -92,7 +93,13 @@
       "DUE_DATE": "Due Date",
       "CREATED": "Created",
       "JSON_CELL": "Json",
-      "COMPLETED_BY": "Completed By"
+      "COMPLETED_BY": "Completed By",
+      "PRIORITY_VALUES": {
+        "NOT_SET": "Not set",
+        "LOW": "Low",
+        "NORMAL": "Normal",
+        "HIGH": "High"
+      }
     },
     "LIST": {
       "MESSAGES": {

lib/process-services-cloud/src/lib/task/models/task.model.ts

@@ -19,3 +19,16 @@ export enum ClaimTaskEnum {
     claim = 'claim',
     unclaim = 'unclaim'
 }
+
+export interface TaskPriorityOption {
+    label: string;
+    key: string;
+    value: string;
+}
+
+export const DEFAULT_TASK_PRIORITIES: TaskPriorityOption[] = [
+    { label: 'ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.NOT_SET', value: '0', key: '0' },
+    { label: 'ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.LOW', value: '1', key: '1' },
+    { label: 'ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.NORMAL', value: '2', key: '2' },
+    { label: 'ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.HIGH', value: '3', key: '3' }
+];

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

@@ -16,7 +16,7 @@
  */
 
 import { async, TestBed } from '@angular/core/testing';
-import { setupTestBed, IdentityUserService, StorageService, AlfrescoApiServiceMock, LogService, AppConfigService } from '@alfresco/adf-core';
+import { setupTestBed, IdentityUserService, TranslationService, AlfrescoApiService } from '@alfresco/adf-core';
 import { TaskCloudService } from './task-cloud.service';
 import { taskCompleteCloudMock } from '../task-header/mocks/fake-complete-task.mock';
 import { assignedTaskDetailsCloudMock, createdTaskDetailsCloudMock, emptyOwnerTaskDetailsCloudMock } from '../task-header/mocks/task-details-cloud.mock';
@@ -28,8 +28,9 @@ import { TranslateModule } from '@ngx-translate/core';
 describe('Task Cloud Service', () => {
 
     let service: TaskCloudService;
-    let alfrescoApiMock: AlfrescoApiServiceMock;
+    let alfrescoApiMock: AlfrescoApiService;
     let identityUserService: IdentityUserService;
+    let translateService: TranslationService;
 
     function returnFakeTaskCompleteResults() {
         return {
@@ -89,13 +90,12 @@ describe('Task Cloud Service', () => {
     });
 
     beforeEach(async(() => {
-        alfrescoApiMock = new AlfrescoApiServiceMock(new AppConfigService(null), new StorageService());
+        alfrescoApiMock = TestBed.inject(AlfrescoApiService);
         identityUserService = TestBed.inject(IdentityUserService);
+        translateService = TestBed.inject(TranslationService);
+        service = TestBed.inject(TaskCloudService);
+        spyOn(translateService, 'instant').and.callFake((key) => key ? `${key}_translated` : null);
         spyOn(identityUserService, 'getCurrentUserInfo').and.returnValue(cloudMockUser);
-        service = new TaskCloudService(alfrescoApiMock,
-                                           new AppConfigService(null),
-                                           new LogService(new AppConfigService(null)),
-                                           identityUserService);
 
     }));
 

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

@@ -16,13 +16,14 @@
  */
 
 import { Injectable } from '@angular/core';
-import { AlfrescoApiService, LogService, AppConfigService, IdentityUserService, CardViewArrayItem } from '@alfresco/adf-core';
+import { AlfrescoApiService, LogService, AppConfigService, IdentityUserService, CardViewArrayItem, TranslationService } from '@alfresco/adf-core';
 import { throwError, Observable, of, Subject } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { TaskDetailsCloudModel, StartTaskCloudResponseModel } from '../start-task/models/task-details-cloud.model';
 import { BaseCloudService } from '../../services/base-cloud.service';
 import { StartTaskCloudRequestModel } from '../start-task/models/start-task-cloud-request.model';
 import { ProcessDefinitionCloud } from '../../models/process-definition-cloud.model';
+import { DEFAULT_TASK_PRIORITIES, TaskPriorityOption } from '../models/task.model';
 
 @Injectable({
     providedIn: 'root'
@@ -36,6 +37,7 @@ export class TaskCloudService extends BaseCloudService {
         apiService: AlfrescoApiService,
         appConfigService: AppConfigService,
         private logService: LogService,
+        private translateService: TranslationService,
         private identityUserService: IdentityUserService
     ) {
         super(apiService, appConfigService);
@@ -280,6 +282,15 @@ export class TaskCloudService extends BaseCloudService {
         }
       }
 
+    getPriorityLabel(priority: number): string {
+        const priorityItem = this.priorities.find(item => item.value === priority.toString()) || this.priorities[0];
+        return this.translateService.instant(priorityItem.label);
+    }
+
+    get priorities(): TaskPriorityOption[] {
+        return this.appConfigService.get('adf-cloud-priority-values') || DEFAULT_TASK_PRIORITIES;
+    }
+
     private isAssignedToMe(assignee: string): boolean {
         const currentUser = this.identityUserService.getCurrentUserInfo().username;
         return assignee === currentUser;

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

@@ -33,10 +33,11 @@
                     </textarea>
                 </mat-form-field>
 
-                <mat-form-field fxFlex>
+                <mat-form-field fxFlex class="adf-cloud-priority-container">
-                    <div style="height: 40px;">
+                    <mat-label>{{ 'ADF_CLOUD_TASK_LIST.START_TASK.FORM.LABEL.PRIORITY' | translate }}</mat-label>
-                        <input matInput type="number" placeholder="Priority" formControlName="priority">
+                    <mat-select formControlName="priority">
-                    </div>
+                        <mat-option *ngFor="let priorityOption of priorities" [value]="priorityOption.value">{{ priorityOption.label | translate }}</mat-option>
+                    </mat-select>
                 </mat-form-field>
             </div>
             <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">

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

@@ -15,6 +15,10 @@
         }
     }
 
+    .adf-cloud-priority-container {
+        padding-top: 1.1em;
+    }
+
     .adf-cloud-date-error-container {
         position: absolute;
         height: 20px;

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

@@ -33,6 +33,7 @@ import { GroupCloudComponent } from '../../../group/components/group-cloud.compo
 import { TaskCloudService } from '../../services/task-cloud.service';
 import { StartTaskCloudRequestModel } from '../models/start-task-cloud-request.model';
 import { takeUntil } from 'rxjs/operators';
+import { TaskPriorityOption } from '../../models/task.model';
 
 @Component({
     selector: 'adf-cloud-start-task',
@@ -100,6 +101,8 @@ export class StartTaskCloudComponent implements OnInit, OnDestroy {
 
     formKey: string;
 
+    priorities: TaskPriorityOption[];
+
     private assigneeForm: AbstractControl = new FormControl('');
     private groupForm: AbstractControl = new FormControl('');
     private onDestroy$ = new Subject<boolean>();
@@ -119,6 +122,7 @@ export class StartTaskCloudComponent implements OnInit, OnDestroy {
             .subscribe(locale => this.dateAdapter.setLocale(locale));
         this.loadCurrentUser();
         this.buildForm();
+        this.loadDefaultPriorities();
     }
 
     ngOnDestroy() {
@@ -129,7 +133,7 @@ export class StartTaskCloudComponent implements OnInit, OnDestroy {
     buildForm() {
         this.taskForm = this.formBuilder.group({
             name: new FormControl(this.name, [Validators.required, Validators.maxLength(this.getMaxNameLength()), this.whitespaceValidator]),
-            priority: new FormControl(),
+            priority: new FormControl(''),
             description: new FormControl('', [this.whitespaceValidator]),
             formKey: new FormControl()
         });
@@ -145,6 +149,10 @@ export class StartTaskCloudComponent implements OnInit, OnDestroy {
         this.assigneeName = this.currentUser.username;
     }
 
+    private loadDefaultPriorities() {
+        this.priorities = this.taskService.priorities;
+    }
+
     public saveTask() {
         this.submitted = true;
         const newTask = Object.assign(this.taskForm.value);

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html

@@ -48,7 +48,7 @@
                                 <mat-option *ngFor="let propertyOption of taskFilterProperty.options"
                                             [value]="propertyOption.value"
                                             [attr.data-automation-id]="'adf-cloud-edit-task-property-options-' + taskFilterProperty.key">
-                                    {{ propertyOption.label }}
+                                    {{ propertyOption.label | translate }}
                                 </mat-option>
                             </mat-select>
                         </mat-form-field>
@@ -112,7 +112,7 @@
                                 (changedUsers)="onChangedUser($event, taskFilterProperty)"></adf-cloud-people>
                         </div>
 
-                        <adf-cloud-task-assignment-filter
+                        <adf-cloud-task-assignment-filter fxFlex="23%"
                             *ngIf="taskFilterProperty.type === 'assignment'"
                             [taskFilterProperty]="taskFilterProperty"
                             (assignedChange)="onAssignedChange($event)"

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter-cloud.component.ts

@@ -212,9 +212,10 @@ export class EditTaskFilterCloudComponent extends BaseEditTaskFilterCloudCompone
             },
             {
                 label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.PRIORITY',
-                type: 'text',
+                type: 'select',
                 key: 'priority',
-                value: this.taskFilter.priority || ''
+                value: this.taskFilter.priority || '',
+                options: this.taskCloudService.priorities
             },
             {
                 label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.OWNER',

lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row">
+<div class="adf-cloud-assignment-container" fxLayout="row">
     <mat-form-field>
         <mat-select class="adf-task-assignment-filter"
                     placeholder="{{ 'ADF_CLOUD_TASK_ASSIGNEMNT_FILTER.ASSIGNMENT_TYPE' | translate }}"

lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.scss

@@ -1,3 +1,11 @@
+.adf-cloud-assignment-container {
+    align-items: center;
+
+    mat-form-field {
+        width: 100%;
+    }
+}
+
 .adf-task-assignment-filter {
     margin-right: 10px;
 }
@@ -5,4 +13,5 @@
 .adf-group-cloud-filter {
     margin-left:15px;
     flex: 1;
+    width:100%;
 }

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

@@ -5,6 +5,7 @@
         <mat-card-content>
             <adf-card-view
                 *ngIf="!isLoading; else loadingTemplate"
+                [displayNoneOption]="false"
                 [properties]="properties"
                 [editable]="isTaskEditable()"
                 [displayClearAction]="displayDateClearAction">

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

@@ -33,6 +33,7 @@ import {
 } from '../mocks/task-details-cloud.mock';
 import moment from 'moment-es6';
 import { TranslateModule } from '@ngx-translate/core';
+import { MatSelectModule } from '@angular/material/select';
 
 describe('TaskHeaderCloudComponent', () => {
     let component: TaskHeaderCloudComponent;
@@ -58,7 +59,8 @@ describe('TaskHeaderCloudComponent', () => {
         imports: [
             TranslateModule.forRoot(),
             ProcessServiceCloudTestingModule,
-            TaskHeaderCloudModule
+            TaskHeaderCloudModule,
+            MatSelectModule
         ]
     });
 
@@ -122,32 +124,21 @@ describe('TaskHeaderCloudComponent', () => {
             expect(statusEl.nativeElement.value).toBe('ASSIGNED');
         });
 
-        it('should display priority', async () => {
+        it('should display priority with default values', async () => {
             fixture.detectChanges();
 
-            await fixture.whenStable();
+            const priorityEl = fixture.debugElement.nativeElement.querySelector('[data-automation-id="header-priority"] .mat-select-trigger');
-            fixture.detectChanges();
+            expect(priorityEl).toBeDefined();
-            const priorityEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-priority"]'));
+            expect(priorityEl).not.toBeNull();
-            expect(priorityEl.nativeElement.value).toBe('5');
-        });
 
-        it('should display error if priority is not a number', async (done) => {
+            priorityEl.click();
-            fixture.detectChanges();
-            await fixture.whenStable();
             fixture.detectChanges();
 
-            const formPriorityEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-priority"]'));
+            const options: any = fixture.debugElement.queryAll(By.css('mat-option'));
-            formPriorityEl.nativeElement.value = 'stringValue';
+            expect(options[0].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.NOT_SET');
-            formPriorityEl.nativeElement.dispatchEvent(new Event('input'));
+            expect(options[1].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.LOW');
-
+            expect(options[2].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.NORMAL');
-            fixture.detectChanges();
+            expect(options[3].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.HIGH');
-            await fixture.whenStable();
-            fixture.detectChanges();
-
-            const errorMessageEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-error-priority"]'));
-            expect(errorMessageEl).not.toBeNull();
-            done();
-
         });
 
         it('should display due date', async () => {
@@ -322,10 +313,8 @@ describe('TaskHeaderCloudComponent', () => {
 
         it('should render edit icon if the task in assigned state and assingee should be current user', () => {
             fixture.detectChanges();
-            const priorityEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="header-priority"] [class*="adf-textitem-edit-icon"]`));
             const descriptionEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="header-description"] [class*="adf-textitem-edit-icon"]`));
             const dueDateEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="datepickertoggle-dueDate"]`));
-            expect(priorityEditIcon).not.toBeNull('Priority edit icon should be shown');
             expect(descriptionEditIcon).not.toBeNull('Description edit icon should be shown');
             expect(dueDateEditIcon).not.toBeNull('Due date edit icon should be shown');
         });

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

@@ -29,11 +29,11 @@ import {
     UpdateNotification,
     CardViewUpdateService,
     CardViewDatetimeItemModel,
-    CardViewArrayItem
+    CardViewArrayItem,
+    CardViewSelectItemModel
 } from '@alfresco/adf-core';
 import { TaskDetailsCloudModel } from '../../start-task/models/task-details-cloud.model';
 import { TaskCloudService } from '../../services/task-cloud.service';
-import { NumericFieldValidator } from '../../../validators/numeric-field.validator';
 
 @Component({
     selector: 'adf-cloud-task-header',
@@ -158,13 +158,13 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
                     key: 'status'
                 }
             ),
-            new CardViewTextItemModel(
+            new CardViewSelectItemModel(
                 {
                     label: 'ADF_CLOUD_TASK_HEADER.PROPERTIES.PRIORITY',
-                    value: this.taskDetails.priority,
+                    value: this.taskDetails.priority.toString(),
                     key: 'priority',
                     editable: true,
-                    validators: [new NumericFieldValidator()]
+                    options$: of(this.taskCloudService.priorities)
                 }
             ),
             new CardViewDatetimeItemModel(

lib/process-services-cloud/src/lib/task/task-header/mocks/task-details-cloud.mock.ts

@@ -51,7 +51,7 @@ export const assignedTaskDetailsCloudMock: TaskDetailsCloudModel = {
     'createdDate': new Date(1545048055900),
     'dueDate': new Date(),
     'claimedDate': null,
-    'priority': 5,
+    'priority': 1,
     'category': null,
     'processDefinitionId': null,
     'processInstanceId': null,

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

@@ -208,7 +208,7 @@ describe('TaskListCloudComponent', () => {
             expect(component.rows[0].entry['createdDate']).toBe(1538059139420);
             expect(component.rows[0].entry['dueDate']).toBeNull();
             expect(component.rows[0].entry['claimedDate']).toBeNull();
-            expect(component.rows[0].entry['priority']).toBe(0);
+            expect(component.rows[0].entry['priority']).toBe('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.NOT_SET');
             expect(component.rows[0].entry['category']).toBeNull();
             expect(component.rows[0].entry['processDefinitionId']).toBeNull();
             expect(component.rows[0].entry['processInstanceId']).toBeNull();

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

@@ -20,6 +20,9 @@ import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core';
 import { TaskQueryCloudRequestModel } from '../models/filter-cloud-model';
 import { TaskListCloudService } from '../services/task-list-cloud.service';
 import { BaseTaskListCloudComponent } from './base-task-list-cloud.component';
+import { map } from 'rxjs/operators';
+import { TaskCloudService } from '../../services/task-cloud.service';
+import { TaskCloudEntryModel, TaskCloudNodePaging } from '../models/task-cloud.model';
 
 @Component({
     selector: 'adf-cloud-task-list',
@@ -132,6 +135,7 @@ export class TaskListCloudComponent extends BaseTaskListCloudComponent {
     candidateGroupId: string = '';
 
     constructor(private taskListCloudService: TaskListCloudService,
+                private taskCloudService: TaskCloudService,
                 appConfigService: AppConfigService,
                 userPreferences: UserPreferencesService) {
         super(appConfigService, userPreferences, TaskListCloudComponent.PRESET_KEY);
@@ -139,7 +143,9 @@ export class TaskListCloudComponent extends BaseTaskListCloudComponent {
 
     load(requestNode: TaskQueryCloudRequestModel) {
         this.isLoading = true;
-        this.taskListCloudService.getTaskByRequest(<TaskQueryCloudRequestModel> requestNode).subscribe(
+        this.taskListCloudService.getTaskByRequest(requestNode).pipe(
+            map((tasks: TaskCloudNodePaging) => this.replacePriorityValues(tasks)
+        )).subscribe(
             (tasks) => {
                 this.rows = tasks.list.entries;
                 this.success.emit(tasks);
@@ -184,4 +190,22 @@ export class TaskListCloudComponent extends BaseTaskListCloudComponent {
         };
         return new TaskQueryCloudRequestModel(requestNode);
     }
+
+    private replacePriorityValues(tasks: TaskCloudNodePaging) {
+        const entries = tasks.list.entries.map((item: TaskCloudEntryModel) => {
+            return {
+                entry: {
+                    ...item.entry,
+                    ['priority']: this.taskCloudService.getPriorityLabel(item.entry?.priority)
+                }
+            };
+        });
+
+        return {
+            list: {
+                ...tasks.list,
+                entries: [...entries]
+            }
+        };
+    }
 }

lib/process-services-cloud/src/lib/task/task-list/models/task-cloud.model.ts

@@ -0,0 +1,57 @@
+/*!
+ * @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 { Pagination } from '@alfresco/js-api';
+import { IdentityGroupModel, IdentityUserModel } from '@alfresco/adf-core';
+
+export class TaskCloudNodePaging {
+    list: TaskCloudPagingList;
+}
+
+export class TaskCloudPagingList {
+    pagination: Pagination;
+    entries: TaskCloudEntryModel[];
+}
+
+export class TaskCloudEntryModel {
+    entry: TaskCloudModel;
+}
+
+export interface TaskCloudModel {
+    appName: string;
+    appVersion: string;
+    assignee: string;
+    candidateGroups: IdentityGroupModel[];
+    candidateUsers: IdentityUserModel[];
+    createdDate: string;
+    formKey: string;
+    id: string;
+    inFinalState: boolean;
+    lastModified: string;
+    name: string;
+    priority: number;
+    processDefinitionId: string;
+    processDefinitionName: string;
+    processDefinitionVersion: number;
+    processInstanceId: string;
+    serviceFullName: string;
+    serviceName: string;
+    serviceVersion: string;
+    standalone: boolean;
+    status: string;
+    taskDefinitionKey: string;
+ }

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

@@ -21,6 +21,7 @@ import { TaskQueryCloudRequestModel } from '../models/filter-cloud-model';
 import { Observable, throwError } from 'rxjs';
 import { TaskListCloudSortingModel } from '../models/task-list-sorting.model';
 import { BaseCloudService } from '../../../services/base-cloud.service';
+import { TaskCloudNodePaging } from '../models/task-cloud.model';
 
 @Injectable({ providedIn: 'root' })
 export class TaskListCloudService extends BaseCloudService {
@@ -44,7 +45,7 @@ export class TaskListCloudService extends BaseCloudService {
             if (sortingParams) {
                 queryParams['sort'] = sortingParams;
             }
-            return this.get(queryUrl, queryParams);
+            return this.get<TaskCloudNodePaging>(queryUrl, queryParams);
         } else {
             this.logService.error('Appname is mandatory for querying task');
             return throwError('Appname not configured');

lib/testing/src/lib/core/pages/card-view/card-view-select-item.page.ts

@@ -16,13 +16,14 @@
  */
 
 import { element, by, ElementFinder, Locator } from 'protractor';
-import { BrowserVisibility } from '../../utils/public-api';
+import { BrowserActions, BrowserVisibility } from '../../utils/public-api';
 import { DropdownPage } from '../material/dropdown.page';
 
 export class CardSelectItemPage {
 
     rootElement: ElementFinder;
     labelLocator: Locator = by.css('div[data-automation-id*="card-select-label"]');
+    readOnlyField: Locator = by.css('[data-automation-class="read-only-value"]');
     dropdown: DropdownPage;
 
     constructor(label: string = 'fileSource') {
@@ -39,7 +40,16 @@ export class CardSelectItemPage {
         return this.dropdown.getSelectedOptionText();
     }
 
+    async getReadonlyValue(): Promise<string> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.rootElement.element(this.readOnlyField));
+        return BrowserActions.getText(this.rootElement.element(this.readOnlyField));
+    }
+
     async selectDropdownOption(option: string): Promise<void> {
         await this.dropdown.selectDropdownOption(option);
     }
+
+    async checkElementIsReadonly(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.rootElement.element(this.readOnlyField));
+    }
 }

lib/testing/src/lib/process-services-cloud/pages/edit-task-filter-cloud-component.page.ts

@@ -27,7 +27,7 @@ export class EditTaskFilterCloudComponentPage {
 
     customiseFilter = element(by.id('adf-edit-task-filter-sub-title-id'));
     assignee = element(by.css('input[data-automation-id="adf-cloud-edit-task-property-assignee"]'));
-    priority = element(by.css('input[data-automation-id="adf-cloud-edit-task-property-priority"]'));
+    priority = element(by.css('[data-automation-id="adf-cloud-edit-task-property-priority"]'));
     taskName = element(by.css('input[data-automation-id="adf-cloud-edit-task-property-taskName"]'));
     id = element(by.css('input[data-automation-id="adf-cloud-edit-task-property-taskId"]'));
     processDefinitionId = element(by.css('input[data-automation-id="adf-cloud-edit-task-property-processDefinitionId"]'));
@@ -50,6 +50,7 @@ export class EditTaskFilterCloudComponentPage {
     appNameDropdown = new DropdownPage(this.locatorAppNameDropdown);
     statusDropdown = new DropdownPage(this.locatorStatusDropdown);
     sortDropdown = new DropdownPage(this.locatorSortDropdown);
+    priorityDropdown = new DropdownPage(this.priority);
     orderDropdown = new DropdownPage(this.locatorOrderDropdown);
     completedDateDropdown = new DropdownPage(this.locatorCompletedDateDropdown);
 
@@ -116,7 +117,8 @@ export class EditTaskFilterCloudComponentPage {
     }
 
     async setPriority(option): Promise<void> {
-        await this.setProperty('priority', option);
+        await this.priorityDropdown.selectDropdownOption(option);
+        await this.dataTable.waitTillContentLoaded();
     }
 
     async getPriority(): Promise<string> {

lib/testing/src/lib/process-services-cloud/pages/start-tasks-cloud-component.page.ts

@@ -18,13 +18,14 @@
 import { element, by, Key, ElementFinder } from 'protractor';
 import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { BrowserActions } from '../../core/utils/browser-actions';
+import { DropdownPage } from '../../core/pages/material/dropdown.page';
 
 export class StartTasksCloudPage {
 
     name = element(by.css('input[id="name_id"]'));
     dueDate = element(by.css('input[id="date_id"]'));
     description = element(by.css('textarea[id="description_id"]'));
-    priority = element(by.css('input[formcontrolname="priority"]'));
+    priority = element(by.css('mat-select[formcontrolname="priority"]'));
     startButton = element(by.css('button[id="button-start"]'));
     startButtonEnabled = element(by.css('button[id="button-start"]:not(disabled)'));
     cancelButton = element(by.css('button[id="button-cancel"]'));
@@ -45,7 +46,9 @@ export class StartTasksCloudPage {
     }
 
     async addPriority(userPriority: string): Promise<void> {
-        await BrowserActions.clearSendKeys(this.priority, userPriority);
+        // await BrowserActions.clearSendKeys(this.priority, userPriority);
+        const priorityDropdown = new DropdownPage(this.priority);
+        await priorityDropdown.selectDropdownOption(userPriority);
     }
 
     async addDueDate(date: string): Promise<void> {

lib/testing/src/lib/process-services-cloud/pages/task-header-cloud-component.page.ts

@@ -19,12 +19,13 @@ import { element, by } from 'protractor';
 import { BrowserActions } from '../../core/utils/browser-actions';
 import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { CardTextItemPage } from '../../core/pages/card-view/card-view-text-item.page';
+import { CardSelectItemPage } from '../../core/pages/card-view/card-view-select-item.page';
 
 export class TaskHeaderCloudPage {
 
     assigneeCardTextItem = new CardTextItemPage('assignee');
     statusCardTextItem = new CardTextItemPage('status');
-    priorityCardTextItem = new CardTextItemPage('priority');
+    priorityCardSelectItem = new CardSelectItemPage('priority');
     dueDateField = element.all(by.css('span[data-automation-id*="dueDate"] span')).first();
     categoryCardTextItem = new CardTextItemPage('category');
     createdField = element(by.css('span[data-automation-id="card-dateitem-created"] span'));
@@ -44,7 +45,11 @@ export class TaskHeaderCloudPage {
     }
 
     async getPriority(): Promise<string> {
-        return this.priorityCardTextItem.getFieldValue();
+        return this.priorityCardSelectItem.getSelectedOptionText();
+    }
+
+    async getReadonlyPriority(): Promise<string> {
+        return this.priorityCardSelectItem.getReadonlyValue();
     }
 
     async getCategory(): Promise<string> {