[ADF-5103] FE - Process/task filter - Backporting the components styles to ADF

e2e/pages/adf/demo-shell/process-services/task-filters-demo.page.ts

@@ -21,11 +21,11 @@ import { TaskFiltersPage } from '../../process-services/task-filters.page';
 
 export class TaskFiltersDemoPage {
 
-    myTasks: ElementFinder = element(by.css('span[data-automation-id="My Tasks_filter"]'));
-    queuedTask: ElementFinder = element(by.css('span[data-automation-id="Queued Tasks_filter"]'));
-    completedTask: ElementFinder = element(by.css('span[data-automation-id="Completed Tasks_filter"]'));
-    involvedTask: ElementFinder = element(by.css('span[data-automation-id="Involved Tasks_filter"]'));
-    activeFilter: ElementFinder = element(by.css("mat-list-item[class*='active']"));
+    myTasks: ElementFinder = element(by.css('button[data-automation-id="My Tasks_filter"]'));
+    queuedTask: ElementFinder = element(by.css('button[data-automation-id="Queued Tasks_filter"]'));
+    completedTask: ElementFinder = element(by.css('button[data-automation-id="Completed Tasks_filter"]'));
+    involvedTask: ElementFinder = element(by.css('button[data-automation-id="Involved Tasks_filter"]'));
+    activeFilter: ElementFinder = element(by.css('adf-task-filters .adf-active'));
 
     myTasksFilter(): TaskFiltersPage {
         return new TaskFiltersPage(this.myTasks);
@@ -44,7 +44,7 @@ export class TaskFiltersDemoPage {
     }
 
     customTaskFilter(filterName): TaskFiltersPage {
-        return new TaskFiltersPage(element(by.css(`span[data-automation-id="${filterName}_filter"]`)));
+        return new TaskFiltersPage(element(by.css(`button[data-automation-id="${filterName}_filter"]`)));
     }
 
     async checkActiveFilterActive(): Promise<string> {

e2e/pages/adf/process-services/filters.page.ts

@@ -20,7 +20,7 @@ import { by, element, ElementFinder } from 'protractor';
 
 export class FiltersPage {
 
-    activeFilter: ElementFinder = element(by.css('mat-list-item[class*="active"]'));
+    activeFilter: ElementFinder = element(by.css('.adf-active'));
     dataTable: DataTableComponentPage = new DataTableComponentPage();
 
     async getActiveFilter(): Promise<string> {
@@ -29,7 +29,7 @@ export class FiltersPage {
 
     async goToFilter(filterName): Promise<void> {
         await BrowserActions.closeMenuAndDialogs();
-        await BrowserActions.clickExecuteScript(`span[data-automation-id="${filterName}_filter"]`);
+        await BrowserActions.clickExecuteScript(`button[data-automation-id="${filterName}_filter"]`);
     }
 
     async sortByName(sortOrder: string): Promise<void> {
@@ -41,7 +41,7 @@ export class FiltersPage {
     }
 
     async checkFilterIsHighlighted(filterName: string): Promise<void> {
-        const highlightedFilter: ElementFinder = element(by.css(`mat-list-item.adf-active span[data-automation-id='${filterName}_filter']`));
+        const highlightedFilter: ElementFinder = element(by.css(`.adf-active button[data-automation-id='${filterName}_filter']`));
         await BrowserVisibility.waitUntilElementIsVisible(highlightedFilter);
     }
 }

e2e/pages/adf/process-services/process-filters.page.ts

@@ -21,9 +21,9 @@ import { by, element, ElementFinder, Locator } from 'protractor';
 export class ProcessFiltersPage {
 
     dataTable = new DataTableComponentPage();
-    runningFilter: ElementFinder = element(by.css('span[data-automation-id="Running_filter"]'));
-    completedFilter: ElementFinder = element(by.css('div[class="mat-list-text"] > span[data-automation-id="Completed_filter"]'));
-    allFilter: ElementFinder = element(by.css('span[data-automation-id="All_filter"]'));
+    runningFilter: ElementFinder = element(by.css('button[data-automation-id="Running_filter"]'));
+    completedFilter: ElementFinder = element(by.css('button[data-automation-id="Completed_filter"]'));
+    allFilter: ElementFinder = element(by.css('button[data-automation-id="All_filter"]'));
     createProcessButton: ElementFinder = element(by.css('.app-processes-menu button[data-automation-id="create-button"] > span'));
     newProcessButton: ElementFinder = element(by.css('div > button[data-automation-id="btn-start-process"]'));
     processesPage: ElementFinder = element(by.css('div[class="app-grid"] > div[class="app-grid-item app-processes-menu"]'));
@@ -33,7 +33,7 @@ export class ProcessFiltersPage {
     rows: Locator = by.css('adf-process-instance-list div[class="adf-datatable-body"] adf-datatable-row[class*="adf-datatable-row"]');
     tableBody: ElementFinder = element.all(by.css('adf-datatable div[class="adf-datatable-body"]')).first();
     nameColumn: Locator = by.css('div[class*="adf-datatable-body"] adf-datatable-row[class*="adf-datatable-row"] div[title="Name"] span');
-    processIcon: Locator = by.xpath('ancestor::div[@class="mat-list-item-content"]/mat-icon');
+    processIcon = by.css('adf-icon[data-automation-id="adf-filter-icon"]');
 
     async startProcess(): Promise<StartProcessPage> {
         await this.clickCreateProcessButton();
@@ -78,7 +78,7 @@ export class ProcessFiltersPage {
     }
 
     async checkFilterIsHighlighted(filterName): Promise<void> {
-        const processNameHighlighted: ElementFinder = element(by.css(`mat-list-item.adf-active span[data-automation-id='${filterName}_filter']`));
+        const processNameHighlighted: ElementFinder = element(by.css(`adf-process-instance-filters .adf-active button[data-automation-id='${filterName}_filter']`));
         await BrowserVisibility.waitUntilElementIsVisible(processNameHighlighted);
     }
 
@@ -104,25 +104,25 @@ export class ProcessFiltersPage {
     }
 
     async checkFilterIsDisplayed(name): Promise<void> {
-        const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`));
+        const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`));
         await BrowserVisibility.waitUntilElementIsVisible(filterName);
     }
 
     async checkFilterHasNoIcon(name): Promise<void> {
-        const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`));
+        const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`));
         await BrowserVisibility.waitUntilElementIsVisible(filterName);
         await BrowserVisibility.waitUntilElementIsNotVisible(filterName.element(this.processIcon));
     }
 
     async getFilterIcon(name): Promise<string> {
-        const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`));
+        const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`));
         await BrowserVisibility.waitUntilElementIsVisible(filterName);
         const icon = filterName.element(this.processIcon);
         return BrowserActions.getText(icon);
     }
 
     async checkFilterIsNotDisplayed(name): Promise<void> {
-        const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`));
+        const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`));
         await BrowserVisibility.waitUntilElementIsNotVisible(filterName);
     }
 

e2e/pages/adf/process-services/task-filters.page.ts

@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 
-import { by, ElementFinder, Locator } from 'protractor';
+import { by, ElementFinder } from 'protractor';
 import { BrowserVisibility, BrowserActions } from '@alfresco/adf-testing';
 
 export class TaskFiltersPage {
 
     filter;
-    taskIcon: Locator = by.xpath("ancestor::div[@class='mat-list-item-content']/mat-icon");
+    taskIcon = by.css('adf-icon[data-automation-id="adf-filter-icon"]');
 
     constructor(filter: ElementFinder) {
         this.filter = filter;

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

@@ -1,17 +1,21 @@
-<div class="menu-container">
-  <mat-list class="adf-menu-list" *ngIf="filters$ | async as filterList; else loading">
-      <mat-list-item (click)="selectFilterById(filter.id)" *ngFor="let filter of filterList"
-                     class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
-          <mat-icon *ngIf="showIcons && filter.icon" matListIcon class="adf-filters__entry-icon">{{filter.icon}}
-          </mat-icon>
-          <span matLine [attr.data-automation-id]="filter.key + '_filter'">{{filter.name | translate}}</span>
-      </mat-list-item>
-  </mat-list>
-  <ng-template #loading>
-      <ng-container>
-          <div class="adf-app-list-spinner">
-              <mat-spinner></mat-spinner>
-          </div>
-      </ng-container>
-  </ng-template>
-</div>
+
+<ng-container *ngIf="filters$ | async as filterList; else loading">
+    <div *ngFor="let filter of filterList" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
+        <button (click)="selectFilterById(filter.id)"
+          [attr.aria-label]="filter.name | translate"
+          [id]="filter.id"
+          [attr.data-automation-id]="filter.key + '_filter'"
+          mat-button
+          class="adf-filter-action-button adf-full-width" fxLayout="row" fxLayoutAlign="space-between center">
+          <adf-icon data-automation-id="adf-filter-icon" *ngIf="showIcons" [value]="filter.icon"></adf-icon>
+          <span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
+        </button>
+    </div>
+</ng-container>
+<ng-template #loading>
+    <ng-container>
+        <div class="adf-app-list-spinner">
+            <mat-spinner></mat-spinner>
+        </div>
+    </ng-container>
+</ng-template>

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

@@ -2,33 +2,31 @@
     $primary: map-get($theme, primary);
 
     .adf {
-
         &-filters__entry {
+            padding: 12px 0 !important;
+            height: 24px;
+            width: 100%;
             cursor: pointer;
-            font-size: 14px!important;
+            font-size: 14px !important;
             font-weight: bold;
             opacity: 0.54;
-            padding-left: 30px;
 
-            .mat-list-item-content {
-                height: 34px;
+            .adf-full-width {
+                display: flex;
+                width: 100%;
             }
-        }
 
-        &-filters__entry-icon {
-            padding-right: 12px !important;
-            padding-left: 0 !important;
+            .adf-filter-action-button .adf-filter-action-button__label {
+                padding-left: 20px;
+                margin: 0 8px !important;
+            }
         }
-
         &-filters__entry {
-            &.adf-active, &:hover {
+            &.adf-active,
+            &:hover {
                 color: mat-color($primary);
                 opacity: 1;
             }
         }
-
-        &-menu-list {
-            padding-top: 0 !important;
-        }
     }
 }

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

@@ -36,6 +36,7 @@ describe('ProcessFiltersCloudComponent', () => {
     const fakeGlobalFilter = [
         new ProcessFilterCloudModel({
             name: 'FakeAllProcesses',
+            key: 'FakeAllProcesses',
             icon: 'adjust',
             id: '10',
             status: ''
@@ -99,7 +100,7 @@ describe('ProcessFiltersCloudComponent', () => {
         fixture.whenStable().then(() => {
             fixture.detectChanges();
             expect(component.filters.length).toBe(3);
-            const filters = fixture.nativeElement.querySelectorAll('.adf-filters__entry-icon');
+            const filters = fixture.nativeElement.querySelectorAll('.adf-icon');
             expect(filters.length).toBe(3);
             expect(filters[0].innerText).toContain('adjust');
             expect(filters[1].innerText).toContain('inbox');
@@ -117,7 +118,7 @@ describe('ProcessFiltersCloudComponent', () => {
 
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon'));
+            const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
             expect(filters.length).toBe(0);
             done();
         });
@@ -131,7 +132,7 @@ describe('ProcessFiltersCloudComponent', () => {
         component.showIcons = true;
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            const filters = fixture.debugElement.queryAll(By.css('mat-list-item[class*="adf-filters__entry"]'));
+            const filters = fixture.debugElement.queryAll(By.css('.adf-filters__entry'));
             expect(component.filters.length).toBe(3);
             expect(filters.length).toBe(3);
             expect(filters[0].nativeElement.innerText).toContain('FakeAllProcesses');
@@ -274,11 +275,11 @@ describe('ProcessFiltersCloudComponent', () => {
         component.filterClick.subscribe((res) => {
             expect(res).toBeDefined();
             expect(component.currentFilter).toBeDefined();
-            expect(component.currentFilter.name).toEqual('FakeRunningProcesses');
+            expect(component.currentFilter.name).toEqual('FakeAllProcesses');
             done();
         });
 
-        const filterButton = fixture.debugElement.nativeElement.querySelector('span[data-automation-id="FakeRunningProcesses_filter"]');
+        const filterButton = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${fakeGlobalFilter[0].key}_filter"]`);
         filterButton.click();
     });
 

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

@@ -175,4 +175,8 @@ export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestro
         this.onDestroy$.next(true);
         this.onDestroy$.complete();
     }
+
+    isActiveFilter(filter: any): boolean {
+        return this.currentFilter.name === filter.name;
+    }
 }

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

@@ -1,17 +1,20 @@
-<div class="menu-container">
-  <mat-list class="adf-menu-list" *ngIf="filters$ | async as filterList; else loading">
-      <mat-list-item (click)="selectFilterAndEmit({id: filter.id})" *ngFor="let filter of filterList"
-                     class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
-          <mat-icon *ngIf="showIcons && filter.icon" matListIcon class="adf-filters__entry-icon">{{filter.icon}}
-          </mat-icon>
-          <span matLine [attr.data-automation-id]="filter.key + '-filter'">{{filter.name | translate}}</span>
-      </mat-list-item>
-  </mat-list>
-  <ng-template #loading>
-      <ng-container>
-          <div class="adf-app-list-spinner">
-              <mat-spinner></mat-spinner>
-          </div>
-      </ng-container>
-  </ng-template>
-</div>
+<ng-container *ngIf="filters$ | async as filterList; else loading">
+    <div *ngFor="let filter of filterList" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
+        <button (click)="selectFilterAndEmit(filter)"
+          [attr.aria-label]="filter.name | translate"
+          [id]="filter.id"
+          [attr.data-automation-id]="filter.key + '_filter'"
+          mat-button
+          class="adf-filter-action-button adf-full-width" fxLayout="row" fxLayoutAlign="space-between center">
+          <adf-icon data-automation-id="adf-filter-icon" *ngIf="showIcons" [value]="filter.icon"></adf-icon>
+          <span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
+        </button>
+    </div>
+</ng-container>
+<ng-template #loading>
+    <ng-container>
+        <div class="adf-app-list-spinner">
+            <mat-spinner></mat-spinner>
+        </div>
+    </ng-container>
+</ng-template>

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

@@ -2,33 +2,31 @@
     $primary: map-get($theme, primary);
 
     .adf {
-
         &-filters__entry {
+            padding: 12px 0 !important;
+            height: 24px;
+            width: 100%;
             cursor: pointer;
-            font-size: 14px!important;
+            font-size: 14px !important;
             font-weight: bold;
             opacity: 0.54;
-            padding-left: 30px;
 
-            .mat-list-item-content {
-                height: 34px;
+            .adf-full-width {
+                display: flex;
+                width: 100%;
             }
-        }
 
-        &-filters__entry-icon {
-            padding-right: 12px !important;
-            padding-left: 0 !important;
+            .adf-filter-action-button .adf-filter-action-button__label {
+                padding-left: 20px;
+                margin: 0 8px !important;
+            }
         }
-
         &-filters__entry {
-            &.adf-active, &:hover {
+            &.adf-active,
+            &:hover {
                 color: mat-color($primary);
                 opacity: 1;
             }
         }
-
-        &-menu-list {
-            padding-top: 0 !important;
-        }
     }
 }