[ADF-5103] FE - Process/task filter - Backporting the components styles to ADF (#5614)

* * New Filters style * * Improved css * * Fixed wrong css selector * * Fixed failing unit tests * * Fixed failing tests ests * * FIXED E2E PROCESS-SERVICE TESTS * * Fixed failing e2e * * FIxed process-service cloud e2e * * Removed xpath locator * * New Filters style * * Improved css
2025-07-24 17:32:15 +00:00 · 2020-05-13 19:13:05 +05:30
parent b76bb750dc
commit 2b7943919d
23 changed files with 183 additions and 167 deletions
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.html
+++ b/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>
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss
+++ b/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%;
+            }
+
+            .adf-filter-action-button .adf-filter-action-button__label {
+                padding-left: 20px;
+                margin: 0 8px !important;
            }
        }
-
-        &-filters__entry-icon {
-            padding-right: 12px !important;
-            padding-left: 0 !important;
-        }
-
        &-filters__entry {
-            &.adf-active, &:hover {
+            &.adf-active,
+            &:hover {
                color: mat-color($primary);
                opacity: 1;
            }
        }
-
-        &-menu-list {
-            padding-top: 0 !important;
-        }
    }
 }
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts
+++ b/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();
    });

--- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.ts
+++ b/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;
+    }
 }
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.html
+++ b/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>
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.scss
+++ b/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%;
+            }
+
+            .adf-filter-action-button .adf-filter-action-button__label {
+                padding-left: 20px;
+                margin: 0 8px !important;
            }
        }
-
-        &-filters__entry-icon {
-            padding-right: 12px !important;
-            padding-left: 0 !important;
-        }
-
        &-filters__entry {
-            &.adf-active, &:hover {
+            &.adf-active,
+            &:hover {
                color: mat-color($primary);
                opacity: 1;
            }
        }
-
-        &-menu-list {
-            padding-top: 0 !important;
-        }
    }
 }
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts
@@ -76,7 +76,7 @@ describe('TaskFiltersCloudComponent', () => {
        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('done');
@@ -94,7 +94,7 @@ describe('TaskFiltersCloudComponent', () => {

        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();
        });
@@ -108,7 +108,7 @@ describe('TaskFiltersCloudComponent', () => {
        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('FakeInvolvedTasks');
@@ -262,9 +262,10 @@ describe('TaskFiltersCloudComponent', () => {

        fixture.detectChanges();
        spyOn(component, 'selectFilterAndEmit').and.stub();
-        const filterButton = fixture.debugElement.nativeElement.querySelector('span[data-automation-id="fake-my-tast1-filter"]');
+        const filterButton = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${fakeGlobalFilter[1].key}_filter"]`);
+
        filterButton.click();
-        expect(component.selectFilterAndEmit).toHaveBeenCalledWith({id: fakeGlobalFilter[1].id});
+        expect(component.selectFilterAndEmit).toHaveBeenCalledWith(fakeGlobalFilter[1]);
    }));

    it('should reload filters by appName on binding changes', () => {