[AAE-7817] Add columns selector for processes and tasks tasks (#7612)

* [AAE-7817] Add columns selector for processes and tasks tasks

* cr

* Update

* fix unit tests

* preserve order while sorting

* add input toggle to show main actions

* fix test

lib/core/datatable/components/columns-selector/columns-selector.component.spec.ts

@@ -114,11 +114,15 @@ describe('ColumnsSelectorComponent', () => {
 
         const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness);
 
-        expect(checkboxes.length).toBe(4);
-        expect(await checkboxes[0].getLabelText()).toBe(inputColumns[0].title);
-        expect(await checkboxes[1].getLabelText()).toBe(inputColumns[1].title);
-        expect(await checkboxes[2].getLabelText()).toBe(inputColumns[2].title);
-        expect(await checkboxes[3].getLabelText()).toBe(inputColumns[4].title);
+        const inputColumnsWithTitle = inputColumns.filter(column => !!column.title);
+        expect(checkboxes.length).toBe(inputColumnsWithTitle.length);
+
+        for await (const checkbox of checkboxes) {
+            const checkboxLabel = await checkbox.getLabelText();
+
+            const inputColumn = inputColumnsWithTitle.find(inputColumnWithTitle => inputColumnWithTitle.title === checkboxLabel);
+            expect(inputColumn).toBeTruthy('Should have all columns with title');
+        }
     });
 
     it('should filter columns by search text', fakeAsync(async () => {
@@ -143,9 +147,13 @@ describe('ColumnsSelectorComponent', () => {
         fixture.detectChanges();
 
         const firstColumnCheckbox = await loader.getHarness(MatCheckboxHarness);
-        await firstColumnCheckbox.toggle();
+        const checkBoxName = await firstColumnCheckbox.getLabelText();
 
-        expect(component.columnItems[0].isHidden).toBe(true);
+        let toggledColumnItem = component.columnItems.find(item => item.title === checkBoxName);
+        expect(toggledColumnItem.isHidden).toBeFalsy();
+
+        await firstColumnCheckbox.toggle();
+        expect(toggledColumnItem.isHidden).toBe(true);
     });
 
     it('should set proper default state for checkboxes', async () => {
@@ -159,4 +167,30 @@ describe('ColumnsSelectorComponent', () => {
         expect(await checkboxes[2].isChecked()).toBe(true);
         expect(await checkboxes[3].isChecked()).toBe(false);
     });
+
+    it('should show hidden columns at the end of the list', async () => {
+        const hiddenDataColumn: DataColumn = {
+            id: 'hiddenDataColumn',
+            title: 'hiddenDataColumn',
+            key: 'hiddenDataColumn',
+            type: 'text',
+            isHidden: true
+        };
+
+        const shownDataColumn: DataColumn = {
+            id: 'shownDataColumn',
+            title: 'shownDataColumn',
+            key: 'shownDataColumn',
+            type: 'text'
+        };
+
+        component.columns = [hiddenDataColumn, shownDataColumn];
+        menuOpenedTrigger.next();
+        fixture.detectChanges();
+
+        const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness);
+
+        expect(await checkboxes[0].getLabelText()).toBe(shownDataColumn.title);
+        expect(await checkboxes[1].getLabelText()).toBe(hiddenDataColumn.title);
+    });
 });

lib/core/datatable/components/columns-selector/columns-selector.component.ts

@@ -46,7 +46,8 @@ export class ColumnsSelectorComponent implements OnInit, OnDestroy {
         this.mainMenuTrigger.menuOpened.pipe(
             takeUntil(this.onDestroy$)
         ).subscribe(() => {
-            this.columnItems = this.columns.map(column => ({...column}));
+            const columns = this.columns.map(column => ({...column}));
+            this.columnItems = this.sortColumns(columns);
         });
 
         this.mainMenuTrigger.menuClosed.pipe(
@@ -80,4 +81,11 @@ export class ColumnsSelectorComponent implements OnInit, OnDestroy {
         this.submitColumnsVisibility.emit(this.columnItems);
         this.closeMenu();
     }
+
+    private sortColumns(columns: DataColumn[]): DataColumn[] {
+        const shownColumns = columns.filter(column => !column.isHidden);
+        const hiddenColumns = columns.filter(column => column.isHidden);
+
+        return [...shownColumns, ...hiddenColumns];
+    }
 }

lib/core/datatable/components/datatable/datatable.component.html

@@ -97,11 +97,13 @@
 
             <!-- Header actions (right) -->
             <div
-                *ngIf="actions && actionsPosition === 'right' || mainActionTemplate"
+                *ngIf="(actions && actionsPosition === 'right') ||
+                       (mainActionTemplate && showMainDatatableActions)"
                 class="adf-actions-column adf-datatable-cell-header adf-datatable__actions-cell"
             >
                 <ng-container *ngIf="mainActionTemplate">
                     <button
+                        data-automation-id="adf-datatable-main-menu-button"
                         mat-icon-button
                         #mainMenuTrigger="matMenuTrigger"
                         [matMenuTriggerFor]="mainMenu">
@@ -286,7 +288,9 @@
                 </div>
 
                 <!-- Row actions (right) -->
-                <div *ngIf="(actions && actionsPosition === 'right') || mainActionTemplate"
+                <div *ngIf="
+                        (actions && actionsPosition === 'right') ||
+                        (mainActionTemplate && showMainDatatableActions)"
                      role="gridcell"
                      class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-center-actions-column-ie">
 

lib/core/datatable/components/datatable/datatable.component.ts

@@ -112,6 +112,10 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
     @Input()
     actions: boolean = false;
 
+    /** Toggles the main datatable action. */
+    @Input()
+    showMainDatatableActions: boolean = false;
+
     /** Position of the actions dropdown menu. Can be "left" or "right". */
     @Input()
     actionsPosition: string = 'right'; // left|right