1 files changed, 38 insertions, 24 deletions
diff --git a/app/assets/javascripts/pages/groups/group_members/index.js b/app/assets/javascripts/pages/groups/group_members/index.js
index 009a3eee526..d3900b84fa7 100644
--- a/app/assets/javascripts/pages/groups/group_members/index.js
+++ b/app/assets/javascripts/pages/groups/group_members/index.js
@@ -6,6 +6,7 @@ import groupsSelect from '~/groups_select';
 import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue';
 import { initGroupMembersApp } from '~/groups/members';
 import { memberRequestFormatter, groupLinkRequestFormatter } from '~/groups/members/utils';
+import { s__ } from '~/locale';
 
 function mountRemoveMemberModal() {
   const el = document.querySelector('.js-remove-member-modal');
@@ -22,30 +23,43 @@ function mountRemoveMemberModal() {
 }
 
 const SHARED_FIELDS = ['account', 'expires', 'maxRole', 'expiration', 'actions'];
-initGroupMembersApp(
-  document.querySelector('.js-group-members-list'),
-  SHARED_FIELDS.concat(['source', 'granted']),
-  { tr: { 'data-qa-selector': 'member_row' } },
-  memberRequestFormatter,
-);
-initGroupMembersApp(
-  document.querySelector('.js-group-linked-list'),
-  SHARED_FIELDS.concat('granted'),
-  { table: { 'data-qa-selector': 'groups_list' }, tr: { 'data-qa-selector': 'group_row' } },
-  groupLinkRequestFormatter,
-);
-initGroupMembersApp(
-  document.querySelector('.js-group-invited-members-list'),
-  SHARED_FIELDS.concat('invited'),
-  {},
-  memberRequestFormatter,
-);
-initGroupMembersApp(
-  document.querySelector('.js-group-access-requests-list'),
-  SHARED_FIELDS.concat('requested'),
-  {},
-  memberRequestFormatter,
-);
+
+initGroupMembersApp(document.querySelector('.js-group-members-list'), {
+  tableFields: SHARED_FIELDS.concat(['source', 'granted']),
+  tableAttrs: { tr: { 'data-qa-selector': 'member_row' } },
+  tableSortableFields: ['account', 'granted', 'maxRole', 'lastSignIn'],
+  requestFormatter: memberRequestFormatter,
+  filteredSearchBar: {
+    show: true,
+    tokens: ['two_factor', 'with_inherited_permissions'],
+    searchParam: 'search',
+    placeholder: s__('Members|Filter members'),
+    recentSearchesStorageKey: 'group_members',
+  },
+});
+initGroupMembersApp(document.querySelector('.js-group-linked-list'), {
+  tableFields: SHARED_FIELDS.concat('granted'),
+  tableAttrs: {
+    table: { 'data-qa-selector': 'groups_list' },
+    tr: { 'data-qa-selector': 'group_row' },
+  },
+  requestFormatter: groupLinkRequestFormatter,
+});
+initGroupMembersApp(document.querySelector('.js-group-invited-members-list'), {
+  tableFields: SHARED_FIELDS.concat('invited'),
+  requestFormatter: memberRequestFormatter,
+  filteredSearchBar: {
+    show: true,
+    tokens: [],
+    searchParam: 'search_invited',
+    placeholder: s__('Members|Search invited'),
+    recentSearchesStorageKey: 'group_invited_members',
+  },
+});
+initGroupMembersApp(document.querySelector('.js-group-access-requests-list'), {
+  tableFields: SHARED_FIELDS.concat('requested'),
+  requestFormatter: memberRequestFormatter,
+});
 
 groupsSelect();
 memberExpirationDate();