Add latest changes from gitlab-org/gitlab@master

2 files changed, 32 insertions, 11 deletions

diff --git a/app/assets/javascripts/members/components/table/members_table.vue b/app/assets/javascripts/members/components/table/members_table.vue
index 0c79bf06d64..16e0cd5ad4e 100644
--- a/app/assets/javascripts/members/components/table/members_table.vue
+++ b/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">
diff --git a/app/assets/javascripts/members/constants.js b/app/assets/javascripts/members/constants.js
index 21af825f795..77cb150bff6 100644
--- a/app/assets/javascripts/members/constants.js
+++ b/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',
   },
 ];