UIU-3105: hide permissionSets from settings/users navigation pane if roles interface is present

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

@@ -5,7 +5,7 @@ import {
   NavListItem,
 } from '@folio/stripes/components';
 
-const SectionPageItem = ({ setting, path }) => {
+const SectionPageItem = ({ setting, path, hasInterface }) => {
   let sectionItem = (
     <NavListItem to={`${path}/${setting.route}`} data-test-sectionpageitem>
       {setting.label}
@@ -28,6 +28,10 @@ const SectionPageItem = ({ setting, path }) => {
     );
   }
 
+  if (hasInterface(setting?.dependsOnNoneInterface)) {
+    sectionItem = null;
+  }
+
   return sectionItem;
 };
 
@@ -38,7 +42,9 @@ SectionPageItem.propTypes = {
     label: PropTypes.element,
     perm: PropTypes.string,
     route: PropTypes.string,
-  })
+    dependsOnNoneInterface: PropTypes.string
+  }),
+  hasInterface: PropTypes.func
 };
 
 export default SectionPageItem;

src/settings/components/SectionPageItem.test.js

@@ -10,13 +10,14 @@ import { FormattedMessage } from 'react-intl';
 import '__mock__';
 import SectionPageItem from './SectionPageItem';
 
-const renderSectionPageItem = ({ setting, path }) => {
+const renderSectionPageItem = ({ setting, path, hasInterface = () => false }) => {
   const history = createMemoryHistory();
   return render(
     <Router history={history}>
       <SectionPageItem
         setting={setting}
         path={path}
+        hasInterface={hasInterface}
       />
     </Router>
   );
@@ -140,4 +141,54 @@ describe('Settings SectionPageItem', () => {
       expect(sectionContent).toBeNull();
     });
   });
+
+  describe('with dependsOnNoneInterface', () => {
+    beforeEach(() => {
+      sectionPageItem = renderSectionPageItem({
+        setting: {
+          route: 'some-route',
+          label: <FormattedMessage id="foo" />,
+          component: <div />,
+          perm: 'permission',
+          dependsOnNoneInterface: 'goats'
+        },
+        path: 'funky-chicken',
+        hasInterface: () => true
+      });
+    });
+
+    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 dependsOnNoneInterface', () => {
+    beforeEach(() => {
+      sectionPageItem = renderSectionPageItem({
+        setting: {
+          route: 'some-route',
+          label: <FormattedMessage id="foo" />,
+          component: <div />,
+          perm: 'permission',
+          dependsOnNoneInterface: 'goats'
+        },
+        path: 'funky-chicken',
+        hasInterface: () => false
+      });
+    });
+
+    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/components/SettingsPage.js

@@ -4,7 +4,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { IfInterface } from '@folio/stripes/core';
+import { IfInterface, useStripes } from '@folio/stripes/core';
 import {
   Headline,
   NavList,
@@ -17,6 +17,7 @@ import SectionPageItem from './SectionPageItem';
 
 const SettingsPage = ({ sections, path }) => {
   const paneTitleRef = useRef(null);
+  const stripes = useStripes();
 
   useEffect(() => {
     if (paneTitleRef.current) {
@@ -39,7 +40,7 @@ const SettingsPage = ({ sections, path }) => {
         {sections.map((section, index) => {
           const sectionInner = (
             <NavListSection key={index} label={section.label} tag="h3" data-test-settingspage>
-              {section.pages.map((setting) => <SectionPageItem setting={setting} path={path} key={setting.route} />)}
+              {section.pages.map((setting) => <SectionPageItem hasInterface={(arg) => stripes.hasInterface(arg)} setting={setting} path={path} key={setting.route} />)}
             </NavListSection>
           );
           return section.interface ? <IfInterface name={section.interface} key={index}>{sectionInner}</IfInterface> : sectionInner;

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',
+    dependsOnNoneInterface: 'roles'
   },
   {
     route: 'groups',