Merge branch '326354-members_table-vue-refactor-dynamically-called-methods' into 'master'

Refactor dynamically called methods to be more explicit

See merge request gitlab-org/gitlab!78141

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

@@ -6,6 +6,7 @@ import { canOverride, canRemove, canResend, canUpdate } from 'ee_else_ce/members
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import initUserPopovers from '~/user_popovers';
 import {
+  FIELD_KEY_ACTIONS,
   FIELDS,
   ACTIVE_TAB_QUERY_PARAM_NAME,
   TAB_QUERY_PARAM_VALUES,
@@ -63,17 +64,10 @@ export default {
         return state[this.namespace].pagination;
       },
     }),
-    filteredFields() {
+    filteredAndModifiedFields() {
       return FIELDS.filter(
         (field) => this.tableFields.includes(field.key) && this.showField(field),
-      ).map((field) => {
-        const tdClassFunction = this[field.tdClassFunction];
-
-        return {
-          ...field,
-          ...(tdClassFunction && { tdClass: tdClassFunction }),
-        };
-      });
+      ).map(this.modifyFieldDefinition);
     },
     userIsLoggedIn() {
       return this.currentUserId !== null;
@@ -100,20 +94,29 @@ export default {
       );
     },
     showField(field) {
-      if (!Object.prototype.hasOwnProperty.call(field, 'showFunction')) {
-        return true;
-      }
+      switch (field.key) {
+        case FIELD_KEY_ACTIONS:
+          if (!this.userIsLoggedIn) {
+            return false;
+          }
 
-      return this[field.showFunction]();
+          return this.members.some((member) => this.hasActionButtons(member));
+        default:
+          return true;
+      }
     },
-    showActionsField() {
-      if (!this.userIsLoggedIn) {
-        return false;
+    modifyFieldDefinition(field) {
+      switch (field.key) {
+        case FIELD_KEY_ACTIONS:
+          return {
+            ...field,
+            tdClass: this.actionsFieldTdClass,
+          };
+        default:
+          return field;
       }
-
-      return this.members.some((member) => this.hasActionButtons(member));
     },
-    tdClassActions(value, key, member) {
+    actionsFieldTdClass(value, key, member) {
       if (this.hasActionButtons(member)) {
         return 'col-actions';
       }
@@ -219,7 +222,7 @@ export default {
       data-testid="members-table"
       head-variant="white"
       stacked="lg"
-      :fields="filteredFields"
+      :fields="filteredAndModifiedFields"
       :items="members"
       primary-key="id"
       thead-class="border-bottom"

app/assets/javascripts/members/constants.js

 import { __ } from '~/locale';
 
+export const FIELD_KEY_ACCOUNT = 'account';
+export const FIELD_KEY_SOURCE = 'source';
+export const FIELD_KEY_GRANTED = 'granted';
+export const FIELD_KEY_INVITED = 'invited';
+export const FIELD_KEY_REQUESTED = 'requested';
+export const FIELD_KEY_MAX_ROLE = 'maxRole';
+export const FIELD_KEY_EXPIRATION = 'expiration';
+export const FIELD_KEY_LAST_SIGN_IN = 'lastSignIn';
+export const FIELD_KEY_ACTIONS = 'actions';
+
 export const FIELDS = [
   {
-    key: 'account',
+    key: FIELD_KEY_ACCOUNT,
     label: __('Account'),
     sort: {
       asc: 'name_asc',
@@ -10,13 +20,13 @@ export const FIELDS = [
     },
   },
   {
-    key: 'source',
+    key: FIELD_KEY_SOURCE,
     label: __('Source'),
     thClass: 'col-meta',
     tdClass: 'col-meta',
   },
   {
-    key: 'granted',
+    key: FIELD_KEY_GRANTED,
     label: __('Access granted'),
     thClass: 'col-meta',
     tdClass: 'col-meta',
@@ -26,19 +36,19 @@ export const FIELDS = [
     },
   },
   {
-    key: 'invited',
+    key: FIELD_KEY_INVITED,
     label: __('Invited'),
     thClass: 'col-meta',
     tdClass: 'col-meta',
   },
   {
-    key: 'requested',
+    key: FIELD_KEY_REQUESTED,
     label: __('Requested'),
     thClass: 'col-meta',
     tdClass: 'col-meta',
   },
   {
-    key: 'maxRole',
+    key: FIELD_KEY_MAX_ROLE,
     label: __('Max role'),
     thClass: 'col-max-role',
     tdClass: 'col-max-role',
@@ -48,13 +58,13 @@ export const FIELDS = [
     },
   },
   {
-    key: 'expiration',
+    key: FIELD_KEY_EXPIRATION,
     label: __('Expiration'),
     thClass: 'col-expiration',
     tdClass: 'col-expiration',
   },
   {
-    key: 'lastSignIn',
+    key: FIELD_KEY_LAST_SIGN_IN,
     label: __('Last sign-in'),
     sort: {
       asc: 'recent_sign_in',
@@ -62,10 +72,8 @@ export const FIELDS = [
     },
   },
   {
-    key: 'actions',
+    key: FIELD_KEY_ACTIONS,
     thClass: 'col-actions',
-    showFunction: 'showActionsField',
-    tdClassFunction: 'tdClassActions',
   },
 ];