84 lines
2.0 KiB
Vue
84 lines
2.0 KiB
Vue
<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>
|