From b1d900dd01f4fe3151a92074a7663a2e98e9cfea Mon Sep 17 00:00:00 2001 From: Peter Muriuki Date: Fri, 29 Sep 2023 11:03:46 +0300 Subject: [PATCH 1/4] Remove effective Roles view component from form --- .../components/CreateEditUserGroup/Form.tsx | 45 +------------------ .../components/CreateEditUserGroup/index.tsx | 18 +------- 2 files changed, 2 insertions(+), 61 deletions(-) diff --git a/packages/keycloak-user-management/src/components/CreateEditUserGroup/Form.tsx b/packages/keycloak-user-management/src/components/CreateEditUserGroup/Form.tsx index e8d70aaaf..351ed09d3 100644 --- a/packages/keycloak-user-management/src/components/CreateEditUserGroup/Form.tsx +++ b/packages/keycloak-user-management/src/components/CreateEditUserGroup/Form.tsx @@ -32,7 +32,6 @@ export interface UserGroupFormProps { allRoles: KeycloakUserRole[]; assignedRoles: KeycloakUserRole[]; availableRoles: KeycloakUserRole[]; - effectiveRoles: KeycloakUserRole[]; initialValues: KeycloakUserGroup; keycloakBaseURL: string; } @@ -56,7 +55,6 @@ export const defaultProps: Partial = { allRoles: [], assignedRoles: [], availableRoles: [], - effectiveRoles: [], initialValues: defaultInitialValues, keycloakBaseURL: '', }; @@ -92,14 +90,7 @@ export const handleTransferChange = async ( * @param {object} props - component props */ const UserGroupForm: React.FC = (props: UserGroupFormProps) => { - const { - initialValues, - keycloakBaseURL, - assignedRoles, - availableRoles, - effectiveRoles, - allRoles, - } = props; + const { initialValues, keycloakBaseURL, assignedRoles, availableRoles, allRoles } = props; const [isSubmitting, setIsSubmitting] = useState(false); const [sourceSelectedKeys, setSourceSelectedKeys] = useState([]); const [targetSelectedKeys, setTargetSelectedKeys] = useState([]); @@ -215,40 +206,6 @@ const UserGroupForm: React.FC = (props: UserGroupFormProps) searchPlaceholder: t('Search'), }} /> - {/** custom transfer to list effective roles */} -
-
-
- {t('Effective Roles')} -
-
- {!effectiveRoles.length ? ( -
- {t('The list is empty')} -
- ) : ( -
    - {effectiveRoles.map((role: KeycloakUserRole) => ( -
  • - - -
    {role.name}
    -     -
    • - ))} -
- )} -
-
-
) : ( '' diff --git a/packages/keycloak-user-management/src/components/CreateEditUserGroup/index.tsx b/packages/keycloak-user-management/src/components/CreateEditUserGroup/index.tsx index a27d48b5f..4f0203f14 100644 --- a/packages/keycloak-user-management/src/components/CreateEditUserGroup/index.tsx +++ b/packages/keycloak-user-management/src/components/CreateEditUserGroup/index.tsx @@ -9,7 +9,6 @@ import { defaultInitialValues, UserGroupFormProps } from './Form'; import { KEYCLOAK_URL_ASSIGNED_ROLES, KEYCLOAK_URL_AVAILABLE_ROLES, - KEYCLOAK_URL_EFFECTIVE_ROLES, ROUTE_PARAM_USER_GROUP_ID, } from '../../constants'; import { useTranslation } from '../../mls'; @@ -62,7 +61,6 @@ const CreateEditUserGroup: React.FC = ( const [isLoading, setIsLoading] = React.useState(false); const [availableRoles, setAvailableRoles] = React.useState([]); const [assignedRoles, setAssignedRoles] = React.useState([]); - const [effectiveRoles, setEffectiveRoles] = React.useState([]); const { t } = useTranslation(); const dispatch = useDispatch(); const userGroupId = props.match.params[ROUTE_PARAM_USER_GROUP_ID]; @@ -95,20 +93,7 @@ const CreateEditUserGroup: React.FC = ( setAssignedRoles, t ); - const effectiveRolesPromise = fetchRoleMappings( - userGroupId, - keycloakBaseURL, - KEYCLOAK_URL_EFFECTIVE_ROLES, - setEffectiveRoles, - t - ); - Promise.all([ - groupPromise, - allRolesPromise, - availableRolesPromise, - assignedRolesPromise, - effectiveRolesPromise, - ]) + Promise.all([groupPromise, allRolesPromise, availableRolesPromise, assignedRolesPromise]) .catch(() => sendErrorNotification(t('There was a problem fetching user groups'))) .finally(() => setIsLoading(false)); } @@ -123,7 +108,6 @@ const CreateEditUserGroup: React.FC = ( allRoles, assignedRoles, availableRoles, - effectiveRoles, initialValues: initialValues as KeycloakUserGroup, keycloakBaseURL, }; From a86343ad2bb127602b33a402e9eec9749f9f5e1e Mon Sep 17 00:00:00 2001 From: Peter Muriuki Date: Fri, 29 Sep 2023 11:42:22 +0300 Subject: [PATCH 2/4] Include inherited roles in group view details --- .../components/UserGroupDetailView/index.tsx | 10 +++++--- .../src/components/UserGroupsList/index.tsx | 25 +++++++++++++++++-- 2 files changed, 29 insertions(+), 6 deletions(-) diff --git a/packages/keycloak-user-management/src/components/UserGroupDetailView/index.tsx b/packages/keycloak-user-management/src/components/UserGroupDetailView/index.tsx index b4d5cbfbc..2c1f40bc7 100644 --- a/packages/keycloak-user-management/src/components/UserGroupDetailView/index.tsx +++ b/packages/keycloak-user-management/src/components/UserGroupDetailView/index.tsx @@ -8,12 +8,14 @@ import { UserGroupMembers } from '../UserGroupsList'; import { Link } from 'react-router-dom'; import { useTranslation } from '../../mls'; import { KeycloakUserGroup } from '../../ducks/userGroups'; +import { KeycloakUserRole } from 'keycloak-user-management/src/ducks/userRoles'; /** typings for the view details component */ export interface ViewDetailsProps { loading: boolean; error: boolean; GroupDetails: KeycloakUserGroup | undefined; + effectiveRoles: KeycloakUserRole[] | undefined; userGroupMembers: UserGroupMembers[] | undefined; onClose: () => void; } @@ -25,7 +27,7 @@ export interface ViewDetailsProps { * @param props - detail view component props */ const ViewDetails = (props: ViewDetailsProps) => { - const { loading, error, GroupDetails, userGroupMembers, onClose } = props; + const { loading, error, GroupDetails, userGroupMembers, onClose, effectiveRoles } = props; const { t } = useTranslation(); return ( @@ -57,10 +59,10 @@ const ViewDetails = (props: ViewDetailsProps) => {

{t('Roles')}

- {GroupDetails.realmRoles?.length ? ( - GroupDetails.realmRoles.map((role, indx) => { + {effectiveRoles?.length ? ( + effectiveRoles.map((role, indx) => { // append word break to wrap underscored strings with css - const wordBreakRoleName = role.split('_').join('_'); + const wordBreakRoleName = role.name.split('_').join('_'); return (

= (props: UserGroupLis } ); + const { + isLoading: effectiveRolesLoading, + isError: effectiveRolesError, + data: effectiveRoles, + } = useQuery( + [KEYCLOAK_URL_EFFECTIVE_ROLES, groupId, keycloakBaseURL], + () => { + const keycloakService = new KeycloakService( + `${KEYCLOAK_URL_USER_GROUPS}/${groupId}${KEYCLOAK_URL_EFFECTIVE_ROLES}`, + keycloakBaseURL + ); + return keycloakService.list(); + }, + { + enabled: groupId !== null, + onError: () => sendErrorNotification(t('There was a problem fetching effective roles')), + } + ); + const { isLoading: isUserGroupMembersLoading, isError: isUserGroupMembersError, @@ -217,9 +237,10 @@ export const UserGroupsList: React.FC = (props: UserGroupLis {groupId ? ( { setGroupId(null); From 10056d93266cc9d5428a063cf78600968dada0cc Mon Sep 17 00:00:00 2001 From: Peter Muriuki Date: Fri, 29 Sep 2023 11:53:20 +0300 Subject: [PATCH 3/4] Make transfer elements bigger to fix content --- .../src/components/CreateEditUserGroup/Form.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/keycloak-user-management/src/components/CreateEditUserGroup/Form.tsx b/packages/keycloak-user-management/src/components/CreateEditUserGroup/Form.tsx index 351ed09d3..7ae68818e 100644 --- a/packages/keycloak-user-management/src/components/CreateEditUserGroup/Form.tsx +++ b/packages/keycloak-user-management/src/components/CreateEditUserGroup/Form.tsx @@ -190,7 +190,10 @@ const UserGroupForm: React.FC = (props: UserGroupFormProps) Date: Fri, 29 Sep 2023 12:46:06 +0300 Subject: [PATCH 4/4] fix test regressions --- .../tests/__snapshots__/index.test.tsx.snap | 2 +- .../CreateEditUserGroup/tests/index.test.tsx | 7 +++- .../components/UserGroupDetailView/index.tsx | 30 ++++++-------- .../tests/__snapshots__/index.test.tsx.snap | 40 ++++++------------- .../UserGroupDetailView/tests/index.test.tsx | 5 ++- .../UserGroupsList/tests/fixtures.ts | 19 +++++++++ 6 files changed, 54 insertions(+), 49 deletions(-) diff --git a/packages/keycloak-user-management/src/components/CreateEditUserGroup/tests/__snapshots__/index.test.tsx.snap b/packages/keycloak-user-management/src/components/CreateEditUserGroup/tests/__snapshots__/index.test.tsx.snap index 46e1e7886..6b76aa83c 100644 --- a/packages/keycloak-user-management/src/components/CreateEditUserGroup/tests/__snapshots__/index.test.tsx.snap +++ b/packages/keycloak-user-management/src/components/CreateEditUserGroup/tests/__snapshots__/index.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`components/CreateEditUserGroup renders correctly: full user group form 1`] = `"Edit User Group | AdminNameRealm Roles2 itemsAvailable RolesEDIT_KEYCLOAK_USERSVIEW_KEYCLOAK_USERS6 itemsAssigned RolesOPENMRSALL_EVENTSPLANS_FOR_USERrealm-adminoffline_accessuma_authorizationEffective RolesOPENMRSALL_EVENTSPLANS_FOR_USERrealm-adminoffline_accessuma_authorizationSaveCancel"`; +exports[`components/CreateEditUserGroup renders correctly: full user group form 1`] = `"Edit User Group | AdminNameRealm Roles2 itemsAvailable RolesEDIT_KEYCLOAK_USERSVIEW_KEYCLOAK_USERS6 itemsAssigned RolesOPENMRSALL_EVENTSPLANS_FOR_USERrealm-adminoffline_accessuma_authorizationSaveCancel"`; diff --git a/packages/keycloak-user-management/src/components/CreateEditUserGroup/tests/index.test.tsx b/packages/keycloak-user-management/src/components/CreateEditUserGroup/tests/index.test.tsx index 42f6fb006..21926edfa 100644 --- a/packages/keycloak-user-management/src/components/CreateEditUserGroup/tests/index.test.tsx +++ b/packages/keycloak-user-management/src/components/CreateEditUserGroup/tests/index.test.tsx @@ -220,7 +220,7 @@ describe('components/CreateEditUserGroup', () => { }); it('handles error if fetch user group fails when page reloads', async () => { - fetch.mockRejectOnce(new Error('API is down')); + fetch.mockReject(new Error('API is down')); const mockNotificationError = jest.spyOn(notifications, 'sendErrorNotification'); const wrapper = mount( @@ -236,7 +236,10 @@ describe('components/CreateEditUserGroup', () => { wrapper.update(); }); - expect(mockNotificationError).toHaveBeenCalledWith('There was a problem fetching User Group'); + expect(mockNotificationError.mock.calls).toEqual([ + ['There was a problem fetching role mappings'], + ['There was a problem fetching role mappings'], + ]); wrapper.unmount(); }); diff --git a/packages/keycloak-user-management/src/components/UserGroupDetailView/index.tsx b/packages/keycloak-user-management/src/components/UserGroupDetailView/index.tsx index 2c1f40bc7..b4f4c12c1 100644 --- a/packages/keycloak-user-management/src/components/UserGroupDetailView/index.tsx +++ b/packages/keycloak-user-management/src/components/UserGroupDetailView/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Col, Space, Spin } from 'antd'; +import { Col, Space, Spin, Typography } from 'antd'; import { CloseOutlined } from '@ant-design/icons'; import { Resource404 } from '@opensrp/react-utils'; import { Button } from 'antd'; @@ -10,6 +10,8 @@ import { useTranslation } from '../../mls'; import { KeycloakUserGroup } from '../../ducks/userGroups'; import { KeycloakUserRole } from 'keycloak-user-management/src/ducks/userRoles'; +const { Text } = Typography; + /** typings for the view details component */ export interface ViewDetailsProps { loading: boolean; @@ -59,22 +61,16 @@ const ViewDetails = (props: ViewDetailsProps) => {

{t('Roles')}

- {effectiveRoles?.length ? ( - effectiveRoles.map((role, indx) => { - // append word break to wrap underscored strings with css - const wordBreakRoleName = role.name.split('_').join('_'); - return ( -

- ); - }) - ) : ( -

{t('No assigned roles')}

- )} + + {effectiveRoles?.length ? ( + effectiveRoles.map((role) => { + // append word break to wrap underscored strings with css + return {role.name}; + }) + ) : ( +

{t('No assigned roles')}

+ )} +

{t('Members')}

diff --git a/packages/keycloak-user-management/src/components/UserGroupDetailView/tests/__snapshots__/index.test.tsx.snap b/packages/keycloak-user-management/src/components/UserGroupDetailView/tests/__snapshots__/index.test.tsx.snap index fcbd054e8..6daa6cbfa 100644 --- a/packages/keycloak-user-management/src/components/UserGroupDetailView/tests/__snapshots__/index.test.tsx.snap +++ b/packages/keycloak-user-management/src/components/UserGroupDetailView/tests/__snapshots__/index.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`View User Group Details works correctly: nominal display 1`] = `"Group uuid123-some-group-uuid-456NameGroup NameRolesROLE_ONEROLE_TWOROLE_THREEMembersname 1 (name-1)undefined undefined (name-2)undefined undefined (name-3)undefined undefined (name-4)"`; +exports[`View User Group Details works correctly: nominal display 1`] = `"Group uuid123-some-group-uuid-456NameGroup NameRolesEDIT_KEYCLOAK_USERSVIEW_KEYCLOAK_USERSMembersname 1 (name-1)undefined undefined (name-2)undefined undefined (name-3)undefined undefined (name-4)"`; exports[`View User Group Details works correctly: space element 1`] = ` Object { @@ -43,33 +43,17 @@ Object { > Roles

-

ONE", - } - } - id="realRole" - /> -

TWO", - } - } - id="realRole" - /> -

THREE", - } - } - id="realRole" - /> + + + EDIT_KEYCLOAK_USERS + + + VIEW_KEYCLOAK_USERS + +

,
{ username: 'name-4', }, ] as UserGroupMembers[], + effectiveRoles, onClose: jest.fn(), }; @@ -61,7 +63,7 @@ describe('View User Group Details', () => { expect(wrapper.text()).toMatchSnapshot('nominal display'); // att test case to capture space element props snapshot - expect(wrapper.find('ViewDetails Space').props()).toMatchSnapshot('space element'); + expect(wrapper.find('ViewDetails Space').first().props()).toMatchSnapshot('space element'); wrapper.unmount(); }); @@ -119,6 +121,7 @@ describe('View User Group Details', () => { ...props.GroupDetails, realmRoles: [], }, + effectiveRoles: [], userGroupMembers: [], }; diff --git a/packages/keycloak-user-management/src/components/UserGroupsList/tests/fixtures.ts b/packages/keycloak-user-management/src/components/UserGroupsList/tests/fixtures.ts index 009ea3208..61013de34 100644 --- a/packages/keycloak-user-management/src/components/UserGroupsList/tests/fixtures.ts +++ b/packages/keycloak-user-management/src/components/UserGroupsList/tests/fixtures.ts @@ -38,3 +38,22 @@ export const userGroup1 = { subGroups: [], access: { view: true, manage: true, manageMembership: true }, }; + +export const effectiveRoles = [ + { + id: 'cb4d5fc9-3b05-4514-b007-5971adba6d2f', + name: 'EDIT_KEYCLOAK_USERS', + description: 'Allows the management of keycloak users', + composite: true, + clientRole: false, + containerId: 'FHIR_Android', + }, + { + id: '55c89f15-94b4-4395-b343-fb57740ff234', + name: 'VIEW_KEYCLOAK_USERS', + description: 'Allows the user to view the users created in keycloak', + composite: true, + clientRole: false, + containerId: 'FHIR_Android', + }, +];