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
|
<script>
import { GlModal, GlSprintf, GlLink } from '@gitlab/ui';
import { sprintf, s__, __ } from '~/locale';
import Cookies from 'js-cookie';
import { glEmojiTag } from '~/emoji';
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/',
exampleLink: 'https://docs.gitlab.com/ee/ci/examples/',
bodyMessage: s__(
'MR widget|The pipeline will now run automatically every time you commit code. Pipelines are useful for deploying static web pages, detecting vulnerabilities in dependencies, static or dynamic application security testing (SAST and DAST), and so much more!',
),
modalTitle: sprintf(
__("That's it, well done!%{celebrate}"),
{
celebrate: glEmojiTag('tada'),
},
false,
),
goToTrackValue: 10,
trackEvent: 'click_button',
components: {
GlModal,
GlSprintf,
GlLink,
},
mixins: [trackingMixin],
props: {
goToPipelinesPath: {
type: String,
required: true,
},
commitCookie: {
type: String,
required: true,
},
humanAccess: {
type: String,
required: true,
},
},
data() {
return {
trackLabel: 'congratulate_first_pipeline',
};
},
computed: {
tracking() {
return {
label: this.trackLabel,
property: this.humanAccess,
};
},
},
mounted() {
this.track();
this.disableModalFromRenderingAgain();
},
methods: {
disableModalFromRenderingAgain() {
Cookies.remove(this.commitCookie);
},
},
};
</script>
<template>
<gl-modal
visible
size="sm"
:title="$options.modalTitle"
modal-id="success-pipeline-modal-id-not-used"
>
<p>
{{ $options.bodyMessage }}
</p>
<gl-sprintf
:message="
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 see all the cool stuff you can do with it.`)
"
>
<template #beginnerLink="{content}">
<gl-link :href="$options.beginnerLink" target="_blank">
{{ content }}
</gl-link>
</template>
<template #exampleLink="{content}">
<gl-link :href="$options.exampleLink" target="_blank">
{{ content }}
</gl-link>
</template>
</gl-sprintf>
<template #modal-footer>
<a
ref="goto"
:href="goToPipelinesPath"
class="btn btn-success"
:data-track-property="humanAccess"
:data-track-value="$options.goToTrackValue"
:data-track-event="$options.trackEvent"
:data-track-label="trackLabel"
>
{{ __('Go to Pipelines') }}
</a>
</template>
</gl-modal>
</template>
|
