3 files changed, 39 insertions, 22 deletions

diff --git a/app/assets/javascripts/members/components/app.vue b/app/assets/javascripts/members/components/app.vue
index 585fabdf3ff..a08518584f3 100644
--- a/app/assets/javascripts/members/components/app.vue
+++ b/app/assets/javascripts/members/components/app.vue
@@ -9,7 +9,17 @@ import MembersTable from './table/members_table.vue';
 export default {
   name: 'MembersApp',
   components: { MembersTable, FilterSortContainer, GlAlert },
-  inject: ['namespace'],
+  provide() {
+    return {
+      namespace: this.namespace,
+    };
+  },
+  props: {
+    namespace: {
+      type: String,
+      required: true,
+    },
+  },
   computed: {
     ...mapState({
       showError(state) {
diff --git a/app/assets/javascripts/members/components/table/role_dropdown.vue b/app/assets/javascripts/members/components/table/role_dropdown.vue
index f84ded427cd..fa895cf24c4 100644
--- a/app/assets/javascripts/members/components/table/role_dropdown.vue
+++ b/app/assets/javascripts/members/components/table/role_dropdown.vue
@@ -78,7 +78,7 @@ export default {
     ref="glDropdown"
     :right="!isDesktop"
     :text="member.accessLevel.stringValue"
-    :header-text="__('Change permissions')"
+    :header-text="__('Change role')"
     :disabled="disabled"
   >
     <gl-dropdown-item
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'),
   });
 };