1 files changed, 27 insertions, 20 deletions
diff --git a/app/assets/javascripts/members/index.js b/app/assets/javascripts/members/index.js
index 6c913af8a0f..2ed0958d1dc 100644
--- a/app/assets/javascripts/members/index.js
+++ b/app/assets/javascripts/members/index.js
@@ -2,20 +2,11 @@ import { GlToast } from '@gitlab/ui';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { parseDataAttributes } from '~/members/utils';
-import App from './components/app.vue';
+import MembersTabs from './components/members_tabs.vue';
+import { MEMBER_TYPES } from './constants';
 import membersStore from './store';
 
-export const initMembersApp = (
-  el,
-  {
-    namespace,
-    tableFields = [],
-    tableAttrs = {},
-    tableSortableFields = [],
-    requestFormatter = () => {},
-    filteredSearchBar = { show: false },
-  },
-) => {
+export const initMembersApp = (el, options) => {
   if (!el) {
     return () => {};
   }
@@ -25,29 +16,45 @@ export const initMembersApp = (
 
   const { sourceId, canManageMembers, ...vuexStoreAttributes } = parseDataAttributes(el);
 
-  const store = new Vuex.Store({
-    modules: {
+  const modules = Object.keys(MEMBER_TYPES).reduce((accumulator, namespace) => {
+    const namespacedOptions = options[namespace];
+
+    if (!namespacedOptions) {
+      return accumulator;
+    }
+
+    const {
+      tableFields = [],
+      tableAttrs = {},
+      tableSortableFields = [],
+      requestFormatter = () => {},
+      filteredSearchBar = { show: false },
+    } = namespacedOptions;
+
+    return {
+      ...accumulator,
       [namespace]: membersStore({
-        ...vuexStoreAttributes,
+        ...vuexStoreAttributes[namespace],
         tableFields,
         tableAttrs,
         tableSortableFields,
         requestFormatter,
         filteredSearchBar,
       }),
-    },
-  });
+    };
+  }, {});
+
+  const store = new Vuex.Store({ modules });
 
   return new Vue({
     el,
-    components: { App },
+    components: { MembersTabs },
     store,
     provide: {
-      namespace,
       currentUserId: gon.current_user_id || null,
       sourceId,
       canManageMembers,
     },
-    render: (createElement) => createElement('app'),
+    render: (createElement) => createElement('members-tabs'),
   });
 };