feat(ESSNTL-5052): Disable create group button if not authorized

src/components/GroupsTable/GroupsTable.js

@@ -26,7 +26,10 @@ import upperCase from 'lodash/upperCase';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { TABLE_DEFAULT_PAGINATION } from '../../constants';
+import {
+  NO_MODIFY_GROUPS_TOOLTIP_MESSAGE,
+  TABLE_DEFAULT_PAGINATION,
+} from '../../constants';
 import { fetchGroups } from '../../store/inventory-actions';
 import useFetchBatched from '../../Utilities/hooks/useFetchBatched';
 import CreateGroupModal from '../InventoryGroups/Modals/CreateGroupModal';
@@ -426,8 +429,7 @@ const GroupsTable = () => {
               props: {
                 isAriaDisabled: !canModify || selectedIds.length !== 1,
                 ...(!canModify && {
-                  tooltip:
-                    'You do not have the necessary permissions to modify groups. Contact your organization administrator.',
+                  tooltip: NO_MODIFY_GROUPS_TOOLTIP_MESSAGE,
                 }),
               },
             },
@@ -437,8 +439,7 @@ const GroupsTable = () => {
               props: {
                 isAriaDisabled: !canModify || selectedIds.length === 0,
                 ...(!canModify && {
-                  tooltip:
-                    'You do not have the necessary permissions to modify groups. Contact your organization administrator.',
+                  tooltip: NO_MODIFY_GROUPS_TOOLTIP_MESSAGE,
                 }),
               },
             },

src/components/InventoryGroups/Modals/AddSelectedHostsToGroupModal.cy.js

@@ -18,19 +18,50 @@ const mountModal = (
   cy.mountWithContext(AddSelectedHostsToGroupModal, {}, props);
 };
 
-before(() => {
-  cy.mockWindowChrome();
-});
-
 describe('AddSelectedHostsToGroupModal', () => {
-  it('makes separate requests when searching groups', () => {
-    groupsInterceptors['successful with some items']();
-    mountModal();
-
-    cy.wait('@getGroups'); // must make initial call
-    cy.get('input').type('abc');
-    cy.wait('@getGroups').its('request.url').should('contain', '?name=abc');
-    cy.get('input').type('d');
-    cy.wait('@getGroups').its('request.url').should('contain', '?name=abcd');
+  describe('without any permissions', () => {
+    before(() => {
+      cy.mockWindowChrome({
+        userPermissions: [],
+      });
+    });
+
+    beforeEach(() => {
+      groupsInterceptors['successful with some items']();
+      mountModal();
+    });
+
+    it('makes separate requests when searching groups', () => {
+      cy.wait('@getGroups'); // must make initial call
+      cy.get('input').type('abc');
+      cy.wait('@getGroups').its('request.url').should('contain', '?name=abc');
+      cy.get('input').type('d');
+      cy.wait('@getGroups').its('request.url').should('contain', '?name=abcd');
+    });
+
+    it('create group button is disabled', () => {
+      cy.get('button')
+        .contains('Create a new group')
+        .should('have.attr', 'aria-disabled', 'true');
+    });
+  });
+
+  describe('with groups write permission', () => {
+    before(() => {
+      cy.mockWindowChrome({
+        userPermissions: ['inventory:groups:write'],
+      });
+    });
+
+    beforeEach(() => {
+      groupsInterceptors['successful with some items']();
+      mountModal();
+    });
+
+    it('create group button is enabled', () => {
+      cy.get('button')
+        .contains('Create a new group')
+        .not('have.attr', 'aria-disabled', 'true');
+    });
   });
 });

src/components/InventoryGroups/SmallComponents/CreateGroupButton.js

@@ -1,15 +1,31 @@
 import React from 'react';
-import { Button, Text } from '@patternfly/react-core';
+import { Button, Text, Tooltip } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
+import { usePermissionsWithContext } from '@redhat-cloud-services/frontend-components-utilities/RBACHook';
+import { NO_MODIFY_GROUPS_TOOLTIP_MESSAGE } from '../../../constants';
 
-export const CreateGroupButton = ({ closeModal }) => (
-  <>
-    <Text>Or</Text>
-    <Button variant="secondary" className="pf-u-w-50" onClick={closeModal}>
-      Create a new group
-    </Button>
-  </>
-);
+export const CreateGroupButton = ({ closeModal }) => {
+  const { hasAccess: canModifyGroups } = usePermissionsWithContext([
+    'inventory:groups:write',
+  ]);
+
+  return (
+    <>
+      <Text>Or</Text>
+      {canModifyGroups ? (
+        <Button variant="secondary" className="pf-u-w-50" onClick={closeModal}>
+          Create a new group
+        </Button>
+      ) : (
+        <Tooltip content={NO_MODIFY_GROUPS_TOOLTIP_MESSAGE}>
+          <Button variant="secondary" className="pf-u-w-50" isAriaDisabled>
+            Create a new group
+          </Button>
+        </Tooltip>
+      )}
+    </>
+  );
+};
 
 CreateGroupButton.propTypes = {
   closeModal: PropTypes.func,

src/constants.js

@@ -170,3 +170,6 @@ export const getSearchParams = () => {
 };
 
 export const TABLE_DEFAULT_PAGINATION = 50; // from UX table audit
+
+export const NO_MODIFY_GROUPS_TOOLTIP_MESSAGE =
+  'You do not have the necessary permissions to modify groups. Contact your organization administrator.';