From ee61c8fae6dbe5a7690b5233fd21a15b439f5fdc Mon Sep 17 00:00:00 2001
From: Ryan Berger <rberger@ebsco.com>
Date: Sat, 4 Jan 2025 14:34:39 -0500
Subject: [PATCH] Enforce view/manage roles perms.

---
 .../EditUserRoles/EditUserRoles.js            | 99 ++++++++++---------
 .../UserDetailSections/UserRoles/UserRoles.js |  2 +-
 2 files changed, 54 insertions(+), 47 deletions(-)

diff --git a/src/components/EditSections/EditUserRoles/EditUserRoles.js b/src/components/EditSections/EditUserRoles/EditUserRoles.js
index 4383349a8..9ad7a544b 100644
--- 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/UserDetailSections/UserRoles/UserRoles.js b/src/components/UserDetailSections/UserRoles/UserRoles.js
index cedcf2002..920e447d3 100644
--- 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}