Skip to content

AAE-42804 Cleaning up tasks and process filter components #11693

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ehsan-2019 merged 3 commits into from
Feb 26, 2026
+197 −341
Merged

AAE-42804 Cleaning up tasks and process filter components #11693

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8006597
AAE-42804 Cleaning up tasks and process filter components
ehsan-2019 Feb 26, 2026
8281c7d
Added loading aria label and code improvements
ehsan-2019 Feb 26, 2026
cd7d905
AAE-42804 Fixing query param
ehsan-2019 Feb 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions lib/process-services-cloud/src/lib/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@
"MAXIMUM_LENGTH": "Length exceeded, {{characters}} characters max.",
"SPACE_VALIDATOR": "Cannot begin or end with a space."
}
}
},
"LOADING": "Loading"
},
"ADF_CLOUD_TASK_LIST": {
"START_TASK": {
Expand Down Expand Up @@ -97,7 +98,8 @@
"SUBTITLE": "Create a new task that you want to easily find later",
"NONE": "No task lists found"
}
}
},
"LOADING": "Loading"
},
"ADF_CLOUD_SERVICE_TASK_LIST": {
"PROPERTIES": {
Expand Down
75 changes: 39 additions & 36 deletions ...b/process/process-filters/components/process-filters/process-filters-cloud.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,40 @@
<mat-action-list class="adf-process-filters" *ngIf="filters$ | async as filterList; else loading">
<button
*ngFor="let filter of filterList"
mat-list-item
(click)="onFilterClick(filter)"
[attr.aria-label]="filter.name | translate"
[id]="filter.id"
[attr.data-automation-id]="filter.key + '_filter'"
[class.adf-active]="currentFilter === filter"
>
<div class="adf-process-filters__entry">
<div>
<mat-icon data-automation-id="adf-filter-icon" *ngIf="showIcons" [adf-icon]="filter.icon" aria-hidden="true" />
<span
data-automation-id="adf-filter-label"
class="adf-filter-action-button__label">
{{ filter.name | translate }}
@if (filters$ | async; as filterList) {
<mat-nav-list>
@for (filter of filterList; track filter.id) {
<a mat-list-item
[activated]="filter.id === currentRouteFilterId()"
[routerLink]="[PROCESSES_ROUTE]"
[queryParams]="{ filterId: filter.id }"
[attr.data-automation-id]="filter.key + '_filter'"
class="adf-process-filters__entry"
[id]="filter.id"
[title]="filter.name ?? '' | translate"
[attr.aria-label]="filter.name ?? '' | translate"
(click)="onFilterClick(filter)">
<span matListItemTitle>
{{ filter.name ?? '' | translate }}
</span>
</div>
<span
*ngIf="counters[filter.key]"
[attr.data-automation-id]="filter.key + '_filter-counter'"
class="adf-process-filters__entry-counter"
[class.adf-active]="isFilterUpdated(filter.key)"
>
{{ counters[filter.key] }}
</span>
</div>
</button>
</mat-action-list>
<ng-template #loading>
<ng-container>
<div class="adf-app-list-spinner">
<mat-spinner />
</div>
</ng-container>
</ng-template>
@if (showIcons) {
<mat-icon matListItemIcon
data-automation-id="adf-filter-icon"
[adf-icon]="filter.icon ?? ''"
aria-hidden="true" />
}
@if (counters[filter.key ?? '']) {
<span matListItemMeta
[attr.data-automation-id]="filter.key + '_filter-counter'"
class="adf-process-filters__entry-counter"
[class.adf-active]="isFilterUpdated(filter.key ?? '')"
>
{{ counters[filter.key ?? ''] }}
</span>
}
</a>
}
</mat-nav-list>
} @else {
<div class="adf-app-list-spinner">
<mat-spinner [attr.aria-label]="'ADF_CLOUD_PROCESS_LIST.LOADING' | translate" aria-live="polite" />
</div>
}

41 changes: 12 additions & 29 deletions ...b/process/process-filters/components/process-filters/process-filters-cloud.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,18 @@
.adf-process-filters {
margin-right: calc(-1 * var(--adf-theme-spacing));

&__entry {
font-size: var(--theme-body-1-font-size);
color: var(--adf-theme-foreground-text-color-054);
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
height: 100%;
gap: var(--adf-theme-spacing);

&:hover {
color: var(--theme-primary-color);
}
@use '@angular/material' as mat;

&-counter {
padding: 0 5px;
border-radius: 15px;
.adf-process-filters {
&__entry-counter {
padding: 0 5px;
border-radius: var(--mat-sys-corner-large, 15px);

&.adf-active {
background-color: var(--theme-accent-color);
color: var(--theme-accent-color-default-contrast);
font-size: smaller;
}
}
}
&.adf-active {
background-color: var(--mat-sys-secondary, var(--theme-accent-color));

.adf-active {
.adf-process-filters__entry {
color: var(--theme-primary-color);
@include mat.list-overrides(
(
list-item-trailing-supporting-text-color: var(--mat-sys-on-secondary, var(--theme-accent-color-default-contrast))
)
);
}
}
}
168 changes: 37 additions & 131 deletions ...rocess/process-filters/components/process-filters/process-filters-cloud.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
* limitations under the License.
*/

import { SimpleChange } from '@angular/core';
import { Component, SimpleChange } from '@angular/core';
import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing';
import { first, of, throwError } from 'rxjs';
import { ProcessFilterCloudService } from '../../services/process-filter-cloud.service';
Expand All @@ -30,6 +30,11 @@ import { ApolloTestingModule } from 'apollo-angular/testing';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatIconHarness } from '@angular/material/icon/testing';
import { ActivatedRoute, provideRouter, Router } from '@angular/router';
import { RouterTestingHarness } from '@angular/router/testing';

@Component({ selector: 'adf-cloud-dummy', template: '' })
class DummyComponent {}

const ProcessFilterCloudServiceMock = {
getProcessFilters: () => of(mockProcessFilters),
Expand All @@ -44,8 +49,9 @@ describe('ProcessFiltersCloudComponent', () => {
let getProcessFiltersSpy: jasmine.Spy;
let getProcessNotificationSubscriptionSpy: jasmine.Spy;
let loader: HarnessLoader;
let router: Router;

const configureTestingModule = (searchApiMethod: 'GET' | 'POST') => {
const configureTestingModule = async (searchApiMethod: 'GET' | 'POST') => {
TestBed.configureTestingModule({
imports: [ProcessFiltersCloudComponent, ApolloTestingModule],
providers: [
Expand All @@ -58,7 +64,21 @@ describe('ProcessFiltersCloudComponent', () => {
getProcessListCount: () => of(10)
}
},
{ provide: ProcessFilterCloudService, useValue: ProcessFilterCloudServiceMock }
{ provide: ProcessFilterCloudService, useValue: ProcessFilterCloudServiceMock },
provideRouter([{ path: 'process-list-cloud', component: DummyComponent }]),
{
provide: ActivatedRoute,
useValue: {
queryParamMap: of({
get: (param: string) => {
if (param === 'filterId') {
return 'fake-process-filter-id';
}
return null;
}
})
}
}
]
});
fixture = TestBed.createComponent(ProcessFiltersCloudComponent);
Expand All @@ -67,6 +87,9 @@ describe('ProcessFiltersCloudComponent', () => {
component.searchApiMethod = searchApiMethod;

processFilterService = TestBed.inject(ProcessFilterCloudService);
TestBed.inject(ActivatedRoute);
router = TestBed.inject(Router);
await RouterTestingHarness.create();
getProcessFiltersSpy = spyOn(processFilterService, 'getProcessFilters').and.returnValue(of(mockProcessFilters));
getProcessNotificationSubscriptionSpy = spyOn(processFilterService, 'getProcessNotificationSubscription').and.returnValue(of([]));
};
Expand All @@ -76,8 +99,8 @@ describe('ProcessFiltersCloudComponent', () => {
});

describe('searchApiMethod set to GET', () => {
beforeEach(() => {
configureTestingModule('GET');
beforeEach(async () => {
await configureTestingModule('GET');
});

it('should attach specific icon for each filter if hasIcon is true', async () => {
Expand Down Expand Up @@ -182,20 +205,6 @@ describe('ProcessFiltersCloudComponent', () => {

describe('Highlight Selected Filter', () => {
const allProcessesFilterKey = mockProcessFilters[0].key;
const runningProcessesFilterKey = mockProcessFilters[1].key;
const completedProcessesFilterKey = mockProcessFilters[2].key;

const getActiveFilterElement = (filterKey: string): Element => {
const activeFilter = fixture.debugElement.query(By.css(`.adf-active`));
return activeFilter.nativeElement.querySelector(`[data-automation-id="${filterKey}_filter"]`);
};

const clickOnFilter = async (filterKey: string) => {
const button = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${filterKey}_filter"]`);
button.click();
fixture.detectChanges();
await fixture.whenStable();
};

it('should apply active CSS class on filter click', async () => {
component.enableNotifications = true;
Expand All @@ -205,36 +214,20 @@ describe('ProcessFiltersCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();

await clickOnFilter(allProcessesFilterKey);
fixture.detectChanges();
await fixture.whenStable();

expect(getActiveFilterElement(allProcessesFilterKey)).toBeDefined();
expect(getActiveFilterElement(runningProcessesFilterKey)).toBeNull();
expect(getActiveFilterElement(completedProcessesFilterKey)).toBeNull();

await clickOnFilter(runningProcessesFilterKey);
fixture.detectChanges();
await fixture.whenStable();
const link = fixture.debugElement.query(By.css(`[data-automation-id="${allProcessesFilterKey}_filter"]`)).nativeElement;
expect(link.getAttribute('href')).toBe('/process-list-cloud?filterId=10');

expect(getActiveFilterElement(allProcessesFilterKey)).toBeNull();
expect(getActiveFilterElement(runningProcessesFilterKey)).toBeDefined();
expect(getActiveFilterElement(completedProcessesFilterKey)).toBeNull();

await clickOnFilter(completedProcessesFilterKey);
link.click();
fixture.detectChanges();
await fixture.whenStable();

expect(getActiveFilterElement(allProcessesFilterKey)).toBeNull();
expect(getActiveFilterElement(runningProcessesFilterKey)).toBeNull();
expect(getActiveFilterElement(completedProcessesFilterKey)).toBeDefined();
expect(router.url).toBe('/process-list-cloud?filterId=10');
});
});
});

describe('searchApiMethod set to POST', () => {
beforeEach(() => {
configureTestingModule('POST');
beforeEach(async () => {
await configureTestingModule('POST');
});

it('should attach specific icon for each filter if hasIcon is true', async () => {
Expand Down Expand Up @@ -336,62 +329,11 @@ describe('ProcessFiltersCloudComponent', () => {
expect(component.currentFilter).toEqual(mockProcessFilters[0]);
expect(filterClickedSpy).toHaveBeenCalledWith(mockProcessFilters[0]);
});

describe('Highlight Selected Filter', () => {
const allProcessesFilterKey = mockProcessFilters[0].key;
const runningProcessesFilterKey = mockProcessFilters[1].key;
const completedProcessesFilterKey = mockProcessFilters[2].key;

const getActiveFilterElement = (filterKey: string): Element => {
const activeFilter = fixture.debugElement.query(By.css(`.adf-active`));
return activeFilter.nativeElement.querySelector(`[data-automation-id="${filterKey}_filter"]`);
};

const clickOnFilter = async (filterKey: string) => {
const button = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${filterKey}_filter"]`);
button.click();
fixture.detectChanges();
await fixture.whenStable();
};

it('should apply active CSS class on filter click', async () => {
component.enableNotifications = true;
component.appName = 'mock-app-name';
const appNameChange = new SimpleChange(null, 'mock-app-name', true);
component.ngOnChanges({ appName: appNameChange });
fixture.detectChanges();
await fixture.whenStable();

await clickOnFilter(allProcessesFilterKey);
fixture.detectChanges();
await fixture.whenStable();

expect(getActiveFilterElement(allProcessesFilterKey)).toBeDefined();
expect(getActiveFilterElement(runningProcessesFilterKey)).toBeNull();
expect(getActiveFilterElement(completedProcessesFilterKey)).toBeNull();

await clickOnFilter(runningProcessesFilterKey);
fixture.detectChanges();
await fixture.whenStable();

expect(getActiveFilterElement(allProcessesFilterKey)).toBeNull();
expect(getActiveFilterElement(runningProcessesFilterKey)).toBeDefined();
expect(getActiveFilterElement(completedProcessesFilterKey)).toBeNull();

await clickOnFilter(completedProcessesFilterKey);
fixture.detectChanges();
await fixture.whenStable();

expect(getActiveFilterElement(allProcessesFilterKey)).toBeNull();
expect(getActiveFilterElement(runningProcessesFilterKey)).toBeNull();
expect(getActiveFilterElement(completedProcessesFilterKey)).toBeDefined();
});
});
});

describe('API agnostic', () => {
beforeEach(() => {
configureTestingModule('GET');
beforeEach(async () => {
await configureTestingModule('GET');
});

it('should emit an error with a bad response', () => {
Expand Down Expand Up @@ -549,43 +491,7 @@ describe('ProcessFiltersCloudComponent', () => {
});

describe('Highlight Selected Filter', () => {
const allProcessesFilterKey = mockProcessFilters[0].key;
const runningProcessesFilterKey = mockProcessFilters[1].key;
const completedProcessesFilterKey = mockProcessFilters[2].key;

const getActiveFilterElement = (filterKey: string): Element => {
const activeFilter = fixture.debugElement.query(By.css(`.adf-active`));
return activeFilter.nativeElement.querySelector(`[data-automation-id="${filterKey}_filter"]`);
};

it('Should apply active CSS class when filterParam input changed', async () => {
fixture.detectChanges();
component.ngOnChanges({ filterParam: new SimpleChange(null, { key: allProcessesFilterKey }, true) });
fixture.detectChanges();
await fixture.whenStable();

expect(getActiveFilterElement(allProcessesFilterKey)).toBeDefined();
expect(getActiveFilterElement(runningProcessesFilterKey)).toBeNull();
expect(getActiveFilterElement(completedProcessesFilterKey)).toBeNull();

component.ngOnChanges({ filterParam: new SimpleChange(null, { key: runningProcessesFilterKey }, true) });
fixture.detectChanges();
await fixture.whenStable();

expect(getActiveFilterElement(allProcessesFilterKey)).toBeNull();
expect(getActiveFilterElement(runningProcessesFilterKey)).toBeDefined();
expect(getActiveFilterElement(completedProcessesFilterKey)).toBeNull();

component.ngOnChanges({ filterParam: new SimpleChange(null, { key: completedProcessesFilterKey }, true) });
fixture.detectChanges();
await fixture.whenStable();

expect(getActiveFilterElement(allProcessesFilterKey)).toBeNull();
expect(getActiveFilterElement(runningProcessesFilterKey)).toBeNull();
expect(getActiveFilterElement(completedProcessesFilterKey)).toBeDefined();
});

it('should made sbscription', () => {
it('should make subscription', () => {
component.enableNotifications = true;
component.appName = 'mock-app-name';
const appNameChange = new SimpleChange(null, 'mock-app-name', true);
Expand Down
Loading
Loading