Refactor dynamically called methods to be more explicit

We were dynamically calling methods and it was confusing. This commit
refactors the code so we are more explicit in the methods we are
calling.

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',
   },
 ];