diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-13 21:08:33 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-13 21:08:33 +0300 |
commit | 953eb09e086c8f2842512a62e56e32223b5bf974 (patch) | |
tree | 3915a57e930263b7c31a1b5e819db50f7d3a609f /app/assets/javascripts/pipelines | |
parent | 907fd5d94ecec19ff7de4986e83e75e6fa082558 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/pipelines')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue | 2 | ||||
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ci_templates.vue | 81 | ||||
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipelines_list/empty_state/pipelines_ci_templates.vue (renamed from app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue) | 62 |
3 files changed, 89 insertions, 56 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 0380ba646cc..5a9c85a0f10 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue @@ -1,7 +1,7 @@ <script> import { GlEmptyState } from '@gitlab/ui'; import { s__ } from '~/locale'; -import PipelinesCiTemplates from './pipelines_ci_templates.vue'; +import PipelinesCiTemplates from './empty_state/pipelines_ci_templates.vue'; export default { i18n: { diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ci_templates.vue b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ci_templates.vue new file mode 100644 index 00000000000..3b312e78d11 --- /dev/null +++ b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ci_templates.vue @@ -0,0 +1,81 @@ +<script> +import { GlAvatar, GlButton } from '@gitlab/ui'; +import { s__, sprintf } from '~/locale'; +import { mergeUrlParams } from '~/lib/utils/url_utility'; +import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants'; +import Tracking from '~/tracking'; + +export default { + components: { + GlAvatar, + GlButton, + }, + mixins: [Tracking.mixin()], + inject: ['pipelineEditorPath', 'suggestedCiTemplates'], + data() { + const templates = this.suggestedCiTemplates.map(({ name, logo }) => { + return { + name, + logo, + link: mergeUrlParams({ template: name }, this.pipelineEditorPath), + description: sprintf(this.$options.i18n.description, { name }), + }; + }); + + return { + templates, + }; + }, + methods: { + trackEvent(template) { + this.track('template_clicked', { + label: template, + }); + }, + }, + i18n: { + description: s__('Pipelines|CI/CD template to test and deploy your %{name} project.'), + cta: s__('Pipelines|Use template'), + }, + AVATAR_SHAPE_OPTION_RECT, +}; +</script> +<template> + <ul class="gl-list-style-none gl-pl-0"> + <li v-for="template in templates" :key="template.name"> + <div + class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-pb-3 gl-pt-3" + > + <div class="gl-display-flex gl-flex-direction-row gl-align-items-center"> + <gl-avatar + :src="template.logo" + :size="48" + class="gl-mr-5 gl-bg-white dark-mode-override" + :shape="$options.AVATAR_SHAPE_OPTION_RECT" + :alt="template.name" + data-testid="template-logo" + /> + <div class="gl-flex-direction-row"> + <div class="gl-mb-3"> + <strong class="gl-text-gray-800" data-testid="template-name"> + {{ template.name }} + </strong> + </div> + <p class="gl-mb-0 gl-font-sm" data-testid="template-description"> + {{ template.description }} + </p> + </div> + </div> + <gl-button + category="primary" + variant="confirm" + :href="template.link" + data-testid="template-link" + @click="trackEvent(template.name)" + > + {{ $options.i18n.cta }} + </gl-button> + </div> + </li> + </ul> +</template> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/pipelines_ci_templates.vue index 9dc6ae317ea..be46a7f5cec 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/pipelines_ci_templates.vue @@ -1,8 +1,6 @@ <script> -import { GlAvatar, GlButton, GlCard, GlSprintf, GlIcon, GlLink } from '@gitlab/ui'; +import { GlButton, GlCard, GlSprintf, GlIcon, GlLink } from '@gitlab/ui'; import { mergeUrlParams } from '~/lib/utils/url_utility'; -import { sprintf } from '~/locale'; -import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants'; import { STARTER_TEMPLATE_NAME, RUNNERS_AVAILABILITY_SECTION_EXPERIMENT_NAME, @@ -11,21 +9,22 @@ import { RUNNERS_SETTINGS_BUTTON_CLICKED_EVENT, I18N, } from '~/pipeline_editor/constants'; +import Tracking from '~/tracking'; import { helpPagePath } from '~/helpers/help_page_helper'; +import { isExperimentVariant } from '~/experimentation/utils'; import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue'; import ExperimentTracking from '~/experimentation/experiment_tracking'; -import { isExperimentVariant } from '~/experimentation/utils'; -import Tracking from '~/tracking'; +import CiTemplates from './ci_templates.vue'; export default { components: { - GlAvatar, GlButton, GlCard, GlSprintf, GlIcon, GlLink, GitlabExperiment, + CiTemplates, }, mixins: [Tracking.mixin()], STARTER_TEMPLATE_NAME, @@ -34,8 +33,7 @@ export default { RUNNERS_DOCUMENTATION_LINK_CLICKED_EVENT, RUNNERS_SETTINGS_BUTTON_CLICKED_EVENT, I18N, - AVATAR_SHAPE_OPTION_RECT, - inject: ['pipelineEditorPath', 'suggestedCiTemplates'], + inject: ['pipelineEditorPath'], props: { ciRunnerSettingsPath: { type: String, @@ -49,17 +47,7 @@ export default { }, }, data() { - const templates = this.suggestedCiTemplates.map(({ name, logo }) => { - return { - name, - logo, - link: mergeUrlParams({ template: name }, this.pipelineEditorPath), - description: sprintf(this.$options.I18N.templates.description, { name }), - }; - }); - return { - templates, gettingStartedTemplateUrl: mergeUrlParams( { template: STARTER_TEMPLATE_NAME }, this.pipelineEditorPath, @@ -179,43 +167,7 @@ export default { <h2 class="gl-font-lg gl-text-gray-900">{{ $options.I18N.templates.title }}</h2> <p class="gl-text-gray-800 gl-mb-6">{{ $options.I18N.templates.subtitle }}</p> - <ul class="gl-list-style-none gl-pl-0"> - <li v-for="template in templates" :key="template.name"> - <div - class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-pb-3 gl-pt-3" - > - <div class="gl-display-flex gl-flex-direction-row gl-align-items-center"> - <gl-avatar - :src="template.logo" - :size="48" - class="gl-mr-5 gl-bg-white dark-mode-override" - :shape="$options.AVATAR_SHAPE_OPTION_RECT" - :alt="template.name" - data-testid="template-logo" - /> - <div class="gl-flex-direction-row"> - <div class="gl-mb-3"> - <strong class="gl-text-gray-800" data-testid="template-name"> - {{ template.name }} - </strong> - </div> - <p class="gl-mb-0 gl-font-sm" data-testid="template-description"> - {{ template.description }} - </p> - </div> - </div> - <gl-button - category="primary" - variant="confirm" - :href="template.link" - data-testid="template-link" - @click="trackEvent(template.name)" - > - {{ $options.I18N.templates.cta }} - </gl-button> - </div> - </li> - </ul> + <ci-templates /> </template> </div> </template> |