[AAE-5960] Storybook stories for PeopleCloud component (#7313)

* [AAE-5953] solved rebase conflict

:wq

* [AAE-5953] solved rebase conflict

* [AAE-5953] added form cloud service interface

* [AAE-5953] fixed lint errors

* [AAE-5953] migrated stories and mocks

* [AAE-5953] migrated task cloud service mock

* [AAE-5953] migrated task cloud service mock

* [AAE-5953] removed redundant mock

* [AAE-5953] refactored and moved  mocks

* [AAE-5953] refactor modules import

* [AAE-5960] added stories file and service mock

* [AAE-5960] fixed validation mock

* [AAE-5960] added story for user role

* [AAE-5960] removed uunused properties from primary story

* [AAE-5960] added interface to mock and live identity user service

* [AAE-5960] added mandatory preselected users story

* [AAE-5960] syntax improvements

* [AAE-5960] fixed default value for roles control

* [AAE-5960] refactored imports

* [AAE-5960] improve syntax

* [AAE-5960] refactored services name

* [AAE-5960] removed deprecated argTypes defaultValue

* [AAE-5960] exported new interface from core

* [AAE-5960] fixed import issue with identity user mock service in core

* [AAE-5960] fixed issue with viewer component test

docs/core/services/identity-user.service.md

@@ -18,10 +18,10 @@ Gets OAuth2 personal details and roles for users and performs CRUD operations on
     -   _userId:_ `string`  - Id of the user.
     -   _roles:_ [`IdentityRoleModel`](../../../lib/core/models/identity-role.model.ts)`[]`  - Array of roles.
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Empty response when the role assigned.
--   **changePassword**(userId: `string`, newPassword: [`IdentityUserPasswordModel`](../../../lib/core/services/identity-user.service.ts)): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+-   **changePassword**(userId: `string`, newPassword: [`IdentityUserPasswordModel`](../../../lib/core/services/identity-user.interface.ts)): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
     Changes user password.
     -   _userId:_ `string`  - Id of the user.
-    -   _newPassword:_ [`IdentityUserPasswordModel`](../../../lib/core/services/identity-user.service.ts)  - 
+    -   _newPassword:_ [`IdentityUserPasswordModel`](../../../lib/core/services/identity-user.interface.ts)  - 
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Empty response when the password changed.
 -   **checkUserHasAnyApplicationRole**(userId: `string`, applicationName: `string`, roleNames: `string[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<boolean>`<br/>
     Checks if a user has any application role.
@@ -120,19 +120,19 @@ Gets OAuth2 personal details and roles for users and performs CRUD operations on
     Gets an array of users (not including the current user) who have any of the roles in the supplied list.
     -   _roleNames:_ `string[]`  - List of role names to look for
     -   **Returns** [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)`<`[`IdentityUserModel`](../../../lib/core/models/identity-user.model.ts)`[]>` - Array of user info objects
--   **joinGroup**(joinGroupRequest: [`IdentityJoinGroupRequestModel`](../../../lib/core/services/identity-user.service.ts)): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+-   **joinGroup**(joinGroupRequest: [`IdentityJoinGroupRequestModel`](../../../lib/core/services/identity-user.interface.ts)): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
     Joins group.
-    -   _joinGroupRequest:_ [`IdentityJoinGroupRequestModel`](../../../lib/core/services/identity-user.service.ts)  - Details of join group request (IdentityJoinGroupRequestModel).
+    -   _joinGroupRequest:_ [`IdentityJoinGroupRequestModel`](../../../lib/core/services/identity-user.interface.ts)  - Details of join group request (IdentityJoinGroupRequestModel).
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Empty response when the user joined the group.
 -   **leaveGroup**(userId: `any`, groupId: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
     Leaves group.
     -   _userId:_ `any`  - Id of the user.
     -   _groupId:_ `string`  - Id of the  group.
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Empty response when the user left the group.
--   **queryUsers**(requestQuery: [`IdentityUserQueryCloudRequestModel`](../../../lib/core/services/identity-user.service.ts)): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`IdentityUserQueryResponse`](../../../lib/core/services/identity-user.service.ts)`>`<br/>
+-   **queryUsers**(requestQuery: [`IdentityUserQueryCloudRequestModel`](../../../lib/core/services/identity-user.interface.ts)): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`IdentityUserQueryResponse`](../../../lib/core/services/identity-user.interface.ts)`>`<br/>
     Gets details for all users.
-    -   _requestQuery:_ [`IdentityUserQueryCloudRequestModel`](../../../lib/core/services/identity-user.service.ts)  - 
+    -   _requestQuery:_ [`IdentityUserQueryCloudRequestModel`](../../../lib/core/services/identity-user.interface.ts)  - 
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`IdentityUserQueryResponse`](../../../lib/core/services/identity-user.service.ts)`>` - Array of user information objects.
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`IdentityUserQueryResponse`](../../../lib/core/services/identity-user.interface.ts)`>` - Array of user information objects.
 -   **removeRoles**(userId: `string`, removedRoles: [`IdentityRoleModel`](../../../lib/core/models/identity-role.model.ts)`[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
     Removes assigned roles.
     -   _userId:_ `string`  - Id of the user.

lib/core/mock/identity-user.service.mock.ts

@@ -18,7 +18,7 @@
 import { IdentityUserModel } from '../models/identity-user.model';
 import { IdentityRoleModel } from '../models/identity-role.model';
 import { IdentityGroupModel } from '../models/identity-group.model';
-import { IdentityJoinGroupRequestModel } from '../services/identity-user.service';
+import { IdentityJoinGroupRequestModel } from '../services/identity-user.service.interface';
 
 export const mockIdentityUser1: IdentityUserModel = { id: 'mock-user-id-1', username: 'userName1', firstName: 'first-name-1', lastName: 'last-name-1', email: 'abc@xyz.com' };
 export const mockIdentityUser2: IdentityUserModel = { id: 'mock-user-id-2', username: 'userName2', firstName: 'first-name-2', lastName: 'last-name-2', email: 'abcd@xyz.com'};

lib/core/services/identity-user.service.interface.ts

@@ -0,0 +1,77 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Pagination } from '@alfresco/js-api';
+import { Observable } from 'rxjs';
+import { IdentityGroupModel } from '../models/identity-group.model';
+import { IdentityRoleModel } from '../models/identity-role.model';
+import { IdentityUserModel } from '../models/identity-user.model';
+
+export interface IdentityUserQueryResponse {
+
+    entries: IdentityUserModel[];
+    pagination: Pagination;
+}
+
+export interface IdentityUserPasswordModel {
+    type?: string;
+    value?: string;
+    temporary?: boolean;
+}
+
+export interface IdentityUserQueryCloudRequestModel {
+    first: number;
+    max: number;
+}
+
+export interface IdentityJoinGroupRequestModel {
+    realm: string;
+    userId: string;
+    groupId: string;
+}
+
+export interface IdentityUserServiceInterface {
+    getCurrentUserInfo(): IdentityUserModel;
+    findUsersByName(search: string): Observable<IdentityUserModel[]>;
+    findUserByUsername(username: string): Observable<IdentityUserModel[]>;
+    findUserByEmail(email: string): Observable<IdentityUserModel[]>;
+    getClientRoles(userId: string, clientId: string): Observable<any[]>;
+    checkUserHasClientApp(userId: string, clientId: string): Observable<boolean>;
+    checkUserHasAnyClientAppRole(userId: string, clientId: string, roleNames: string[]): Observable<boolean>;
+    getClientIdByApplicationName(applicationName: string): Observable<string>;
+    checkUserHasApplicationAccess(userId: string, applicationName: string): Observable<boolean>;
+    checkUserHasAnyApplicationRole(userId: string, applicationName: string, roleNames: string[]): Observable<boolean>;
+    getUsers(): Observable<IdentityUserModel[]>;
+    getUserRoles(userId: string): Observable<IdentityRoleModel[]>;
+    getUsersByRolesWithCurrentUser(roleNames: string[]): Promise<IdentityUserModel[]>;
+    getUsersByRolesWithoutCurrentUser(roleNames: string[]): Promise<IdentityUserModel[]>;
+    checkUserHasRole(userId: string, roleNames: string[]): Observable<boolean>;
+    queryUsers(requestQuery: IdentityUserQueryCloudRequestModel): Observable<IdentityUserQueryResponse>;
+    getTotalUsersCount(): Observable<number>;
+    createUser(newUser: IdentityUserModel): Observable<any>;
+    updateUser(userId: string, updatedUser: IdentityUserModel): Observable<any>;
+    deleteUser(userId: string): Observable<any>;
+    changePassword(userId: string, newPassword: IdentityUserPasswordModel): Observable<any>;
+    getInvolvedGroups(userId: string): Observable<IdentityGroupModel[]>;
+    joinGroup(joinGroupRequest: IdentityJoinGroupRequestModel): Observable<any>;
+    leaveGroup(userId: any, groupId: string): Observable<any>;
+    getAvailableRoles(userId: string): Observable<IdentityRoleModel[]>;
+    getAssignedRoles(userId: string): Observable<IdentityRoleModel[]>;
+    getEffectiveRoles(userId: string): Observable<IdentityRoleModel[]>;
+    assignRoles(userId: string, roles: IdentityRoleModel[]): Observable<any>;
+    removeRoles(userId: string, removedRoles: IdentityRoleModel[]): Observable<any>;
+}

lib/core/services/identity-user.service.ts

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-import { Pagination } from '@alfresco/js-api';
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -23,36 +22,14 @@ import { AppConfigService } from '../app-config/app-config.service';
 import { IdentityGroupModel } from '../models/identity-group.model';
 import { IdentityRoleModel } from '../models/identity-role.model';
 import { IdentityUserModel } from '../models/identity-user.model';
+import { IdentityJoinGroupRequestModel, IdentityUserServiceInterface, IdentityUserPasswordModel, IdentityUserQueryCloudRequestModel, IdentityUserQueryResponse } from './identity-user.service.interface';
 import { JwtHelperService } from './jwt-helper.service';
 import { OAuth2Service } from './oauth2.service';
 
-export interface IdentityUserQueryResponse {
-
-    entries: IdentityUserModel[];
-    pagination: Pagination;
-}
-
-export interface IdentityUserPasswordModel {
-    type?: string;
-    value?: string;
-    temporary?: boolean;
-}
-
-export interface IdentityUserQueryCloudRequestModel {
-    first: number;
-    max: number;
-}
-
-export interface IdentityJoinGroupRequestModel {
-    realm: string;
-    userId: string;
-    groupId: string;
-}
-
 @Injectable({
     providedIn: 'root'
 })
-export class IdentityUserService {
+export class IdentityUserService implements IdentityUserServiceInterface {
 
     constructor(
         private jwtHelperService: JwtHelperService,

lib/core/services/public-api.ts

@@ -65,3 +65,4 @@ export * from './version-compatibility.service';
 export * from './auth-bearer.interceptor';
 export * from './oauth2.service';
 export * from './language.service';
+export * from './identity-user.service.interface';

lib/process-services-cloud/src/lib/form/mocks/form-cloud.service.mock.ts

@@ -24,9 +24,9 @@ import { TaskDetailsCloudModel } from '../../task/public-api';
 import { taskDetailsContainer } from '../../task/task-header/mocks/task-details-cloud.mock';
 import { fakeCloudForm } from '../mocks/cloud-form.mock';
 import { TaskVariableCloud } from '../models/task-variable-cloud.model';
-import { FormCloudInterface } from '../services/form-cloud.interface';
+import { FormCloudServiceInterface } from '../services/form-cloud.service.interface';
 
-export class FormCloudServiceMock implements FormCloudInterface {
+export class FormCloudServiceMock implements FormCloudServiceInterface {
 
     uploadApi: UploadApi;
 

lib/process-services-cloud/src/lib/form/services/form-cloud.service.interface.ts

@@ -22,7 +22,7 @@ import { TaskVariableCloud } from '../models/task-variable-cloud.model';
 import { FormContent } from '../../services/form-fields.interfaces';
 import { Observable } from 'rxjs';
 
-export interface FormCloudInterface {
+export interface FormCloudServiceInterface {
 
     uploadApi: UploadApi;
 

lib/process-services-cloud/src/lib/form/services/form-cloud.service.ts

@@ -30,12 +30,12 @@ import { CompleteFormRepresentation, UploadApi } from '@alfresco/js-api';
 import { TaskVariableCloud } from '../models/task-variable-cloud.model';
 import { BaseCloudService } from '../../services/base-cloud.service';
 import { FormContent } from '../../services/form-fields.interfaces';
-import { FormCloudInterface } from './form-cloud.interface';
+import { FormCloudServiceInterface } from './form-cloud.service.interface';
 
 @Injectable({
     providedIn: 'root'
 })
-export class FormCloudService extends BaseCloudService implements FormCloudInterface {
+export class FormCloudService extends BaseCloudService implements FormCloudServiceInterface {
 
     private _uploadApi;
     get uploadApi(): UploadApi {

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

@@ -0,0 +1,121 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { IdentityUserService } from '@alfresco/adf-core';
+import { PeopleCloudComponent } from './people-cloud.component';
+import { PeopleCloudModule } from '../people-cloud.module';
+import { IdentityUserServiceMock } from '../mock/identity-user.service.mock';
+import { mockUsers } from '../mock/user-cloud.mock';
+import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
+
+export default {
+    component: PeopleCloudComponent,
+    title: 'Process Services Cloud/Components/People',
+    decorators: [
+        moduleMetadata({
+            imports: [ProcessServicesCloudStoryModule, PeopleCloudModule],
+            providers: [
+                { provide: IdentityUserService, useClass: IdentityUserServiceMock }
+            ]
+        })
+    ],
+    argTypes: {
+        appName: { table: { disable: true } },
+        mode: {
+            options: ['single', 'multiple'],
+            control: 'radio'
+        },
+        roles: {
+            options: ['empty', 'user', 'admin'],
+            control: 'radio',
+            mapping: {
+                empty: [],
+                user: ['MOCK-USER-ROLE'],
+                admin: ['MOCK-ADMIN-ROLE']
+            }
+        }
+    }
+} as Meta;
+
+const template: Story<PeopleCloudComponent> = (args: PeopleCloudComponent) => ({
+    props: args
+});
+
+export const primary = template.bind({});
+primary.args = {
+    appName: 'app',
+    excludedUsers: [],
+    mode: 'single',
+    preSelectUsers: [],
+    readOnly: false,
+    roles: [],
+    title: 'Users',
+    validate: false
+};
+
+export const validPreselectedUsers = template.bind({});
+validPreselectedUsers.args = {
+    ...primary.args,
+    validate: true,
+    mode: 'multiple',
+    preSelectUsers: mockUsers
+};
+
+export const mandatoryPreselectedUsers = template.bind({});
+mandatoryPreselectedUsers.args = {
+    ...primary.args,
+    validate: true,
+    mode: 'multiple',
+    preSelectUsers: [{ id: 'fake-id-1', username: 'first-name-1 last-name-1', firstName: 'first-name-1', lastName: 'last-name-1', email: 'abc@xyz.com', readonly: true },
+                     { id: 'fake-id-2', username: 'first-name-2 last-name-2', firstName: 'first-name-2', lastName: 'last-name-2', email: 'abcd@xyz.com' }]
+};
+
+export const invalidPreselectedUsers = template.bind({});
+invalidPreselectedUsers.args = {
+    ...primary.args,
+    validate: true,
+    mode: 'multiple',
+    preSelectUsers: [{ id: 'invalid-user', username: 'invalid user', firstName: 'invalid', lastName: 'user', email: 'invalid@xyz.com' }]
+};
+
+export const excludedUsers = template.bind({});
+excludedUsers.args = {
+    ...primary.args,
+    excludedUsers: [
+        { id: 'fake-id-2' },
+        { id: 'fake-id-3' }
+    ]
+};
+
+export const adminRoleUser = template.bind({});
+adminRoleUser.args = {
+    ...primary.args,
+    roles: 'admin'
+};
+
+export const noUsers = template.bind({});
+noUsers.args = {
+    ...primary.args,
+    excludedUsers: mockUsers
+};
+
+export const invalidOrEmptyAppName = template.bind({});
+invalidOrEmptyAppName.args = {
+    ...primary.args,
+    appName: null
+};

lib/process-services-cloud/src/lib/people/mock/identity-user.service.mock.ts

@@ -0,0 +1,265 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import {
+    IdentityGroupModel,
+    IdentityRoleModel,
+    IdentityUserModel,
+    mockIdentityGroups,
+    IdentityJoinGroupRequestModel,
+    IdentityUserServiceInterface,
+    IdentityUserPasswordModel,
+    IdentityUserQueryCloudRequestModel,
+    IdentityUserQueryResponse
+} from '@alfresco/adf-core';
+import { Observable, of } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { cloudMockUser, mockRoles, mockUsers } from './user-cloud.mock';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class IdentityUserServiceMock implements IdentityUserServiceInterface {
+
+    getCurrentUserInfo(): IdentityUserModel {
+        return cloudMockUser;
+    }
+
+    findUsersByName(search: string): Observable<IdentityUserModel[]> {
+        if (search === '') {
+            return of([]);
+        }
+
+        return of(mockUsers.filter(user =>
+            user.username.toUpperCase().includes(search.toUpperCase())
+        ));
+    }
+
+    findUserByUsername(username: string): Observable<IdentityUserModel[]> {
+        if (username === '') {
+            return of([]);
+        }
+
+        return of(mockUsers.filter(user => user.username === username));
+    }
+
+    findUserByEmail(email: string): Observable<IdentityUserModel[]> {
+        if (email === '') {
+            return of([]);
+        }
+
+        return of(mockUsers.filter(user => user.email === email));
+    }
+
+    findUserById(id: string): Observable<any> {
+        if (id === '') {
+            return of([]);
+        }
+
+        return of(mockUsers.find(user => user.id === id));
+    }
+
+    getClientRoles(userId: string, _clientId: string): Observable<any[]> {
+        if (userId === 'fake-id-1') {
+            return of([{ id: 'id-1', name: 'MOCK-ADMIN-ROLE' }]);
+        }
+
+        return of([{ id: 'id-2', name: 'MOCK-USER-ROLE' }]);
+    }
+
+    checkUserHasClientApp(userId: string, clientId: string): Observable<boolean> {
+        return this.getClientRoles(userId, clientId).pipe(
+            map((clientRoles) => clientRoles.length > 0)
+        );
+    }
+
+    checkUserHasAnyClientAppRole(userId: string, clientId: string, roleNames: string[]): Observable<boolean> {
+        return this.getClientRoles(userId, clientId).pipe(
+            map((clientRoles: any[]) => {
+                let hasRole = false;
+                if (clientRoles.length > 0) {
+                    roleNames.forEach((roleName) => {
+                        const role = clientRoles.find(({ name }) => name === roleName);
+
+                        if (role) {
+                            hasRole = true;
+                            return;
+                        }
+                    });
+                }
+                return hasRole;
+            })
+        );
+    }
+
+    getClientIdByApplicationName(_applicationName: string): Observable<string> {
+        return of('fake-id-1');
+    }
+
+    checkUserHasApplicationAccess(userId: string, applicationName: string): Observable<boolean> {
+        return this.getClientIdByApplicationName(applicationName).pipe(
+            switchMap((clientId: string) => {
+                return this.checkUserHasClientApp(userId, clientId);
+            })
+        );
+    }
+
+    checkUserHasAnyApplicationRole(userId: string, applicationName: string, roleNames: string[]): Observable<boolean> {
+        return this.getClientIdByApplicationName(applicationName).pipe(
+            switchMap((clientId: string) => {
+                return this.checkUserHasAnyClientAppRole(userId, clientId, roleNames);
+            })
+        );
+    }
+
+    getUsers(): Observable<IdentityUserModel[]> {
+        return of(mockUsers);
+    }
+
+    getUserRoles(_userId: string): Observable<IdentityRoleModel[]> {
+        return of(mockRoles);
+    }
+
+    async getUsersByRolesWithCurrentUser(roleNames: string[]): Promise<IdentityUserModel[]> {
+        const filteredUsers: IdentityUserModel[] = [];
+        if (roleNames && roleNames.length > 0) {
+            const users = await this.getUsers().toPromise();
+
+            for (let i = 0; i < users.length; i++) {
+                const hasAnyRole = await this.userHasAnyRole(users[i].id, roleNames);
+                if (hasAnyRole) {
+                    filteredUsers.push(users[i]);
+                }
+            }
+        }
+
+        return filteredUsers;
+    }
+
+    async getUsersByRolesWithoutCurrentUser(roleNames: string[]): Promise<IdentityUserModel[]> {
+        const filteredUsers: IdentityUserModel[] = [];
+        if (roleNames && roleNames.length > 0) {
+            const currentUser = this.getCurrentUserInfo();
+            let users = await this.getUsers().toPromise();
+
+            users = users.filter(({ username }) => username !== currentUser.username);
+
+            for (let i = 0; i < users.length; i++) {
+                const hasAnyRole = await this.userHasAnyRole(users[i].id, roleNames);
+                if (hasAnyRole) {
+                    filteredUsers.push(users[i]);
+                }
+            }
+        }
+
+        return filteredUsers;
+    }
+
+    private async userHasAnyRole(userId: string, roleNames: string[]): Promise<boolean> {
+        const userRoles = await this.getUserRoles(userId).toPromise();
+        const hasAnyRole = roleNames.some((roleName) => {
+            const filteredRoles = userRoles.filter((userRole) => {
+                return userRole.name.toLocaleLowerCase() === roleName.toLocaleLowerCase();
+            });
+
+            return filteredRoles.length > 0;
+        });
+
+        return hasAnyRole;
+    }
+
+    checkUserHasRole(userId: string, roleNames: string[]): Observable<boolean> {
+        return this.getUserRoles(userId).pipe(map((userRoles: IdentityRoleModel[]) => {
+            let hasRole = false;
+            if (userRoles && userRoles.length > 0) {
+                roleNames.forEach((roleName: string) => {
+                    const role = userRoles.find(({ name }) => roleName === name);
+                    if (role) {
+                        hasRole = true;
+                        return;
+                    }
+                });
+            }
+            return hasRole;
+        }));
+    }
+
+    queryUsers(_requestQuery: IdentityUserQueryCloudRequestModel): Observable<IdentityUserQueryResponse> {
+        return of();
+    }
+
+    getTotalUsersCount(): Observable<number> {
+        return of(mockUsers.length);
+    }
+
+    createUser(newUser: IdentityUserModel): Observable<any> {
+        window.alert(`Create new user: ${newUser}`);
+        return of([]);
+    }
+
+    updateUser(userId: string, updatedUser: IdentityUserModel): Observable<any> {
+        window.alert(`Update user: ${updatedUser} with ID: ${userId}`);
+        return of([]);
+    }
+
+    deleteUser(userId: string): Observable<any> {
+        window.alert(`Delete user with ID: ${userId}`);
+        return of([]);
+    }
+
+    changePassword(userId: string, newPassword: IdentityUserPasswordModel): Observable<any> {
+        window.alert(`New password: ${newPassword} for user with ID: ${userId}`);
+        return of([]);
+    }
+
+    getInvolvedGroups(_userId: string): Observable<IdentityGroupModel[]> {
+        return of(mockIdentityGroups);
+    }
+
+    joinGroup(joinGroupRequest: IdentityJoinGroupRequestModel): Observable<any> {
+        window.alert(`Join group request: ${joinGroupRequest}`);
+        return of([]);
+    }
+
+    leaveGroup(userId: any, groupId: string): Observable<any> {
+        window.alert(`Leave group: ${groupId} for user with ID: ${userId}`);
+        return of([]);
+    }
+
+    getAvailableRoles(_userId: string): Observable<IdentityRoleModel[]> {
+        return of(mockRoles);
+    }
+
+    getAssignedRoles(_userId: string): Observable<IdentityRoleModel[]> {
+        return of(mockRoles);
+    }
+
+    getEffectiveRoles(_userId: string): Observable<IdentityRoleModel[]> {
+        return of(mockRoles);
+    }
+
+    assignRoles(userId: string, roles: IdentityRoleModel[]): Observable<any> {
+        window.alert(`Assign roles: ${roles} for user with ID: ${userId}`);
+        return of([]);
+    }
+
+    removeRoles(userId: string, removedRoles: IdentityRoleModel[]): Observable<any> {
+        window.alert(`Remove roles: ${removedRoles} for user with ID: ${userId}`);
+        return of([]);
+    }
+}

lib/process-services-cloud/src/lib/task/mock/task-cloud.service.mock.ts

@@ -23,12 +23,12 @@ import { TaskDetailsCloudModel } from '../start-task/public-api';
 import { taskDetailsContainer } from '../task-header/mocks/task-details-cloud.mock';
 import { ProcessDefinitionCloud } from '../../models/process-definition-cloud.model';
 import { StartTaskCloudRequestModel } from '../start-task/models/start-task-cloud-request.model';
-import { TaskCloudInterface } from '../services/task-cloud.interface';
+import { TaskCloudServiceInterface } from '../services/task-cloud.service.interface';
 
 @Injectable({
     providedIn: 'root'
 })
-export class TaskCloudServiceMock implements TaskCloudInterface {
+export class TaskCloudServiceMock implements TaskCloudServiceInterface {
 
     currentUserMock = 'AssignedTaskUser';
     dataChangesDetected$ = new Subject();

lib/process-services-cloud/src/lib/task/services/task-cloud.service.interface.ts

@@ -21,7 +21,7 @@ import { ProcessDefinitionCloud } from '../../models/process-definition-cloud.mo
 import { TaskPriorityOption } from '../models/task.model';
 import { StartTaskCloudRequestModel } from '../start-task/models/start-task-cloud-request.model';
 import { TaskDetailsCloudModel } from '../start-task/models/task-details-cloud.model';
-export interface TaskCloudInterface {
+export interface TaskCloudServiceInterface {
 
     dataChangesDetected$: Subject<unknown>;
     priorities: TaskPriorityOption[];

lib/process-services-cloud/src/lib/task/services/task-cloud.service.ts

@@ -24,12 +24,12 @@ import { BaseCloudService } from '../../services/base-cloud.service';
 import { StartTaskCloudRequestModel } from '../start-task/models/start-task-cloud-request.model';
 import { ProcessDefinitionCloud } from '../../models/process-definition-cloud.model';
 import { DEFAULT_TASK_PRIORITIES, TaskPriorityOption, TASK_ASSIGNED_STATE, TASK_CREATED_STATE } from '../models/task.model';
-import { TaskCloudInterface } from './task-cloud.interface';
+import { TaskCloudServiceInterface } from './task-cloud.service.interface';
 
 @Injectable({
     providedIn: 'root'
 })
-export class TaskCloudService extends BaseCloudService implements TaskCloudInterface {
+export class TaskCloudService extends BaseCloudService implements TaskCloudServiceInterface {
 
     dataChangesDetected$ = new Subject();
 

lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.stories.ts

@@ -39,10 +39,8 @@ export default {
     }
 } as Meta;
 
-const template: Story<TaskHeaderCloudComponent> = (args) => ({
+const template: Story<TaskHeaderCloudComponent> = (args: TaskHeaderCloudComponent) => ({
-    props: {
+    props: args
-        ...args
-    }
 });
 
 export const assignedAndEditable = template.bind({});