diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-17 09:12:07 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-17 09:12:07 +0300 |
commit | 8624e54ae69729abf8664f1f1a57e90ee9ecab1a (patch) | |
tree | 5a582393864f83a1ae05b8c3cdcbc7e4de57f5b2 /app/assets/javascripts/invite_members | |
parent | f8edb3a740b9ba434489a50b69c2e765cecb24b0 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/invite_members')
3 files changed, 33 insertions, 6 deletions
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: { |