Commit 964c6c08 authored by Olena Horal-Koretska's avatar Olena Horal-Koretska

Merge branch '324680-group-project-members-migrate-to-namespaced-vuex-modules' into 'master'

Refactor to using Vuex modules for project/group members views

See merge request gitlab-org/gitlab!58828
parents 868e69fb 90eeb34e
...@@ -12,6 +12,7 @@ export default { ...@@ -12,6 +12,7 @@ export default {
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
}, },
inject: ['namespace'],
props: { props: {
memberId: { memberId: {
type: Number, type: Number,
...@@ -19,7 +20,11 @@ export default { ...@@ -19,7 +20,11 @@ export default {
}, },
}, },
computed: { computed: {
...mapState(['memberPath']), ...mapState({
memberPath(state) {
return state[this.namespace].memberPath;
},
}),
approvePath() { approvePath() {
return this.memberPath.replace(/:id$/, `${this.memberId}/approve_access_request`); return this.memberPath.replace(/:id$/, `${this.memberId}/approve_access_request`);
}, },
......
...@@ -12,6 +12,7 @@ export default { ...@@ -12,6 +12,7 @@ export default {
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
}, },
inject: ['namespace'],
props: { props: {
groupLink: { groupLink: {
type: Object, type: Object,
...@@ -19,7 +20,11 @@ export default { ...@@ -19,7 +20,11 @@ export default {
}, },
}, },
methods: { methods: {
...mapActions(['showRemoveGroupLinkModal']), ...mapActions({
showRemoveGroupLinkModal(dispatch, payload) {
return dispatch(`${this.namespace}/showRemoveGroupLinkModal`, payload);
},
}),
}, },
}; };
</script> </script>
......
...@@ -8,6 +8,7 @@ export default { ...@@ -8,6 +8,7 @@ export default {
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
}, },
inject: ['namespace'],
props: { props: {
memberId: { memberId: {
type: Number, type: Number,
...@@ -43,7 +44,11 @@ export default { ...@@ -43,7 +44,11 @@ export default {
}, },
}, },
computed: { computed: {
...mapState(['memberPath']), ...mapState({
memberPath(state) {
return state[this.namespace].memberPath;
},
}),
computedMemberPath() { computedMemberPath() {
return this.memberPath.replace(':id', this.memberId); return this.memberPath.replace(':id', this.memberId);
}, },
......
...@@ -12,6 +12,7 @@ export default { ...@@ -12,6 +12,7 @@ export default {
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
}, },
inject: ['namespace'],
props: { props: {
memberId: { memberId: {
type: Number, type: Number,
...@@ -19,7 +20,11 @@ export default { ...@@ -19,7 +20,11 @@ export default {
}, },
}, },
computed: { computed: {
...mapState(['memberPath']), ...mapState({
memberPath(state) {
return state[this.namespace].memberPath;
},
}),
resendPath() { resendPath() {
return this.memberPath.replace(/:id$/, `${this.memberId}/resend_invite`); return this.memberPath.replace(/:id$/, `${this.memberId}/resend_invite`);
}, },
......
...@@ -9,8 +9,16 @@ import MembersTable from './table/members_table.vue'; ...@@ -9,8 +9,16 @@ import MembersTable from './table/members_table.vue';
export default { export default {
name: 'MembersApp', name: 'MembersApp',
components: { MembersTable, FilterSortContainer, GlAlert }, components: { MembersTable, FilterSortContainer, GlAlert },
inject: ['namespace'],
computed: { computed: {
...mapState(['showError', 'errorMessage']), ...mapState({
showError(state) {
return state[this.namespace].showError;
},
errorMessage(state) {
return state[this.namespace].errorMessage;
},
}),
}, },
watch: { watch: {
showError(value) { showError(value) {
...@@ -23,7 +31,9 @@ export default { ...@@ -23,7 +31,9 @@ export default {
}, },
methods: { methods: {
...mapMutations({ ...mapMutations({
hideError: HIDE_ERROR, hideError(commit) {
return commit(`${this.namespace}/${HIDE_ERROR}`);
},
}), }),
}, },
}; };
......
...@@ -6,8 +6,16 @@ import SortDropdown from './sort_dropdown.vue'; ...@@ -6,8 +6,16 @@ import SortDropdown from './sort_dropdown.vue';
export default { export default {
name: 'FilterSortContainer', name: 'FilterSortContainer',
components: { MembersFilteredSearchBar, SortDropdown }, components: { MembersFilteredSearchBar, SortDropdown },
inject: ['namespace'],
computed: { computed: {
...mapState(['filteredSearchBar', 'tableSortableFields']), ...mapState({
filteredSearchBar(state) {
return state[this.namespace].filteredSearchBar;
},
tableSortableFields(state) {
return state[this.namespace].tableSortableFields;
},
}),
showContainer() { showContainer() {
return this.filteredSearchBar.show || this.showSortDropdown; return this.filteredSearchBar.show || this.showSortDropdown;
}, },
......
...@@ -37,14 +37,18 @@ export default { ...@@ -37,14 +37,18 @@ export default {
], ],
}, },
], ],
inject: ['sourceId', 'canManageMembers'], inject: ['namespace', 'sourceId', 'canManageMembers'],
data() { data() {
return { return {
initialFilterValue: [], initialFilterValue: [],
}; };
}, },
computed: { computed: {
...mapState(['filteredSearchBar']), ...mapState({
filteredSearchBar(state) {
return state[this.namespace].filteredSearchBar;
},
}),
tokens() { tokens() {
return this.$options.availableTokens.filter((token) => { return this.$options.availableTokens.filter((token) => {
if ( if (
......
...@@ -8,8 +8,16 @@ import { parseSortParam, buildSortHref } from '~/members/utils'; ...@@ -8,8 +8,16 @@ import { parseSortParam, buildSortHref } from '~/members/utils';
export default { export default {
name: 'SortDropdown', name: 'SortDropdown',
components: { GlSorting, GlSortingItem }, components: { GlSorting, GlSortingItem },
inject: ['namespace'],
computed: { computed: {
...mapState(['tableSortableFields', 'filteredSearchBar']), ...mapState({
tableSortableFields(state) {
return state[this.namespace].tableSortableFields;
},
filteredSearchBar(state) {
return state[this.namespace].filteredSearchBar;
},
}),
sort() { sort() {
return parseSortParam(this.tableSortableFields); return parseSortParam(this.tableSortableFields);
}, },
......
...@@ -23,6 +23,7 @@ export default { ...@@ -23,6 +23,7 @@ export default {
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
}, },
inject: ['namespace'],
props: { props: {
member: { member: {
type: Object, type: Object,
...@@ -30,7 +31,11 @@ export default { ...@@ -30,7 +31,11 @@ export default {
}, },
}, },
computed: { computed: {
...mapState(['memberPath']), ...mapState({
memberPath(state) {
return state[this.namespace].memberPath;
},
}),
leavePath() { leavePath() {
return this.memberPath.replace(/:id$/, 'leave'); return this.memberPath.replace(/:id$/, 'leave');
}, },
......
...@@ -22,8 +22,19 @@ export default { ...@@ -22,8 +22,19 @@ export default {
}, },
modalId: REMOVE_GROUP_LINK_MODAL_ID, modalId: REMOVE_GROUP_LINK_MODAL_ID,
components: { GlModal, GlSprintf, GlForm }, components: { GlModal, GlSprintf, GlForm },
inject: ['namespace'],
computed: { 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() { groupLinkPath() {
return this.memberPath.replace(/:id$/, this.groupLinkToRemove?.id); return this.memberPath.replace(/:id$/, this.groupLinkToRemove?.id);
}, },
...@@ -35,7 +46,11 @@ export default { ...@@ -35,7 +46,11 @@ export default {
}, },
}, },
methods: { methods: {
...mapActions(['hideRemoveGroupLinkModal']), ...mapActions({
hideRemoveGroupLinkModal(dispatch) {
return dispatch(`${this.namespace}/hideRemoveGroupLinkModal`);
},
}),
handlePrimary() { handlePrimary() {
this.$refs.form.$el.submit(); this.$refs.form.$el.submit();
}, },
......
...@@ -7,6 +7,7 @@ import { s__ } from '~/locale'; ...@@ -7,6 +7,7 @@ import { s__ } from '~/locale';
export default { export default {
name: 'ExpirationDatepicker', name: 'ExpirationDatepicker',
components: { GlDatepicker }, components: { GlDatepicker },
inject: ['namespace'],
props: { props: {
member: { member: {
type: Object, type: Object,
...@@ -46,7 +47,11 @@ export default { ...@@ -46,7 +47,11 @@ export default {
} }
}, },
methods: { methods: {
...mapActions(['updateMemberExpiration']), ...mapActions({
updateMemberExpiration(dispatch, payload) {
return dispatch(`${this.namespace}/updateMemberExpiration`, payload);
},
}),
handleInput(date) { handleInput(date) {
this.busy = true; this.busy = true;
this.updateMemberExpiration({ this.updateMemberExpiration({
......
...@@ -31,9 +31,19 @@ export default { ...@@ -31,9 +31,19 @@ export default {
LdapOverrideConfirmationModal: () => LdapOverrideConfirmationModal: () =>
import('ee_component/members/components/ldap/ldap_override_confirmation_modal.vue'), import('ee_component/members/components/ldap/ldap_override_confirmation_modal.vue'),
}, },
inject: ['currentUserId'], inject: ['namespace', 'currentUserId'],
computed: { 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() { filteredFields() {
return FIELDS.filter( return FIELDS.filter(
(field) => this.tableFields.includes(field.key) && this.showField(field), (field) => this.tableFields.includes(field.key) && this.showField(field),
......
...@@ -11,6 +11,7 @@ export default { ...@@ -11,6 +11,7 @@ export default {
GlDropdownItem, GlDropdownItem,
LdapDropdownItem: () => import('ee_component/members/components/ldap/ldap_dropdown_item.vue'), LdapDropdownItem: () => import('ee_component/members/components/ldap/ldap_dropdown_item.vue'),
}, },
inject: ['namespace'],
props: { props: {
member: { member: {
type: Object, type: Object,
...@@ -44,7 +45,11 @@ export default { ...@@ -44,7 +45,11 @@ export default {
} }
}, },
methods: { methods: {
...mapActions(['updateMemberRole']), ...mapActions({
updateMemberRole(dispatch, payload) {
return dispatch(`${this.namespace}/updateMemberRole`, payload);
},
}),
handleSelect(value, name) { handleSelect(value, name) {
if (value === this.member.accessLevel.integerValue) { if (value === this.member.accessLevel.integerValue) {
return; return;
......
...@@ -8,6 +8,7 @@ import membersStore from './store'; ...@@ -8,6 +8,7 @@ import membersStore from './store';
export const initMembersApp = ( export const initMembersApp = (
el, el,
{ {
namespace,
tableFields = [], tableFields = [],
tableAttrs = {}, tableAttrs = {},
tableSortableFields = [], tableSortableFields = [],
...@@ -24,22 +25,25 @@ export const initMembersApp = ( ...@@ -24,22 +25,25 @@ export const initMembersApp = (
const { sourceId, canManageMembers, ...vuexStoreAttributes } = parseDataAttributes(el); const { sourceId, canManageMembers, ...vuexStoreAttributes } = parseDataAttributes(el);
const store = new Vuex.Store( const store = new Vuex.Store({
membersStore({ modules: {
...vuexStoreAttributes, [namespace]: membersStore({
tableFields, ...vuexStoreAttributes,
tableAttrs, tableFields,
tableSortableFields, tableAttrs,
requestFormatter, tableSortableFields,
filteredSearchBar, requestFormatter,
}), filteredSearchBar,
); }),
},
});
return new Vue({ return new Vue({
el, el,
components: { App }, components: { App },
store, store,
provide: { provide: {
namespace,
currentUserId: gon.current_user_id || null, currentUserId: gon.current_user_id || null,
sourceId, sourceId,
canManageMembers, canManageMembers,
......
...@@ -3,6 +3,7 @@ import mutations from 'ee_else_ce/members/store/mutations'; ...@@ -3,6 +3,7 @@ import mutations from 'ee_else_ce/members/store/mutations';
import createState from 'ee_else_ce/members/store/state'; import createState from 'ee_else_ce/members/store/state';
export default (initialState) => ({ export default (initialState) => ({
namespaced: true,
state: createState(initialState), state: createState(initialState),
actions, actions,
mutations, mutations,
......
...@@ -8,6 +8,7 @@ import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigg ...@@ -8,6 +8,7 @@ import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigg
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import memberExpirationDate from '~/member_expiration_date'; import memberExpirationDate from '~/member_expiration_date';
import { initMembersApp } from '~/members'; import { initMembersApp } from '~/members';
import { MEMBER_TYPES } from '~/members/constants';
import { groupLinkRequestFormatter } from '~/members/utils'; import { groupLinkRequestFormatter } from '~/members/utils';
import UsersSelect from '~/users_select'; import UsersSelect from '~/users_select';
import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue'; import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue';
...@@ -29,6 +30,7 @@ function mountRemoveMemberModal() { ...@@ -29,6 +30,7 @@ function mountRemoveMemberModal() {
const SHARED_FIELDS = ['account', 'expires', 'maxRole', 'expiration', 'actions']; const SHARED_FIELDS = ['account', 'expires', 'maxRole', 'expiration', 'actions'];
initMembersApp(document.querySelector('.js-group-members-list'), { initMembersApp(document.querySelector('.js-group-members-list'), {
namespace: MEMBER_TYPES.user,
tableFields: SHARED_FIELDS.concat(['source', 'granted']), tableFields: SHARED_FIELDS.concat(['source', 'granted']),
tableAttrs: { tr: { 'data-qa-selector': 'member_row' } }, tableAttrs: { tr: { 'data-qa-selector': 'member_row' } },
tableSortableFields: ['account', 'granted', 'maxRole', 'lastSignIn'], tableSortableFields: ['account', 'granted', 'maxRole', 'lastSignIn'],
...@@ -43,6 +45,7 @@ initMembersApp(document.querySelector('.js-group-members-list'), { ...@@ -43,6 +45,7 @@ initMembersApp(document.querySelector('.js-group-members-list'), {
}); });
initMembersApp(document.querySelector('.js-group-group-links-list'), { initMembersApp(document.querySelector('.js-group-group-links-list'), {
namespace: MEMBER_TYPES.group,
tableFields: SHARED_FIELDS.concat('granted'), tableFields: SHARED_FIELDS.concat('granted'),
tableAttrs: { tableAttrs: {
table: { 'data-qa-selector': 'groups_list' }, table: { 'data-qa-selector': 'groups_list' },
...@@ -51,6 +54,7 @@ initMembersApp(document.querySelector('.js-group-group-links-list'), { ...@@ -51,6 +54,7 @@ initMembersApp(document.querySelector('.js-group-group-links-list'), {
requestFormatter: groupLinkRequestFormatter, requestFormatter: groupLinkRequestFormatter,
}); });
initMembersApp(document.querySelector('.js-group-invited-members-list'), { initMembersApp(document.querySelector('.js-group-invited-members-list'), {
namespace: MEMBER_TYPES.invite,
tableFields: SHARED_FIELDS.concat('invited'), tableFields: SHARED_FIELDS.concat('invited'),
requestFormatter: groupMemberRequestFormatter, requestFormatter: groupMemberRequestFormatter,
filteredSearchBar: { filteredSearchBar: {
...@@ -62,6 +66,7 @@ initMembersApp(document.querySelector('.js-group-invited-members-list'), { ...@@ -62,6 +66,7 @@ initMembersApp(document.querySelector('.js-group-invited-members-list'), {
}, },
}); });
initMembersApp(document.querySelector('.js-group-access-requests-list'), { initMembersApp(document.querySelector('.js-group-access-requests-list'), {
namespace: MEMBER_TYPES.accessRequest,
tableFields: SHARED_FIELDS.concat('requested'), tableFields: SHARED_FIELDS.concat('requested'),
requestFormatter: groupMemberRequestFormatter, requestFormatter: groupMemberRequestFormatter,
}); });
......
...@@ -7,6 +7,7 @@ import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigg ...@@ -7,6 +7,7 @@ import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigg
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import memberExpirationDate from '~/member_expiration_date'; import memberExpirationDate from '~/member_expiration_date';
import { initMembersApp } from '~/members'; import { initMembersApp } from '~/members';
import { MEMBER_TYPES } from '~/members/constants';
import { groupLinkRequestFormatter } from '~/members/utils'; import { groupLinkRequestFormatter } from '~/members/utils';
import { projectMemberRequestFormatter } from '~/projects/members/utils'; import { projectMemberRequestFormatter } from '~/projects/members/utils';
import UsersSelect from '~/users_select'; import UsersSelect from '~/users_select';
...@@ -42,6 +43,7 @@ new UsersSelect(); // eslint-disable-line no-new ...@@ -42,6 +43,7 @@ new UsersSelect(); // eslint-disable-line no-new
const SHARED_FIELDS = ['account', 'expires', 'maxRole', 'expiration', 'actions']; const SHARED_FIELDS = ['account', 'expires', 'maxRole', 'expiration', 'actions'];
initMembersApp(document.querySelector('.js-project-members-list'), { initMembersApp(document.querySelector('.js-project-members-list'), {
namespace: MEMBER_TYPES.user,
tableFields: SHARED_FIELDS.concat(['source', 'granted']), tableFields: SHARED_FIELDS.concat(['source', 'granted']),
tableAttrs: { tr: { 'data-qa-selector': 'member_row' } }, tableAttrs: { tr: { 'data-qa-selector': 'member_row' } },
tableSortableFields: ['account', 'granted', 'maxRole', 'lastSignIn'], tableSortableFields: ['account', 'granted', 'maxRole', 'lastSignIn'],
...@@ -56,6 +58,7 @@ initMembersApp(document.querySelector('.js-project-members-list'), { ...@@ -56,6 +58,7 @@ initMembersApp(document.querySelector('.js-project-members-list'), {
}); });
initMembersApp(document.querySelector('.js-project-group-links-list'), { initMembersApp(document.querySelector('.js-project-group-links-list'), {
namespace: MEMBER_TYPES.group,
tableFields: SHARED_FIELDS.concat('granted'), tableFields: SHARED_FIELDS.concat('granted'),
tableAttrs: { tableAttrs: {
table: { 'data-qa-selector': 'groups_list' }, table: { 'data-qa-selector': 'groups_list' },
...@@ -72,11 +75,13 @@ initMembersApp(document.querySelector('.js-project-group-links-list'), { ...@@ -72,11 +75,13 @@ initMembersApp(document.querySelector('.js-project-group-links-list'), {
}); });
initMembersApp(document.querySelector('.js-project-invited-members-list'), { initMembersApp(document.querySelector('.js-project-invited-members-list'), {
namespace: MEMBER_TYPES.invite,
tableFields: SHARED_FIELDS.concat('invited'), tableFields: SHARED_FIELDS.concat('invited'),
requestFormatter: projectMemberRequestFormatter, requestFormatter: projectMemberRequestFormatter,
}); });
initMembersApp(document.querySelector('.js-project-access-requests-list'), { initMembersApp(document.querySelector('.js-project-access-requests-list'), {
namespace: MEMBER_TYPES.accessRequest,
tableFields: SHARED_FIELDS.concat('requested'), tableFields: SHARED_FIELDS.concat('requested'),
requestFormatter: projectMemberRequestFormatter, requestFormatter: projectMemberRequestFormatter,
}); });
...@@ -6,6 +6,7 @@ import { s__ } from '~/locale'; ...@@ -6,6 +6,7 @@ import { s__ } from '~/locale';
export default { export default {
name: 'LdapDropdownItem', name: 'LdapDropdownItem',
components: { GlDropdownItem, GlDropdownDivider }, components: { GlDropdownItem, GlDropdownDivider },
inject: ['namespace'],
props: { props: {
memberId: { memberId: {
type: Number, type: Number,
...@@ -13,7 +14,11 @@ export default { ...@@ -13,7 +14,11 @@ export default {
}, },
}, },
methods: { methods: {
...mapActions(['updateLdapOverride']), ...mapActions({
updateLdapOverride(dispatch, payload) {
return dispatch(`${this.namespace}/updateLdapOverride`, payload);
},
}),
handleClick() { handleClick() {
this.updateLdapOverride({ memberId: this.memberId, override: false }) this.updateLdapOverride({ memberId: this.memberId, override: false })
.then(() => { .then(() => {
......
...@@ -12,6 +12,7 @@ export default { ...@@ -12,6 +12,7 @@ export default {
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
}, },
inject: ['namespace'],
props: { props: {
member: { member: {
type: Object, type: Object,
...@@ -19,7 +20,11 @@ export default { ...@@ -19,7 +20,11 @@ export default {
}, },
}, },
methods: { methods: {
...mapActions(['showLdapOverrideConfirmationModal']), ...mapActions({
showLdapOverrideConfirmationModal(dispatch, payload) {
return dispatch(`${this.namespace}/showLdapOverrideConfirmationModal`, payload);
},
}),
}, },
}; };
</script> </script>
......
...@@ -18,13 +18,21 @@ export default { ...@@ -18,13 +18,21 @@ export default {
}, },
modalId: LDAP_OVERRIDE_CONFIRMATION_MODAL_ID, modalId: LDAP_OVERRIDE_CONFIRMATION_MODAL_ID,
components: { GlModal, GlSprintf }, components: { GlModal, GlSprintf },
inject: ['namespace'],
data() { data() {
return { return {
busy: false, busy: false,
}; };
}, },
computed: { computed: {
...mapState(['memberToOverride', 'ldapOverrideConfirmationModalVisible']), ...mapState({
memberToOverride(state) {
return state[this.namespace].memberToOverride;
},
ldapOverrideConfirmationModalVisible(state) {
return state[this.namespace].ldapOverrideConfirmationModalVisible;
},
}),
actionPrimary() { actionPrimary() {
return { return {
text: this.$options.i18n.editPermissions, text: this.$options.i18n.editPermissions,
...@@ -36,7 +44,14 @@ export default { ...@@ -36,7 +44,14 @@ export default {
}, },
}, },
methods: { methods: {
...mapActions(['updateLdapOverride', 'hideLdapOverrideConfirmationModal']), ...mapActions({
updateLdapOverride(dispatch, payload) {
return dispatch(`${this.namespace}/updateLdapOverride`, payload);
},
hideLdapOverrideConfirmationModal(dispatch) {
return dispatch(`${this.namespace}/hideLdapOverrideConfirmationModal`);
},
}),
handlePrimary() { handlePrimary() {
this.busy = true; this.busy = true;
......
...@@ -3,12 +3,16 @@ import LdapOverrideButton from 'ee/members/components/ldap/ldap_override_button. ...@@ -3,12 +3,16 @@ import LdapOverrideButton from 'ee/members/components/ldap/ldap_override_button.
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import { member } from 'jest/members/mock_data'; import { member } from 'jest/members/mock_data';
import UserActionButtons from '~/members/components/action_buttons/user_action_buttons.vue'; import UserActionButtons from '~/members/components/action_buttons/user_action_buttons.vue';
import { MEMBER_TYPES } from '~/members/constants';
describe('UserActionButtons', () => { describe('UserActionButtons', () => {
let wrapper; let wrapper;
const createComponent = (propsData = {}) => { const createComponent = (propsData = {}) => {
wrapper = shallowMount(UserActionButtons, { wrapper = shallowMount(UserActionButtons, {
provide: {
namespace: MEMBER_TYPES.user,
},
propsData: { propsData: {
member, member,
isCurrentUser: false, isCurrentUser: false,
......
...@@ -3,6 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils'; ...@@ -3,6 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex'; import Vuex from 'vuex';
import LdapDropdownItem from 'ee/members/components/ldap/ldap_dropdown_item.vue'; import LdapDropdownItem from 'ee/members/components/ldap/ldap_dropdown_item.vue';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import { MEMBER_TYPES } from '~/members/constants';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -19,7 +20,14 @@ describe('LdapDropdownItem', () => { ...@@ -19,7 +20,14 @@ describe('LdapDropdownItem', () => {
updateLdapOverride: jest.fn(() => Promise.resolve()), updateLdapOverride: jest.fn(() => Promise.resolve()),
}; };
return new Vuex.Store({ actions }); return new Vuex.Store({
modules: {
[MEMBER_TYPES.user]: {
namespaced: true,
actions,
},
},
});
}; };
const createComponent = (propsData = {}) => { const createComponent = (propsData = {}) => {
...@@ -30,6 +38,9 @@ describe('LdapDropdownItem', () => { ...@@ -30,6 +38,9 @@ describe('LdapDropdownItem', () => {
}, },
localVue, localVue,
store: createStore(), store: createStore(),
provide: {
namespace: MEMBER_TYPES.user,
},
mocks: { mocks: {
$toast, $toast,
}, },
......
...@@ -4,6 +4,7 @@ import Vuex from 'vuex'; ...@@ -4,6 +4,7 @@ import Vuex from 'vuex';
import LdapOverrideButton from 'ee/members/components/ldap/ldap_override_button.vue'; import LdapOverrideButton from 'ee/members/components/ldap/ldap_override_button.vue';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import { member } from 'jest/members/mock_data'; import { member } from 'jest/members/mock_data';
import { MEMBER_TYPES } from '~/members/constants';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -17,7 +18,14 @@ describe('LdapOverrideButton', () => { ...@@ -17,7 +18,14 @@ describe('LdapOverrideButton', () => {
showLdapOverrideConfirmationModal: jest.fn(), showLdapOverrideConfirmationModal: jest.fn(),
}; };
return new Vuex.Store({ actions }); return new Vuex.Store({
modules: {
[MEMBER_TYPES.user]: {
namespaced: true,
actions,
},
},
});
}; };
const createComponent = (propsData = {}) => { const createComponent = (propsData = {}) => {
...@@ -28,6 +36,9 @@ describe('LdapOverrideButton', () => { ...@@ -28,6 +36,9 @@ describe('LdapOverrideButton', () => {
...propsData, ...propsData,
}, },
store: createStore(), store: createStore(),
provide: {
namespace: MEMBER_TYPES.user,
},
directives: { directives: {
GlTooltip: createMockDirective(), GlTooltip: createMockDirective(),
}, },
......
...@@ -7,6 +7,7 @@ import LdapOverrideConfirmationModal from 'ee/members/components/ldap/ldap_overr ...@@ -7,6 +7,7 @@ import LdapOverrideConfirmationModal from 'ee/members/components/ldap/ldap_overr
import { LDAP_OVERRIDE_CONFIRMATION_MODAL_ID } from 'ee/members/constants'; import { LDAP_OVERRIDE_CONFIRMATION_MODAL_ID } from 'ee/members/constants';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import { member } from 'jest/members/mock_data'; import { member } from 'jest/members/mock_data';
import { MEMBER_TYPES } from '~/members/constants';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -31,12 +32,17 @@ describe('LdapOverrideConfirmationModal', () => { ...@@ -31,12 +32,17 @@ describe('LdapOverrideConfirmationModal', () => {
}; };
return new Vuex.Store({ return new Vuex.Store({
state: { modules: {
memberToOverride: member, [MEMBER_TYPES.user]: {
ldapOverrideConfirmationModalVisible: true, namespaced: true,
...state, state: {
memberToOverride: member,
ldapOverrideConfirmationModalVisible: true,
...state,
},
actions,
},
}, },
actions,
}); });
}; };
...@@ -44,6 +50,9 @@ describe('LdapOverrideConfirmationModal', () => { ...@@ -44,6 +50,9 @@ describe('LdapOverrideConfirmationModal', () => {
wrapper = mount(LdapOverrideConfirmationModal, { wrapper = mount(LdapOverrideConfirmationModal, {
localVue, localVue,
store: createStore(state), store: createStore(state),
provide: {
namespace: MEMBER_TYPES.user,
},
attrs: { attrs: {
static: true, static: true,
}, },
......
...@@ -2,12 +2,16 @@ import { GlDatepicker } from '@gitlab/ui'; ...@@ -2,12 +2,16 @@ import { GlDatepicker } from '@gitlab/ui';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { member } from 'jest/members/mock_data'; import { member } from 'jest/members/mock_data';
import ExpirationDatepicker from '~/members/components/table/expiration_datepicker.vue'; import ExpirationDatepicker from '~/members/components/table/expiration_datepicker.vue';
import { MEMBER_TYPES } from '~/members/constants';
describe('ExpirationDatepicker', () => { describe('ExpirationDatepicker', () => {
let wrapper; let wrapper;
const createComponent = (propsData = {}) => { const createComponent = (propsData = {}) => {
wrapper = mount(ExpirationDatepicker, { wrapper = mount(ExpirationDatepicker, {
provide: {
namespace: MEMBER_TYPES.user,
},
propsData, propsData,
}); });
}; };
......
...@@ -3,6 +3,7 @@ import { mount, createLocalVue, createWrapper } from '@vue/test-utils'; ...@@ -3,6 +3,7 @@ import { mount, createLocalVue, createWrapper } from '@vue/test-utils';
import Vuex from 'vuex'; import Vuex from 'vuex';
import { member as memberMock, directMember, members } from 'jest/members/mock_data'; import { member as memberMock, directMember, members } from 'jest/members/mock_data';
import MembersTable from '~/members/components/table/members_table.vue'; import MembersTable from '~/members/components/table/members_table.vue';
import { MEMBER_TYPES } from '~/members/constants';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -12,14 +13,19 @@ describe('MemberList', () => { ...@@ -12,14 +13,19 @@ describe('MemberList', () => {
const createStore = (state = {}) => { const createStore = (state = {}) => {
return new Vuex.Store({ return new Vuex.Store({
state: { modules: {
members: [], [MEMBER_TYPES.user]: {
tableFields: [], namespaced: true,
tableAttrs: { state: {
table: { 'data-qa-selector': 'members_list' }, members: [],
tr: { 'data-qa-selector': 'member_row' }, tableFields: [],
tableAttrs: {
table: { 'data-qa-selector': 'members_list' },
tr: { 'data-qa-selector': 'member_row' },
},
...state,
},
}, },
...state,
}, },
}); });
}; };
...@@ -31,6 +37,7 @@ describe('MemberList', () => { ...@@ -31,6 +37,7 @@ describe('MemberList', () => {
provide: { provide: {
sourceId: 1, sourceId: 1,
currentUserId: 1, currentUserId: 1,
namespace: MEMBER_TYPES.user,
}, },
stubs: [ stubs: [
'member-avatar', 'member-avatar',
......
...@@ -4,12 +4,16 @@ import LdapDropdownItem from 'ee/members/components/ldap/ldap_dropdown_item.vue' ...@@ -4,12 +4,16 @@ import LdapDropdownItem from 'ee/members/components/ldap/ldap_dropdown_item.vue'
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import { member } from 'jest/members/mock_data'; import { member } from 'jest/members/mock_data';
import RoleDropdown from '~/members/components/table/role_dropdown.vue'; import RoleDropdown from '~/members/components/table/role_dropdown.vue';
import { MEMBER_TYPES } from '~/members/constants';
describe('RoleDropdown', () => { describe('RoleDropdown', () => {
let wrapper; let wrapper;
const createComponent = (propsData = {}) => { const createComponent = (propsData = {}) => {
wrapper = shallowMount(RoleDropdown, { wrapper = shallowMount(RoleDropdown, {
provide: {
namespace: MEMBER_TYPES.user,
},
propsData: { propsData: {
member, member,
permissions: {}, permissions: {},
......
import { membersJsonString } from 'jest/members/mock_data'; import { membersJsonString } from 'jest/members/mock_data';
import { MEMBER_TYPES } from '~/members/constants';
import { initMembersApp } from '~/members/index'; import { initMembersApp } from '~/members/index';
describe('initMembersApp', () => { describe('initMembersApp', () => {
...@@ -6,7 +7,9 @@ describe('initMembersApp', () => { ...@@ -6,7 +7,9 @@ describe('initMembersApp', () => {
let vm; let vm;
const createVm = () => { const createVm = () => {
vm = initMembersApp(el, {}); vm = initMembersApp(el, {
namespace: MEMBER_TYPES.user,
});
}; };
beforeEach(() => { beforeEach(() => {
...@@ -24,7 +27,7 @@ describe('initMembersApp', () => { ...@@ -24,7 +27,7 @@ describe('initMembersApp', () => {
it('sets `ldapOverridePath` in Vuex store', () => { it('sets `ldapOverridePath` in Vuex store', () => {
createVm(); createVm();
expect(vm.$store.state.ldapOverridePath).toBe( expect(vm.$store.state[MEMBER_TYPES.user].ldapOverridePath).toBe(
'/groups/ldap-group/-/group_members/:id/override', '/groups/ldap-group/-/group_members/:id/override',
); );
}); });
......
...@@ -3,6 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; ...@@ -3,6 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex'; import Vuex from 'vuex';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import ApproveAccessRequestButton from '~/members/components/action_buttons/approve_access_request_button.vue'; import ApproveAccessRequestButton from '~/members/components/action_buttons/approve_access_request_button.vue';
import { MEMBER_TYPES } from '~/members/constants';
jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' })); jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
...@@ -14,9 +15,14 @@ describe('ApproveAccessRequestButton', () => { ...@@ -14,9 +15,14 @@ describe('ApproveAccessRequestButton', () => {
const createStore = (state = {}) => { const createStore = (state = {}) => {
return new Vuex.Store({ return new Vuex.Store({
state: { modules: {
memberPath: '/groups/foo-bar/-/group_members/:id', [MEMBER_TYPES.accessRequest]: {
...state, namespaced: true,
state: {
memberPath: '/groups/foo-bar/-/group_members/:id',
...state,
},
},
}, },
}); });
}; };
...@@ -25,6 +31,9 @@ describe('ApproveAccessRequestButton', () => { ...@@ -25,6 +31,9 @@ describe('ApproveAccessRequestButton', () => {
wrapper = shallowMount(ApproveAccessRequestButton, { wrapper = shallowMount(ApproveAccessRequestButton, {
localVue, localVue,
store: createStore(state), store: createStore(state),
provide: {
namespace: MEMBER_TYPES.accessRequest,
},
propsData: { propsData: {
memberId: 1, memberId: 1,
...propsData, ...propsData,
......
...@@ -3,6 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils'; ...@@ -3,6 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex'; import Vuex from 'vuex';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import RemoveGroupLinkButton from '~/members/components/action_buttons/remove_group_link_button.vue'; import RemoveGroupLinkButton from '~/members/components/action_buttons/remove_group_link_button.vue';
import { MEMBER_TYPES } from '~/members/constants';
import { group } from '../../mock_data'; import { group } from '../../mock_data';
const localVue = createLocalVue(); const localVue = createLocalVue();
...@@ -17,7 +18,12 @@ describe('RemoveGroupLinkButton', () => { ...@@ -17,7 +18,12 @@ describe('RemoveGroupLinkButton', () => {
const createStore = () => { const createStore = () => {
return new Vuex.Store({ return new Vuex.Store({
actions, modules: {
[MEMBER_TYPES.group]: {
namespaced: true,
actions,
},
},
}); });
}; };
...@@ -25,6 +31,9 @@ describe('RemoveGroupLinkButton', () => { ...@@ -25,6 +31,9 @@ describe('RemoveGroupLinkButton', () => {
wrapper = mount(RemoveGroupLinkButton, { wrapper = mount(RemoveGroupLinkButton, {
localVue, localVue,
store: createStore(), store: createStore(),
provide: {
namespace: MEMBER_TYPES.group,
},
propsData: { propsData: {
groupLink: group, groupLink: group,
}, },
......
...@@ -2,6 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; ...@@ -2,6 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex'; import Vuex from 'vuex';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import RemoveMemberButton from '~/members/components/action_buttons/remove_member_button.vue'; import RemoveMemberButton from '~/members/components/action_buttons/remove_member_button.vue';
import { MEMBER_TYPES } from '~/members/constants';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -11,9 +12,14 @@ describe('RemoveMemberButton', () => { ...@@ -11,9 +12,14 @@ describe('RemoveMemberButton', () => {
const createStore = (state = {}) => { const createStore = (state = {}) => {
return new Vuex.Store({ return new Vuex.Store({
state: { modules: {
memberPath: '/groups/foo-bar/-/group_members/:id', [MEMBER_TYPES.user]: {
...state, namespaced: true,
state: {
memberPath: '/groups/foo-bar/-/group_members/:id',
...state,
},
},
}, },
}); });
}; };
...@@ -22,6 +28,9 @@ describe('RemoveMemberButton', () => { ...@@ -22,6 +28,9 @@ describe('RemoveMemberButton', () => {
wrapper = shallowMount(RemoveMemberButton, { wrapper = shallowMount(RemoveMemberButton, {
localVue, localVue,
store: createStore(state), store: createStore(state),
provide: {
namespace: MEMBER_TYPES.user,
},
propsData: { propsData: {
memberId: 1, memberId: 1,
memberType: 'GroupMember', memberType: 'GroupMember',
......
...@@ -3,6 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; ...@@ -3,6 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex'; import Vuex from 'vuex';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import ResendInviteButton from '~/members/components/action_buttons/resend_invite_button.vue'; import ResendInviteButton from '~/members/components/action_buttons/resend_invite_button.vue';
import { MEMBER_TYPES } from '~/members/constants';
jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' })); jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
...@@ -14,9 +15,14 @@ describe('ResendInviteButton', () => { ...@@ -14,9 +15,14 @@ describe('ResendInviteButton', () => {
const createStore = (state = {}) => { const createStore = (state = {}) => {
return new Vuex.Store({ return new Vuex.Store({
state: { modules: {
memberPath: '/groups/foo-bar/-/group_members/:id', [MEMBER_TYPES.invite]: {
...state, namespaced: true,
state: {
memberPath: '/groups/foo-bar/-/group_members/:id',
...state,
},
},
}, },
}); });
}; };
...@@ -25,6 +31,9 @@ describe('ResendInviteButton', () => { ...@@ -25,6 +31,9 @@ describe('ResendInviteButton', () => {
wrapper = shallowMount(ResendInviteButton, { wrapper = shallowMount(ResendInviteButton, {
localVue, localVue,
store: createStore(state), store: createStore(state),
provide: {
namespace: MEMBER_TYPES.invite,
},
propsData: { propsData: {
memberId: 1, memberId: 1,
...propsData, ...propsData,
......
...@@ -5,6 +5,7 @@ import Vuex from 'vuex'; ...@@ -5,6 +5,7 @@ import Vuex from 'vuex';
import * as commonUtils from '~/lib/utils/common_utils'; import * as commonUtils from '~/lib/utils/common_utils';
import MembersApp from '~/members/components/app.vue'; import MembersApp from '~/members/components/app.vue';
import FilterSortContainer from '~/members/components/filter_sort/filter_sort_container.vue'; import FilterSortContainer from '~/members/components/filter_sort/filter_sort_container.vue';
import { MEMBER_TYPES } from '~/members/constants';
import { RECEIVE_MEMBER_ROLE_ERROR, HIDE_ERROR } from '~/members/store/mutation_types'; import { RECEIVE_MEMBER_ROLE_ERROR, HIDE_ERROR } from '~/members/store/mutation_types';
import mutations from '~/members/store/mutations'; import mutations from '~/members/store/mutations';
...@@ -17,16 +18,24 @@ describe('MembersApp', () => { ...@@ -17,16 +18,24 @@ describe('MembersApp', () => {
const createComponent = (state = {}, options = {}) => { const createComponent = (state = {}, options = {}) => {
store = new Vuex.Store({ store = new Vuex.Store({
state: { modules: {
showError: true, [MEMBER_TYPES.user]: {
errorMessage: 'Something went wrong, please try again.', namespaced: true,
...state, state: {
showError: true,
errorMessage: 'Something went wrong, please try again.',
...state,
},
mutations,
},
}, },
mutations,
}); });
wrapper = shallowMount(MembersApp, { wrapper = shallowMount(MembersApp, {
localVue, localVue,
provide: {
namespace: MEMBER_TYPES.user,
},
store, store,
...options, ...options,
}); });
...@@ -48,7 +57,9 @@ describe('MembersApp', () => { ...@@ -48,7 +57,9 @@ describe('MembersApp', () => {
it('renders and scrolls to error alert', async () => { it('renders and scrolls to error alert', async () => {
createComponent({ showError: false, errorMessage: '' }); createComponent({ showError: false, errorMessage: '' });
store.commit(RECEIVE_MEMBER_ROLE_ERROR, { error: new Error('Network Error') }); store.commit(`${MEMBER_TYPES.user}/${RECEIVE_MEMBER_ROLE_ERROR}`, {
error: new Error('Network Error'),
});
await nextTick(); await nextTick();
...@@ -66,7 +77,7 @@ describe('MembersApp', () => { ...@@ -66,7 +77,7 @@ describe('MembersApp', () => {
it('does not render and scroll to error alert', async () => { it('does not render and scroll to error alert', async () => {
createComponent(); createComponent();
store.commit(HIDE_ERROR); store.commit(`${MEMBER_TYPES.user}/${HIDE_ERROR}`);
await nextTick(); await nextTick();
......
...@@ -3,6 +3,7 @@ import Vuex from 'vuex'; ...@@ -3,6 +3,7 @@ import Vuex from 'vuex';
import FilterSortContainer from '~/members/components/filter_sort/filter_sort_container.vue'; import FilterSortContainer from '~/members/components/filter_sort/filter_sort_container.vue';
import MembersFilteredSearchBar from '~/members/components/filter_sort/members_filtered_search_bar.vue'; import MembersFilteredSearchBar from '~/members/components/filter_sort/members_filtered_search_bar.vue';
import SortDropdown from '~/members/components/filter_sort/sort_dropdown.vue'; import SortDropdown from '~/members/components/filter_sort/sort_dropdown.vue';
import { MEMBER_TYPES } from '~/members/constants';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -12,22 +13,30 @@ describe('FilterSortContainer', () => { ...@@ -12,22 +13,30 @@ describe('FilterSortContainer', () => {
const createComponent = (state) => { const createComponent = (state) => {
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { modules: {
filteredSearchBar: { [MEMBER_TYPES.user]: {
show: true, namespaced: true,
tokens: ['two_factor'], state: {
searchParam: 'search', filteredSearchBar: {
placeholder: 'Filter members', show: true,
recentSearchesStorageKey: 'group_members', tokens: ['two_factor'],
searchParam: 'search',
placeholder: 'Filter members',
recentSearchesStorageKey: 'group_members',
},
tableSortableFields: ['account'],
...state,
},
}, },
tableSortableFields: ['account'],
...state,
}, },
}); });
wrapper = shallowMount(FilterSortContainer, { wrapper = shallowMount(FilterSortContainer, {
localVue, localVue,
store, store,
provide: {
namespace: MEMBER_TYPES.user,
},
}); });
}; };
......
...@@ -2,6 +2,7 @@ import { GlFilteredSearchToken } from '@gitlab/ui'; ...@@ -2,6 +2,7 @@ import { GlFilteredSearchToken } from '@gitlab/ui';
import { shallowMount, createLocalVue } from '@vue/test-utils'; import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex'; import Vuex from 'vuex';
import MembersFilteredSearchBar from '~/members/components/filter_sort/members_filtered_search_bar.vue'; import MembersFilteredSearchBar from '~/members/components/filter_sort/members_filtered_search_bar.vue';
import { MEMBER_TYPES } from '~/members/constants';
import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue'; import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
const localVue = createLocalVue(); const localVue = createLocalVue();
...@@ -12,15 +13,20 @@ describe('MembersFilteredSearchBar', () => { ...@@ -12,15 +13,20 @@ describe('MembersFilteredSearchBar', () => {
const createComponent = ({ state = {}, provide = {} } = {}) => { const createComponent = ({ state = {}, provide = {} } = {}) => {
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { modules: {
filteredSearchBar: { [MEMBER_TYPES.user]: {
show: true, namespaced: true,
tokens: ['two_factor'], state: {
searchParam: 'search', filteredSearchBar: {
placeholder: 'Filter members', show: true,
recentSearchesStorageKey: 'group_members', tokens: ['two_factor'],
searchParam: 'search',
placeholder: 'Filter members',
recentSearchesStorageKey: 'group_members',
},
...state,
},
}, },
...state,
}, },
}); });
...@@ -29,6 +35,7 @@ describe('MembersFilteredSearchBar', () => { ...@@ -29,6 +35,7 @@ describe('MembersFilteredSearchBar', () => {
provide: { provide: {
sourceId: 1, sourceId: 1,
canManageMembers: true, canManageMembers: true,
namespace: MEMBER_TYPES.user,
...provide, ...provide,
}, },
store, store,
......
...@@ -3,6 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils'; ...@@ -3,6 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex'; import Vuex from 'vuex';
import * as urlUtilities from '~/lib/utils/url_utility'; import * as urlUtilities from '~/lib/utils/url_utility';
import SortDropdown from '~/members/components/filter_sort/sort_dropdown.vue'; import SortDropdown from '~/members/components/filter_sort/sort_dropdown.vue';
import { MEMBER_TYPES } from '~/members/constants';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -14,16 +15,21 @@ describe('SortDropdown', () => { ...@@ -14,16 +15,21 @@ describe('SortDropdown', () => {
const createComponent = (state) => { const createComponent = (state) => {
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { modules: {
tableSortableFields: ['account', 'granted', 'expires', 'maxRole', 'lastSignIn'], [MEMBER_TYPES.user]: {
filteredSearchBar: { namespaced: true,
show: true, state: {
tokens: ['two_factor'], tableSortableFields: ['account', 'granted', 'expires', 'maxRole', 'lastSignIn'],
searchParam: 'search', filteredSearchBar: {
placeholder: 'Filter members', show: true,
recentSearchesStorageKey: 'group_members', tokens: ['two_factor'],
searchParam: 'search',
placeholder: 'Filter members',
recentSearchesStorageKey: 'group_members',
},
...state,
},
}, },
...state,
}, },
}); });
...@@ -31,6 +37,7 @@ describe('SortDropdown', () => { ...@@ -31,6 +37,7 @@ describe('SortDropdown', () => {
localVue, localVue,
provide: { provide: {
sourceId: 1, sourceId: 1,
namespace: MEMBER_TYPES.user,
}, },
store, store,
}); });
......
...@@ -4,7 +4,7 @@ import { mount, createLocalVue, createWrapper } from '@vue/test-utils'; ...@@ -4,7 +4,7 @@ import { mount, createLocalVue, createWrapper } from '@vue/test-utils';
import { nextTick } from 'vue'; import { nextTick } from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import LeaveModal from '~/members/components/modals/leave_modal.vue'; import LeaveModal from '~/members/components/modals/leave_modal.vue';
import { LEAVE_MODAL_ID } from '~/members/constants'; import { LEAVE_MODAL_ID, MEMBER_TYPES } from '~/members/constants';
import { member } from '../../mock_data'; import { member } from '../../mock_data';
jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' })); jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
...@@ -17,9 +17,14 @@ describe('LeaveModal', () => { ...@@ -17,9 +17,14 @@ describe('LeaveModal', () => {
const createStore = (state = {}) => { const createStore = (state = {}) => {
return new Vuex.Store({ return new Vuex.Store({
state: { modules: {
memberPath: '/groups/foo-bar/-/group_members/:id', [MEMBER_TYPES.user]: {
...state, namespaced: true,
state: {
memberPath: '/groups/foo-bar/-/group_members/:id',
...state,
},
},
}, },
}); });
}; };
...@@ -28,6 +33,9 @@ describe('LeaveModal', () => { ...@@ -28,6 +33,9 @@ describe('LeaveModal', () => {
wrapper = mount(LeaveModal, { wrapper = mount(LeaveModal, {
localVue, localVue,
store: createStore(state), store: createStore(state),
provide: {
namespace: MEMBER_TYPES.user,
},
propsData: { propsData: {
member, member,
...propsData, ...propsData,
......
...@@ -4,7 +4,7 @@ import { mount, createLocalVue, createWrapper } from '@vue/test-utils'; ...@@ -4,7 +4,7 @@ import { mount, createLocalVue, createWrapper } from '@vue/test-utils';
import { nextTick } from 'vue'; import { nextTick } from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import RemoveGroupLinkModal from '~/members/components/modals/remove_group_link_modal.vue'; import RemoveGroupLinkModal from '~/members/components/modals/remove_group_link_modal.vue';
import { REMOVE_GROUP_LINK_MODAL_ID } from '~/members/constants'; import { REMOVE_GROUP_LINK_MODAL_ID, MEMBER_TYPES } from '~/members/constants';
import { group } from '../../mock_data'; import { group } from '../../mock_data';
jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' })); jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
...@@ -21,13 +21,18 @@ describe('RemoveGroupLinkModal', () => { ...@@ -21,13 +21,18 @@ describe('RemoveGroupLinkModal', () => {
const createStore = (state = {}) => { const createStore = (state = {}) => {
return new Vuex.Store({ return new Vuex.Store({
state: { modules: {
memberPath: '/groups/foo-bar/-/group_links/:id', [MEMBER_TYPES.group]: {
groupLinkToRemove: group, namespaced: true,
removeGroupLinkModalVisible: true, state: {
...state, memberPath: '/groups/foo-bar/-/group_links/:id',
groupLinkToRemove: group,
removeGroupLinkModalVisible: true,
...state,
},
actions,
},
}, },
actions,
}); });
}; };
...@@ -35,6 +40,9 @@ describe('RemoveGroupLinkModal', () => { ...@@ -35,6 +40,9 @@ describe('RemoveGroupLinkModal', () => {
wrapper = mount(RemoveGroupLinkModal, { wrapper = mount(RemoveGroupLinkModal, {
localVue, localVue,
store: createStore(state), store: createStore(state),
provide: {
namespace: MEMBER_TYPES.group,
},
attrs: { attrs: {
static: true, static: true,
}, },
......
...@@ -5,6 +5,7 @@ import Vuex from 'vuex'; ...@@ -5,6 +5,7 @@ import Vuex from 'vuex';
import { useFakeDate } from 'helpers/fake_date'; import { useFakeDate } from 'helpers/fake_date';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import ExpirationDatepicker from '~/members/components/table/expiration_datepicker.vue'; import ExpirationDatepicker from '~/members/components/table/expiration_datepicker.vue';
import { MEMBER_TYPES } from '~/members/constants';
import { member } from '../../mock_data'; import { member } from '../../mock_data';
const localVue = createLocalVue(); const localVue = createLocalVue();
...@@ -31,7 +32,11 @@ describe('ExpirationDatepicker', () => { ...@@ -31,7 +32,11 @@ describe('ExpirationDatepicker', () => {
), ),
}; };
return new Vuex.Store({ actions }); return new Vuex.Store({
modules: {
[MEMBER_TYPES.user]: { namespaced: true, actions },
},
});
}; };
const createComponent = (propsData = {}) => { const createComponent = (propsData = {}) => {
...@@ -41,6 +46,9 @@ describe('ExpirationDatepicker', () => { ...@@ -41,6 +46,9 @@ describe('ExpirationDatepicker', () => {
permissions: { canUpdate: true }, permissions: { canUpdate: true },
...propsData, ...propsData,
}, },
provide: {
namespace: MEMBER_TYPES.user,
},
localVue, localVue,
store: createStore(), store: createStore(),
mocks: { mocks: {
......
...@@ -14,6 +14,7 @@ import MemberAvatar from '~/members/components/table/member_avatar.vue'; ...@@ -14,6 +14,7 @@ import MemberAvatar from '~/members/components/table/member_avatar.vue';
import MemberSource from '~/members/components/table/member_source.vue'; import MemberSource from '~/members/components/table/member_source.vue';
import MembersTable from '~/members/components/table/members_table.vue'; import MembersTable from '~/members/components/table/members_table.vue';
import RoleDropdown from '~/members/components/table/role_dropdown.vue'; import RoleDropdown from '~/members/components/table/role_dropdown.vue';
import { MEMBER_TYPES } from '~/members/constants';
import * as initUserPopovers from '~/user_popovers'; import * as initUserPopovers from '~/user_popovers';
import { member as memberMock, directMember, invite, accessRequest } from '../../mock_data'; import { member as memberMock, directMember, invite, accessRequest } from '../../mock_data';
...@@ -25,14 +26,19 @@ describe('MembersTable', () => { ...@@ -25,14 +26,19 @@ describe('MembersTable', () => {
const createStore = (state = {}) => { const createStore = (state = {}) => {
return new Vuex.Store({ return new Vuex.Store({
state: { modules: {
members: [], [MEMBER_TYPES.user]: {
tableFields: [], namespaced: true,
tableAttrs: { state: {
table: { 'data-qa-selector': 'members_list' }, members: [],
tr: { 'data-qa-selector': 'member_row' }, tableFields: [],
tableAttrs: {
table: { 'data-qa-selector': 'members_list' },
tr: { 'data-qa-selector': 'member_row' },
},
...state,
},
}, },
...state,
}, },
}); });
}; };
...@@ -44,6 +50,7 @@ describe('MembersTable', () => { ...@@ -44,6 +50,7 @@ describe('MembersTable', () => {
provide: { provide: {
sourceId: 1, sourceId: 1,
currentUserId: 1, currentUserId: 1,
namespace: MEMBER_TYPES.user,
...provide, ...provide,
}, },
stubs: [ stubs: [
......
...@@ -7,6 +7,7 @@ import Vuex from 'vuex'; ...@@ -7,6 +7,7 @@ import Vuex from 'vuex';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import { BV_DROPDOWN_SHOW } from '~/lib/utils/constants'; import { BV_DROPDOWN_SHOW } from '~/lib/utils/constants';
import RoleDropdown from '~/members/components/table/role_dropdown.vue'; import RoleDropdown from '~/members/components/table/role_dropdown.vue';
import { MEMBER_TYPES } from '~/members/constants';
import { member } from '../../mock_data'; import { member } from '../../mock_data';
const localVue = createLocalVue(); const localVue = createLocalVue();
...@@ -24,11 +25,18 @@ describe('RoleDropdown', () => { ...@@ -24,11 +25,18 @@ describe('RoleDropdown', () => {
updateMemberRole: jest.fn(() => Promise.resolve()), updateMemberRole: jest.fn(() => Promise.resolve()),
}; };
return new Vuex.Store({ actions }); return new Vuex.Store({
modules: {
[MEMBER_TYPES.user]: { namespaced: true, actions },
},
});
}; };
const createComponent = (propsData = {}) => { const createComponent = (propsData = {}) => {
wrapper = mount(RoleDropdown, { wrapper = mount(RoleDropdown, {
provide: {
namespace: MEMBER_TYPES.user,
},
propsData: { propsData: {
member, member,
permissions: {}, permissions: {},
......
import { createWrapper } from '@vue/test-utils'; import { createWrapper } from '@vue/test-utils';
import MembersApp from '~/members/components/app.vue'; import MembersApp from '~/members/components/app.vue';
import { MEMBER_TYPES } from '~/members/constants';
import { initMembersApp } from '~/members/index'; import { initMembersApp } from '~/members/index';
import { membersJsonString, members } from './mock_data'; import { membersJsonString, members } from './mock_data';
...@@ -10,6 +11,7 @@ describe('initMembersApp', () => { ...@@ -10,6 +11,7 @@ describe('initMembersApp', () => {
const setup = () => { const setup = () => {
vm = initMembersApp(el, { vm = initMembersApp(el, {
namespace: MEMBER_TYPES.user,
tableFields: ['account'], tableFields: ['account'],
tableAttrs: { table: { 'data-qa-selector': 'members_list' } }, tableAttrs: { table: { 'data-qa-selector': 'members_list' } },
tableSortableFields: ['account'], tableSortableFields: ['account'],
...@@ -45,42 +47,46 @@ describe('initMembersApp', () => { ...@@ -45,42 +47,46 @@ describe('initMembersApp', () => {
it('parses and sets `members` in Vuex store', () => { it('parses and sets `members` in Vuex store', () => {
setup(); setup();
expect(vm.$store.state.members).toEqual(members); expect(vm.$store.state[MEMBER_TYPES.user].members).toEqual(members);
}); });
it('sets `tableFields` in Vuex store', () => { it('sets `tableFields` in Vuex store', () => {
setup(); setup();
expect(vm.$store.state.tableFields).toEqual(['account']); expect(vm.$store.state[MEMBER_TYPES.user].tableFields).toEqual(['account']);
}); });
it('sets `tableAttrs` in Vuex store', () => { it('sets `tableAttrs` in Vuex store', () => {
setup(); setup();
expect(vm.$store.state.tableAttrs).toEqual({ table: { 'data-qa-selector': 'members_list' } }); expect(vm.$store.state[MEMBER_TYPES.user].tableAttrs).toEqual({
table: { 'data-qa-selector': 'members_list' },
});
}); });
it('sets `tableSortableFields` in Vuex store', () => { it('sets `tableSortableFields` in Vuex store', () => {
setup(); setup();
expect(vm.$store.state.tableSortableFields).toEqual(['account']); expect(vm.$store.state[MEMBER_TYPES.user].tableSortableFields).toEqual(['account']);
}); });
it('sets `requestFormatter` in Vuex store', () => { it('sets `requestFormatter` in Vuex store', () => {
setup(); setup();
expect(vm.$store.state.requestFormatter()).toEqual({}); expect(vm.$store.state[MEMBER_TYPES.user].requestFormatter()).toEqual({});
}); });
it('sets `filteredSearchBar` in Vuex store', () => { it('sets `filteredSearchBar` in Vuex store', () => {
setup(); setup();
expect(vm.$store.state.filteredSearchBar).toEqual({ show: false }); expect(vm.$store.state[MEMBER_TYPES.user].filteredSearchBar).toEqual({ show: false });
}); });
it('sets `memberPath` in Vuex store', () => { it('sets `memberPath` in Vuex store', () => {
setup(); setup();
expect(vm.$store.state.memberPath).toBe('/groups/foo-bar/-/group_members/:id'); expect(vm.$store.state[MEMBER_TYPES.user].memberPath).toBe(
'/groups/foo-bar/-/group_members/:id',
);
}); });
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment