Add latest changes from gitlab-org/gitlab@master

15 files changed, 122 insertions, 27 deletions

diff --git a/app/assets/javascripts/members/components/action_buttons/approve_access_request_button.vue b/app/assets/javascripts/members/components/action_buttons/approve_access_request_button.vue
index 83f266779f2..00973100e15 100644
--- a/app/assets/javascripts/members/components/action_buttons/approve_access_request_button.vue
+++ b/app/assets/javascripts/members/components/action_buttons/approve_access_request_button.vue
@@ -12,6 +12,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  inject: ['namespace'],
   props: {
     memberId: {
       type: Number,
@@ -19,7 +20,11 @@ export default {
     },
   },
   computed: {
-    ...mapState(['memberPath']),
+    ...mapState({
+      memberPath(state) {
+        return state[this.namespace].memberPath;
+      },
+    }),
     approvePath() {
       return this.memberPath.replace(/:id$/, `${this.memberId}/approve_access_request`);
     },
diff --git a/app/assets/javascripts/members/components/action_buttons/remove_group_link_button.vue b/app/assets/javascripts/members/components/action_buttons/remove_group_link_button.vue
index 3b87c29c1bc..fef7940eaa2 100644
--- a/app/assets/javascripts/members/components/action_buttons/remove_group_link_button.vue
+++ b/app/assets/javascripts/members/components/action_buttons/remove_group_link_button.vue
@@ -12,6 +12,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  inject: ['namespace'],
   props: {
     groupLink: {
       type: Object,
@@ -19,7 +20,11 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['showRemoveGroupLinkModal']),
+    ...mapActions({
+      showRemoveGroupLinkModal(dispatch, payload) {
+        return dispatch(`${this.namespace}/showRemoveGroupLinkModal`, payload);
+      },
+    }),
   },
 };
 </script>
diff --git a/app/assets/javascripts/members/components/action_buttons/remove_member_button.vue b/app/assets/javascripts/members/components/action_buttons/remove_member_button.vue
index 9954da3e0d4..fc5fcdc52c5 100644
--- a/app/assets/javascripts/members/components/action_buttons/remove_member_button.vue
+++ b/app/assets/javascripts/members/components/action_buttons/remove_member_button.vue
@@ -8,6 +8,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  inject: ['namespace'],
   props: {
     memberId: {
       type: Number,
@@ -43,7 +44,11 @@ export default {
     },
   },
   computed: {
-    ...mapState(['memberPath']),
+    ...mapState({
+      memberPath(state) {
+        return state[this.namespace].memberPath;
+      },
+    }),
     computedMemberPath() {
       return this.memberPath.replace(':id', this.memberId);
     },
diff --git a/app/assets/javascripts/members/components/action_buttons/resend_invite_button.vue b/app/assets/javascripts/members/components/action_buttons/resend_invite_button.vue
index 261a6279920..2173974c6f4 100644
--- a/app/assets/javascripts/members/components/action_buttons/resend_invite_button.vue
+++ b/app/assets/javascripts/members/components/action_buttons/resend_invite_button.vue
@@ -12,6 +12,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  inject: ['namespace'],
   props: {
     memberId: {
       type: Number,
@@ -19,7 +20,11 @@ export default {
     },
   },
   computed: {
-    ...mapState(['memberPath']),
+    ...mapState({
+      memberPath(state) {
+        return state[this.namespace].memberPath;
+      },
+    }),
     resendPath() {
       return this.memberPath.replace(/:id$/, `${this.memberId}/resend_invite`);
     },
diff --git a/app/assets/javascripts/members/components/app.vue b/app/assets/javascripts/members/components/app.vue
index 27fceb7374e..585fabdf3ff 100644
--- a/app/assets/javascripts/members/components/app.vue
+++ b/app/assets/javascripts/members/components/app.vue
@@ -9,8 +9,16 @@ import MembersTable from './table/members_table.vue';
 export default {
   name: 'MembersApp',
   components: { MembersTable, FilterSortContainer, GlAlert },
+  inject: ['namespace'],
   computed: {
-    ...mapState(['showError', 'errorMessage']),
+    ...mapState({
+      showError(state) {
+        return state[this.namespace].showError;
+      },
+      errorMessage(state) {
+        return state[this.namespace].errorMessage;
+      },
+    }),
   },
   watch: {
     showError(value) {
@@ -23,7 +31,9 @@ export default {
   },
   methods: {
     ...mapMutations({
-      hideError: HIDE_ERROR,
+      hideError(commit) {
+        return commit(`${this.namespace}/${HIDE_ERROR}`);
+      },
     }),
   },
 };
diff --git a/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue b/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue
index 812a8626949..419b7b83c0f 100644
--- a/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue
+++ b/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue
@@ -6,8 +6,16 @@ import SortDropdown from './sort_dropdown.vue';
 export default {
   name: 'FilterSortContainer',
   components: { MembersFilteredSearchBar, SortDropdown },
+  inject: ['namespace'],
   computed: {
-    ...mapState(['filteredSearchBar', 'tableSortableFields']),
+    ...mapState({
+      filteredSearchBar(state) {
+        return state[this.namespace].filteredSearchBar;
+      },
+      tableSortableFields(state) {
+        return state[this.namespace].tableSortableFields;
+      },
+    }),
     showContainer() {
       return this.filteredSearchBar.show || this.showSortDropdown;
     },
diff --git a/app/assets/javascripts/members/components/filter_sort/members_filtered_search_bar.vue b/app/assets/javascripts/members/components/filter_sort/members_filtered_search_bar.vue
index 9e58c7022b8..cc97d235a9c 100644
--- a/app/assets/javascripts/members/components/filter_sort/members_filtered_search_bar.vue
+++ b/app/assets/javascripts/members/components/filter_sort/members_filtered_search_bar.vue
@@ -37,14 +37,18 @@ export default {
       ],
     },
   ],
-  inject: ['sourceId', 'canManageMembers'],
+  inject: ['namespace', 'sourceId', 'canManageMembers'],
   data() {
     return {
       initialFilterValue: [],
     };
   },
   computed: {
-    ...mapState(['filteredSearchBar']),
+    ...mapState({
+      filteredSearchBar(state) {
+        return state[this.namespace].filteredSearchBar;
+      },
+    }),
     tokens() {
       return this.$options.availableTokens.filter((token) => {
         if (
diff --git a/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue b/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue
index 9fa8772faf4..ce28283ccdf 100644
--- a/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue
+++ b/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue
@@ -8,8 +8,16 @@ import { parseSortParam, buildSortHref } from '~/members/utils';
 export default {
   name: 'SortDropdown',
   components: { GlSorting, GlSortingItem },
+  inject: ['namespace'],
   computed: {
-    ...mapState(['tableSortableFields', 'filteredSearchBar']),
+    ...mapState({
+      tableSortableFields(state) {
+        return state[this.namespace].tableSortableFields;
+      },
+      filteredSearchBar(state) {
+        return state[this.namespace].filteredSearchBar;
+      },
+    }),
     sort() {
       return parseSortParam(this.tableSortableFields);
     },
diff --git a/app/assets/javascripts/members/components/modals/leave_modal.vue b/app/assets/javascripts/members/components/modals/leave_modal.vue
index a0f978d85cc..b4cbef13b75 100644
--- a/app/assets/javascripts/members/components/modals/leave_modal.vue
+++ b/app/assets/javascripts/members/components/modals/leave_modal.vue
@@ -23,6 +23,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  inject: ['namespace'],
   props: {
     member: {
       type: Object,
@@ -30,7 +31,11 @@ export default {
     },
   },
   computed: {
-    ...mapState(['memberPath']),
+    ...mapState({
+      memberPath(state) {
+        return state[this.namespace].memberPath;
+      },
+    }),
     leavePath() {
       return this.memberPath.replace(/:id$/, 'leave');
     },
diff --git a/app/assets/javascripts/members/components/modals/remove_group_link_modal.vue b/app/assets/javascripts/members/components/modals/remove_group_link_modal.vue
index 1ba6bf9aba6..b179ced46e1 100644
--- a/app/assets/javascripts/members/components/modals/remove_group_link_modal.vue
+++ b/app/assets/javascripts/members/components/modals/remove_group_link_modal.vue
@@ -22,8 +22,19 @@ export default {
   },
   modalId: REMOVE_GROUP_LINK_MODAL_ID,
   components: { GlModal, GlSprintf, GlForm },
+  inject: ['namespace'],
   computed: {
-    ...mapState(['memberPath', 'groupLinkToRemove', 'removeGroupLinkModalVisible']),
+    ...mapState({
+      memberPath(state) {
+        return state[this.namespace].memberPath;
+      },
+      groupLinkToRemove(state) {
+        return state[this.namespace].groupLinkToRemove;
+      },
+      removeGroupLinkModalVisible(state) {
+        return state[this.namespace].removeGroupLinkModalVisible;
+      },
+    }),
     groupLinkPath() {
       return this.memberPath.replace(/:id$/, this.groupLinkToRemove?.id);
     },
@@ -35,7 +46,11 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['hideRemoveGroupLinkModal']),
+    ...mapActions({
+      hideRemoveGroupLinkModal(dispatch) {
+        return dispatch(`${this.namespace}/hideRemoveGroupLinkModal`);
+      },
+    }),
     handlePrimary() {
       this.$refs.form.$el.submit();
     },
diff --git a/app/assets/javascripts/members/components/table/expiration_datepicker.vue b/app/assets/javascripts/members/components/table/expiration_datepicker.vue
index 0a8af81c1d1..9f6e8979102 100644
--- a/app/assets/javascripts/members/components/table/expiration_datepicker.vue
+++ b/app/assets/javascripts/members/components/table/expiration_datepicker.vue
@@ -7,6 +7,7 @@ import { s__ } from '~/locale';
 export default {
   name: 'ExpirationDatepicker',
   components: { GlDatepicker },
+  inject: ['namespace'],
   props: {
     member: {
       type: Object,
@@ -46,7 +47,11 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['updateMemberExpiration']),
+    ...mapActions({
+      updateMemberExpiration(dispatch, payload) {
+        return dispatch(`${this.namespace}/updateMemberExpiration`, payload);
+      },
+    }),
     handleInput(date) {
       this.busy = true;
       this.updateMemberExpiration({
diff --git a/app/assets/javascripts/members/components/table/members_table.vue b/app/assets/javascripts/members/components/table/members_table.vue
index 5db29951d94..236aeaef418 100644
--- a/app/assets/javascripts/members/components/table/members_table.vue
+++ b/app/assets/javascripts/members/components/table/members_table.vue
@@ -31,9 +31,19 @@ export default {
     LdapOverrideConfirmationModal: () =>
       import('ee_component/members/components/ldap/ldap_override_confirmation_modal.vue'),
   },
-  inject: ['currentUserId'],
+  inject: ['namespace', 'currentUserId'],
   computed: {
-    ...mapState(['members', 'tableFields', 'tableAttrs']),
+    ...mapState({
+      members(state) {
+        return state[this.namespace].members;
+      },
+      tableFields(state) {
+        return state[this.namespace].tableFields;
+      },
+      tableAttrs(state) {
+        return state[this.namespace].tableAttrs;
+      },
+    }),
     filteredFields() {
       return FIELDS.filter(
         (field) => this.tableFields.includes(field.key) && this.showField(field),
diff --git a/app/assets/javascripts/members/components/table/role_dropdown.vue b/app/assets/javascripts/members/components/table/role_dropdown.vue
index 8ad45ab6920..f84ded427cd 100644
--- a/app/assets/javascripts/members/components/table/role_dropdown.vue
+++ b/app/assets/javascripts/members/components/table/role_dropdown.vue
@@ -11,6 +11,7 @@ export default {
     GlDropdownItem,
     LdapDropdownItem: () => import('ee_component/members/components/ldap/ldap_dropdown_item.vue'),
   },
+  inject: ['namespace'],
   props: {
     member: {
       type: Object,
@@ -44,7 +45,11 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['updateMemberRole']),
+    ...mapActions({
+      updateMemberRole(dispatch, payload) {
+        return dispatch(`${this.namespace}/updateMemberRole`, payload);
+      },
+    }),
     handleSelect(value, name) {
       if (value === this.member.accessLevel.integerValue) {
         return;
diff --git a/app/assets/javascripts/members/index.js b/app/assets/javascripts/members/index.js
index 2f3589bbf6a..6376b3fa75a 100644
--- a/app/assets/javascripts/members/index.js
+++ b/app/assets/javascripts/members/index.js
@@ -8,6 +8,7 @@ import membersStore from './store';
 export const initMembersApp = (
   el,
   {
+    namespace,
     tableFields = [],
     tableAttrs = {},
     tableSortableFields = [],
@@ -24,22 +25,25 @@ export const initMembersApp = (
 
   const { sourceId, canManageMembers, ...vuexStoreAttributes } = parseDataAttributes(el);
 
-  const store = new Vuex.Store(
-    membersStore({
-      ...vuexStoreAttributes,
-      tableFields,
-      tableAttrs,
-      tableSortableFields,
-      requestFormatter,
-      filteredSearchBar,
-    }),
-  );
+  const store = new Vuex.Store({
+    modules: {
+      [namespace]: membersStore({
+        ...vuexStoreAttributes,
+        tableFields,
+        tableAttrs,
+        tableSortableFields,
+        requestFormatter,
+        filteredSearchBar,
+      }),
+    },
+  });
 
   return new Vue({
     el,
     components: { App },
     store,
     provide: {
+      namespace,
       currentUserId: gon.current_user_id || null,
       sourceId,
       canManageMembers,
diff --git a/app/assets/javascripts/members/store/index.js b/app/assets/javascripts/members/store/index.js
index 45f4eefffc9..6c371887a3f 100644
--- a/app/assets/javascripts/members/store/index.js
+++ b/app/assets/javascripts/members/store/index.js
@@ -3,6 +3,7 @@ import mutations from 'ee_else_ce/members/store/mutations';
 import createState from 'ee_else_ce/members/store/state';
 
 export default (initialState) => ({
+  namespaced: true,
   state: createState(initialState),
   actions,
   mutations,