diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-09-20 14:18:08 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-09-20 14:18:08 +0300 |
commit | 5afcbe03ead9ada87621888a31a62652b10a7e4f (patch) | |
tree | 9918b67a0d0f0bafa6542e839a8be37adf73102d /app/assets/javascripts/ci/pipelines_page/components/empty_state/ci_templates.vue | |
parent | c97c0201564848c1f53226fe19d71fdcc472f7d0 (diff) |
Add latest changes from gitlab-org/gitlab@16-4-stable-eev16.4.0-rc42
Diffstat (limited to 'app/assets/javascripts/ci/pipelines_page/components/empty_state/ci_templates.vue')
-rw-r--r-- | app/assets/javascripts/ci/pipelines_page/components/empty_state/ci_templates.vue | 106 |
1 files changed, 106 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/pipelines_page/components/empty_state/ci_templates.vue b/app/assets/javascripts/ci/pipelines_page/components/empty_state/ci_templates.vue new file mode 100644 index 00000000000..439dc0eb253 --- /dev/null +++ b/app/assets/javascripts/ci/pipelines_page/components/empty_state/ci_templates.vue @@ -0,0 +1,106 @@ +<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'], + props: { + disabled: { + type: Boolean, + required: false, + default: false, + }, + filterTemplates: { + type: Array, + required: false, + default: () => [], + }, + }, + data() { + const templates = this.suggestedCiTemplates + .filter( + (template) => !this.filterTemplates.length || this.filterTemplates.includes(template.name), + ) + .map(({ name, logo, title }) => { + return { + name: title || name, + description: sprintf(this.$options.i18n.description, { name: title || name }), + isPng: logo.endsWith('png'), + logo, + link: mergeUrlParams({ template: name }, this.pipelineEditorPath), + }; + }); + + return { + templates, + }; + }, + methods: { + trackEvent(template) { + this.track('template_clicked', { + label: template, + }); + }, + logoStyle(template) { + return template.isPng ? { objectFit: 'contain' } : ''; + }, + }, + i18n: { + description: s__( + 'Pipelines|Continuous integration and deployment 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 + :alt="template.name" + class="gl-mr-5 gl-bg-white dark-mode-override" + :class="{ 'gl-p-2': template.isPng }" + :style="logoStyle(template)" + :shape="$options.AVATAR_SHAPE_OPTION_RECT" + :size="48" + :src="template.logo" + 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 + :disabled="disabled" + category="primary" + variant="confirm" + :href="template.link" + data-testid="template-link" + @click="trackEvent(template.name)" + > + {{ $options.i18n.cta }} + </gl-button> + </div> + </li> + </ul> +</template> |