diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-23 12:10:20 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-23 12:10:20 +0300 |
commit | b563a5209a13da8da32688a5d503a7c0e2bc3ec3 (patch) | |
tree | 67114fae70174dff02f5c95089fca0d0e0b7d4d4 /app/assets/javascripts/ide | |
parent | 22622fab4a943df0988c86d175f28bb004ff8663 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/ide')
-rw-r--r-- | app/assets/javascripts/ide/components/pipelines/empty_state.vue | 35 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/pipelines/list.vue | 28 |
2 files changed, 52 insertions, 11 deletions
diff --git a/app/assets/javascripts/ide/components/pipelines/empty_state.vue b/app/assets/javascripts/ide/components/pipelines/empty_state.vue new file mode 100644 index 00000000000..194deb2ece0 --- /dev/null +++ b/app/assets/javascripts/ide/components/pipelines/empty_state.vue @@ -0,0 +1,35 @@ +<script> +import { GlEmptyState } from '@gitlab/ui'; +import { mapState } from 'vuex'; +import { s__ } from '~/locale'; +import { helpPagePath } from '~/helpers/help_page_helper'; + +export default { + components: { + GlEmptyState, + }, + computed: { + ...mapState(['pipelinesEmptyStateSvgPath']), + ciHelpPagePath() { + return helpPagePath('ci/quick_start/index.md'); + }, + }, + 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.`), + primaryButtonText: s__('Pipelines|Get started with GitLab CI/CD'), + }, +}; +</script> + +<template> + <gl-empty-state + :title="$options.i18n.title" + :svg-path="pipelinesEmptyStateSvgPath" + :description="$options.i18n.description" + :primary-button-text="$options.i18n.primaryButtonText" + :primary-button-link="ciHelpPagePath" + /> +</template> diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue index e1caf1ba44a..7f513afe82e 100644 --- a/app/assets/javascripts/ide/components/pipelines/list.vue +++ b/app/assets/javascripts/ide/components/pipelines/list.vue @@ -11,10 +11,17 @@ import { import { escape } from 'lodash'; import { mapActions, mapGetters, mapState } from 'vuex'; import IDEServices from '~/ide/services'; -import { sprintf, __ } from '../../../locale'; -import EmptyState from '../../../pipelines/components/pipelines_list/empty_state.vue'; -import CiIcon from '../../../vue_shared/components/ci_icon.vue'; +import { sprintf, __ } from '~/locale'; +import CiIcon from '~/vue_shared/components/ci_icon.vue'; import JobsList from '../jobs/list.vue'; +import EmptyState from './empty_state.vue'; + +const CLASSES_FLEX_VERTICAL_CENTER = [ + 'gl-h-full', + 'gl-display-flex', + 'gl-flex-direction-column', + 'gl-justify-content-center', +]; export default { components: { @@ -32,7 +39,6 @@ export default { SafeHtml, }, computed: { - ...mapState(['pipelinesEmptyStateSvgPath']), ...mapGetters(['currentProject']), ...mapGetters('pipelines', ['jobsCount', 'failedJobsCount', 'failedStages', 'pipelineFailed']), ...mapState('pipelines', [ @@ -63,12 +69,15 @@ export default { methods: { ...mapActions('pipelines', ['fetchLatestPipeline']), }, + CLASSES_FLEX_VERTICAL_CENTER, }; </script> <template> <div class="ide-pipeline"> - <gl-loading-icon v-if="showLoadingIcon" size="lg" class="gl-mt-3" /> + <div v-if="showLoadingIcon" :class="$options.CLASSES_FLEX_VERTICAL_CENTER"> + <gl-loading-icon size="lg" /> + </div> <template v-else-if="hasLoadedPipeline"> <header v-if="latestPipeline" class="ide-tree-header ide-pipeline-header"> <ci-icon :status="latestPipeline.details.status" :size="24" class="d-flex" /> @@ -83,12 +92,9 @@ export default { </a> </span> </header> - <empty-state - v-if="!latestPipeline" - :empty-state-svg-path="pipelinesEmptyStateSvgPath" - :can-set-ci="true" - class="gl-p-5" - /> + <div v-if="!latestPipeline" :class="$options.CLASSES_FLEX_VERTICAL_CENTER"> + <empty-state /> + </div> <gl-alert v-else-if="latestPipeline.yamlError" variant="danger" |