Merge branch 'master' into UIU-3141

folio-org · Jan 8, 2025 · ca3d84d · ca3d84d
2 parents 4b6c68c + 6ea2256
commit ca3d84d
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 51 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@
 * Add permission to access users-keycloak delete method. Refs UIU-3282.
 * Check if userId is present in withUserRoles HOC. Refs UIU-3273.
 * Add missed permissions for endpoints used in withUserRoles HOC. UIU-3294.
+* Add view/manage roles permissions. Refs UIU-3301.
 
 ## [11.0.8](https://github.com/folio-org/ui-users/tree/v11.0.8) (2024-12-10)
 [Full Changelog](https://github.com/folio-org/ui-users/compare/v11.0.7...v11.0.8)

diff --git a/package.json b/package.json
@@ -86,9 +86,7 @@
           "departments.collection.get",
           "departments.item.get",
           "users.configurations.item.get",
-          "roles.users.collection.get",
-          "users-keycloak.auth-users.item.get",
-          "roles.collection.get"
+          "users-keycloak.auth-users.item.get"
         ],
         "visible": true
       },
@@ -106,7 +104,6 @@
           "tags.item.post",
           "circulation-storage.request-preferences.item.post",
           "circulation-storage.request-preferences.item.put",
-          "roles.users.item.put",
           "users-keycloak.auth-users.item.post"
         ],
         "visible": true
@@ -173,6 +170,24 @@
         ],
         "visible": true
       },
+      {
+        "permissionName": "ui-users.roles.view",
+        "displayName": "Users: Can view user/role assignments",
+        "description": "Also includes basic permissions to view roles, users, patron groups",
+        "subPermissions": [
+          "ui-authorization-roles.users.settings.view"
+        ],
+        "visible": true
+      },
+      {
+        "permissionName": "ui-users.roles.manage",
+        "displayName": "Users: Can manage user/role assignments",
+        "description": "",
+        "subPermissions": [
+          "ui-authorization-roles.users.settings.manage"
+        ],
+        "visible": true
+      },
       {
         "permissionName": "ui-users.user-service-points.view",
         "displayName": "Users: Can view service points assigned to users",

diff --git a/src/components/EditSections/EditUserRoles/EditUserRoles.js b/src/components/EditSections/EditUserRoles/EditUserRoles.js
@@ -1,11 +1,12 @@
 import React, { useMemo, useState } from 'react';
-import { Accordion, Headline, Badge, Row, Col, List, Button, Icon, ConfirmationModal } from '@folio/stripes/components';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { withRouter } from 'react-router';
 import PropTypes from 'prop-types';
 import { isEmpty } from 'lodash';
 import { FieldArray } from 'react-final-form-arrays';
 import { OnChange } from 'react-final-form-listeners';
+import { IfPermission } from '@folio/stripes/core';
+import { Accordion, Headline, Badge, Row, Col, List, Button, Icon, ConfirmationModal } from '@folio/stripes/components';
 import { useAllRolesData } from '../../../hooks';
 import UserRolesModal from './components/UserRolesModal/UserRolesModal';
 import { filtersConfig } from './helpers';
@@ -54,16 +55,18 @@ function EditUserRoles({ accordionId, form:{ change }, setAssignedRoleIds, assig
         key={role.id}
       >
         {role.name}
-        <Button
-          buttonStyle="fieldControl"
-          align="end"
-          type="button"
-          id={`clickable-remove-user-role-${role.id}`}
-          aria-label={`${intl.formatMessage({ id:'ui-users.roles.deleteRole' })}: ${role.name}`}
-          onClick={() => fields.remove(index)}
-        >
-          <Icon icon="times-circle" />
-        </Button>
+        <IfPermission perm="ui-authorization-roles.users.settings.manage">
+          <Button
+            buttonStyle="fieldControl"
+            align="end"
+            type="button"
+            id={`clickable-remove-user-role-${role.id}`}
+            aria-label={`${intl.formatMessage({ id:'ui-users.roles.deleteRole' })}: ${role.name}`}
+            onClick={() => fields.remove(index)}
+          >
+            <Icon icon="times-circle" />
+          </Button>
+        </IfPermission>
       </li>
     );
   };
@@ -90,41 +93,45 @@ function EditUserRoles({ accordionId, form:{ change }, setAssignedRoleIds, assig
   }
 
   return (
-    <div>
-      <Accordion
-        label={<Headline size="large" tag="h3"><FormattedMessage id="ui-users.roles.userRoles" /></Headline>}
-        id={accordionId}
-        displayWhenClosed={<Badge>{assignedRoleIds.length}</Badge>}
-      >
-        <Row>
-          {renderUserRoles()}
-          <Button data-testid="add-roles-button" onClick={() => setIsOpen(true)}><FormattedMessage id="ui-users.roles.addRoles" /></Button>
-          <Button data-testid="unassign-all-roles-button" disabled={isEmpty(listItemsData)} onClick={() => setUnassignModalOpen(true)}><FormattedMessage id="ui-users.roles.unassignAllRoles" /></Button>
-        </Row>
-      </Accordion>
-      <UserRolesModal
-        filtersConfig={filtersConfig}
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        initialRoleIds={assignedRoleIds}
-        changeUserRoles={changeUserRoles}
-      />
-      <ConfirmationModal
-        open={unassignModalOpen}
-        heading={<FormattedMessage id="ui-users.roles.modal.unassignAll.header" />}
-        message={unassignAllMessage}
-        onConfirm={handleUnassignAllRoles}
-        onCancel={() => setUnassignModalOpen(false)}
-        cancelLabel={<FormattedMessage id="ui-users.no" />}
-        confirmLabel={<FormattedMessage id="ui-users.yes" />}
-      />
-      <OnChange name="assignedRoleIds">
-        {(userAssignedRoleIds) => {
-          const userRoleIds = isEmpty(userAssignedRoleIds) ? [] : userAssignedRoleIds;
-          setAssignedRoleIds(userRoleIds);
-        }}
-      </OnChange>
-    </div>
+    <IfPermission perm="ui-authorization-roles.users.settings.view">
+      <div>
+        <Accordion
+          label={<Headline size="large" tag="h3"><FormattedMessage id="ui-users.roles.userRoles" /></Headline>}
+          id={accordionId}
+          displayWhenClosed={<Badge>{assignedRoleIds.length}</Badge>}
+        >
+          <Row>
+            {renderUserRoles()}
+            <IfPermission perm="ui-authorization-roles.users.settings.manage">
+              <Button data-testid="add-roles-button" onClick={() => setIsOpen(true)}><FormattedMessage id="ui-users.roles.addRoles" /></Button>
+              <Button data-testid="unassign-all-roles-button" disabled={isEmpty(listItemsData)} onClick={() => setUnassignModalOpen(true)}><FormattedMessage id="ui-users.roles.unassignAllRoles" /></Button>
+            </IfPermission>
+          </Row>
+        </Accordion>
+        <UserRolesModal
+          filtersConfig={filtersConfig}
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          initialRoleIds={assignedRoleIds}
+          changeUserRoles={changeUserRoles}
+        />
+        <ConfirmationModal
+          open={unassignModalOpen}
+          heading={<FormattedMessage id="ui-users.roles.modal.unassignAll.header" />}
+          message={unassignAllMessage}
+          onConfirm={handleUnassignAllRoles}
+          onCancel={() => setUnassignModalOpen(false)}
+          cancelLabel={<FormattedMessage id="ui-users.no" />}
+          confirmLabel={<FormattedMessage id="ui-users.yes" />}
+        />
+        <OnChange name="assignedRoleIds">
+          {(userAssignedRoleIds) => {
+            const userRoleIds = isEmpty(userAssignedRoleIds) ? [] : userAssignedRoleIds;
+            setAssignedRoleIds(userRoleIds);
+          }}
+        </OnChange>
+      </div>
+    </IfPermission>
   );
 }
 

diff --git a/src/components/EditSections/EditUserRoles/EditUserRoles.test.js b/src/components/EditSections/EditUserRoles/EditUserRoles.test.js
@@ -4,6 +4,7 @@ import { cleanup, waitFor } from '@folio/jest-config-stripes/testing-library/rea
 import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
 import renderWithRouter from 'helpers/renderWithRouter';
 import {
+  IfPermission,
   useStripes,
 } from '@folio/stripes/core';
 import { Form } from 'react-final-form';
@@ -19,6 +20,7 @@ jest.mock('../../../hooks', () => ({
 jest.mock('@folio/stripes/core', () => ({
   ...jest.requireActual('@folio/stripes/core'),
   useStripes: jest.fn(),
+  IfPermission: jest.fn()
 }));
 
 jest.unmock('@folio/stripes/components');
@@ -95,6 +97,7 @@ describe('EditUserRoles Component', () => {
   beforeEach(() => {
     useStripes.mockClear().mockReturnValue(STRIPES);
     useAllRolesData.mockClear().mockReturnValue(mockAllRolesData);
+    IfPermission.mockImplementation(({ children }) => children);
   });
   afterEach(cleanup);
 
@@ -106,6 +109,22 @@ describe('EditUserRoles Component', () => {
     expect(queryByText('simple role')).not.toBeInTheDocument();
   });
 
+  it('hides the roles accordion when user doesn\'t have view roles permission', () => {
+    IfPermission.mockImplementation(({ perm, children }) => (perm !== 'ui-authorization-roles.users.settings.view' ? children : null));
+    const { queryByText } = renderEditRolesAccordion(propsData);
+
+    expect(queryByText('ui-users.roles.userRoles')).not.toBeInTheDocument();
+  });
+
+  it('hides the add role button when user doesn\'t have manage roles permission', () => {
+    IfPermission.mockImplementation(({ perm, children }) => (perm !== 'ui-authorization-roles.users.settings.manage' ? children : null));
+    const { getByText, queryByText } = renderEditRolesAccordion(propsData);
+
+    expect(getByText('test role')).toBeInTheDocument();
+    expect(getByText('admin role')).toBeInTheDocument();
+    expect(queryByText('ui-users.roles.addRoles')).not.toBeInTheDocument();
+  });
+
   it('calls delete user role function', async () => {
     const id = `clickable-remove-user-role-${mockAllRolesData.data.roles[0].id}`;
     renderEditRolesAccordion(propsData);

diff --git a/src/components/UserDetailSections/UserRoles/UserRoles.js b/src/components/UserDetailSections/UserRoles/UserRoles.js
@@ -41,7 +41,7 @@ const UserRoles = (props) => {
   return (<RenderRoles
     {...props}
     heading={<FormattedMessage id="ui-users.roles.userRoles" />}
-    permToRead="roles.users.collection.get"
+    permToRead="ui-authorization-roles.users.settings.view"
     affiliations={affiliations}
     selectedAffiliation={tenantId}
     isLoading={isLoading}