inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* * 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
This commit is contained in:
siva kumar
2020-05-13 19:13:05 +05:30
committed by GitHub
parent b76bb750dc
commit 2b7943919d
23 changed files with 183 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

6
e2e/pages/adf/process-services/filters.page.ts
View File

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

18
e2e/pages/adf/process-services/process-filters.page.ts
View File

@@ -21,9 +21,9 @@ import { by, element, ElementFinder, Locator } from 'protractor';
export class ProcessFiltersPage { export class ProcessFiltersPage {
dataTable = new DataTableComponentPage(); dataTable = new DataTableComponentPage();
runningFilter: ElementFinder = element(by.css('span[data-automation-id="Running_filter"]')); runningFilter: ElementFinder = element(by.css('button[data-automation-id="Running_filter"]'));
completedFilter: ElementFinder = element(by.css('div[class="mat-list-text"] > span[data-automation-id="Completed_filter"]')); completedFilter: ElementFinder = element(by.css('button[data-automation-id="Completed_filter"]'));
allFilter: ElementFinder = element(by.css('span[data-automation-id="All_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')); 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"]')); 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"]')); 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"]'); 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(); 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'); 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> { async startProcess(): Promise<StartProcessPage> {
await this.clickCreateProcessButton(); await this.clickCreateProcessButton();
@@ -78,7 +78,7 @@ export class ProcessFiltersPage {
} }
async checkFilterIsHighlighted(filterName): Promise<void> { 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); await BrowserVisibility.waitUntilElementIsVisible(processNameHighlighted);
} }
@@ -104,25 +104,25 @@ export class ProcessFiltersPage {
} }
async checkFilterIsDisplayed(name): Promise<void> { 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); await BrowserVisibility.waitUntilElementIsVisible(filterName);
} }
async checkFilterHasNoIcon(name): Promise<void> { 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.waitUntilElementIsVisible(filterName);
await BrowserVisibility.waitUntilElementIsNotVisible(filterName.element(this.processIcon)); await BrowserVisibility.waitUntilElementIsNotVisible(filterName.element(this.processIcon));
} }
async getFilterIcon(name): Promise<string> { 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); await BrowserVisibility.waitUntilElementIsVisible(filterName);
const icon = filterName.element(this.processIcon); const icon = filterName.element(this.processIcon);
return BrowserActions.getText(icon); return BrowserActions.getText(icon);
} }
async checkFilterIsNotDisplayed(name): Promise<void> { 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); await BrowserVisibility.waitUntilElementIsNotVisible(filterName);
} }

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

@@ -15,13 +15,13 @@
* limitations under the License. * limitations under the License.
*/ */
import { by, ElementFinder, Locator } from 'protractor'; import { by, ElementFinder } from 'protractor';
import { BrowserVisibility, BrowserActions } from '@alfresco/adf-testing'; import { BrowserVisibility, BrowserActions } from '@alfresco/adf-testing';
export class TaskFiltersPage { export class TaskFiltersPage {
filter; 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) { constructor(filter: ElementFinder) {
this.filter = filter; this.filter = filter;

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

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

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

@@ -2,33 +2,31 @@
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
.adf { .adf {
&-filters__entry { &-filters__entry {
padding: 12px 0 !important;
height: 24px;
width: 100%;
cursor: pointer; cursor: pointer;
font-size: 14px!important; font-size: 14px !important;
font-weight: bold; font-weight: bold;
opacity: 0.54; opacity: 0.54;
padding-left: 30px;
.mat-list-item-content { .adf-full-width {
height: 34px; 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 { &-filters__entry {
&.adf-active, &:hover { &.adf-active,
&:hover {
color: mat-color($primary); color: mat-color($primary);
opacity: 1; opacity: 1;
} }
} }
&-menu-list {
padding-top: 0 !important;
}
} }
} }

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

@@ -36,6 +36,7 @@ describe('ProcessFiltersCloudComponent', () => {
const fakeGlobalFilter = [ const fakeGlobalFilter = [
new ProcessFilterCloudModel({ new ProcessFilterCloudModel({
name: 'FakeAllProcesses', name: 'FakeAllProcesses',
key: 'FakeAllProcesses',
icon: 'adjust', icon: 'adjust',
id: '10', id: '10',
status: '' status: ''
@@ -99,7 +100,7 @@ describe('ProcessFiltersCloudComponent', () => {
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); fixture.detectChanges();
expect(component.filters.length).toBe(3); 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.length).toBe(3);
expect(filters[0].innerText).toContain('adjust'); expect(filters[0].innerText).toContain('adjust');
expect(filters[1].innerText).toContain('inbox'); expect(filters[1].innerText).toContain('inbox');
@@ -117,7 +118,7 @@ describe('ProcessFiltersCloudComponent', () => {
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); 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); expect(filters.length).toBe(0);
done(); done();
}); });
@@ -131,7 +132,7 @@ describe('ProcessFiltersCloudComponent', () => {
component.showIcons = true; component.showIcons = true;
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); 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(component.filters.length).toBe(3);
expect(filters.length).toBe(3); expect(filters.length).toBe(3);
expect(filters[0].nativeElement.innerText).toContain('FakeAllProcesses'); expect(filters[0].nativeElement.innerText).toContain('FakeAllProcesses');
@@ -274,11 +275,11 @@ describe('ProcessFiltersCloudComponent', () => {
component.filterClick.subscribe((res) => { component.filterClick.subscribe((res) => {
expect(res).toBeDefined(); expect(res).toBeDefined();
expect(component.currentFilter).toBeDefined(); expect(component.currentFilter).toBeDefined();
expect(component.currentFilter.name).toEqual('FakeRunningProcesses'); expect(component.currentFilter.name).toEqual('FakeAllProcesses');
done(); 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(); filterButton.click();
}); });

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

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

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

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

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

@@ -2,33 +2,31 @@
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
.adf { .adf {
&-filters__entry { &-filters__entry {
padding: 12px 0 !important;
height: 24px;
width: 100%;
cursor: pointer; cursor: pointer;
font-size: 14px!important; font-size: 14px !important;
font-weight: bold; font-weight: bold;
opacity: 0.54; opacity: 0.54;
padding-left: 30px;
.mat-list-item-content { .adf-full-width {
height: 34px; 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 { &-filters__entry {
&.adf-active, &:hover { &.adf-active,
&:hover {
color: mat-color($primary); color: mat-color($primary);
opacity: 1; opacity: 1;
} }
} }
&-menu-list {
padding-top: 0 !important;
}
} }
} }

11
lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts
View File

@@ -76,7 +76,7 @@ describe('TaskFiltersCloudComponent', () => {
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); fixture.detectChanges();
expect(component.filters.length).toBe(3); 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.length).toBe(3);
expect(filters[0].innerText).toContain('adjust'); expect(filters[0].innerText).toContain('adjust');
expect(filters[1].innerText).toContain('done'); expect(filters[1].innerText).toContain('done');
@@ -94,7 +94,7 @@ describe('TaskFiltersCloudComponent', () => {
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); 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); expect(filters.length).toBe(0);
done(); done();
}); });
@@ -108,7 +108,7 @@ describe('TaskFiltersCloudComponent', () => {
component.showIcons = true; component.showIcons = true;
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); 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(component.filters.length).toBe(3);
expect(filters.length).toBe(3); expect(filters.length).toBe(3);
expect(filters[0].nativeElement.innerText).toContain('FakeInvolvedTasks'); expect(filters[0].nativeElement.innerText).toContain('FakeInvolvedTasks');
@@ -262,9 +262,10 @@ describe('TaskFiltersCloudComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
spyOn(component, 'selectFilterAndEmit').and.stub(); 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(); 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', () => { it('should reload filters by appName on binding changes', () => {

18
lib/process-services/src/lib/process-list/components/process-filters.component.html
View File

@@ -1,9 +1,11 @@
<div class="menu-container"> <div *ngFor="let filter of filters" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
<mat-list class="adf-menu-list"> <button (click)="selectFilter(filter)"
<mat-list-item (click)="selectFilter(filter)" *ngFor="let filter of filters" [attr.aria-label]="filter.name | translate"
class="adf-filters__entry" [class.adf-active]="currentFilter === filter"> [id]="filter.id"
<mat-icon *ngIf="showIcon" matListIcon class="adf-filters__entry-icon">{{getFilterIcon(filter.icon)}}</mat-icon> [attr.data-automation-id]="filter.name + '_filter'"
<span matLine [attr.data-automation-id]="filter.name + '_filter'">{{filter.name}}</span> mat-button
</mat-list-item> class="adf-filter-action-button adf-full-width" fxLayout="row" fxLayoutAlign="space-between center">
</mat-list> <adf-icon data-automation-id="adf-filter-icon" *ngIf="showIcon" [value]="getFilterIcon(filter.icon)"></adf-icon>
<span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
</button>
</div> </div>

31
lib/process-services/src/lib/process-list/components/process-filters.component.scss
View File

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

4
lib/process-services/src/lib/process-list/components/process-filters.component.spec.ts
View File

@@ -287,7 +287,7 @@ describe('ProcessFiltersComponent', () => {
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); fixture.detectChanges();
expect(filterList.filters.length).toBe(3); expect(filterList.filters.length).toBe(3);
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(3); expect(filters.length).toBe(3);
expect(filters[0].nativeElement.innerText).toContain('dashboard'); expect(filters[0].nativeElement.innerText).toContain('dashboard');
expect(filters[1].nativeElement.innerText).toContain('shuffle'); expect(filters[1].nativeElement.innerText).toContain('shuffle');
@@ -304,7 +304,7 @@ describe('ProcessFiltersComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); 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); expect(filters.length).toBe(0);
done(); done();
}); });

2
lib/process-services/src/lib/process-list/components/process-filters.component.ts
View File

@@ -69,6 +69,7 @@ export class ProcessFiltersComponent implements OnInit, OnChanges {
currentFilter: ProcessInstanceFilterRepresentation; currentFilter: ProcessInstanceFilterRepresentation;
filters: UserProcessInstanceFilterRepresentation [] = []; filters: UserProcessInstanceFilterRepresentation [] = [];
active = false;
private iconsMDL: IconModel; private iconsMDL: IconModel;
@@ -147,6 +148,7 @@ export class ProcessFiltersComponent implements OnInit, OnChanges {
*/ */
selectFilter(filter: ProcessInstanceFilterRepresentation) { selectFilter(filter: ProcessInstanceFilterRepresentation) {
this.currentFilter = filter; this.currentFilter = filter;
this.active = true;
this.filterClick.emit(filter); this.filterClick.emit(filter);
} }

22
lib/process-services/src/lib/task-list/components/task-filters.component.html
View File

@@ -1,9 +1,13 @@
<div class="menu-container"> <div *ngFor="let filter of filters" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
<mat-list class="adf-menu-list"> <button (click)="selectFilterAndEmit(filter)"
<mat-list-item (click)="selectFilterAndEmit(filter)" *ngFor="let filter of filters" [attr.aria-label]="filter.name | translate"
class="adf-filters__entry" [class.adf-active]="currentFilter === filter"> [id]="filter.id"
<mat-icon *ngIf="showIcon" matListIcon class="adf-filters__entry-icon">{{getFilterIcon(filter.icon)}}</mat-icon> [attr.data-automation-id]="filter.name + '_filter'"
<span matLine [attr.data-automation-id]="filter.name + '_filter'">{{filter.name}}</span> mat-button
</mat-list-item> class="adf-filter-action-button adf-full-width" fxLayout="row" fxLayoutAlign="space-between center">
</mat-list> <ng-container *ngIf="showIcon">
</div> <adf-icon data-automation-id="adf-filter-icon" [value]="getFilterIcon(filter.icon)"></adf-icon>
</ng-container>
<span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
</button>
</div>

30
lib/process-services/src/lib/task-list/components/task-filters.component.scss
View File

@@ -2,33 +2,31 @@
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
.adf { .adf {
&-filters__entry { &-filters__entry {
padding: 12px 0 !important;
height: 24px;
width: 100%;
cursor: pointer; cursor: pointer;
font-size: 14px!important; font-size: 14px !important;
font-weight: bold; font-weight: bold;
opacity: 0.54; opacity: 0.54;
padding-left: 30px;
.mat-list-item-content { .adf-full-width {
height: 34px; 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 { &-filters__entry {
&.adf-active, &:hover { &.adf-active,
&:hover {
color: mat-color($primary); color: mat-color($primary);
opacity: 1; opacity: 1;
} }
} }
&-menu-list {
padding-top: 0 !important;
}
} }
} }

4
lib/process-services/src/lib/task-list/components/task-filters.component.spec.ts
View File

@@ -321,7 +321,7 @@ describe('TaskFiltersComponent', () => {
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); fixture.detectChanges();
expect(component.filters.length).toBe(3); expect(component.filters.length).toBe(3);
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(3); expect(filters.length).toBe(3);
expect(filters[0].nativeElement.innerText).toContain('format_align_left'); expect(filters[0].nativeElement.innerText).toContain('format_align_left');
expect(filters[1].nativeElement.innerText).toContain('check_circle'); expect(filters[1].nativeElement.innerText).toContain('check_circle');
@@ -338,7 +338,7 @@ describe('TaskFiltersComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); 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); expect(filters.length).toBe(0);
done(); done();
}); });

8
lib/testing/src/lib/process-services-cloud/pages/process-filters-cloud-component.page.ts
View File

@@ -15,18 +15,18 @@
* limitations under the License. * limitations under the License.
*/ */
import { by, element, ElementFinder, Locator } from 'protractor'; import { by, element, ElementFinder } from 'protractor';
import { BrowserVisibility } from '../../core/utils/browser-visibility'; import { BrowserVisibility } from '../../core/utils/browser-visibility';
import { BrowserActions } from '../../core/utils/browser-actions'; import { BrowserActions } from '../../core/utils/browser-actions';
export class ProcessFiltersCloudComponentPage { export class ProcessFiltersCloudComponentPage {
filter: ElementFinder; filter: ElementFinder;
filterIcon: Locator = by.xpath("ancestor::div[@class='mat-list-item-content']/mat-icon"); filterIcon = by.css('adf-icon[data-automation-id="adf-filter-icon"]');
processFilters: ElementFinder = element(by.css("mat-expansion-panel[data-automation-id='Process Filters']")); processFilters: ElementFinder = element(by.css("mat-expansion-panel[data-automation-id='Process Filters']"));
activeFilter: ElementFinder = element(by.css("mat-list-item[class*='active'] span")); activeFilter: ElementFinder = element(by.css('.adf-active [data-automation-id="adf-filter-label"]'));
processFiltersList: ElementFinder = element(by.css('adf-cloud-process-filters')); processFiltersList: ElementFinder = element(by.css('adf-cloud-process-filters'));
async checkProcessFilterIsDisplayed(filterName: string): Promise<void> { async checkProcessFilterIsDisplayed(filterName: string): Promise<void> {
@@ -106,6 +106,6 @@ export class ProcessFiltersCloudComponentPage {
} }
getProcessFilterLocatorByFilterName(filterName: string): ElementFinder { getProcessFilterLocatorByFilterName(filterName: string): ElementFinder {
return element(by.css(`span[data-automation-id="${filterName}_filter"]`)); return element(by.css(`button[data-automation-id="${filterName}_filter"]`));
} }
} }

4
lib/testing/src/lib/process-services-cloud/pages/task-filters-cloud-component.page.ts
View File

@@ -23,7 +23,7 @@ export class TaskFiltersCloudComponentPage {
filter: ElementFinder; filter: ElementFinder;
taskFilters: ElementFinder = element(by.css(`mat-expansion-panel[data-automation-id='Task Filters']`)); taskFilters: ElementFinder = element(by.css(`mat-expansion-panel[data-automation-id='Task Filters']`));
activeFilter: ElementFinder = element(by.css("mat-list-item[class*='active'] span")); activeFilter: ElementFinder = element(by.css('.adf-active [data-automation-id="adf-filter-label"]'));
async checkTaskFilterIsDisplayed(filterName: string): Promise<void> { async checkTaskFilterIsDisplayed(filterName: string): Promise<void> {
this.filter = this.getTaskFilterLocatorByFilterName(filterName); this.filter = this.getTaskFilterLocatorByFilterName(filterName);
@@ -51,7 +51,7 @@ export class TaskFiltersCloudComponentPage {
} }
getTaskFilterLocatorByFilterName(filterName: string): ElementFinder { getTaskFilterLocatorByFilterName(filterName: string): ElementFinder {
return element(by.css(`span[data-automation-id="${filterName}-filter"]`)); return element(by.css(`button[data-automation-id="${filterName}_filter"]`));
} }
} }

12
lib/testing/src/lib/process-services/pages/filters.page.ts
View File

@@ -17,13 +17,13 @@
import { BrowserVisibility } from '../../core/utils/browser-visibility'; import { BrowserVisibility } from '../../core/utils/browser-visibility';
import { BrowserActions } from '../../core/utils/browser-actions'; import { BrowserActions } from '../../core/utils/browser-actions';
import { by, element, ElementFinder, Locator } from 'protractor'; import { by, element, ElementFinder } from 'protractor';
export class FiltersPage { export class FiltersPage {
accordionMenu: ElementFinder = element(by.css('.app-processes-menu mat-accordion')); accordionMenu: ElementFinder = element(by.css('.app-processes-menu mat-accordion'));
buttonWindow: ElementFinder = element(by.css('div > button[data-automation-id="btn-start-process"] > div')); buttonWindow: ElementFinder = element(by.css('div > button[data-automation-id="btn-start-process"] > div'));
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 clickFilterButton(filterElement: ElementFinder): Promise<void> { async clickFilterButton(filterElement: ElementFinder): Promise<void> {
await BrowserActions.click(filterElement); await BrowserActions.click(filterElement);
@@ -34,7 +34,7 @@ export class FiltersPage {
} }
async isFilterHighlighted(filterName): Promise<boolean> { async isFilterHighlighted(filterName): Promise<boolean> {
const processNameHighlighted: ElementFinder = element(by.css(`mat-list-item.adf-active span[data-automation-id='${filterName}_filter']`)); const processNameHighlighted: ElementFinder = element(by.css(`.adf-active button[data-automation-id='${filterName}_filter']`));
try { try {
await BrowserVisibility.waitUntilElementIsVisible(processNameHighlighted); await BrowserVisibility.waitUntilElementIsVisible(processNameHighlighted);
return true; return true;
@@ -44,7 +44,7 @@ export class FiltersPage {
} }
async isFilterDisplayed(name): Promise<boolean> { async isFilterDisplayed(name): Promise<boolean> {
const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`)); const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`));
try { try {
await BrowserVisibility.waitUntilElementIsVisible(filterName); await BrowserVisibility.waitUntilElementIsVisible(filterName);
return true; return true;
@@ -54,13 +54,13 @@ export class FiltersPage {
} }
async checkFilterHasNoIcon(name): Promise<void> { 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.waitUntilElementIsVisible(filterName);
await BrowserVisibility.waitUntilElementIsNotVisible(filterName.element(this.processIcon)); await BrowserVisibility.waitUntilElementIsNotVisible(filterName.element(this.processIcon));
} }
async getFilterIcon(name): Promise<string> { 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); await BrowserVisibility.waitUntilElementIsVisible(filterName);
const icon = filterName.element(this.processIcon); const icon = filterName.element(this.processIcon);
return BrowserActions.getText(icon); return BrowserActions.getText(icon);

6
lib/testing/src/lib/process-services/pages/process-filters.page.ts
View File

@@ -22,9 +22,9 @@ export class ProcessFiltersPage {
filtersPage = new FiltersPage(); filtersPage = new FiltersPage();
runningFilter: ElementFinder = element(by.css('span[data-automation-id="Running_filter"]')); runningFilter: ElementFinder = element(by.css('button[data-automation-id="Running_filter"]'));
completedFilter: ElementFinder = element(by.css('div[class="mat-list-text"] > span[data-automation-id="Completed_filter"]')); completedFilter: ElementFinder = element(by.css('button[data-automation-id="Completed_filter"]'));
allFilter: ElementFinder = element(by.css('span[data-automation-id="All_filter"]')); allFilter: ElementFinder = element(by.css('button[data-automation-id="All_filter"]'));
accordionMenu: ElementFinder = element(by.css('.app-processes-menu mat-accordion')); accordionMenu: ElementFinder = element(by.css('.app-processes-menu mat-accordion'));
async clickRunningFilterButton(): Promise<void> { async clickRunningFilterButton(): Promise<void> {

8
lib/testing/src/lib/process-services/pages/task-filters.page.ts
View File

@@ -22,10 +22,10 @@ export class TaskFiltersPage {
filtersPage = new FiltersPage(); filtersPage = new FiltersPage();
myTasks: ElementFinder = element(by.css('span[data-automation-id="My Tasks_filter"]')); myTasks: ElementFinder = element(by.css('button[data-automation-id="My Tasks_filter"]'));
queuedTask: ElementFinder = element(by.css('span[data-automation-id="Queued Tasks_filter"]')); queuedTask: ElementFinder = element(by.css('button[data-automation-id="Queued Tasks_filter"]'));
completedTask: ElementFinder = element(by.css('span[data-automation-id="Completed Tasks_filter"]')); completedTask: ElementFinder = element(by.css('button[data-automation-id="Completed Tasks_filter"]'));
involvedTask: ElementFinder = element(by.css('span[data-automation-id="Involved Tasks_filter"]')); involvedTask: ElementFinder = element(by.css('button[data-automation-id="Involved Tasks_filter"]'));
accordionMenu: ElementFinder = element(by.css('.app-processes-menu mat-accordion')); accordionMenu: ElementFinder = element(by.css('.app-processes-menu mat-accordion'));
async clickMyTasksFilterButton(): Promise<void> { async clickMyTasksFilterButton(): Promise<void> {