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 | 71 |
1 files changed, 29 insertions, 42 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 8a656bb47f4..f8107d288d9 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue @@ -1,23 +1,22 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlEmptyState } from '@gitlab/ui'; +import { helpPagePath } from '~/helpers/help_page_helper'; import { s__ } from '~/locale'; export default { i18n: { - infoMessage: 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.`), - buttonMessage: s__('Pipelines|Get started with CI/CD'), + 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.`), + btnText: s__('Pipelines|Get started with CI/CD'), + noCiDescription: s__('Pipelines|This project is not currently set up to run pipelines.'), }, name: 'PipelinesEmptyState', components: { - GlButton, + GlEmptyState, }, props: { - helpPagePath: { - type: String, - required: true, - }, emptyStateSvgPath: { type: String, required: true, @@ -27,40 +26,28 @@ export default { required: true, }, }, + computed: { + ciHelpPagePath() { + return helpPagePath('ci/quick_start/index.md'); + }, + }, }; </script> <template> - <div class="row empty-state js-empty-state"> - <div class="col-12"> - <div class="svg-content svg-250"><img :src="emptyStateSvgPath" /></div> - </div> - - <div class="col-12"> - <div class="text-content"> - <template v-if="canSetCi"> - <h4 data-testid="header-text" class="gl-text-center"> - {{ s__('Pipelines|Build with confidence') }} - </h4> - <p data-testid="info-text"> - {{ $options.i18n.infoMessage }} - </p> - - <div class="gl-text-center"> - <gl-button - :href="helpPagePath" - variant="info" - category="primary" - data-testid="get-started-pipelines" - > - {{ $options.i18n.buttonMessage }} - </gl-button> - </div> - </template> - - <p v-else class="gl-text-center"> - {{ s__('Pipelines|This project is not currently set up to run pipelines.') }} - </p> - </div> - </div> + <div> + <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" + /> + <gl-empty-state + v-else + title="" + :svg-path="emptyStateSvgPath" + :description="$options.i18n.noCiDescription" + /> </div> </template> |