[AAE-7865] Configuration of columns in Task and Process Lists in ADW e2e (#7701)

* [AAE-7865] Configuration of columns in Task and Process Lists in ADW e2e test

* Update

* Cr

* Added variable task data

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

@@ -1,10 +1,18 @@
-<div class="adf-columns-selector" (click)="$event.stopPropagation();">
+<div
+    class="adf-columns-selector"
+    data-automation-id="adf-columns-selector"
+    (click)="$event.stopPropagation();"
+>
     <div class="adf-columns-selector-header">
         <span class="adf-columns-selector-header-label">
             {{"ADF-DATATABLE.COLUMNS_SELECTOR.COLUMNS" | translate}}
         </span>
 
-        <button mat-icon-button (click)="closeMenu()">
+        <button
+            data-automation-id="adf-columns-selector-close-button"
+            mat-icon-button
+            (click)="closeMenu()"
+        >
             <mat-icon>close</mat-icon>
         </button>
     </div>
@@ -20,6 +28,7 @@
         <input
             [formControl]="searchInputControl"
             class="adf-columns-selector-search-input"
+            data-automation-id="adf-columns-selector-search-input"
             type="text"
             [placeholder]='"ADF-DATATABLE.COLUMNS_SELECTOR.SEARCH" | translate'>
     </div>
@@ -46,6 +55,7 @@
     <div class="adf-columns-selector-footer">
         <button
             mat-flat-button
+            data-automation-id="adf-columns-selector-apply-button"
             color="primary"
             (click)="apply()">
             {{"ADF-DATATABLE.COLUMNS_SELECTOR.APPLY" | translate}}

lib/testing/src/lib/protractor/core/pages/data-table-component.page.ts

@@ -37,6 +37,7 @@ export class DataTableComponentPage {
     emptyListTitle: ElementFinder;
     emptyListSubtitle: ElementFinder;
     noContentContainer: ElementFinder;
+    mainMenuButton: ElementFinder;
 
     rows = `adf-datatable div[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row']`;
 
@@ -45,7 +46,8 @@ export class DataTableComponentPage {
         this.list = this.rootElement.$$(`div[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row']`);
         this.contents = this.rootElement.$$('.adf-datatable-body span');
         this.tableBody = this.rootElement.$$(`.adf-datatable-body`).first();
-        this.allColumns = this.rootElement.$$('div[data-automation-id*="auto_id_entry."]');
+        this.allColumns = this.rootElement.$$('div[data-automation-id*="auto_header_content_id"]');
+        this.mainMenuButton = this.rootElement.$('[data-automation-id="adf-datatable-main-menu-button"]');
         this.selectedRowNumber = this.rootElement.$(`adf-datatable-row[class*='is-selected'] div[data-automation-id*='text_']`);
         this.allSelectedRows = this.rootElement.$$(`adf-datatable-row[class*='is-selected']`);
         this.selectAll = this.rootElement.$(`div[class*='adf-datatable-header'] mat-checkbox`);
@@ -427,8 +429,19 @@ export class DataTableComponentPage {
         }
     }
 
-    async checkColumnIsDisplayed(column: string): Promise<void> {
+    async checkColumnIsDisplayed(columnKey: string): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible($(`div[data-automation-id="auto_id_entry.${column}"]`));
+        await BrowserVisibility.waitUntilElementIsVisible($(`div[data-automation-id="auto_id_${columnKey}"]`));
+    }
+
+    async isColumnDisplayed(columnTitle: string): Promise<boolean> {
+        const isColumnDisplated = (await this.allColumns).some(
+            async column => {
+                const columnText = await column.getText();
+                return columnText === columnTitle;
+            }
+        );
+
+        return isColumnDisplated;
     }
 
     async checkNoContentContainerIsDisplayed() {

lib/testing/src/lib/protractor/core/pages/data-table/columns-selector.ts

@@ -0,0 +1,59 @@
+/*!
+ * @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 { by } from 'protractor';
+import { TestElement } from '../../test-element';
+
+export class DataTableColumnSelector {
+    columnsSelectorComponent = TestElement.byCss('[data-automation-id="adf-columns-selector"]');
+
+    closeButton = TestElement.byCss('[data-automation-id="adf-columns-selector-close-button"]');
+    searchInput = TestElement.byCss('[data-automation-id="adf-columns-selector-search-input"]');
+    applyButton = TestElement.byCss('[data-automation-id="adf-columns-selector-apply-button"]');
+    columnsListContainer = TestElement.byCss('.adf-columns-selector-list-container');
+    allColumnsSelectors = this.columnsListContainer.elementFinder.all(
+        by.css('.adf-columns-selector-column-checkbox')
+    );
+
+    async getAllColumnSelectors(): Promise<{ name: string; isSelected: boolean }[]> {
+        const columnCheckboxes = this.allColumnsSelectors.map<[string, boolean]>(column => {
+            const checkBoxElement = column.element(by.tagName('input'));
+            return Promise.all([
+                column.getText(),
+                checkBoxElement.isSelected()
+            ]);
+        });
+
+        const checkboxesValues = await columnCheckboxes;
+
+        return checkboxesValues.map(([name, isSelected]) => ({
+            name,
+            isSelected
+        }));
+    }
+
+    async selectColumn(columnName: string): Promise<void> {
+        const columnSelector = this.allColumnsSelectors.filter(
+            async column => {
+                const columnText = await column.getText();
+                return columnText === columnName;
+            }
+        ).first();
+
+        return columnSelector.click();
+    }
+}

lib/testing/src/lib/protractor/core/pages/data-table/public-api.ts

@@ -18,3 +18,4 @@
 export * from './data-table-builder';
 export * from './column';
 export * from './data-table-item';
+export * from './columns-selector';

lib/testing/src/lib/protractor/process-services-cloud/pages/process-list-cloud-component.page.ts

@@ -19,6 +19,7 @@ import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { DataTableComponentPage } from '../../core/pages/data-table-component.page';
 import { browser, $, $$ } from 'protractor';
 import { BrowserActions } from '../../core/utils/browser-actions';
+import { DataTableColumnSelector } from '../../core/pages/data-table/columns-selector';
 
 export class ProcessListCloudComponentPage {
 
@@ -138,6 +139,13 @@ export class ProcessListCloudComponentPage {
         return options.length;
     }
 
+    async clickMainMenuButton(): Promise<DataTableColumnSelector> {
+        await this.dataTable.mainMenuButton.click();
+        const columnsSelector = new DataTableColumnSelector();
+        await columnsSelector.columnsSelectorComponent.waitVisible();
+        return columnsSelector;
+    }
+
     async waitTillProcessListContentLoaded(): Promise<void> {
         await this.checkProcessListIsLoaded();
         await this.getDataTable().waitForTableBody();

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

@@ -19,6 +19,7 @@ import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { DataTableComponentPage } from '../../core/pages/data-table-component.page';
 import { by, ElementFinder, $$, $ } from 'protractor';
 import { BrowserActions } from '../../core/utils/browser-actions';
+import { DataTableColumnSelector } from '../../core/pages/data-table/columns-selector';
 
 const column = {
     id: 'Id',
@@ -94,6 +95,13 @@ export class TaskListCloudComponentPage {
         return this.dataTable.getCellElementByValue(column.name, taskName);
     }
 
+    async clickMainMenuButton(): Promise<DataTableColumnSelector> {
+        await this.dataTable.mainMenuButton.click();
+        const columnsSelector = new DataTableColumnSelector();
+        await columnsSelector.columnsSelectorComponent.waitVisible();
+        return columnsSelector;
+    }
+
     checkContentIsDisplayedById(taskId: string): Promise<void> {
         return this.dataTable.checkContentIsDisplayed(column.id, taskId);
     }

lib/testing/src/lib/protractor/process-services-cloud/resources/resources.ts

@@ -170,7 +170,8 @@ export const ACTIVITI_CLOUD_APPS = {
             candidateUserProcess: 'candidateuserprocess',
             outputVariablesMapping: 'output-variables-mapping',
             outcomeVisibilityProcess: 'outcome-visib-process',
-            restConnectorProcess: 'rest-connector-process'
+            restConnectorProcess: 'rest-connector-process',
+            withDisplayedVariables: 'with-displayed-variables'
         },
         forms: {
             tabVisibilityFields: {
@@ -383,7 +384,19 @@ export const ACTIVITI_CLOUD_APPS = {
             nonInterruptingBoundaryTask: 'nonint-boundary-task',
             subprocessInterruptingTask: 'subprocess-task',
             finalTask: 'final-task',
-            finalTaskUnited: 'finaltask'
+            finalTaskUnited: 'finaltask',
+            withDisplayedVariables: 'with-displayed-variables'
+        },
+        tasksData: {
+            withDisplayedVariables: {
+                variablesColumns: [
+                    { name: 'Column A', value: 'Value A' },
+                    { name: 'Column B', value: '123' },
+                    { name: 'Column C', value: 'Nov 3, 2033' },
+                    { name: 'Column D', value: 'Oct 16, 2024' },
+                    { name: 'Column E', value: 'false' }
+                ]
+            }
         },
         security: [
             {