diff options
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 | 226 |
1 files changed, 150 insertions, 76 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 index 83f6356f31a..d50229e47c4 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue @@ -1,8 +1,19 @@ <script> -import { GlAvatar, GlButton, GlCard, GlSprintf } from '@gitlab/ui'; +import { GlAvatar, GlButton, GlCard, GlSprintf, GlIcon, GlLink } from '@gitlab/ui'; import { mergeUrlParams } from '~/lib/utils/url_utility'; -import { s__, sprintf } from '~/locale'; -import { STARTER_TEMPLATE_NAME } from '~/pipeline_editor/constants'; +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 { @@ -11,39 +22,37 @@ export default { GlButton, GlCard, GlSprintf, + GlIcon, + GlLink, + GitlabExperiment, }, mixins: [Tracking.mixin()], STARTER_TEMPLATE_NAME, - i18n: { - cta: s__('Pipelines|Use template'), - testTemplates: { - title: s__('Pipelines|Use a sample CI/CD template'), - subtitle: s__( - 'Pipelines|Use a sample %{codeStart}.gitlab-ci.yml%{codeEnd} template file to explore how CI/CD works.', - ), - gettingStarted: { - title: s__('Pipelines|Get started with GitLab CI/CD'), - description: s__( - 'Pipelines|Get familiar with GitLab CI/CD syntax by starting with a basic 3 stage CI/CD pipeline.', - ), - }, + 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, }, - templates: { - title: s__('Pipelines|Use a CI/CD template'), - subtitle: s__( - "Pipelines|Use a template based on your project's language or framework to get started with GitLab CI/CD.", - ), - description: s__('Pipelines|CI/CD template to test and deploy your %{name} project.'), + anyRunnersAvailable: { + type: Boolean, + required: false, + default: true, }, }, - 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.templates.description, { name }), + description: sprintf(this.$options.I18N.templates.description, { name }), }; }); @@ -53,39 +62,104 @@ export default { { 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.testTemplates.title }}</h2> - <p class="gl-text-gray-800 gl-mb-6"> - <gl-sprintf :message="$options.i18n.testTemplates.subtitle"> - <template #code="{ content }"> - <code>{{ content }}</code> - </template> - </gl-sprintf> - </p> + <h2 class="gl-font-size-h2 gl-text-gray-900">{{ $options.I18N.title }}</h2> - <div class="row gl-mb-8"> - <div class="col-12"> + <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.testTemplates.gettingStarted.title - }}</strong> + <strong class="gl-text-gray-800 gl-mb-2"> + {{ $options.I18N.learnBasics.gettingStarted.title }} + </strong> </div> - <p class="gl-font-sm">{{ $options.i18n.testTemplates.gettingStarted.description }}</p> + <p class="gl-font-sm">{{ $options.I18N.learnBasics.gettingStarted.description }}</p> </div> <gl-button @@ -95,51 +169,51 @@ export default { data-testid="test-template-link" @click="trackEvent($options.STARTER_TEMPLATE_NAME)" > - {{ $options.i18n.cta }} + {{ $options.I18N.learnBasics.gettingStarted.cta }} </gl-button> </gl-card> </div> - </div> - <h2 class="gl-font-size-h2 gl-text-gray-900">{{ $options.i18n.templates.title }}</h2> - <p class="gl-text-gray-800 gl-mb-6">{{ $options.i18n.templates.subtitle }}</p> + <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="64" - class="gl-mr-6 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> + <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> - <p class="gl-mb-0 gl-font-sm" data-testid="template-description"> - {{ template.description }} - </p> </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> - <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> + </li> + </ul> + </template> </div> </template> |