UIU-3499: Handle an undefined of assignedRoleIds in UserRolesModal. Clear cache after roles update to avoid displaying stale data (follow-up).

src/components/EditSections/EditUserRoles/EditUserRoles.js

@@ -157,7 +157,7 @@ function EditUserRoles({ accordionId, form:{ change }, user, setAssignedRoleIds,
         <Accordion
           label={<Headline size="large" tag="h3"><FormattedMessage id="ui-users.roles.userRoles" /></Headline>}
           id={accordionId}
-          displayWhenClosed={<Badge>{assignedRoleIds[tenantId]?.length}</Badge>}
+          displayWhenClosed={<Badge>{assignedRoleIds[tenantId]?.length || 0}</Badge>}
         >
           <Row>
             <IfConsortium>

src/components/EditSections/EditUserRoles/components/UserRolesModal/UserRolesModal.js

@@ -49,7 +49,7 @@ export default function UserRolesModal({ isOpen,
     if (assignedRoleIds[tenantId]?.includes(id)) {
       setAssignedRoleIds({ ...assignedRoleIds, [tenantId]: assignedRoleIds[tenantId].filter(role => role !== id) });
     } else {
-      setAssignedRoleIds({ ...assignedRoleIds, [tenantId]: assignedRoleIds[tenantId] ? assignedRoleIds[tenantId].concat(id) : [id] });
+      setAssignedRoleIds({ ...assignedRoleIds, [tenantId]: (assignedRoleIds[tenantId] || []).concat(id) });
     }
   };
 
@@ -72,7 +72,7 @@ export default function UserRolesModal({ isOpen,
   };
 
   const handleSaveClick = () => {
-    const sortedAlphabetically = assignedRoleIds[tenantId]
+    const sortedAlphabetically = (assignedRoleIds[tenantId] || [])
       .map(id => {
         const foundRole = allRolesMapStructure.get(id);
         return { name: foundRole?.name, id: foundRole?.id };
@@ -106,7 +106,7 @@ export default function UserRolesModal({ isOpen,
           <div>
             <FormattedMessage
               id="ui-users.permissions.modal.total"
-              values={{ count: assignedRoleIds[tenantId]?.length }}
+              values={{ count: assignedRoleIds[tenantId]?.length || 0 }}
             />
           </div>
           <Button

src/components/EditSections/EditUserRoles/components/UserRolesModal/UserRolesModal.test.js

@@ -139,4 +139,23 @@ describe('UserRoleModal', () => {
     await userEvent.click(submitButton);
     expect(mockChangeUserRoles).toHaveBeenCalledWith(['4', '1']);
   });
+
+  it('should handle toggling a role when assignedRoleIds[tenantId] is undefined', async () => {
+    const mockChangeUserRoles = jest.fn();
+
+    renderComponent({
+      isOpen: true,
+      onClose: mockOnClose,
+      initialRoleIds: {},
+      changeUserRoles: mockChangeUserRoles,
+      tenantId,
+    });
+
+    const roleCheckbox = document.querySelector('[name="selected-3"]');
+    expect(roleCheckbox.checked).toBe(false);
+
+    await userEvent.click(roleCheckbox);
+
+    expect(roleCheckbox.checked).toBe(true);
+  });
 });

src/components/Wrappers/withUserRoles.js

@@ -1,14 +1,25 @@
 import React, { useEffect, useState } from 'react';
-
-import { useStripes, useOkapiKy, useCallout } from '@folio/stripes/core';
+import { useQueryClient } from 'react-query';
+
+import {
+  useStripes,
+  useOkapiKy,
+  useCallout,
+  useNamespace,
+} from '@folio/stripes/core';
 import isEqual from 'lodash/isEqual';
 import isEmpty from 'lodash/isEmpty';
 import { useCreateAuthUserKeycloak, useUserAffiliationRoles } from '../../hooks';
-import { KEYCLOAK_USER_EXISTANCE } from '../../constants';
+import {
+  KEYCLOAK_USER_EXISTANCE,
+  USER_AFFILIATION_ROLES_CACHE_KEY,
+} from '../../constants';
 import { showErrorCallout } from '../../views/UserEdit/UserEditHelpers';
 
 const withUserRoles = (WrappedComponent) => (props) => {
   const { okapi } = useStripes();
+  const [namespace] = useNamespace({ key: USER_AFFILIATION_ROLES_CACHE_KEY });
+  const queryClient = useQueryClient();
   // eslint-disable-next-line react/prop-types
   const userId = props.match.params.id;
   const [initialAssignedRoleIds, setInitialAssignedRoleIds] = useState({});
@@ -69,7 +80,11 @@ const withUserRoles = (WrappedComponent) => (props) => {
           userId,
           roleIds: roleIds[tenantIdKey],
         }
-      }).catch(sendErrorCallout);
+      })
+        .then(async () => {
+          await queryClient.invalidateQueries({ queryKey: [namespace, userId, tenantIdKey] });
+        })
+        .catch(sendErrorCallout);
     });
 
     await Promise.allSettled(requests);

src/components/Wrappers/withUserRoles.test.js

@@ -57,9 +57,8 @@ const mockData = {
   username: 'testUser',
 };
 
-const mockApiPut = jest.fn(() => ({
+const mockApiPut = jest.fn(() => Promise.resolve({
   json: () => Promise.resolve(),
-  catch: jest.fn(() => Promise.resolve({ status: 400 })),
 }));
 
 const mockKyPut = jest.fn();

src/constants.js

@@ -421,3 +421,5 @@ export const MODULE_NAME = 'users';
 export const CUSTOM_FIELDS_ENTITY_TYPE = 'user';
 
 export const TAGS_SCOPE = 'ui-tags.tags.manage';
+
+export const USER_AFFILIATION_ROLES_CACHE_KEY = 'user-affiliation-roles';

src/hooks/useUserAffiliationRoles/useUserAffiliationRoles.js

@@ -4,12 +4,13 @@ import { useQuery } from 'react-query';
 import { useStripes, useOkapiKy, useNamespace } from '@folio/stripes/core';
 
 import useAllRolesData from '../useAllRolesData/useAllRolesData';
+import { USER_AFFILIATION_ROLES_CACHE_KEY } from '../../constants';
 
 const DEFAULT = [];
 
 function useUserAffiliationRoles(userId, tenantId) {
   const stripes = useStripes();
-  const [namespace] = useNamespace({ key: 'user-affiliation-roles' });
+  const [namespace] = useNamespace({ key: USER_AFFILIATION_ROLES_CACHE_KEY });
   const ky = useOkapiKy({ tenant: tenantId });
 
   const hasViewRolesPermission = stripes.hasPerm('ui-users.roles.view');