diff options
Diffstat (limited to 'app/assets/javascripts/invite_members')
3 files changed, 82 insertions, 10 deletions
diff --git a/app/assets/javascripts/invite_members/components/invite_members_modal.vue b/app/assets/javascripts/invite_members/components/invite_members_modal.vue index 47f1405c980..d00a0f1633b 100644 --- a/app/assets/javascripts/invite_members/components/invite_members_modal.vue +++ b/app/assets/javascripts/invite_members/components/invite_members_modal.vue @@ -11,10 +11,12 @@ import { } from '@gitlab/ui'; import { partition, isString } from 'lodash'; import Api from '~/api'; +import ExperimentTracking from '~/experimentation/experiment_tracking'; import GroupSelect from '~/invite_members/components/group_select.vue'; import MembersTokenSelect from '~/invite_members/components/members_token_select.vue'; import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants'; import { s__, sprintf } from '~/locale'; +import { INVITE_MEMBERS_IN_COMMENT } from '../constants'; import eventHub from '../event_hub'; export default { @@ -122,8 +124,9 @@ export default { usersToAddById.map((user) => user.id).join(','), ]; }, - openModal({ inviteeType }) { + openModal({ inviteeType, source }) { this.inviteeType = inviteeType; + this.source = source; this.$root.$emit(BV_SHOW_MODAL, this.modalId); }, @@ -138,6 +141,12 @@ export default { } this.closeModal(); }, + trackInvite() { + if (this.source === INVITE_MEMBERS_IN_COMMENT) { + const tracking = new ExperimentTracking(INVITE_MEMBERS_IN_COMMENT); + tracking.event('comment_invite_success'); + } + }, cancelInvite() { this.selectedAccessLevel = this.defaultAccessLevel; this.selectedDate = undefined; @@ -177,6 +186,8 @@ export default { promises.push(apiAddByUserId(this.id, this.addByUserIdPostData(usersToAddById))); } + this.trackInvite(); + Promise.all(promises).then(this.showToastMessageSuccess).catch(this.showToastMessageError); }, inviteByEmailPostData(usersToInviteByEmail) { @@ -211,9 +222,9 @@ export default { }, labels: { members: { - modalTitle: s__('InviteMembersModal|Invite team members'), - searchField: s__('InviteMembersModal|GitLab member or Email address'), - placeHolder: s__('InviteMembersModal|Search for members to invite'), + modalTitle: s__('InviteMembersModal|Invite members'), + searchField: s__('InviteMembersModal|GitLab member or email address'), + placeHolder: s__('InviteMembersModal|Select members or type email addresses'), toGroup: { introText: s__( "InviteMembersModal|You're inviting members to the %{strongStart}%{name}%{strongEnd} group.", 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 666693e934f..e297bb6c806 100644 --- a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue +++ b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue @@ -1,10 +1,11 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlButton, GlLink } from '@gitlab/ui'; +import ExperimentTracking from '~/experimentation/experiment_tracking'; import { s__ } from '~/locale'; import eventHub from '../event_hub'; export default { - components: { GlButton }, + components: { GlButton, GlLink }, props: { displayText: { type: String, @@ -26,10 +27,65 @@ export default { required: false, default: undefined, }, + triggerSource: { + type: String, + required: false, + default: 'unknown', + }, + trackExperiment: { + type: String, + required: false, + default: undefined, + }, + triggerElement: { + type: String, + required: false, + default: 'button', + }, + event: { + type: String, + required: false, + default: '', + }, + label: { + type: String, + required: false, + default: '', + }, + }, + computed: { + isButton() { + return this.triggerElement === 'button'; + }, + componentAttributes() { + const baseAttributes = { + class: this.classes, + 'data-qa-selector': 'invite_members_button', + }; + + if (this.event && this.label) { + return { + ...baseAttributes, + 'data-track-event': this.event, + 'data-track-label': this.label, + }; + } + + return baseAttributes; + }, + }, + mounted() { + this.trackExperimentOnShow(); }, methods: { openModal() { - eventHub.$emit('openModal', { inviteeType: 'members' }); + eventHub.$emit('openModal', { inviteeType: 'members', source: this.triggerSource }); + }, + trackExperimentOnShow() { + if (this.trackExperiment) { + const tracking = new ExperimentTracking(this.trackExperiment); + tracking.event('comment_invite_shown'); + } }, }, }; @@ -37,12 +93,15 @@ export default { <template> <gl-button - :class="classes" - :icon="icon" + v-if="isButton" + v-bind="componentAttributes" :variant="variant" - data-qa-selector="invite_members_button" + :icon="icon" @click="openModal" > {{ displayText }} </gl-button> + <gl-link v-else v-bind="componentAttributes" data-is-link="true" @click="openModal"> + {{ displayText }} + </gl-link> </template> diff --git a/app/assets/javascripts/invite_members/constants.js b/app/assets/javascripts/invite_members/constants.js index 2044dad896f..a651b81c60e 100644 --- a/app/assets/javascripts/invite_members/constants.js +++ b/app/assets/javascripts/invite_members/constants.js @@ -1 +1,3 @@ export const SEARCH_DELAY = 200; + +export const INVITE_MEMBERS_IN_COMMENT = 'invite_members_in_comment'; |