Merge pull request #2834 from folio-org/UIU-3300

UIU-3300: Hide Create block button for user without permission

CHANGELOG.md

@@ -7,6 +7,7 @@
 * Remove duplicates from the keyboard shortcut modal. Refs UIU-3026.
 * Add sub permission `manual-block-templates.collection.get` to permission `Users: Can create, edit and remove patron blocks`. Refs UIU-3305.
 * React v19: refactor away from default props for functional components. Refs. UIU-3141.
+* Hide Create block button for user without permission. Refs UIU-3300.
 
 ## [11.0.9](https://github.com/folio-org/ui-users/tree/v11.0.9) (2024-12-13)
 [Full Changelog](https://github.com/folio-org/ui-users/compare/v11.0.8...v11.0.9)

src/components/UserDetailSections/PatronBlock/PatronBlock.js

@@ -14,7 +14,10 @@ import {
   Button,
   Headline
 } from '@folio/stripes/components';
-import { stripesConnect } from '@folio/stripes/core';
+import {
+  IfPermission,
+  stripesConnect,
+} from '@folio/stripes/core';
 
 import { isDcbUser } from '../../util';
 import css from './PatronBlock.css';
@@ -176,18 +179,18 @@ class PatronBlock extends React.Component {
       sortDirection,
     } = this.state;
 
-    const buttonDisabled = this.props.stripes.hasPerm('ui-users.patron-blocks.all');
     const displayWhenOpen =
-      <Button
-        id="create-patron-block"
-        disabled={!buttonDisabled}
-        to={{
-          pathname: `/users/${params.id}/patronblocks/create`,
-          search: location.search,
-        }}
-      >
-        <FormattedMessage id="ui-users.blocks.buttons.add" />
-      </Button>;
+      <IfPermission perm="ui-users.patron-blocks.all">
+        <Button
+          id="create-patron-block"
+          to={{
+            pathname: `/users/${params.id}/patronblocks/create`,
+            search: location.search,
+          }}
+        >
+          <FormattedMessage id="ui-users.blocks.buttons.add" />
+        </Button>
+      </IfPermission>;
     const items =
       <MultiColumnList
         id="patron-block-mcl"
@@ -217,7 +220,6 @@ class PatronBlock extends React.Component {
       >
         <Row><Col xs>{items}</Col></Row>
       </Accordion>
-
     );
   }
 }