diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-20 10:00:54 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-20 10:00:54 +0000 |
commit | 3cccd102ba543e02725d247893729e5c73b38295 (patch) | |
tree | f36a04ec38517f5deaaacb5acc7d949688d1e187 /app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue | |
parent | 205943281328046ef7b4528031b90fbda70c75ac (diff) | |
download | gitlab-ce-3cccd102ba543e02725d247893729e5c73b38295.tar.gz |
Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue | 219 |
1 files changed, 0 insertions, 219 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue deleted file mode 100644 index d50229e47c4..00000000000 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue +++ /dev/null @@ -1,219 +0,0 @@ -<script> -import { GlAvatar, GlButton, GlCard, GlSprintf, GlIcon, GlLink } from '@gitlab/ui'; -import { mergeUrlParams } from '~/lib/utils/url_utility'; -import { sprintf } from '~/locale'; -import { - STARTER_TEMPLATE_NAME, - RUNNERS_AVAILABILITY_SECTION_EXPERIMENT_NAME, - RUNNERS_SETTINGS_LINK_CLICKED_EVENT, - RUNNERS_DOCUMENTATION_LINK_CLICKED_EVENT, - RUNNERS_SETTINGS_BUTTON_CLICKED_EVENT, - I18N, -} from '~/pipeline_editor/constants'; -import { helpPagePath } from '~/helpers/help_page_helper'; -import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue'; -import ExperimentTracking from '~/experimentation/experiment_tracking'; -import { isExperimentVariant } from '~/experimentation/utils'; -import Tracking from '~/tracking'; - -export default { - components: { - GlAvatar, - GlButton, - GlCard, - GlSprintf, - GlIcon, - GlLink, - GitlabExperiment, - }, - mixins: [Tracking.mixin()], - STARTER_TEMPLATE_NAME, - RUNNERS_AVAILABILITY_SECTION_EXPERIMENT_NAME, - RUNNERS_SETTINGS_LINK_CLICKED_EVENT, - RUNNERS_DOCUMENTATION_LINK_CLICKED_EVENT, - RUNNERS_SETTINGS_BUTTON_CLICKED_EVENT, - I18N, - inject: ['pipelineEditorPath', 'suggestedCiTemplates'], - props: { - ciRunnerSettingsPath: { - type: String, - required: false, - default: null, - }, - anyRunnersAvailable: { - type: Boolean, - required: false, - default: true, - }, - }, - 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, - ), - tracker: null, - }; - }, - computed: { - sharedRunnersHelpPagePath() { - return helpPagePath('ci/runners/runners_scope', { anchor: 'shared-runners' }); - }, - runnersAvailabilitySectionExperimentEnabled() { - return isExperimentVariant(RUNNERS_AVAILABILITY_SECTION_EXPERIMENT_NAME); - }, - }, - created() { - this.tracker = new ExperimentTracking(RUNNERS_AVAILABILITY_SECTION_EXPERIMENT_NAME); - }, - methods: { - trackEvent(template) { - this.track('template_clicked', { - label: template, - }); - }, - trackExperimentEvent(action) { - this.tracker.event(action); - }, - }, -}; -</script> -<template> - <div> - <h2 class="gl-font-size-h2 gl-text-gray-900">{{ $options.I18N.title }}</h2> - - <gitlab-experiment :name="$options.RUNNERS_AVAILABILITY_SECTION_EXPERIMENT_NAME"> - <template #candidate> - <div v-if="anyRunnersAvailable"> - <h2 class="gl-font-base gl-text-gray-900"> - <gl-icon name="check-circle-filled" class="gl-text-green-500 gl-mr-2" :size="12" /> - {{ $options.I18N.runners.title }} - </h2> - <p class="gl-text-gray-800 gl-mb-6"> - <gl-sprintf :message="$options.I18N.runners.subtitle"> - <template #settingsLink="{ content }"> - <gl-link - data-testid="settings-link" - :href="ciRunnerSettingsPath" - @click="trackExperimentEvent($options.RUNNERS_SETTINGS_LINK_CLICKED_EVENT)" - >{{ content }}</gl-link - > - </template> - <template #docsLink="{ content }"> - <gl-link - data-testid="documentation-link" - :href="sharedRunnersHelpPagePath" - @click="trackExperimentEvent($options.RUNNERS_DOCUMENTATION_LINK_CLICKED_EVENT)" - >{{ content }}</gl-link - > - </template> - </gl-sprintf> - </p> - </div> - - <div v-else> - <h2 class="gl-font-base gl-text-gray-900"> - <gl-icon name="warning-solid" class="gl-text-red-600 gl-mr-2" :size="14" /> - {{ $options.I18N.noRunners.title }} - </h2> - <p class="gl-text-gray-800 gl-mb-6">{{ $options.I18N.noRunners.subtitle }}</p> - <gl-button - data-testid="settings-button" - category="primary" - variant="confirm" - :href="ciRunnerSettingsPath" - @click="trackExperimentEvent($options.RUNNERS_SETTINGS_BUTTON_CLICKED_EVENT)" - > - {{ $options.I18N.noRunners.cta }} - </gl-button> - </div> - </template> - </gitlab-experiment> - - <template v-if="!runnersAvailabilitySectionExperimentEnabled || anyRunnersAvailable"> - <h2 class="gl-font-lg gl-text-gray-900">{{ $options.I18N.learnBasics.title }}</h2> - <p class="gl-text-gray-800 gl-mb-6"> - <gl-sprintf :message="$options.I18N.learnBasics.subtitle"> - <template #code="{ content }"> - <code>{{ content }}</code> - </template> - </gl-sprintf> - </p> - - <div class="gl-lg-w-25p gl-lg-pr-5 gl-mb-8"> - <gl-card> - <div class="gl-flex-direction-row"> - <div class="gl-py-5"><gl-emoji class="gl-font-size-h2-xl" data-name="wave" /></div> - <div class="gl-mb-3"> - <strong class="gl-text-gray-800 gl-mb-2"> - {{ $options.I18N.learnBasics.gettingStarted.title }} - </strong> - </div> - <p class="gl-font-sm">{{ $options.I18N.learnBasics.gettingStarted.description }}</p> - </div> - - <gl-button - category="primary" - variant="confirm" - :href="gettingStartedTemplateUrl" - data-testid="test-template-link" - @click="trackEvent($options.STARTER_TEMPLATE_NAME)" - > - {{ $options.I18N.learnBasics.gettingStarted.cta }} - </gl-button> - </gl-card> - </div> - - <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="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> - </template> - </div> -</template> |