2020-09-04 03:08:22 +00:00
< script >
import { GlBanner } from '@gitlab/ui' ;
2021-05-10 18:10:41 +00:00
import eventHub from '~/invite_members/event_hub' ;
2021-09-15 00:09:30 +00:00
import axios from '~/lib/utils/axios_utils' ;
2021-02-14 18:09:20 +00:00
import { s _ _ } from '~/locale' ;
2020-09-16 15:09:32 +00:00
import Tracking from '~/tracking' ;
const trackingMixin = Tracking . mixin ( ) ;
2020-09-04 03:08:22 +00:00
export default {
components : {
GlBanner ,
} ,
2020-09-16 15:09:32 +00:00
mixins : [ trackingMixin ] ,
2021-09-15 00:09:30 +00:00
inject : [ 'svgPath' , 'trackLabel' , 'calloutsPath' , 'calloutsFeatureId' , 'groupId' ] ,
2020-09-04 03:08:22 +00:00
data ( ) {
return {
2021-09-15 00:09:30 +00:00
isDismissed : false ,
2020-09-16 15:09:32 +00:00
tracking : {
label : this . trackLabel ,
} ,
2020-09-04 03:08:22 +00:00
} ;
} ,
2020-09-16 15:09:32 +00:00
mounted ( ) {
this . trackOnShow ( ) ;
} ,
2020-09-04 03:08:22 +00:00
methods : {
handleClose ( ) {
2021-09-15 00:09:30 +00:00
axios
. post ( this . calloutsPath , {
feature _name : this . calloutsFeatureId ,
group _id : this . groupId ,
} )
. catch ( ( e ) => {
// eslint-disable-next-line @gitlab/require-i18n-strings, no-console
console . error ( 'Failed to dismiss banner.' , e ) ;
} ) ;
2020-09-10 12:08:54 +00:00
this . isDismissed = true ;
2020-09-16 15:09:32 +00:00
this . track ( this . $options . dismissEvent ) ;
} ,
trackOnShow ( ) {
2021-02-18 12:09:34 +00:00
this . $nextTick ( ( ) => {
if ( ! this . isDismissed ) this . track ( this . $options . displayEvent ) ;
} ) ;
2020-09-16 15:09:32 +00:00
} ,
2021-05-10 18:10:41 +00:00
openModal ( ) {
eventHub . $emit ( 'openModal' , {
source : this . $options . openModalSource ,
} ) ;
this . track ( this . $options . buttonClickEvent ) ;
2020-09-04 03:08:22 +00:00
} ,
} ,
i18n : {
title : s _ _ ( 'InviteMembersBanner|Collaborate with your team' ) ,
body : s _ _ (
"InviteMembersBanner|We noticed that you haven't invited anyone to this group. Invite your colleagues so you can discuss issues, collaborate on merge requests, and share your knowledge." ,
) ,
button _text : s _ _ ( 'InviteMembersBanner|Invite your colleagues' ) ,
} ,
2020-09-16 15:09:32 +00:00
displayEvent : 'invite_members_banner_displayed' ,
buttonClickEvent : 'invite_members_banner_button_clicked' ,
2021-05-10 18:10:41 +00:00
openModalSource : 'invite_members_banner' ,
2020-09-16 15:09:32 +00:00
dismissEvent : 'invite_members_banner_dismissed' ,
2020-09-04 03:08:22 +00:00
} ;
< / script >
< template >
< gl -banner
2020-09-10 12:08:54 +00:00
v - if = "!isDismissed"
2020-09-04 03:08:22 +00:00
ref = "banner"
2021-09-15 00:09:30 +00:00
data - testid = "invite-members-banner"
2020-09-04 03:08:22 +00:00
: title = "$options.i18n.title"
: button - text = "$options.i18n.button_text"
: svg - path = "svgPath"
@ close = "handleClose"
2021-05-10 18:10:41 +00:00
@ primary = "openModal"
2020-09-04 03:08:22 +00:00
>
< p > { { $options . i18n . body } } < / p >
< / g l - b a n n e r >
< / template >