UIU-3124: fix filter issues in search form for user roles modal (#2690)

Refs UIU-3124.

(cherry picked from commit 16835fb)

CHANGELOG.md

@@ -49,6 +49,7 @@
 * Show Roles assigned to users. Refs UIU-3110.
 * Add edit user roles accordion on edit role modal view. Refs UIU-3021.
 * Wire up with API ability to assign/unassign user roles in UserForm. Refs UIU-3124.
+* Fix filter issues in user roles modal. Refs UIU-3124.
 
 ## [10.0.4](https://github.com/folio-org/ui-users/tree/v10.0.4) (2023-11-10)
 [Full Changelog](https://github.com/folio-org/ui-users/compare/v10.0.3...v10.0.4)

src/components/EditSections/EditUserRoles/components/UserRolesList/UserRolesList.js

@@ -11,7 +11,7 @@ const UserRolesList = ({ assignedUserRoleIds,
   filteredRoles,
   toggleRole,
   toggleAllRoles }) => {
-  const allChecked = filteredRoles.length === assignedUserRoleIds.length;
+  const allChecked = filteredRoles.every(filteredRole => assignedUserRoleIds.includes(filteredRole.id));
 
   const handleToggleAllRoles = (event) => toggleAllRoles(event.target.checked);
 

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

@@ -25,9 +25,12 @@ describe('UserRolesList', () => {
   });
 
   it('toggle select all roles', async () => {
-    await userEvent.click(document.querySelector('[name="selected-selectAll"]'));
+    const selectAllCheckbox = document.querySelector('[name="selected-selectAll"]');
+    expect(selectAllCheckbox).toBeChecked();
 
-    expect(mockToggleAllRoles).toHaveBeenCalledWith(true);
+    await userEvent.click(selectAllCheckbox);
+
+    expect(mockToggleAllRoles).toHaveBeenCalledWith(false);
   });
 
   it('toggle select role', async () => {

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

@@ -29,6 +29,7 @@ export default function UserRolesModal({ isOpen,
 
   const handleCloseModal = () => {
     setAssignedRoleIds(initialRoleIds);
+    setSubmittedSearchTerm('');
     resetFilters();
     onClose();
   };
@@ -42,7 +43,7 @@ export default function UserRolesModal({ isOpen,
       filtered = filterData.filter(filtered, filters, assignedRoleIds);
     });
 
-    return filtered.filter(role => role.name.includes(submittedSearchTerm.trim().toLowerCase()));
+    return filtered.filter(role => role.name.trim().toLowerCase().includes(submittedSearchTerm.trim().toLowerCase()));
   };
 
   const toggleRole = (id) => {
@@ -65,6 +66,7 @@ export default function UserRolesModal({ isOpen,
 
   const resetSearchForm = () => {
     setAssignedRoleIds(assignedRoles.map(role => role.id));
+    setSubmittedSearchTerm('');
     resetFilters();
   };
 
@@ -77,6 +79,7 @@ export default function UserRolesModal({ isOpen,
     <Modal
       open={isOpen}
       id="user-roles-modal"
+      label={<FormattedMessage id="ui-users.roles.modal.header" />}
       size="large"
       dismissible
       showHeader
@@ -120,6 +123,7 @@ export default function UserRolesModal({ isOpen,
                   {...renderProps}
                   paneTitle={<FormattedMessage id="ui-users.roles.modal.search.header" />}
                   lastMenu={<CollapseFilterPaneButton onClick={() => setFilterPaneIsVisible(!filterPaneIsVisible)} />}
+                  className={css.modalHeader}
                 />
               )}
             >
@@ -134,7 +138,6 @@ export default function UserRolesModal({ isOpen,
             </Pane>}
           <Pane
             defaultWidth="fill"
-            className={css.modalHeader}
             renderHeader={renderProps => (
               <PaneHeader
                 {...renderProps}

src/components/EditSections/EditUserRoles/components/UserRolesModal/index.css

@@ -35,7 +35,7 @@
 
   @media (min-height: 570px) {
     .modalContent {
-      min-height: 70vh;
+      min-height: 75vh;
     }
   }
 

translations/ui-users/en.json

@@ -1183,5 +1183,6 @@
   "roles.modal.unassignAll.header": "Unassign all user roles",
   "roles.modal.unassignAll.label": "You are unassigning all user roles <strong>{roles}</strong> <p><strong>Are you sure?</strong></p>",
   "roles.modal.search.header": "Search & filter",
-  "roles.modal.filter.status.label": "Role assigment status"
+  "roles.modal.filter.status.label": "Role assigment status",
+  "roles.modal.header": "Select user roles"
 }