diff options
Diffstat (limited to 'app/assets/javascripts')
5 files changed, 39 insertions, 7 deletions
diff --git a/app/assets/javascripts/contextual_sidebar.js b/app/assets/javascripts/contextual_sidebar.js index 08cf0197993..08942374120 100644 --- a/app/assets/javascripts/contextual_sidebar.js +++ b/app/assets/javascripts/contextual_sidebar.js @@ -2,6 +2,8 @@ import { GlBreakpointInstance as bp, breakpoints } from '@gitlab/ui/dist/utils'; import $ from 'jquery'; import Cookies from 'js-cookie'; import { debounce } from 'lodash'; +import initInviteMembersModal from '~/invite_members/init_invite_members_modal'; +import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger'; import { parseBoolean } from '~/lib/utils/common_utils'; export const SIDEBAR_COLLAPSED_CLASS = 'js-sidebar-collapsed'; @@ -112,5 +114,8 @@ export default class ContextualSidebar { const collapse = parseBoolean(Cookies.get('sidebar_collapsed')); this.toggleCollapsedSidebar(collapse, true); } + + initInviteMembersModal(); + initInviteMembersTrigger(); } } diff --git a/app/assets/javascripts/graphql_shared/queries/group_users_search.query.graphql b/app/assets/javascripts/graphql_shared/queries/group_users_search.query.graphql index 3448aa72964..c5f99a1657e 100644 --- a/app/assets/javascripts/graphql_shared/queries/group_users_search.query.graphql +++ b/app/assets/javascripts/graphql_shared/queries/group_users_search.query.graphql @@ -4,7 +4,7 @@ query groupUsersSearch($search: String!, $fullPath: ID!) { workspace: group(fullPath: $fullPath) { id - users: groupMembers(search: $search, relations: [DIRECT, INHERITED]) { + users: groupMembers(search: $search, relations: [DIRECT, DESCENDANTS, INHERITED]) { nodes { user { ...User diff --git a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue index 05be427742c..bf3250f63a5 100644 --- a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue +++ b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue @@ -1,11 +1,12 @@ <script> -import { GlButton, GlLink } from '@gitlab/ui'; +import { GlButton, GlLink, GlIcon } from '@gitlab/ui'; import ExperimentTracking from '~/experimentation/experiment_tracking'; import { s__ } from '~/locale'; import eventHub from '../event_hub'; +import { TRIGGER_ELEMENT_BUTTON, TRIGGER_ELEMENT_SIDE_NAV } from '../constants'; export default { - components: { GlButton, GlLink }, + components: { GlButton, GlLink, GlIcon }, props: { displayText: { type: String, @@ -53,13 +54,11 @@ export default { }, }, computed: { - isButton() { - return this.triggerElement === 'button'; - }, componentAttributes() { const baseAttributes = { class: this.classes, 'data-qa-selector': 'invite_members_button', + 'data-test-id': 'invite-members-button', }; if (this.event && this.label) { @@ -77,6 +76,9 @@ export default { this.trackExperimentOnShow(); }, methods: { + checkTrigger(targetTriggerElement) { + return this.triggerElement === targetTriggerElement; + }, openModal() { eventHub.$emit('openModal', { inviteeType: 'members', source: this.triggerSource }); }, @@ -87,12 +89,14 @@ export default { } }, }, + TRIGGER_ELEMENT_BUTTON, + TRIGGER_ELEMENT_SIDE_NAV, }; </script> <template> <gl-button - v-if="isButton" + v-if="checkTrigger($options.TRIGGER_ELEMENT_BUTTON)" v-bind="componentAttributes" :variant="variant" :icon="icon" @@ -100,6 +104,17 @@ export default { > {{ displayText }} </gl-button> + <gl-link + v-else-if="checkTrigger($options.TRIGGER_ELEMENT_SIDE_NAV)" + v-bind="componentAttributes" + data-is-link="true" + @click="openModal" + > + <span class="nav-icon-container"> + <gl-icon :name="icon" /> + </span> + <span class="nav-item-name"> {{ displayText }} </span> + </gl-link> <gl-link v-else v-bind="componentAttributes" data-is-link="true" @click="openModal"> {{ displayText }} </gl-link> diff --git a/app/assets/javascripts/invite_members/constants.js b/app/assets/javascripts/invite_members/constants.js index 02f38bfd3c5..c1a1107ebe3 100644 --- a/app/assets/javascripts/invite_members/constants.js +++ b/app/assets/javascripts/invite_members/constants.js @@ -25,3 +25,5 @@ export const API_MESSAGES = { }; export const USERS_FILTER_ALL = 'all'; export const USERS_FILTER_SAML_PROVIDER_ID = 'saml_provider_id'; +export const TRIGGER_ELEMENT_BUTTON = 'button'; +export const TRIGGER_ELEMENT_SIDE_NAV = 'side-nav'; diff --git a/app/assets/javascripts/invite_members/init_invite_members_modal.js b/app/assets/javascripts/invite_members/init_invite_members_modal.js index 2aa5c571157..fc657a064dd 100644 --- a/app/assets/javascripts/invite_members/init_invite_members_modal.js +++ b/app/assets/javascripts/invite_members/init_invite_members_modal.js @@ -5,7 +5,15 @@ import { parseBoolean } from '~/lib/utils/common_utils'; Vue.use(GlToast); +let initedInviteMembersModal; + export default function initInviteMembersModal() { + if (initedInviteMembersModal) { + // if we already loaded this in another part of the dom, we don't want to do it again + // else we will stack the modals + return false; + } + // https://gitlab.com/gitlab-org/gitlab/-/issues/344955 // bug lying in wait here for someone to put group and project invite in same screen // once that happens we'll need to mount these differently, perhaps split @@ -16,6 +24,8 @@ export default function initInviteMembersModal() { return false; } + initedInviteMembersModal = true; + return new Vue({ el, provide: { |