[ADF-4038] People/GroupCloudDemo - add appName filter (#4283)

* [ADF-4038] - People/Group Cloud Component add app name filter

* [ADF-4038] add unit test, modify ngOnChange appName condition

* [ADF-4038] People/GroupCloudDemo - add radio button to filter application name or roles

demo-shell/resources/i18n/en.json

@@ -293,7 +293,10 @@
     "SINGLE": "Single Selection",
     "MULTI": "Multiple Selection",
     "PRESELECTED_VALUE": "Preselect: ",
-    "ROLE": "Roles: "
+    "ROLE": "Roles: ",
+    "APP_NAME": "Aplication Name",
+    "APP_FILTER_MODE": "Filter by application name",
+    "ROLE_FILTER_MODE": "Filter by role"
   },
   "ABOUT": {
     "TITLE": "Plugins",

demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.html

@@ -12,17 +12,27 @@
                 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
         </mat-radio-group>
         <div class="people-control-options">
-            <mat-form-field class="adf-preselect-value">
+            <mat-radio-group (change)="onChangePeopleFilterMode($event)">
+                <mat-radio-button checked="true" class="adf-people-single-mode" value="appName">{{
+                    'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
+                <mat-radio-button class="adf-people-multiple-mode" value="role">{{
+                    'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
+            </mat-radio-group>
+            <mat-form-field *ngIf="!isPeopleAppNameSelected()" class="adf-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ['ACTIVITI_ADMIN', "ACTIVITI_USER"]</mat-label>
                 <input matInput (input)="setPeopleRoles($event)" />
             </mat-form-field>
-            <mat-form-field class="adf-preselect-value full">
+            <mat-form-field *ngIf="isPeopleAppNameSelected()" class="adf-preselect-value">
+                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
+                <input matInput (input)="setPeopleAppName($event)" />
+            </mat-form-field>
+            <mat-form-field class="adf-preselect-value-full">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }}: {{ DEFAULT_PEOPLE_PLACEHOLDER }}</mat-label>
                 <input matInput (input)="setPeoplePreselectValue($event)" />
             </mat-form-field>
         </div>
         <div>
-            <adf-cloud-people [preSelectUsers]="preSelectUsers" [roles]="peopleRoles" [mode]="peopleMode"></adf-cloud-people>
+            <adf-cloud-people [preSelectUsers]="preSelectUsers" [appName]="peopleAppName" [roles]="peopleRoles" [mode]="peopleMode"></adf-cloud-people>
         </div>
 
         <div class="adf-people-list" *ngIf="canShowPeopleList()">
@@ -50,18 +60,28 @@
                 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
         </mat-radio-group>
         <div class="groups-control-options">
-            <mat-form-field class="adf-preselect-value">
+            <mat-radio-group (change)="onChangeGroupsFilterMode($event)">
+                <mat-radio-button checked="true" class="adf-people-single-mode" value="appName">{{
+                    'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
+                <mat-radio-button class="adf-people-multiple-mode" value="role">{{
+                    'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
+            </mat-radio-group>
+            <mat-form-field *ngIf="!isGroupAppNameSelected()" class="adf-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ['ACTIVITI_ADMIN', "ACTIVITI_USER"]</mat-label>
                 <input matInput (input)="setGroupRoles($event)" />
             </mat-form-field>
-            <mat-form-field class="adf-preselect-value full">
+            <mat-form-field *ngIf="isGroupAppNameSelected()" class="adf-preselect-value">
+                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
+                <input matInput (input)="setGroupAppName($event)" />
+            </mat-form-field>
+            <mat-form-field class="adf-preselect-value-full">
                 <mat-label>Preselect: {{ DEFAULT_GROUP_PLACEHOLDER }}</mat-label>
                 <input matInput (input)="setGroupsPreselectValue($event)" />
             </mat-form-field>
         </div>
         <div>
-            <adf-cloud-group [mode]="groupMode" [roles]="groupRoles" [preSelectGroups]="preSelectGroup" (selectGroup)="onSelectGroup($event)"
+            <adf-cloud-group [mode]="groupMode" [roles]="groupRoles" [appName]="groupAppName" [preSelectGroups]="preSelectGroup"
-                (removeGroup)="onRemoveGroup($event)"></adf-cloud-group>
+                (selectGroup)="onSelectGroup($event)" (removeGroup)="onRemoveGroup($event)"></adf-cloud-group>
         </div>
 
         <div class="adf-group-list" *ngIf="canShowGroupList()">

demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.scss

@@ -18,9 +18,13 @@
                 margin-right: 15px;
                 min-width: 330px;
 
-                &-full {
+                &-big {
                     width:60%;
                 }
+
+                &-full {
+                    width:100%;
+                }
             }
         }
     }

demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.ts

@@ -27,17 +27,22 @@ import { MatRadioChange } from '@angular/material';
 })
 export class PeopleGroupCloudDemoComponent {
 
+    DEFAULT_FILTER_MODE: string = 'appName';
     DEFAULT_GROUP_PLACEHOLDER: string = `[{"id": "1", "name":"activitiUserGroup"}]`;
     DEFAULT_PEOPLE_PLACEHOLDER: string = `[{"email": "example@alfresco.com", "firstName":"Administrator", "lastName": "ADF"}]`;
 
     peopleMode: string = PeopleCloudComponent.MODE_SINGLE;
     preSelectUsers: string[] = [];
     peopleRoles: string[] = [];
+    peopleAppName: string;
+    peopleFilterMode: string = this.DEFAULT_FILTER_MODE;
 
     groupMode: string = GroupCloudComponent.MODE_SINGLE;
     preSelectGroup: GroupModel[] = [];
     selectedGroupList: GroupModel[] = [];
     groupRoles: string[];
+    groupAppName: string;
+    groupFilterMode: string = this.DEFAULT_FILTER_MODE;
 
     setPeoplePreselectValue(event: any) {
         this.preSelectUsers = this.getArrayFromString(event.target.value);
@@ -55,6 +60,14 @@ export class PeopleGroupCloudDemoComponent {
         this.groupRoles = this.getArrayFromString(event.target.value);
     }
 
+    setPeopleAppName(event: any) {
+        this.peopleAppName = event.target.value;
+    }
+
+    setGroupAppName(event: any) {
+        this.groupAppName = event.target.value;
+    }
+
     onChangePeopleMode(event: MatRadioChange) {
        this.peopleMode = event.value;
        this.preSelectUsers = [...this.preSelectUsers];
@@ -65,6 +78,40 @@ export class PeopleGroupCloudDemoComponent {
         this.preSelectGroup = [...this.preSelectGroup];
     }
 
+    onChangePeopleFilterMode(event: MatRadioChange) {
+        this.peopleFilterMode = event.value;
+        this.resetPeopleFilter();
+    }
+
+    onChangeGroupsFilterMode(event: MatRadioChange) {
+        this.groupFilterMode = event.value;
+        this.restGroupFilter();
+    }
+
+    isPeopleAppNameSelected() {
+        return this.peopleFilterMode === 'appName';
+    }
+
+    isGroupAppNameSelected() {
+        return this.groupFilterMode === 'appName';
+    }
+
+    resetPeopleFilter() {
+        if (this.isPeopleAppNameSelected()) {
+            this.peopleRoles = [];
+        } else {
+            this.peopleAppName = '';
+        }
+    }
+
+    restGroupFilter() {
+        if (this.isGroupAppNameSelected()) {
+            this.groupRoles = [];
+        } else {
+            this.groupAppName = '';
+        }
+    }
+
     isStringArray(str: string) {
         try {
             const result = JSON.parse(str);

lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts

@@ -26,6 +26,7 @@ import { GroupCloudService } from '../services/group-cloud.service';
 import { setupTestBed, AlfrescoApiServiceMock } from '@alfresco/adf-core';
 import { mockGroups } from '../mock/group-cloud.mock';
 import { GroupModel } from '../models/group.model';
+import { SimpleChange } from '@angular/core';
 
 describe('GroupCloudComponent', () => {
     let component: GroupCloudComponent;
@@ -59,6 +60,9 @@ describe('GroupCloudComponent', () => {
     });
 
     it('should be able to fetch client id', async(() => {
+        component.ngOnChanges( {
+            appName: new SimpleChange(null, component.appName, true)
+        });
         fixture.detectChanges();
         fixture.whenStable().then(() => {
             expect(getClientIdByApplicationNameSpy).toHaveBeenCalled();
@@ -291,4 +295,22 @@ describe('GroupCloudComponent', () => {
             expect(checkGroupHasAccessSpy).not.toHaveBeenCalled();
         });
     }));
+
+    it('should load the clients if appName change', async( () => {
+        component.appName = 'ADF';
+        fixture.detectChanges();
+        fixture.whenStable().then( () => {
+            fixture.detectChanges();
+            expect(getClientIdByApplicationNameSpy).toHaveBeenCalled();
+        });
+    }));
+
+    it('should filter users if appName change', async(() => {
+        component.appName = 'ADF';
+        fixture.detectChanges();
+        fixture.whenStable().then( () => {
+            fixture.detectChanges();
+            expect(checkGroupHasAccessSpy).toHaveBeenCalled();
+        });
+    }));
 });

lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts

@@ -107,19 +107,24 @@ export class GroupCloudComponent implements OnInit, OnChanges {
     }
 
     ngOnInit() {
-
         this.initSearch();
-
-        if (this.appName) {
-            this.disableSearch();
-            this.loadClientId();
-        }
     }
 
     ngOnChanges(changes: SimpleChanges) {
         if (changes.preSelectGroups && this.hasPreSelectGroups()) {
             this.loadPreSelectGroups();
         }
+
+        if (changes.appName && this.isAppNameChanged(changes.appName)) {
+            this.disableSearch();
+            this.loadClientId();
+        } else {
+            this.enableSearch();
+        }
+    }
+
+    private isAppNameChanged(change) {
+        return change.previousValue !== change.currentValue && this.appName && this.appName.length > 0;
     }
 
     private async loadClientId() {

lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.spec.ts

@@ -31,6 +31,7 @@ describe('PeopleCloudComponent', () => {
     let identityService: IdentityUserService;
     let findUsersSpy: jasmine.Spy;
     let checkUserHasAccessSpy: jasmine.Spy;
+    let loadClientsByApplicationNameSpy: jasmine.Spy;
 
     setupTestBed({
         imports: [ProcessServiceCloudTestingModule, StartTaskCloudTestingModule],
@@ -44,7 +45,7 @@ describe('PeopleCloudComponent', () => {
         identityService = TestBed.get(IdentityUserService);
         findUsersSpy = spyOn(identityService, 'findUsersByName').and.returnValue(of(mockUsers));
         checkUserHasAccessSpy = spyOn(identityService, 'checkUserHasClientApp').and.returnValue(of(true));
-        spyOn(identityService, 'getClientIdByApplicationName').and.returnValue(of('mock-client-id'));
+        loadClientsByApplicationNameSpy = spyOn(identityService, 'getClientIdByApplicationName').and.returnValue(of('mock-client-id'));
     });
 
     it('should create PeopleCloudComponent', () => {
@@ -294,4 +295,24 @@ describe('PeopleCloudComponent', () => {
             expect(checkUserHasRoleSpy).not.toHaveBeenCalled();
         });
     }));
+
+    it('should load the clients if appName change', async( () => {
+        component.appName = 'ADF';
+        fixture.detectChanges();
+        fixture.whenStable().then( () => {
+            fixture.detectChanges();
+            expect(loadClientsByApplicationNameSpy).toHaveBeenCalled();
+        });
+    }));
+
+    it('should filter users if appName change', async(() => {
+        component.appName = '';
+        fixture.detectChanges();
+        component.appName = 'ADF';
+        fixture.detectChanges();
+        fixture.whenStable().then( () => {
+            fixture.detectChanges();
+            expect(checkUserHasAccessSpy).toHaveBeenCalled();
+        });
+    }));
 });

lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.ts

@@ -102,17 +102,23 @@ export class PeopleCloudComponent implements OnInit, OnChanges {
         this.selectedUsersSubject = new BehaviorSubject<IdentityUserModel[]>(this.preSelectUsers);
         this.selectedUsers$ = this.selectedUsersSubject.asObservable();
         this.initSearch();
-
-        if (this.appName) {
-            this.disableSearch();
-            this.loadClientId();
-        }
     }
 
     ngOnChanges(changes: SimpleChanges) {
         if (changes.preSelectUsers && this.hasPreSelectUsers()) {
             this.loadPreSelectUsers();
         }
+
+        if (changes.appName && this.isAppNameChanged(changes.appName)) {
+            this.disableSearch();
+            this.loadClientId();
+        } else {
+            this.enableSearch();
+        }
+    }
+
+    private isAppNameChanged(change) {
+        return change.previousValue !== change.currentValue && this.appName && this.appName.length > 0;
     }
 
     private initSearch() {
@@ -202,6 +208,7 @@ export class PeopleCloudComponent implements OnInit, OnChanges {
     }
 
     private async loadClientId() {
+
         this.clientId = await this.identityUserService.getClientIdByApplicationName(this.appName).toPromise();
 
         if (this.clientId) {