[ACA-3000][ACA-2999] FE - Provide way to show ContextMenu on Task/Process list (#5596)

* [ACA-3000] FE - Provide way to show ContextMenu on Task list

* * Updated docs

* * Added unit tests to the recent changes

lib/process-services/src/lib/task-list/components/task-list.component.html

@@ -8,6 +8,8 @@
             [loading]="isLoading"
             [multiselect]="multiselect"
             [selectionMode]="selectionMode"
+            [contextMenu]="showContextMenu"
+            (showRowContextMenu)="onShowRowContextMenu($event)"
             (row-select)="onRowSelect($event)"
             (row-unselect)="onRowUnselect($event)"
             (rowClick)="onRowClick($event)"

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

@@ -15,16 +15,16 @@
  * limitations under the License.
  */
 
-import { Component, SimpleChange, ViewChild } from '@angular/core';
+import { Component, SimpleChange, ViewChild, OnInit, Output, EventEmitter } from '@angular/core';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { AppConfigService, setupTestBed, CoreModule, DataTableModule, DataRowEvent, ObjectDataRow } from '@alfresco/adf-core';
+import { AppConfigService, setupTestBed, CoreModule, DataTableModule, DataRowEvent, ObjectDataRow, DataCellEvent } from '@alfresco/adf-core';
 import { TaskListService } from '../services/tasklist.service';
 import { TaskListComponent } from './task-list.component';
 import { ProcessTestingModule } from '../../testing/process.testing.module';
 import { fakeGlobalTask, fakeCustomSchema, fakeEmptyTask, paginatedTask } from '../../mock';
 import { TranslateService } from '@ngx-translate/core';
-import { of } from 'rxjs';
+import { of, Subject } from 'rxjs';
 import { TaskListModule } from '../task-list.module';
 
 declare let jasmine: any;
@@ -807,3 +807,112 @@ describe('Task List: Custom EmptyTemplateComponent', () => {
         });
     });
 });
+
+@Component({
+    template: `
+    <adf-tasklist
+    [showContextMenu]="true"
+    (showRowContextMenu)="onShowRowContextMenu($event)"
+    #taskList>
+        <data-columns>
+            <data-column key="name" title="ADF_TASK_LIST.PROPERTIES.NAME" class="full-width name-column"></data-column>
+            <data-column key="created" title="ADF_TASK_LIST.PROPERTIES.CREATED" class="hidden"></data-column>
+            <data-column key="startedBy" title="ADF_TASK_LIST.PROPERTIES.CREATED" class="desktop-only dw-dt-col-3 ellipsis-cell">
+                <ng-template let-entry="$implicit">
+                    <div>{{entry.row?.obj?.startedBy | fullName}}</div>
+                </ng-template>
+            </data-column>
+        </data-columns>
+    </adf-tasklist>`
+})
+
+class TaskListContextMenuComponent implements OnInit {
+
+    @Output()
+    contextAction = new EventEmitter<any>();
+    private performAction$ = new Subject<any>();
+
+    ngOnInit() {
+        this.performContextActions();
+    }
+
+    onShowRowContextMenu(event: DataCellEvent) {
+        event.value.actions = [
+            {
+                data: event.value.row['obj'],
+                model:
+                {
+                    key: 'taskDetails',
+                    icon: 'open',
+                    title: 'View Task Details',
+                    visible: true
+                },
+                subject: this.performAction$
+            },
+            {
+                data: event.value.row['obj'],
+                model:
+                {
+                    key: 'cancel',
+                    icon: 'open',
+                    title: 'Cancel Process',
+                    visible: true
+                },
+                subject: this.performAction$
+            }
+        ];
+    }
+
+    performContextActions() {
+        this.performAction$
+          .subscribe((action: any) => {
+            this.contextAction.emit(action.data);
+          });
+    }
+}
+
+describe('TaskListContextMenuComponent', () => {
+    let fixture: ComponentFixture<TaskListContextMenuComponent>;
+    let customComponent: TaskListContextMenuComponent;
+    let taskListService: TaskListService;
+    let element: HTMLElement;
+
+    setupTestBed({
+        imports: [CoreModule.forRoot()],
+        declarations: [TaskListComponent, TaskListContextMenuComponent],
+        providers: [TaskListService]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TaskListContextMenuComponent);
+        customComponent = fixture.componentInstance;
+        element = fixture.nativeElement;
+        taskListService = TestBed.get(TaskListService);
+        spyOn(taskListService, 'findTasksByState').and.returnValues(of(fakeGlobalTask));
+        fixture.detectChanges();
+    });
+
+    afterEach(() => {
+        const event = new KeyboardEvent('keydown', {
+          bubbles : true, cancelable : true, key : 'Escape'
+        });
+        document.querySelector('.cdk-overlay-backdrop').dispatchEvent(event);
+        fixture.detectChanges();
+    });
+
+    it('Should be able to show context menu on task list', async () => {
+        const contextMenu =  element.querySelector(`[data-automation-id="text_${fakeGlobalTask.data[0].name}"]`);
+        const contextActionSpy = spyOn(customComponent.contextAction, 'emit').and.callThrough();
+        contextMenu.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true }));
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const contextActions = document.querySelectorAll('.mat-menu-item');
+
+        expect(contextActions.length).toBe(2);
+        expect(contextActions[0]['disabled']).toBe(false, 'View Task Details action not enabled');
+        expect(contextActions[1]['disabled']).toBe(false, 'Cancel Task action not enabled');
+        contextActions[0].dispatchEvent(new Event('click'));
+        fixture.detectChanges();
+        expect(contextActionSpy).toHaveBeenCalled();
+      });
+});

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

@@ -18,7 +18,7 @@
 import {
     DataRowEvent, DataTableAdapter, DataTableSchema, CustomEmptyContentTemplateDirective, CustomLoadingContentTemplateDirective,
     AppConfigService, PaginationComponent, PaginatedComponent,
-    UserPreferencesService, UserPreferenceValues, PaginationModel } from '@alfresco/adf-core';
+    UserPreferencesService, UserPreferenceValues, PaginationModel, DataCellEvent } from '@alfresco/adf-core';
 import {
     AfterContentInit, Component, ContentChild, EventEmitter,
     Input, OnChanges, Output, SimpleChanges, OnDestroy, OnInit } from '@angular/core';
@@ -123,6 +123,14 @@ export class TaskListComponent extends DataTableSchema implements OnChanges, Aft
     @Input()
     start: number;
 
+    /** Toggles custom context menu for the component. */
+    @Input()
+    showContextMenu: boolean = false;
+
+    /** Emitted before the context menu is displayed for a row. */
+    @Output()
+    showRowContextMenu = new EventEmitter<DataCellEvent>();
+
     /** Emitted when a task in the list is clicked */
     @Output()
     rowClick = new EventEmitter<string>();
@@ -356,6 +364,10 @@ export class TaskListComponent extends DataTableSchema implements OnChanges, Aft
         }
     }
 
+    onShowRowContextMenu(event: DataCellEvent) {
+        this.showRowContextMenu.emit(event);
+    }
+
     /**
      * Optimize name field
      * @param instances