Hide mobile "Actions" label if no action buttons exist

On desktop the whole column is hidden, but on mobile we need to hide
the "Actions" label on individual cards.

app/assets/javascripts/members/components/table/members_table.vue

@@ -36,7 +36,14 @@ export default {
     filteredFields() {
       return FIELDS.filter(
         (field) => this.tableFields.includes(field.key) && this.showField(field),
-      );
+      ).map((field) => {
+        const tdClassFunction = this[field.tdClassFunction];
+
+        return {
+          ...field,
+          ...(tdClassFunction && { tdClass: tdClassFunction }),
+        };
+      });
     },
     userIsLoggedIn() {
       return this.currentUserId !== null;
@@ -46,6 +53,14 @@ export default {
     initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
   },
   methods: {
+    hasActionButtons(member) {
+      return (
+        canRemove(member, this.sourceId) ||
+        canResend(member) ||
+        canUpdate(member, this.currentUserId, this.sourceId) ||
+        canOverride(member)
+      );
+    },
     showField(field) {
       if (!Object.prototype.hasOwnProperty.call(field, 'showFunction')) {
         return true;
@@ -58,14 +73,20 @@ export default {
         return false;
       }
 
-      return this.members.some((member) => {
-        return (
-          canRemove(member, this.sourceId) ||
-          canResend(member) ||
-          canUpdate(member, this.currentUserId, this.sourceId) ||
-          canOverride(member)
-        );
-      });
+      return this.members.some((member) => this.hasActionButtons(member));
+    },
+    tdClassActions(value, key, member) {
+      if (this.hasActionButtons(member)) {
+        return 'col-actions';
+      }
+
+      return ['col-actions', 'gl-display-none!', 'gl-display-lg-table-cell!'];
+    },
+    tbodyTrAttr(member) {
+      return {
+        ...this.tableAttrs.tr,
+        ...(member?.id && { 'data-testid': `members-table-row-${member.id}` }),
+      };
     },
   },
 };
@@ -85,7 +106,7 @@ export default {
       thead-class="border-bottom"
       :empty-text="__('No members found')"
       show-empty
-      :tbody-tr-attr="tableAttrs.tr"
+      :tbody-tr-attr="tbodyTrAttr"
     >
       <template #cell(account)="{ item: member }">
         <members-table-cell #default="{ memberType, isCurrentUser }" :member="member">

app/assets/javascripts/members/constants.js

@@ -70,8 +70,8 @@ export const FIELDS = [
   {
     key: 'actions',
     thClass: 'col-actions',
-    tdClass: 'col-actions',
     showFunction: 'showActionsField',
+    tdClassFunction: 'tdClassActions',
   },
 ];
 

changelogs/unreleased/peterhegman-hide-mobile-actions-field-with-no-buttons.yml

+---
+title: Hide "Actions" label on group members view if no action buttons exist
+merge_request: 50304
+author:
+type: fixed

ee/spec/frontend/members/components/table/members_table_spec.js

 import { within } from '@testing-library/dom';
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount, createLocalVue, createWrapper } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { member as memberMock, members } from 'jest/members/mock_data';
 import MembersTable from '~/members/components/table/members_table.vue';
@@ -43,6 +43,13 @@ describe('MemberList', () => {
     });
   };
 
+  const getByTestId = (id, options) =>
+    createWrapper(within(wrapper.element).getByTestId(id, options));
+  const findTableCellByMemberId = (tableCellLabel, memberId) =>
+    getByTestId(`members-table-row-${memberId}`).find(
+      `[data-label="${tableCellLabel}"][role="cell"]`,
+    );
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -56,11 +63,26 @@ describe('MemberList', () => {
         canOverride: true,
       };
 
+      const memberNoPermissions = {
+        ...memberMock,
+        id: 2,
+      };
+
       describe('when one of the members has `canOverride` permissions', () => {
         it('renders the "Actions" field', () => {
-          createComponent({ members: [memberCanOverride], tableFields: ['actions'] });
+          createComponent({
+            members: [memberNoPermissions, memberCanOverride],
+            tableFields: ['actions'],
+          });
 
           expect(within(wrapper.element).queryByTestId('col-actions')).not.toBe(null);
+
+          expect(
+            findTableCellByMemberId('Actions', memberNoPermissions.id).classes(),
+          ).toStrictEqual(['col-actions', 'gl-display-none!', 'gl-display-lg-table-cell!']);
+          expect(findTableCellByMemberId('Actions', memberCanOverride.id).classes()).toStrictEqual([
+            'col-actions',
+          ]);
         });
       });
 

spec/frontend/members/components/table/members_table_spec.js

@@ -63,6 +63,10 @@ describe('MembersTable', () => {
     createWrapper(getByTestIdHelper(wrapper.element, id, options));
 
   const findTable = () => wrapper.find(GlTable);
+  const findTableCellByMemberId = (tableCellLabel, memberId) =>
+    getByTestId(`members-table-row-${memberId}`).find(
+      `[data-label="${tableCellLabel}"][role="cell"]`,
+    );
 
   afterEach(() => {
     wrapper.destroy();
@@ -131,16 +135,30 @@ describe('MembersTable', () => {
         canRemove: true,
       };
 
+      const memberNoPermissions = {
+        ...memberMock,
+        id: 2,
+      };
+
       describe.each`
         permission     | members
-        ${'canUpdate'} | ${[memberCanUpdate]}
-        ${'canRemove'} | ${[memberCanRemove]}
-        ${'canResend'} | ${[invite]}
+        ${'canUpdate'} | ${[memberNoPermissions, memberCanUpdate]}
+        ${'canRemove'} | ${[memberNoPermissions, memberCanRemove]}
+        ${'canResend'} | ${[memberNoPermissions, invite]}
       `('when one of the members has $permission permissions', ({ members }) => {
         it('renders the "Actions" field', () => {
           createComponent({ members, tableFields: ['actions'] });
 
           expect(getByTestId('col-actions').exists()).toBe(true);
+
+          expect(findTableCellByMemberId('Actions', members[0].id).classes()).toStrictEqual([
+            'col-actions',
+            'gl-display-none!',
+            'gl-display-lg-table-cell!',
+          ]);
+          expect(findTableCellByMemberId('Actions', members[1].id).classes()).toStrictEqual([
+            'col-actions',
+          ]);
         });
       });