2020-02-24 21:09:08 +00:00
< script >
2020-08-26 18:11:43 +00:00
import { GlModal , GlSprintf , GlLink , GlButton } from '@gitlab/ui' ;
2020-02-24 21:09:08 +00:00
import Cookies from 'js-cookie' ;
2020-10-19 09:08:58 +00:00
import { s _ _ } from '~/locale' ;
2020-03-31 18:07:42 +00:00
import Tracking from '~/tracking' ;
const trackingMixin = Tracking . mixin ( ) ;
2020-02-24 21:09:08 +00:00
export default {
beginnerLink :
'https://about.gitlab.com/blog/2018/01/22/a-beginners-guide-to-continuous-integration/' ,
2020-08-26 18:11:43 +00:00
goToTrackValuePipelines : 10 ,
goToTrackValueMergeRequest : 20 ,
2020-04-01 15:07:45 +00:00
trackEvent : 'click_button' ,
2020-02-24 21:09:08 +00:00
components : {
GlModal ,
GlSprintf ,
2020-08-26 18:11:43 +00:00
GlButton ,
2020-02-24 21:09:08 +00:00
GlLink ,
} ,
2020-03-31 18:07:42 +00:00
mixins : [ trackingMixin ] ,
2020-02-24 21:09:08 +00:00
props : {
goToPipelinesPath : {
type : String ,
required : true ,
} ,
2020-08-26 18:11:43 +00:00
projectMergeRequestsPath : {
type : String ,
required : false ,
default : '' ,
} ,
2020-02-24 21:09:08 +00:00
commitCookie : {
type : String ,
required : true ,
} ,
2020-03-31 18:07:42 +00:00
humanAccess : {
type : String ,
required : true ,
} ,
2020-11-09 21:08:48 +00:00
exampleLink : {
type : String ,
required : true ,
} ,
codeQualityLink : {
type : String ,
required : true ,
} ,
2020-03-31 18:07:42 +00:00
} ,
data ( ) {
return {
2020-04-01 15:07:45 +00:00
trackLabel : 'congratulate_first_pipeline' ,
2020-03-31 18:07:42 +00:00
} ;
2020-02-24 21:09:08 +00:00
} ,
2020-04-01 15:07:45 +00:00
computed : {
tracking ( ) {
return {
label : this . trackLabel ,
property : this . humanAccess ,
} ;
} ,
2020-08-26 18:11:43 +00:00
goToMergeRequestPath ( ) {
return this . commitCookiePath || this . projectMergeRequestsPath ;
} ,
commitCookiePath ( ) {
const cookieVal = Cookies . get ( this . commitCookie ) ;
if ( cookieVal !== 'true' ) return cookieVal ;
return '' ;
} ,
2020-04-01 15:07:45 +00:00
} ,
2020-10-19 09:08:58 +00:00
i18n : {
modalTitle : s _ _ ( "That's it, well done!" ) ,
pipelinesButton : s _ _ ( 'MR widget|See your pipeline in action' ) ,
mergeRequestButton : s _ _ ( 'MR widget|Back to the Merge request' ) ,
bodyMessage : s _ _ (
` MR widget|The pipeline will test your code on every commit. A %{codeQualityLinkStart}code quality report%{codeQualityLinkEnd} will appear in your merge requests to warn you about potential code degradations. ` ,
) ,
helpMessage : s _ _ (
` MR widget|Take a look at our %{beginnerLinkStart}Beginner's Guide to Continuous Integration%{beginnerLinkEnd} and our %{exampleLinkStart}examples of GitLab CI/CD%{exampleLinkEnd} to learn more. ` ,
) ,
} ,
2020-02-24 21:09:08 +00:00
mounted ( ) {
2020-03-31 18:07:42 +00:00
this . track ( ) ;
2020-02-24 21:09:08 +00:00
this . disableModalFromRenderingAgain ( ) ;
} ,
methods : {
disableModalFromRenderingAgain ( ) {
Cookies . remove ( this . commitCookie ) ;
} ,
} ,
} ;
< / script >
< template >
2020-10-19 09:08:58 +00:00
< gl -modal visible size = "sm" modal -id = " success -pipeline -modal -id -not -used " >
< template # modal -title >
{ { $options . i18n . modalTitle } }
< gl -emoji class = "gl-vertical-align-baseline font-size-inherit gl-mr-1" data -name = " tada " / >
< / template >
2020-02-24 21:09:08 +00:00
< p >
2020-10-19 09:08:58 +00:00
< gl -sprintf :message ="$options.i18n.bodyMessage" >
2020-07-18 00:09:34 +00:00
< template # codeQualityLink = "{content}" >
2020-11-09 21:08:48 +00:00
< gl -link :href ="codeQualityLink" target = "_blank" class = "font-size-inherit" > { {
2020-07-18 00:09:34 +00:00
content
} } < / g l - l i n k >
< / template >
< / g l - s p r i n t f >
2020-02-24 21:09:08 +00:00
< / p >
2020-10-19 09:08:58 +00:00
< gl -sprintf :message ="$options.i18n.helpMessage" >
2020-02-24 21:09:08 +00:00
< template # beginnerLink = "{content}" >
< gl -link :href ="$options.beginnerLink" target = "_blank" >
{ { content } }
< / g l - l i n k >
< / template >
< template # exampleLink = "{content}" >
2020-11-09 21:08:48 +00:00
< gl -link :href ="exampleLink" target = "_blank" >
2020-02-24 21:09:08 +00:00
{ { content } }
< / g l - l i n k >
< / template >
< / g l - s p r i n t f >
< template # modal -footer >
2020-08-26 18:11:43 +00:00
< gl -button
v - if = "projectMergeRequestsPath"
ref = "goToMergeRequest"
: href = "goToMergeRequestPath"
: data - track - property = "humanAccess"
: data - track - value = "$options.goToTrackValueMergeRequest"
: data - track - event = "$options.trackEvent"
: data - track - label = "trackLabel"
>
2020-10-19 09:08:58 +00:00
{ { $options . i18n . mergeRequestButton } }
2020-08-26 18:11:43 +00:00
< / g l - b u t t o n >
< gl -button
ref = "goToPipelines"
2020-04-01 15:07:45 +00:00
: href = "goToPipelinesPath"
2020-08-26 18:11:43 +00:00
variant = "success"
2020-04-01 15:07:45 +00:00
: data - track - property = "humanAccess"
2020-08-26 18:11:43 +00:00
: data - track - value = "$options.goToTrackValuePipelines"
2020-04-01 15:07:45 +00:00
: data - track - event = "$options.trackEvent"
: data - track - label = "trackLabel"
>
2020-10-19 09:08:58 +00:00
{ { $options . i18n . pipelinesButton } }
2020-08-26 18:11:43 +00:00
< / g l - b u t t o n >
2020-02-24 21:09:08 +00:00
< / template >
< / g l - m o d a l >
< / template >