From 84dac48d9b08cfe4dfa726379a6aa0c62f69cca7 Mon Sep 17 00:00:00 2001 From: siva kumar Date: Mon, 9 Dec 2019 16:10:33 +0530 Subject: [PATCH] [ADF-5031][PeopleCloudComponent] [PeopleCloudComponent] Provide a way to make selected items read-only (not remove) (#5289) * [DW-1618] Admin App -Application Instances - Able to delete all the admin users in Manage app permissions. * [ADF-5031] [PeopleCloudComponent] Do not delete selected users completely. * Added flag for not to remove last chip * Added unit tests to the changes. * * Added doc * * Changed removeLastChip to remove * * Added readonly strategy * Removed remove input * Updated unit tests * * Added tooltip * Hiding remove icon. * * Fixed unit tests --- .../components/people-cloud.component.md | 22 ++++++++ lib/core/models/identity-user.model.ts | 1 + .../components/group-cloud.component.html | 2 + .../components/group-cloud.component.spec.ts | 7 +-- .../src/lib/i18n/en.json | 1 + .../people-cloud/people-cloud.component.html | 10 +++- .../people-cloud.component.spec.ts | 53 +++++++++++++++++++ 7 files changed, 90 insertions(+), 6 deletions(-) diff --git a/docs/process-services-cloud/components/people-cloud.component.md b/docs/process-services-cloud/components/people-cloud.component.md index 9e28470857..42062794e4 100644 --- a/docs/process-services-cloud/components/people-cloud.component.md +++ b/docs/process-services-cloud/components/people-cloud.component.md @@ -39,3 +39,25 @@ Allows one or more users to be selected (with auto-suggestion) based on the inpu | removeUser | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`IdentityUserModel`](../../../lib/core/models/identity-user.model.ts)`>` | Emitted when a selected user is removed in multi selection mode. | | selectUser | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`IdentityUserModel`](../../../lib/core/models/identity-user.model.ts)`>` | Emitted when a user is selected. | | warning | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when an warning occurs. | + +## Details + +### Read-only + +You can use `readonly` property to make preselected users read-only in `multiple` mode. + +```ts +const preSelectUsers = [ + { "id": "1", "username": "username1", "firstName": "user 1", "readonly": true }, + { "id": "2", "username": "username2", "firstName": "user 2", "readonly": false }, + { "id": "3", "username": "username3", "firstName": "user 3", "readonly": true } + ]; +``` +```html + + +``` + +from above `preSelectUsers`, `username2` is removable from the `preSelectUsers` whereas `username1`, `username3` are readonly you can not remove them. diff --git a/lib/core/models/identity-user.model.ts b/lib/core/models/identity-user.model.ts index 74203c8d86..cd9f5f2547 100644 --- a/lib/core/models/identity-user.model.ts +++ b/lib/core/models/identity-user.model.ts @@ -24,4 +24,5 @@ export interface IdentityUserModel { createdTimestamp?: any; emailVerified?: boolean; enabled?: boolean; + readonly?: boolean; } 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 a150557977..f7b3863925 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 @@ -6,9 +6,11 @@ *ngFor="let group of selectedGroups$ | async" [removable]="!(group.readonly)" (removed)="onRemove(group)" + matTooltip="{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}" [attr.data-automation-id]="'adf-cloud-group-chip-' + group.name"> {{group.name}} cancel 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 5ce9e6e01f..077be2b571 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 @@ -442,7 +442,7 @@ describe('GroupCloudComponent', () => { describe('Multiple Mode with read-only', () => { - it('Should not be able to remove pre-selected groups if readonly property set to true', (done) => { + it('Should not show remove icon for pre-selected groups if readonly property set to true', (done) => { fixture.detectChanges(); const preselectedGroups = [ { id: mockIdentityGroups[0].id, name: mockIdentityGroups[0].name, readonly: true }, @@ -451,7 +451,6 @@ describe('GroupCloudComponent', () => { component.preSelectGroups = preselectedGroups; const change = new SimpleChange(null, preselectedGroups, false); component.mode = 'multiple'; - const removeGroupSpy = spyOn(component.removeGroup, 'emit'); component.ngOnChanges({ 'preSelectGroups': change }); fixture.detectChanges(); const chipList = fixture.nativeElement.querySelectorAll('mat-chip-list mat-chip'); @@ -462,9 +461,7 @@ describe('GroupCloudComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - removeIcon.click(); - fixture.detectChanges(); - expect(removeGroupSpy).not.toHaveBeenCalled(); + expect(removeIcon).toBeNull(); expect(component.preSelectGroups.length).toBe(2); expect(component.preSelectGroups[0].readonly).toBe(true, 'Not removable'); expect(component.preSelectGroups[1].readonly).toBe(true, 'Not removable'); diff --git a/lib/process-services-cloud/src/lib/i18n/en.json b/lib/process-services-cloud/src/lib/i18n/en.json index 10e90fc6b7..7544ec47a4 100644 --- a/lib/process-services-cloud/src/lib/i18n/en.json +++ b/lib/process-services-cloud/src/lib/i18n/en.json @@ -176,6 +176,7 @@ }, "ADF_CLOUD_GROUPS": { "SEARCH-GROUP": "Groups", + "MANDATORY": "Mandatory", "ERROR": { "NOT_FOUND": "No group found with the name {{groupName}}" } diff --git a/lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.html b/lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.html index 1e0fa05021..16c6b5887f 100644 --- a/lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.html +++ b/lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.html @@ -4,9 +4,17 @@ {{user | fullName}} - cancel + + cancel + { }); }); + describe('Multiple Mode with read-only mode', () => { + + it('Should not show remove icon for pre-selected users if readonly property set to true', (done) => { + component.mode = 'multiple'; + const removeUserSpy = spyOn(component.removeUser, 'emit'); + component.preSelectUsers = [ + { id: mockUsers[0].id, username: mockUsers[0].username, readonly: true }, + { id: mockUsers[1].id, username: mockUsers[1].username, readonly: true } + ]; + fixture.detectChanges(); + const chipList = fixture.nativeElement.querySelectorAll('mat-chip-list mat-chip'); + const removeIcon = fixture.nativeElement.querySelector('[data-automation-id="adf-people-cloud-chip-remove-icon-first-name-1 last-name-1"]'); + expect(chipList.length).toBe(2); + expect(component.preSelectUsers[0].readonly).toBeTruthy(); + expect(component.preSelectUsers[1].readonly).toBeTruthy(); + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(removeIcon).toBeNull(); + fixture.detectChanges(); + expect(removeUserSpy).not.toHaveBeenCalled(); + expect(component.preSelectUsers.length).toBe(2); + expect(component.preSelectUsers[0].readonly).toBe(true, 'Not removable'); + expect(component.preSelectUsers[1].readonly).toBe(true, 'not removable'); + done(); + }); + }); + + it('Should be able to remove preselected users if readonly property set to false', (done) => { + component.mode = 'multiple'; + const removeUserSpy = spyOn(component.removeUser, 'emit'); + component.preSelectUsers = [ + { id: mockUsers[0].id, username: mockUsers[0].username, readonly: false }, + { id: mockUsers[1].id, username: mockUsers[1].username, readonly: false } + ]; + fixture.detectChanges(); + const chipList = fixture.nativeElement.querySelectorAll('mat-chip-list mat-chip'); + const removeIcon = fixture.nativeElement.querySelector('[data-automation-id="adf-people-cloud-chip-remove-icon-first-name-1 last-name-1"]'); + expect(chipList.length).toBe(2); + expect(component.preSelectUsers[0].readonly).toBe(false, 'Removable'); + expect(component.preSelectUsers[1].readonly).toBe(false, 'Removable'); + removeIcon.click(); + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(removeUserSpy).toHaveBeenCalled(); + expect(component.preSelectUsers.length).toBe(1); + expect(component.preSelectUsers[0].readonly).toBeFalsy(); + done(); + }); + }); + }); + describe('Multiple Mode and Pre-selected users with validate flag', () => { const change = new SimpleChange(null, mockPreselectedUsers, false);