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
|
<script>
import { GlButton, GlPopover, GlSprintf, GlOutsideDirective as Outside } from '@gitlab/ui';
import { s__ } from '~/locale';
export default {
directives: { Outside },
i18n: {
title: s__('pipelineEditorWalkthrough|See how GitLab pipelines work'),
description: s__(
'pipelineEditorWalkthrough|This %{codeStart}.gitlab-ci.yml%{codeEnd} file creates a simple test pipeline.',
),
instruction: s__(
'pipelineEditorWalkthrough|Use the %{boldStart}commit changes%{boldEnd} button at the bottom of the page to run the pipeline.',
),
ctaText: s__("pipelineEditorWalkthrough|Let's do this!"),
},
components: {
GlButton,
GlPopover,
GlSprintf,
},
data() {
return {
show: true,
};
},
computed: {
targetElement() {
return document.querySelector('.js-walkthrough-popover-target');
},
},
methods: {
close() {
this.show = false;
},
handleClickCta() {
this.close();
this.$emit('walkthrough-popover-cta-clicked');
},
},
};
</script>
<template>
<gl-popover
:show.sync="show"
:title="$options.i18n.title"
:target="targetElement"
placement="right"
triggers="focus"
>
<div v-outside="close" class="gl-display-flex gl-flex-direction-column">
<p>
<gl-sprintf :message="$options.i18n.description">
<template #code="{ content }">
<code>{{ content }}</code>
</template>
</gl-sprintf>
</p>
<p>
<gl-sprintf :message="$options.i18n.instruction">
<template #bold="{ content }">
<strong>
{{ content }}
</strong>
</template>
</gl-sprintf>
</p>
<gl-button
class="gl-align-self-end"
category="tertiary"
data-testid="ctaBtn"
variant="confirm"
@click="handleClickCta"
>
<gl-emoji data-name="rocket" />
{{ this.$options.i18n.ctaText }}
</gl-button>
</div>
</gl-popover>
</template>
|
