diff options
Diffstat (limited to 'app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_empty_state.vue')
-rw-r--r-- | app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_empty_state.vue | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_empty_state.vue b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_empty_state.vue new file mode 100644 index 00000000000..f633ba053ee --- /dev/null +++ b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_empty_state.vue @@ -0,0 +1,63 @@ +<script> +import scheduleSvg from '@gitlab/svgs/dist/illustrations/schedule-md.svg'; +import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui'; +import { helpPagePath } from '~/helpers/help_page_helper'; +import { s__ } from '~/locale'; + +export default { + i18n: { + pipelineSchedules: s__('PipelineSchedules|Pipeline schedules'), + description: s__( + 'PipelineSchedules|A scheduled pipeline starts automatically at regular intervals, like daily or weekly. The pipeline: ', + ), + learnMore: s__( + 'PipelineSchedules|Learn more in the %{linkStart}scheduled pipelines documentation.%{linkEnd}', + ), + listElements: [ + s__('PipelineSchedules|Runs for a specific branch or tag.'), + s__('PipelineSchedules|Can have custom CI/CD variables.'), + s__('PipelineSchedules|Runs with the same project permissions as the schedule owner.'), + ], + createNew: s__('PipelineSchedules|Create a new pipeline schedule'), + }, + components: { + GlEmptyState, + GlLink, + GlSprintf, + }, + computed: { + scheduleSvgPath() { + return `data:image/svg+xml;utf8,${encodeURIComponent(scheduleSvg)}`; + }, + schedulesHelpPath() { + return helpPagePath('ci/pipelines/schedules'); + }, + }, +}; +</script> +<template> + <gl-empty-state + :svg-path="scheduleSvgPath" + :primary-button-text="$options.i18n.createNew" + primary-button-link="#" + > + <template #title> + <h3> + {{ $options.i18n.pipelineSchedules }} + </h3> + </template> + <template #description> + <p class="gl-mb-0">{{ $options.i18n.description }}</p> + <ul class="gl-list-style-position-inside" data-testid="pipeline-schedules-characteristics"> + <li v-for="(el, index) in $options.i18n.listElements" :key="index">{{ el }}</li> + </ul> + <p> + <gl-sprintf :message="$options.i18n.learnMore"> + <template #link="{ content }"> + <gl-link :href="schedulesHelpPath" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + </template> + </gl-empty-state> +</template> |