1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
<script>
import { GlModal, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
import Cookies from 'js-cookie';
import { __, s__ } from '~/locale';
import Tracking from '~/tracking';
const trackingMixin = Tracking.mixin();
export default {
beginnerLink:
'https://about.gitlab.com/blog/2018/01/22/a-beginners-guide-to-continuous-integration/',
goToTrackValuePipelines: 10,
goToTrackValueMergeRequest: 20,
trackEvent: 'click_button',
components: {
GlModal,
GlSprintf,
GlButton,
GlLink,
},
mixins: [trackingMixin],
props: {
goToPipelinesPath: {
type: String,
required: true,
},
projectMergeRequestsPath: {
type: String,
required: false,
default: '',
},
commitCookie: {
type: String,
required: true,
},
humanAccess: {
type: String,
required: true,
},
exampleLink: {
type: String,
required: true,
},
codeQualityLink: {
type: String,
required: true,
},
},
data() {
return {
trackLabel: 'congratulate_first_pipeline',
};
},
computed: {
tracking() {
return {
label: this.trackLabel,
property: this.humanAccess,
};
},
goToMergeRequestPath() {
return this.commitCookiePath || this.projectMergeRequestsPath;
},
commitCookiePath() {
const cookieVal = Cookies.get(this.commitCookie);
if (cookieVal !== 'true') return cookieVal;
return '';
},
},
i18n: {
modalTitle: __("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.`,
),
},
mounted() {
this.track();
this.disableModalFromRenderingAgain();
},
methods: {
disableModalFromRenderingAgain() {
Cookies.remove(this.commitCookie);
},
},
};
</script>
<template>
<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>
<p>
<gl-sprintf :message="$options.i18n.bodyMessage">
<template #codeQualityLink="{ content }">
<gl-link :href="codeQualityLink" target="_blank" class="font-size-inherit">{{
content
}}</gl-link>
</template>
</gl-sprintf>
</p>
<gl-sprintf :message="$options.i18n.helpMessage">
<template #beginnerLink="{ content }">
<gl-link :href="$options.beginnerLink" target="_blank">
{{ content }}
</gl-link>
</template>
<template #exampleLink="{ content }">
<gl-link :href="exampleLink" target="_blank">
{{ content }}
</gl-link>
</template>
</gl-sprintf>
<template #modal-footer>
<gl-button
v-if="projectMergeRequestsPath"
ref="goToMergeRequest"
:href="goToMergeRequestPath"
:data-track-property="humanAccess"
:data-track-value="$options.goToTrackValueMergeRequest"
:data-track-action="$options.trackEvent"
:data-track-label="trackLabel"
>
{{ $options.i18n.mergeRequestButton }}
</gl-button>
<gl-button
ref="goToPipelines"
:href="goToPipelinesPath"
variant="success"
:data-track-property="humanAccess"
:data-track-value="$options.goToTrackValuePipelines"
:data-track-action="$options.trackEvent"
:data-track-label="trackLabel"
>
{{ $options.i18n.pipelinesButton }}
</gl-button>
</template>
</gl-modal>
</template>
|
