[ADF-4828] [ProcessListCloudComponent] Add action and context menu. (#5009)

* * Demo on list com

* [ADF-4828] [ADF] [ProcessListCloudComponent] Add action and context menu.

* Exposed action and context menu.
* Provided a way to in the demo shell to test action menu.
* Added required transaltion on demo shell.

* * Added doc

* * Fixed comments.

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

@@ -1,9 +1,16 @@
 <adf-datatable #dataTable
         [rows]="rows"
         [columns]="columns"
+        [stickyHeader]="stickyHeader"
         [loading]="isLoading"
         [selectionMode]="selectionMode"
         [multiselect]="multiselect"
+        [actions]="showActions"
+        [actionsPosition]="actionsPosition"
+        [contextMenu]="showContextMenu"
+        (showRowActionsMenu)="onShowRowActionsMenu($event)"
+        (showRowContextMenu)="onShowRowContextMenu($event)"
+        (executeRowAction)="onExecuteRowAction($event)"
         (rowClick)="onRowClick($event)"
         (row-select)="onRowSelect($event)"
         (row-unselect)="onRowUnselect($event)"

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

@@ -19,12 +19,13 @@ import { Component, ViewEncapsulation, OnChanges, AfterContentInit, ContentChild
 import { DataTableSchema, PaginatedComponent,
          CustomEmptyContentTemplateDirective, AppConfigService,
          UserPreferencesService, PaginationModel,
-         UserPreferenceValues, DataRowEvent, CustomLoadingContentTemplateDirective } from '@alfresco/adf-core';
+         UserPreferenceValues, DataRowEvent, CustomLoadingContentTemplateDirective, DataCellEvent, DataRowActionEvent } from '@alfresco/adf-core';
 import { ProcessListCloudService } from '../services/process-list-cloud.service';
 import { BehaviorSubject } from 'rxjs';
 import { processCloudPresetsDefaultModel } from '../models/process-cloud-preset.model';
 import { ProcessQueryCloudRequestModel } from '../models/process-cloud-query-request.model';
 import { ProcessListCloudSortingModel } from '../models/process-list-sorting.model';
+
 @Component({
     selector: 'adf-cloud-process-list',
     templateUrl: './process-list-cloud.component.html',
@@ -100,6 +101,22 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
     @Input()
     sorting: ProcessListCloudSortingModel[];
 
+    /** Toggles the data actions column. */
+    @Input()
+    showActions: boolean = false;
+
+    /** Position of the actions dropdown menu. Can be "left" or "right". */
+    @Input()
+    actionsPosition: string = 'right'; // left|right
+
+    /** Toggles the sticky header mode. */
+    @Input()
+    stickyHeader: boolean = false;
+
+    /** Toggles custom context menu for the component. */
+    @Input()
+    showContextMenu: boolean = false;
+
     /** Emitted when a row in the process list is clicked. */
     @Output()
     rowClick: EventEmitter<string> = new EventEmitter<string>();
@@ -108,6 +125,18 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
     @Output()
     rowsSelected: EventEmitter<any[]> = new EventEmitter<any[]>();
 
+    /** Emitted before the context menu is displayed for a row. */
+    @Output()
+    showRowContextMenu = new EventEmitter<DataCellEvent>();
+
+    /** Emitted before the actions menu is displayed for a row. */
+    @Output()
+    showRowActionsMenu = new EventEmitter<DataCellEvent>();
+
+    /** Emitted when the user executes a row action. */
+    @Output()
+    executeRowAction = new EventEmitter<DataRowActionEvent>();
+
     /** Emitted when an error occurs while loading the list of process instances from the server. */
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
@@ -223,6 +252,18 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
         }
     }
 
+    onShowRowActionsMenu(event: DataCellEvent) {
+        this.showRowActionsMenu.emit(event);
+    }
+
+    onShowRowContextMenu(event: DataCellEvent) {
+        this.showRowContextMenu.emit(event);
+    }
+
+    onExecuteRowAction(row: DataRowActionEvent) {
+        this.executeRowAction.emit(row);
+    }
+
     private createRequestNode(): ProcessQueryCloudRequestModel {
         const requestNode = {
             appName: this.appName,