diff options
Diffstat (limited to 'app/assets/javascripts/members/components/members_tabs.vue')
-rw-r--r-- | app/assets/javascripts/members/components/members_tabs.vue | 85 |
1 files changed, 45 insertions, 40 deletions
diff --git a/app/assets/javascripts/members/components/members_tabs.vue b/app/assets/javascripts/members/components/members_tabs.vue index 98995730df4..b824a013f3b 100644 --- a/app/assets/javascripts/members/components/members_tabs.vue +++ b/app/assets/javascripts/members/components/members_tabs.vue @@ -1,40 +1,48 @@ <script> import { GlTabs, GlTab, GlBadge, GlButton } from '@gitlab/ui'; import { mapState } from 'vuex'; -import { queryToObject } from '~/lib/utils/url_utility'; import { __ } from '~/locale'; -import { MEMBER_TYPES, TAB_QUERY_PARAM_VALUES, ACTIVE_TAB_QUERY_PARAM_NAME } from '../constants'; +import { queryToObject } from '~/lib/utils/url_utility'; +import { + MEMBER_TYPES, + ACTIVE_TAB_QUERY_PARAM_NAME, + TAB_QUERY_PARAM_VALUES, + EE_TABS, +} from 'ee_else_ce/members/constants'; import MembersApp from './app.vue'; const countComputed = (state, namespace) => state[namespace]?.pagination?.totalItems || 0; +export const TABS = [ + { + namespace: MEMBER_TYPES.user, + title: __('Members'), + }, + { + namespace: MEMBER_TYPES.group, + title: __('Groups'), + attrs: { 'data-qa-selector': 'groups_list_tab' }, + queryParamValue: TAB_QUERY_PARAM_VALUES.group, + }, + { + namespace: MEMBER_TYPES.invite, + title: __('Invited'), + canManageMembersPermissionsRequired: true, + queryParamValue: TAB_QUERY_PARAM_VALUES.invite, + }, + { + namespace: MEMBER_TYPES.accessRequest, + title: __('Access requests'), + canManageMembersPermissionsRequired: true, + queryParamValue: TAB_QUERY_PARAM_VALUES.accessRequest, + }, + ...EE_TABS, +]; + export default { name: 'MembersTabs', ACTIVE_TAB_QUERY_PARAM_NAME, - TABS: [ - { - namespace: MEMBER_TYPES.user, - title: __('Members'), - }, - { - namespace: MEMBER_TYPES.group, - title: __('Groups'), - attrs: { 'data-qa-selector': 'groups_list_tab' }, - queryParamValue: TAB_QUERY_PARAM_VALUES.group, - }, - { - namespace: MEMBER_TYPES.invite, - title: __('Invited'), - canManageMembersPermissionsRequired: true, - queryParamValue: TAB_QUERY_PARAM_VALUES.invite, - }, - { - namespace: MEMBER_TYPES.accessRequest, - title: __('Access requests'), - canManageMembersPermissionsRequired: true, - queryParamValue: TAB_QUERY_PARAM_VALUES.accessRequest, - }, - ], + TABS, components: { MembersApp, GlTabs, GlTab, GlBadge, GlButton }, inject: ['canManageMembers', 'canExportMembers', 'exportCsvPath'], data() { @@ -43,20 +51,17 @@ export default { }; }, computed: { - ...mapState({ - userCount(state) { - return countComputed(state, MEMBER_TYPES.user); - }, - groupCount(state) { - return countComputed(state, MEMBER_TYPES.group); - }, - inviteCount(state) { - return countComputed(state, MEMBER_TYPES.invite); - }, - accessRequestCount(state) { - return countComputed(state, MEMBER_TYPES.accessRequest); - }, - }), + ...mapState( + Object.values(MEMBER_TYPES).reduce((getters, memberType) => { + return { + ...getters, + // eslint-disable-next-line @gitlab/require-i18n-strings + [`${memberType}Count`](state) { + return countComputed(state, memberType); + }, + }; + }, {}), + ), urlParams() { return Object.keys(queryToObject(window.location.search, { gatherArrays: true })); }, |