UIU-3105: hide permissionSets from settings/users navigation pane if …

…roles interface is present (#2689)

Refs UIU-3105.

CHANGELOG.md

@@ -14,7 +14,8 @@
 * 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.     
+* Fix filter issues in user roles modal. Refs UIU-3124.
+* Suppress Settings > Users > Permission sets when `roles` interface is present. Refs UIU-3105.     
 
 ## [10.1.0](https://github.com/folio-org/ui-users/tree/v10.1.0) (2024-03-20)
 [Full Changelog](https://github.com/folio-org/ui-users/compare/v10.0.4...v10.1.0)

src/settings/components/SectionPageItem.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { IfInterface, IfPermission } from '@folio/stripes/core';
+import { IfInterface, IfPermission, useStripes } from '@folio/stripes/core';
 import {
   NavListItem,
 } from '@folio/stripes/components';
 
 const SectionPageItem = ({ setting, path }) => {
+  const stripes = useStripes();
   let sectionItem = (
     <NavListItem to={`${path}/${setting.route}`} data-test-sectionpageitem>
       {setting.label}
@@ -28,6 +29,10 @@ const SectionPageItem = ({ setting, path }) => {
     );
   }
 
+  if (stripes.hasInterface(setting?.unlessInterface)) {
+    sectionItem = null;
+  }
+
   return sectionItem;
 };
 
@@ -38,7 +43,8 @@ SectionPageItem.propTypes = {
     label: PropTypes.element,
     perm: PropTypes.string,
     route: PropTypes.string,
-  })
+    unlessInterface: PropTypes.string
+  }),
 };
 
 export default SectionPageItem;

src/settings/components/SectionPageItem.test.js

@@ -6,6 +6,7 @@ import {
 } from '@folio/jest-config-stripes/testing-library/react';
 import { createMemoryHistory } from 'history';
 import { FormattedMessage } from 'react-intl';
+import { useStripes } from '@folio/stripes/core';
 
 import '__mock__';
 import SectionPageItem from './SectionPageItem';
@@ -24,6 +25,14 @@ const renderSectionPageItem = ({ setting, path }) => {
 
 describe('Settings SectionPageItem', () => {
   let sectionPageItem;
+  beforeAll(() => {
+    useStripes.mockClear().mockReturnValue({ hasInterface: () => false });
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
 
   describe('vanilla', () => {
     beforeEach(() => {
@@ -47,8 +56,6 @@ describe('Settings SectionPageItem', () => {
     });
   });
 
-
-
   describe('with interface present', () => {
     beforeEach(() => {
       sectionPageItem = renderSectionPageItem({
@@ -140,4 +147,54 @@ describe('Settings SectionPageItem', () => {
       expect(sectionContent).toBeNull();
     });
   });
+
+  describe('with unlessInterface', () => {
+    beforeEach(() => {
+      useStripes.mockClear().mockReturnValue({ hasInterface: () => true });
+      sectionPageItem = renderSectionPageItem({
+        setting: {
+          route: 'some-route',
+          label: <FormattedMessage id="foo" />,
+          component: <div />,
+          perm: 'permission',
+          unlessInterface: 'goats'
+        },
+        path: 'funky-chicken',
+      });
+    });
+
+    afterEach(cleanup);
+
+    it('should not be rendered', () => {
+      const { container } = sectionPageItem;
+      const sectionContent = container.querySelector('[data-test-sectionpageitem]');
+      expect(container).toBeVisible();
+      expect(sectionContent).toBeNull();
+    });
+  });
+
+  describe('with no interface of unlessInterface', () => {
+    beforeEach(() => {
+      useStripes.mockClear().mockReturnValue({ hasInterface: () => false });
+      sectionPageItem = renderSectionPageItem({
+        setting: {
+          route: 'some-route',
+          label: <FormattedMessage id="foo" />,
+          component: <div />,
+          perm: 'permission',
+          unlessInterface: 'goats'
+        },
+        path: 'funky-chicken',
+      });
+    });
+
+    afterEach(cleanup);
+
+    it('should be rendered', () => {
+      const { container } = sectionPageItem;
+      const sectionContent = container.querySelector('[data-test-sectionpageitem]');
+      expect(container).toBeVisible();
+      expect(sectionContent).not.toBeNull();
+    });
+  });
 });

src/settings/sections.js

@@ -25,6 +25,7 @@ const settingsGeneral = [
     label: <FormattedMessage id="ui-users.settings.permissionSet" />,
     component: PermissionSets,
     perm: 'ui-users.settings.permsets.view',
+    unlessInterface: 'roles'
   },
   {
     route: 'groups',