Setup options needed for group members filter bar

Pass options to Vuex store to be used by components

app/assets/javascripts/groups/members/index.js

@@ -5,7 +5,16 @@ import { parseDataAttributes } from 'ee_else_ce/groups/members/utils';
 import App from './components/app.vue';
 import membersStore from '~/members/store';
 
-export const initGroupMembersApp = (el, tableFields, tableAttrs, requestFormatter) => {
+export const initGroupMembersApp = (
+  el,
+  {
+    tableFields = [],
+    tableAttrs = {},
+    tableSortableFields = [],
+    requestFormatter = () => {},
+    filteredSearchBar = { show: false },
+  },
+) => {
   if (!el) {
     return () => {};
   }
@@ -19,7 +28,9 @@ export const initGroupMembersApp = (el, tableFields, tableAttrs, requestFormatte
       currentUserId: gon.current_user_id || null,
       tableFields,
       tableAttrs,
+      tableSortableFields,
       requestFormatter,
+      filteredSearchBar,
     }),
   );
 

app/assets/javascripts/groups/members/utils.js

 import { isUndefined } from 'lodash';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils';
 import {
   GROUP_MEMBER_BASE_PROPERTY_NAME,
   GROUP_MEMBER_ACCESS_LEVEL_PROPERTY_NAME,
@@ -8,12 +8,13 @@ import {
 } from './constants';
 
 export const parseDataAttributes = el => {
-  const { members, groupId, memberPath } = el.dataset;
+  const { members, groupId, memberPath, canManageMembers } = el.dataset;
 
   return {
     members: convertObjectPropsToCamelCase(JSON.parse(members), { deep: true }),
     sourceId: parseInt(groupId, 10),
     memberPath,
+    canManageMembers: parseBoolean(canManageMembers),
   };
 };
 

app/assets/javascripts/members/store/state.js

@@ -2,18 +2,24 @@ export default ({
   members,
   sourceId,
   currentUserId,
+  canManageMembers,
   tableFields,
   tableAttrs,
+  tableSortableFields,
   memberPath,
   requestFormatter,
+  filteredSearchBar,
 }) => ({
   members,
   sourceId,
   currentUserId,
+  canManageMembers,
   tableFields,
   tableAttrs,
+  tableSortableFields,
   memberPath,
   requestFormatter,
+  filteredSearchBar,
   showError: false,
   errorMessage: '',
   removeGroupLinkModalVisible: false,

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 { __ } 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: __('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: __('Members|Search invited'),
+    recentSearchesStorageKey: 'group_invited_members',
+  },
+});
+initGroupMembersApp(document.querySelector('.js-group-access-requests-list'), {
+  tableFields: SHARED_FIELDS.concat('requested'),
+  requestFormatter: memberRequestFormatter,
+});
 
 groupsSelect();
 memberExpirationDate();

app/helpers/groups/group_members_helper.rb

@@ -26,7 +26,8 @@ module Groups::GroupMembersHelper
     {
       members: members_data_json(group, members),
       member_path: group_group_member_path(group, ':id'),
-      group_id: group.id
+      group_id: group.id,
+      can_manage_members: can?(current_user, :admin_group_member, group).to_s
     }
   end
 

ee/spec/frontend/groups/members/index_spec.js

@@ -6,7 +6,7 @@ describe('initGroupMembersApp', () => {
   let vm;
 
   const createVm = () => {
-    vm = initGroupMembersApp(el, ['account'], {}, () => ({}));
+    vm = initGroupMembersApp(el, {});
   };
 
   beforeEach(() => {

ee/spec/frontend/groups/members/utils_spec.js

@@ -9,6 +9,7 @@ describe('group member utils', () => {
       el = document.createElement('div');
       el.setAttribute('data-members', membersJsonString);
       el.setAttribute('data-group-id', '234');
+      el.setAttribute('data-can-manage-members', 'true');
       el.setAttribute('data-ldap-override-path', '/groups/ldap-group/-/group_members/:id/override');
     });
 
@@ -20,6 +21,7 @@ describe('group member utils', () => {
       expect(parseDataAttributes(el)).toEqual({
         members: membersParsed,
         sourceId: 234,
+        canManageMembers: true,
         ldapOverridePath: '/groups/ldap-group/-/group_members/:id/override',
       });
     });

ee/spec/helpers/ee/groups/group_members_helper_spec.rb

@@ -6,6 +6,11 @@ RSpec.describe Groups::GroupMembersHelper do
   include MembersPresentation
 
   let_it_be(:group) { create(:group) }
+  let_it_be(:current_user) { create(:user) }
+
+  before do
+    allow(helper).to receive(:current_user).and_return(current_user)
+  end
 
   describe '.group_member_select_options' do
     before do
@@ -18,14 +23,12 @@ RSpec.describe Groups::GroupMembersHelper do
   end
 
   describe '#members_data' do
-    let(:current_user) { create(:user) }
     let(:group_member) { create(:group_member, group: group, created_by: current_user) }
 
     subject { helper.send('members_data', group, present_members([group_member])) }
 
     before do
       allow(helper).to receive(:can?).with(current_user, :owner_access, group).and_return(true)
-      allow(helper).to receive(:current_user).and_return(current_user)
     end
 
     it 'adds `using_license` property to hash' do
@@ -51,6 +54,7 @@ RSpec.describe Groups::GroupMembersHelper do
     before do
       allow(helper).to receive(:override_group_group_member_path).with(group, ':id').and_return('/groups/foo-bar/-/group_members/:id/override')
       allow(helper).to receive(:group_group_member_path).with(group, ':id').and_return('/groups/foo-bar/-/group_members/:id')
+      allow(helper).to receive(:can?).with(current_user, :admin_group_member, group).and_return(true)
     end
 
     it 'adds `ldap_override_path` to returned hash' do

locale/gitlab.pot

@@ -16905,6 +16905,9 @@ msgstr ""
 msgid "Members|Expired"
 msgstr ""
 
+msgid "Members|Filter members"
+msgstr ""
+
 msgid "Members|LDAP override enabled."
 msgstr ""
 
@@ -16929,6 +16932,9 @@ msgstr ""
 msgid "Members|Role updated successfully."
 msgstr ""
 
+msgid "Members|Search invited"
+msgstr ""
+
 msgid "Members|in %{time}"
 msgstr ""
 

spec/frontend/groups/members/index_spec.js

@@ -9,12 +9,13 @@ describe('initGroupMembersApp', () => {
   let wrapper;
 
   const setup = () => {
-    vm = initGroupMembersApp(
-      el,
-      ['account'],
-      { table: { 'data-qa-selector': 'members_list' } },
-      () => ({}),
-    );
+    vm = initGroupMembersApp(el, {
+      tableFields: ['account'],
+      tableAttrs: { table: { 'data-qa-selector': 'members_list' } },
+      tableSortableFields: ['account'],
+      requestFormatter: () => ({}),
+      filteredSearchBar: { show: false },
+    });
     wrapper = createWrapper(vm);
   };
 
@@ -22,6 +23,7 @@ describe('initGroupMembersApp', () => {
     el = document.createElement('div');
     el.setAttribute('data-members', membersJsonString);
     el.setAttribute('data-group-id', '234');
+    el.setAttribute('data-can-manage-members', 'true');
     el.setAttribute('data-member-path', '/groups/foo-bar/-/group_members/:id');
 
     window.gon = { current_user_id: 123 };
@@ -61,6 +63,12 @@ describe('initGroupMembersApp', () => {
     expect(vm.$store.state.sourceId).toBe(234);
   });
 
+  it('parses and sets `data-can-manage-members` as `canManageMembers` in Vuex store', () => {
+    setup();
+
+    expect(vm.$store.state.canManageMembers).toBe(true);
+  });
+
   it('parses and sets `members` in Vuex store', () => {
     setup();
 
@@ -79,12 +87,24 @@ describe('initGroupMembersApp', () => {
     expect(vm.$store.state.tableAttrs).toEqual({ table: { 'data-qa-selector': 'members_list' } });
   });
 
+  it('sets `tableSortableFields` in Vuex store', () => {
+    setup();
+
+    expect(vm.$store.state.tableSortableFields).toEqual(['account']);
+  });
+
   it('sets `requestFormatter` in Vuex store', () => {
     setup();
 
     expect(vm.$store.state.requestFormatter()).toEqual({});
   });
 
+  it('sets `filteredSearchBar` in Vuex store', () => {
+    setup();
+
+    expect(vm.$store.state.filteredSearchBar).toEqual({ show: false });
+  });
+
   it('sets `memberPath` in Vuex store', () => {
     setup();
 

spec/frontend/groups/members/utils_spec.js

@@ -13,6 +13,7 @@ describe('group member utils', () => {
       el = document.createElement('div');
       el.setAttribute('data-members', membersJsonString);
       el.setAttribute('data-group-id', '234');
+      el.setAttribute('data-can-manage-members', 'true');
     });
 
     afterEach(() => {
@@ -23,6 +24,7 @@ describe('group member utils', () => {
       expect(parseDataAttributes(el)).toEqual({
         members: membersParsed,
         sourceId: 234,
+        canManageMembers: true,
       });
     });
   });

spec/helpers/groups/group_members_helper_spec.rb

@@ -74,13 +74,15 @@ RSpec.describe Groups::GroupMembersHelper do
 
     before do
       allow(helper).to receive(:group_group_member_path).with(group, ':id').and_return('/groups/foo-bar/-/group_members/:id')
+      allow(helper).to receive(:can?).with(current_user, :admin_group_member, group).and_return(true)
     end
 
     it 'returns expected hash' do
       expect(helper.group_members_list_data_attributes(group, present_members([group_member]))).to include({
         members: helper.members_data_json(group, present_members([group_member])),
         member_path: '/groups/foo-bar/-/group_members/:id',
-        group_id: group.id
+        group_id: group.id,
+        can_manage_members: 'true'
       })
     end
   end