From 56474bc96e92642949fde6f4cbdd516fac90492f Mon Sep 17 00:00:00 2001 From: arditdomi <32884230+arditdomi@users.noreply.github.com> Date: Mon, 24 Feb 2020 15:37:55 +0000 Subject: [PATCH] =?UTF-8?q?[AAE-1975]=20Add=20no=20results=20template=20wh?= =?UTF-8?q?en=20searching=20in=20People/Group=20clo=E2=80=A6=20(#5479)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [AAE-1975] Add no results template when searching in People/Group cloud component * [AAE-1975] Add timeout for check no results e2e method * [AAE-1975] Adapt unit tests, add no results checks * [AAE-1975] Fix styling, remove error icon and red colour * [AAE-1975] Remove timeout --- .../components/group-cloud.component.html | 30 +++++++++----- .../components/group-cloud.component.scss | 4 ++ .../components/group-cloud.component.spec.ts | 21 ++++++---- .../group/components/group-cloud.component.ts | 41 +++++++++++-------- .../components/people-cloud.component.html | 14 ++++++- .../components/people-cloud.component.scss | 4 ++ .../components/people-cloud.component.spec.ts | 19 +++++---- .../components/people-cloud.component.ts | 41 +++++++++++-------- .../pages/group-cloud-component.page.ts | 5 +++ .../pages/people-cloud-component.page.ts | 5 +++ 10 files changed, 119 insertions(+), 65 deletions(-) diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html index 39f2f7e033..3cd50327ee 100644 --- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html +++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html @@ -2,7 +2,7 @@ {{ (title || 'ADF_CLOUD_GROUPS.SEARCH-GROUP') | translate }} - + - -
- - {{group.name}} -
- + + +
+ + {{group.name}} +
+ + + + + {{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate : { groupName: searchedValue } }} + + diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss index 8308ac7463..71d5549d76 100644 --- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss @@ -14,6 +14,10 @@ &-cloud-group { width: 100%; + &-option-not-active { + background: inherit !important; + } + .mat-form-field { width: 100%; } diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts index 8ec7035988..d4d8a7e267 100644 --- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts @@ -97,7 +97,7 @@ describe('GroupCloudComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.css('mat-option')).length).toEqual(5); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-cloud-group-row"]')).length).toEqual(5); expect(findGroupsByNameSpy).toHaveBeenCalled(); done(); }); @@ -118,7 +118,7 @@ describe('GroupCloudComponent', () => { fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.css('mat-option')).length).toEqual(4); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-cloud-group-row"]')).length).toEqual(4); done(); }); }); @@ -134,7 +134,7 @@ describe('GroupCloudComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { - expect(element.querySelector('mat-option')).toBeNull(); + expect(element.querySelector('[data-automation-id="adf-cloud-group-row"]')).toBeNull(); done(); }); }); @@ -257,7 +257,7 @@ describe('GroupCloudComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.css('mat-option')).length).toEqual(5); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-cloud-group-row"]')).length).toEqual(5); done(); }); }); @@ -275,7 +275,8 @@ describe('GroupCloudComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(element.querySelectorAll('mat-option').length).toEqual(0); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-cloud-group-row"]')).length).toEqual(0); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-cloud-group-no-results"]')).length).toEqual(1); done(); }); }); @@ -292,7 +293,7 @@ describe('GroupCloudComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.css('mat-option')).length).toEqual(5); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-cloud-group-row"]')).length).toEqual(5); expect(checkGroupHasAnyClientAppRoleSpy).toHaveBeenCalled(); done(); }); @@ -311,7 +312,8 @@ describe('GroupCloudComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.css('mat-option')).length).toEqual(0); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-cloud-group-row"]')).length).toEqual(0); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-cloud-group-no-results"]')).length).toEqual(1); expect(checkGroupHasAnyClientAppRoleSpy).toHaveBeenCalled(); done(); }); @@ -433,7 +435,7 @@ describe('GroupCloudComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.css('mat-option')).length).toEqual(5); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-cloud-group-row"]')).length).toEqual(5); expect(checkGroupHasRoleSpy).toHaveBeenCalledTimes(5); done(); }); @@ -451,7 +453,8 @@ describe('GroupCloudComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(element.querySelectorAll('mat-option').length).toEqual(0); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-cloud-group-row"]')).length).toEqual(0); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-cloud-group-no-results"]')).length).toEqual(1); expect(checkGroupHasRoleSpy).toHaveBeenCalled(); done(); }); diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts index 26bf695b0e..96a13604ca 100644 --- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts @@ -129,7 +129,8 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy { validateGroupsMessage: string; searchedValue = ''; - isLoading = false; + validationLoading = false; + searchLoading = false; constructor( private identityGroupService: IdentityGroupService, @@ -178,6 +179,7 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy { initSearch(): void { this.searchGroupsControl.valueChanges.pipe( filter((value) => { + this.searchLoading = true; return typeof value === 'string'; }), tap((value: string) => { @@ -201,6 +203,7 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy { ), mergeMap((groups) => { this.resetSearchGroups(); + this.searchLoading = false; return groups; }), filter(group => !this.isGroupAlreadySelected(group)), @@ -308,9 +311,9 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy { } this.groupChipsCtrl.setValue(this.selectedGroups[0].name); if (this.isValidationEnabled()) { - this.isLoading = true; + this.validationLoading = true; await this.validatePreselectGroups(); - this.isLoading = false; + this.validationLoading = false; } } @@ -322,23 +325,25 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy { } onSelect(group: IdentityGroupModel): void { - this.selectGroup.emit(group); + if (group) { + this.selectGroup.emit(group); - if (this.isMultipleMode()) { - if (!this.isGroupAlreadySelected(group)) { - this.selectedGroups.push(group); + if (this.isMultipleMode()) { + if (!this.isGroupAlreadySelected(group)) { + this.selectedGroups.push(group); + } + } else { + this.invalidGroups = []; + this.selectedGroups = [group]; } - } else { - this.invalidGroups = []; - this.selectedGroups = [group]; + + this.groupInput.nativeElement.value = ''; + this.searchGroupsControl.setValue(''); + this.groupChipsCtrlValue(this.selectedGroups[0].name); + + this.changedGroups.emit(this.selectedGroups); + this.resetSearchGroups(); } - - this.groupInput.nativeElement.value = ''; - this.searchGroupsControl.setValue(''); - this.groupChipsCtrlValue(this.selectedGroups[0].name); - - this.changedGroups.emit(this.selectedGroups); - this.resetSearchGroups(); } onRemove(groupToRemove: IdentityGroupModel): void { @@ -474,7 +479,7 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy { } isValidationLoading(): boolean { - return this.isValidationEnabled() && this.isLoading; + return this.isValidationEnabled() && this.validationLoading; } setFocus(isFocused: boolean) { diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html index 2ebe6ec788..17adf02499 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html @@ -30,16 +30,26 @@ #auto="matAutocomplete" (optionSelected)="onSelect($event.option.value)" [displayWith]="getDisplayName"> + -
+
{{user | fullName}}
+ + + + {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }} + + diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss index cfb14d7008..8504eb4a1f 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss @@ -8,6 +8,10 @@ &-people-cloud { width: 100%; + + &-option-not-active { + background: inherit !important; + } } &-people-cloud-list { diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts index ac1e44f945..b5787b7189 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts @@ -113,7 +113,7 @@ describe('PeopleCloudComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.css('mat-option')).length).toEqual(3); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-people-cloud-row"]')).length).toEqual(3); expect(findUsersByNameSpy).toHaveBeenCalled(); done(); }); @@ -134,7 +134,7 @@ describe('PeopleCloudComponent', () => { fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.css('mat-option')).length).toEqual(2); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-people-cloud-row"]')).length).toEqual(2); done(); }); }); @@ -190,7 +190,7 @@ describe('PeopleCloudComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { - expect(element.querySelector('mat-option')).toBeNull(); + expect(element.querySelector('[data-automation-id="adf-people-cloud-row"]')).toBeNull(); done(); }); }); @@ -330,7 +330,8 @@ describe('PeopleCloudComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(element.querySelectorAll('mat-option').length).toEqual(0); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-people-cloud-row"]')).length).toEqual(0); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-people-cloud-no-results"]')).length).toEqual(1); done(); }); }); @@ -347,7 +348,7 @@ describe('PeopleCloudComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.css('mat-option')).length).toEqual(3); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-people-cloud-row"]')).length).toEqual(3); expect(checkUserHasAnyClientAppRoleSpy).toHaveBeenCalled(); done(); }); @@ -366,7 +367,8 @@ describe('PeopleCloudComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.css('mat-option')).length).toEqual(0); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-people-cloud-row"]')).length).toEqual(0); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-people-cloud-no-results"]')).length).toEqual(1); expect(checkUserHasAnyClientAppRoleSpy).toHaveBeenCalled(); done(); }); @@ -486,7 +488,7 @@ describe('PeopleCloudComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.css('mat-option')).length).toEqual(3); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-people-cloud-row"]')).length).toEqual(3); expect(checkUserHasRoleSpy).toHaveBeenCalledTimes(3); done(); }); @@ -504,7 +506,8 @@ describe('PeopleCloudComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(element.querySelectorAll('mat-option').length).toEqual(0); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-people-cloud-row"]')).length).toEqual(0); + expect(fixture.debugElement.queryAll(By.css('[data-automation-id="adf-people-cloud-no-results"]')).length).toEqual(1); expect(checkUserHasRoleSpy).toHaveBeenCalled(); done(); }); diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts index 98dd906ce7..cade14ea66 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts @@ -138,7 +138,8 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy { validateUsersMessage: string; searchedValue = ''; - isLoading = false; + validationLoading = false; + searchLoading = false; constructor( private identityUserService: IdentityUserService, @@ -183,6 +184,7 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy { private initSearch(): void { this.searchUserCtrl.valueChanges.pipe( filter((value) => { + this.searchLoading = true; return typeof value === 'string'; }), tap((value: string) => { @@ -207,6 +209,7 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy { this.identityUserService.findUsersByName(search.trim())), mergeMap((users) => { this.resetSearchUsers(); + this.searchLoading = false; return users; }), filter(user => !this.isUserAlreadySelected(user)), @@ -283,9 +286,9 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy { } this.userChipsCtrl.setValue(this.selectedUsers[0].username); if (this.isValidationEnabled()) { - this.isLoading = true; + this.validationLoading = true; await this.validatePreselectUsers(); - this.isLoading = false; + this.validationLoading = false; } } @@ -381,23 +384,25 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy { } onSelect(user: IdentityUserModel): void { - this.selectUser.emit(user); + if (user) { + this.selectUser.emit(user); - if (this.isMultipleMode()) { - if (!this.isUserAlreadySelected(user)) { - this.selectedUsers.push(user); + if (this.isMultipleMode()) { + if (!this.isUserAlreadySelected(user)) { + this.selectedUsers.push(user); + } + } else { + this.invalidUsers = []; + this.selectedUsers = [user]; } - } else { - this.invalidUsers = []; - this.selectedUsers = [user]; + + this.userInput.nativeElement.value = ''; + this.searchUserCtrl.setValue(''); + this.userChipsCtrlValue(this.selectedUsers[0].username); + + this.changedUsers.emit(this.selectedUsers); + this.resetSearchUsers(); } - - this.userInput.nativeElement.value = ''; - this.searchUserCtrl.setValue(''); - this.userChipsCtrlValue(this.selectedUsers[0].username); - - this.changedUsers.emit(this.selectedUsers); - this.resetSearchUsers(); } onRemove(userToRemove: IdentityUserModel): void { @@ -522,7 +527,7 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy { } isValidationLoading(): boolean { - return this.isValidationEnabled() && this.isLoading; + return this.isValidationEnabled() && this.validationLoading; } setFocus(isFocused: boolean) { diff --git a/lib/testing/src/lib/process-services-cloud/pages/group-cloud-component.page.ts b/lib/testing/src/lib/process-services-cloud/pages/group-cloud-component.page.ts index 1b2474efaf..3876dee1d2 100644 --- a/lib/testing/src/lib/process-services-cloud/pages/group-cloud-component.page.ts +++ b/lib/testing/src/lib/process-services-cloud/pages/group-cloud-component.page.ts @@ -97,4 +97,9 @@ export class GroupCloudComponentPage { } } + async checkNoResultsFoundError(): Promise { + const errorLocator = element(by.css('[data-automation-id="adf-cloud-group-no-results"]')); + await BrowserVisibility.waitUntilElementIsVisible(errorLocator); + } + } diff --git a/lib/testing/src/lib/process-services-cloud/pages/people-cloud-component.page.ts b/lib/testing/src/lib/process-services-cloud/pages/people-cloud-component.page.ts index 454de3cc49..505e5b5c01 100644 --- a/lib/testing/src/lib/process-services-cloud/pages/people-cloud-component.page.ts +++ b/lib/testing/src/lib/process-services-cloud/pages/people-cloud-component.page.ts @@ -133,4 +133,9 @@ export class PeopleCloudComponentPage { } } + async checkNoResultsFoundError(): Promise { + const errorLocator = element(by.css('[data-automation-id="adf-people-cloud-no-results"]')); + await BrowserVisibility.waitUntilElementIsVisible(errorLocator); + } + }