Merge pull request #8659 from mabashian/7989-group-action-buttons

Hide edit/delete buttons on group details view for users that don't have permissions

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx

@@ -17,7 +17,7 @@ import InventoryGroupsDeleteModal from '../shared/InventoryGroupsDeleteModal';
 
 function InventoryGroupDetail({ i18n, inventoryGroup }) {
   const {
-    summary_fields: { created_by, modified_by },
+    summary_fields: { created_by, modified_by, user_capabilities },
     created,
     modified,
     name,
@@ -54,6 +54,7 @@ function InventoryGroupDetail({ i18n, inventoryGroup }) {
         />
       </DetailList>
       <CardActionsRow>
+        {user_capabilities?.edit && (
           <Button
             variant="primary"
             aria-label={i18n._(t`Edit`)}
@@ -65,6 +66,8 @@ function InventoryGroupDetail({ i18n, inventoryGroup }) {
           >
             {i18n._(t`Edit`)}
           </Button>
+        )}
+        {user_capabilities?.delete && (
           <InventoryGroupsDeleteModal
             groups={[inventoryGroup]}
             isDisabled={false}
@@ -72,6 +75,7 @@ function InventoryGroupDetail({ i18n, inventoryGroup }) {
               history.push(`/inventories/inventory/${params.id}/groups`)
             }
           />
+        )}
       </CardActionsRow>
       {error && (
         <AlertModal

awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.test.jsx

@@ -27,12 +27,18 @@ const inventoryGroup = {
       username: 'Bond',
       id: 14,
     },
+    user_capabilities: {
+      delete: true,
+      edit: true,
+    },
   },
 };
 
 describe('<InventoryGroupDetail />', () => {
   let wrapper;
   let history;
+
+  describe('User has full permissions', () => {
     beforeEach(async () => {
       await act(async () => {
         history = createMemoryHistory({
@@ -91,7 +97,7 @@ describe('<InventoryGroupDetail />', () => {
       );
     });
 
-  test('details should render with the proper values', () => {
+    test('details should render with the proper values and action buttons shown', () => {
       expect(wrapper.find('Detail[label="Name"]').prop('value')).toBe('Foo');
       expect(wrapper.find('Detail[label="Description"]').prop('value')).toBe(
         'Bar'
@@ -99,5 +105,52 @@ describe('<InventoryGroupDetail />', () => {
       expect(wrapper.find('Detail[label="Created"]').length).toBe(1);
       expect(wrapper.find('Detail[label="Last Modified"]').length).toBe(1);
       expect(wrapper.find('VariablesDetail').prop('value')).toBe('bizz: buzz');
+
+      expect(wrapper.find('button[aria-label="Edit"]').length).toBe(1);
+      expect(wrapper.find('button[aria-label="Delete"]').length).toBe(1);
+    });
+  });
+
+  describe('User has read-only permissions', () => {
+    test('should hide edit/delete buttons', async () => {
+      const readOnlyGroup = {
+        ...inventoryGroup,
+        summary_fields: {
+          ...inventoryGroup.summary_fields,
+          user_capabilities: {
+            delete: false,
+            edit: false,
+          },
+        },
+      };
+
+      await act(async () => {
+        history = createMemoryHistory({
+          initialEntries: ['/inventories/inventory/1/groups/1/details'],
+        });
+        wrapper = mountWithContexts(
+          <Route path="/inventories/inventory/:id/groups/:groupId">
+            <InventoryGroupDetail inventoryGroup={readOnlyGroup} />
+          </Route>,
+          {
+            context: {
+              router: {
+                history,
+                route: {
+                  location: history.location,
+                  match: { params: { id: 1 } },
+                },
+              },
+            },
+          }
+        );
+        await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+      });
+
+      expect(wrapper.find('button[aria-label="Edit"]').length).toBe(0);
+      expect(wrapper.find('button[aria-label="Delete"]').length).toBe(0);
+
+      wrapper.unmount();
+    });
   });
 });