diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue | 76 |
1 files changed, 65 insertions, 11 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue index c3bcfcb18fb..e9773f055a7 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue @@ -1,6 +1,8 @@ <script> -import { GlEmptyState } from '@gitlab/ui'; -import Experiment from '~/experimentation/components/experiment.vue'; +import { GlEmptyState, GlButton } from '@gitlab/ui'; +import { startCodeQualityWalkthrough, track } from '~/code_quality_walkthrough/utils'; +import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue'; +import { getExperimentData } from '~/experimentation/utils'; import { helpPagePath } from '~/helpers/help_page_helper'; import { s__ } from '~/locale'; import PipelinesCiTemplates from './pipelines_ci_templates.vue'; @@ -12,12 +14,18 @@ export default { test, and deploy your code. Let GitLab take care of time consuming tasks, so you can spend more time creating.`), btnText: s__('Pipelines|Get started with CI/CD'), + 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, - Experiment, + GlButton, + GitlabExperiment, PipelinesCiTemplates, }, props: { @@ -29,36 +37,82 @@ export default { type: Boolean, required: true, }, + codeQualityPagePath: { + type: String, + required: false, + default: null, + }, }, computed: { ciHelpPagePath() { return helpPagePath('ci/quick_start/index.md'); }, + isPipelineEmptyStateTemplatesExperimentActive() { + return this.canSetCi && Boolean(getExperimentData('pipeline_empty_state_templates')); + }, + }, + mounted() { + startCodeQualityWalkthrough(); + }, + methods: { + trackClick() { + track('cta_clicked'); + }, }, }; </script> <template> <div> - <experiment name="pipeline_empty_state_templates"> + <gitlab-experiment + v-if="isPipelineEmptyStateTemplatesExperimentActive" + name="pipeline_empty_state_templates" + > <template #control> <gl-empty-state - v-if="canSetCi" :title="$options.i18n.title" :svg-path="emptyStateSvgPath" :description="$options.i18n.description" :primary-button-text="$options.i18n.btnText" :primary-button-link="ciHelpPagePath" /> + </template> + <template #candidate> + <pipelines-ci-templates /> + </template> + </gitlab-experiment> + <gitlab-experiment v-else-if="canSetCi" name="code_quality_walkthrough"> + <template #control> <gl-empty-state - v-else - title="" + :title="$options.i18n.title" :svg-path="emptyStateSvgPath" - :description="$options.i18n.noCiDescription" - /> + :description="$options.i18n.description" + > + <template #actions> + <gl-button :href="ciHelpPagePath" variant="confirm" @click="trackClick()"> + {{ $options.i18n.btnText }} + </gl-button> + </template> + </gl-empty-state> </template> <template #candidate> - <pipelines-ci-templates /> + <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> - </experiment> + </gitlab-experiment> + <gl-empty-state + v-else + title="" + :svg-path="emptyStateSvgPath" + :description="$options.i18n.noCiDescription" + /> </div> </template> |