3 files changed, 26 insertions, 10 deletions
diff --git a/app/assets/javascripts/groups/members/components/app.vue b/app/assets/javascripts/groups/members/components/app.vue
index 2e6dd4a0bad..f6f3a955813 100644
--- a/app/assets/javascripts/groups/members/components/app.vue
+++ b/app/assets/javascripts/groups/members/components/app.vue
@@ -1,13 +1,16 @@
 <script>
 import { mapState, mapMutations } from 'vuex';
 import { GlAlert } from '@gitlab/ui';
-import MembersTable from '~/vue_shared/components/members/table/members_table.vue';
+import MembersTable from '~/members/components/table/members_table.vue';
+import FilterSortContainer from '~/members/components/filter_sort/filter_sort_container.vue';
 import { scrollToElement } from '~/lib/utils/common_utils';
-import { HIDE_ERROR } from '~/vuex_shared/modules/members/mutation_types';
+import { HIDE_ERROR } from '~/members/store/mutation_types';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   name: 'GroupMembersApp',
-  components: { MembersTable, GlAlert },
+  components: { MembersTable, FilterSortContainer, GlAlert },
+  mixins: [glFeatureFlagsMixin()],
   computed: {
     ...mapState(['showError', 'errorMessage']),
   },
@@ -33,6 +36,7 @@ export default {
     <gl-alert v-if="showError" ref="errorAlert" variant="danger" @dismiss="hideError">{{
       errorMessage
     }}</gl-alert>
+    <filter-sort-container v-if="glFeatures.groupMembersFilteredSearch" />
     <members-table />
   </div>
 </template>
diff --git a/app/assets/javascripts/groups/members/index.js b/app/assets/javascripts/groups/members/index.js
index cb28fb057c9..9ce0e3c1179 100644
--- a/app/assets/javascripts/groups/members/index.js
+++ b/app/assets/javascripts/groups/members/index.js
@@ -3,9 +3,18 @@ import Vuex from 'vuex';
 import { GlToast } from '@gitlab/ui';
 import { parseDataAttributes } from 'ee_else_ce/groups/members/utils';
 import App from './components/app.vue';
-import membersModule from '~/vuex_shared/modules/members';
+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 () => {};
   }
@@ -13,15 +22,17 @@ export const initGroupMembersApp = (el, tableFields, tableAttrs, requestFormatte
   Vue.use(Vuex);
   Vue.use(GlToast);
 
-  const store = new Vuex.Store({
-    ...membersModule({
+  const store = new Vuex.Store(
+    membersStore({
       ...parseDataAttributes(el),
       currentUserId: gon.current_user_id || null,
       tableFields,
       tableAttrs,
+      tableSortableFields,
       requestFormatter,
+      filteredSearchBar,
     }),
-  });
+  );
 
   return new Vue({
     el,
diff --git a/app/assets/javascripts/groups/members/utils.js b/app/assets/javascripts/groups/members/utils.js
index 662eecc4e38..2d584556bbc 100644
--- a/app/assets/javascripts/groups/members/utils.js
+++ b/app/assets/javascripts/groups/members/utils.js
@@ -1,5 +1,5 @@
 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),
   };
 };