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
|
<script>
import { GlEmptyState, GlButton } from '@gitlab/ui';
import { startCodeQualityWalkthrough, track } from '~/code_quality_walkthrough/utils';
import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue';
import ExperimentTracking from '~/experimentation/experiment_tracking';
import { getExperimentData } from '~/experimentation/utils';
import { helpPagePath } from '~/helpers/help_page_helper';
import { s__ } from '~/locale';
import PipelinesCiTemplates from './pipelines_ci_templates.vue';
export default {
i18n: {
title: s__('Pipelines|Build with confidence'),
description: s__(`Pipelines|GitLab CI/CD can automatically build,
test, and deploy your code. Let GitLab take care of time
consuming tasks, so you can spend more time creating.`),
aboutRunnersBtnText: s__('Pipelines|Learn about Runners'),
installRunnersBtnText: s__('Pipelines|Install GitLab Runners'),
codeQualityTitle: s__('Pipelines|Improve code quality with GitLab CI/CD'),
codeQualityDescription: s__(`Pipelines|To keep your codebase simple,
readable, and accessible to contributors, use GitLab CI/CD
to analyze your code quality with every push to your project.`),
codeQualityBtnText: s__('Pipelines|Add a code quality job'),
noCiDescription: s__('Pipelines|This project is not currently set up to run pipelines.'),
},
name: 'PipelinesEmptyState',
components: {
GlEmptyState,
GlButton,
GitlabExperiment,
PipelinesCiTemplates,
},
props: {
emptyStateSvgPath: {
type: String,
required: true,
},
canSetCi: {
type: Boolean,
required: true,
},
codeQualityPagePath: {
type: String,
required: false,
default: null,
},
ciRunnerSettingsPath: {
type: String,
required: false,
default: null,
},
},
computed: {
ciHelpPagePath() {
return helpPagePath('ci/quick_start/index.md');
},
isCodeQualityExperimentActive() {
return this.canSetCi && Boolean(getExperimentData('code_quality_walkthrough'));
},
isCiRunnerTemplatesExperimentActive() {
return this.canSetCi && Boolean(getExperimentData('ci_runner_templates'));
},
},
mounted() {
startCodeQualityWalkthrough();
},
methods: {
trackClick() {
track('cta_clicked');
},
trackCiRunnerTemplatesClick(action) {
const tracking = new ExperimentTracking('ci_runner_templates');
tracking.event(action);
},
},
};
</script>
<template>
<div>
<gitlab-experiment v-if="isCodeQualityExperimentActive" name="code_quality_walkthrough">
<template #control><pipelines-ci-templates /></template>
<template #candidate>
<gl-empty-state
:title="$options.i18n.codeQualityTitle"
:svg-path="emptyStateSvgPath"
:description="$options.i18n.codeQualityDescription"
>
<template #actions>
<gl-button :href="codeQualityPagePath" variant="confirm" @click="trackClick()">
{{ $options.i18n.codeQualityBtnText }}
</gl-button>
</template>
</gl-empty-state>
</template>
</gitlab-experiment>
<gitlab-experiment v-else-if="isCiRunnerTemplatesExperimentActive" name="ci_runner_templates">
<template #control><pipelines-ci-templates /></template>
<template #candidate>
<gl-empty-state
:title="$options.i18n.title"
:svg-path="emptyStateSvgPath"
:description="$options.i18n.description"
>
<template #actions>
<gl-button
:href="ciRunnerSettingsPath"
variant="confirm"
@click="trackCiRunnerTemplatesClick('install_runners_button_clicked')"
>
{{ $options.i18n.installRunnersBtnText }}
</gl-button>
<gl-button
:href="ciHelpPagePath"
variant="default"
@click="trackCiRunnerTemplatesClick('learn_button_clicked')"
>
{{ $options.i18n.aboutRunnersBtnText }}
</gl-button>
</template>
</gl-empty-state>
</template>
</gitlab-experiment>
<pipelines-ci-templates v-else-if="canSetCi" />
<gl-empty-state
v-else
title=""
:svg-path="emptyStateSvgPath"
:description="$options.i18n.noCiDescription"
/>
</div>
</template>
|
