diff options
Diffstat (limited to 'app/assets/javascripts/ci/pipelines_page/components/empty_state/pipelines_ci_templates.vue')
-rw-r--r-- | app/assets/javascripts/ci/pipelines_page/components/empty_state/pipelines_ci_templates.vue | 97 |
1 files changed, 71 insertions, 26 deletions
diff --git a/app/assets/javascripts/ci/pipelines_page/components/empty_state/pipelines_ci_templates.vue b/app/assets/javascripts/ci/pipelines_page/components/empty_state/pipelines_ci_templates.vue index a6297213402..c9631d8f36b 100644 --- a/app/assets/javascripts/ci/pipelines_page/components/empty_state/pipelines_ci_templates.vue +++ b/app/assets/javascripts/ci/pipelines_page/components/empty_state/pipelines_ci_templates.vue @@ -1,7 +1,12 @@ <script> import { GlButton, GlCard, GlSprintf } from '@gitlab/ui'; import { mergeUrlParams } from '~/lib/utils/url_utility'; -import { STARTER_TEMPLATE_NAME, I18N } from '~/ci/pipeline_editor/constants'; +import { + STARTER_TEMPLATE_NAME, + I18N, + MIGRATION_PLAN_HELP_PATH, + MIGRATE_FROM_JENKINS_TRACKING_LABEL, +} from '~/ci/pipeline_editor/constants'; import Tracking from '~/tracking'; import CiTemplates from './ci_templates.vue'; @@ -15,7 +20,7 @@ export default { mixins: [Tracking.mixin()], STARTER_TEMPLATE_NAME, I18N, - inject: ['pipelineEditorPath'], + inject: ['pipelineEditorPath', 'showJenkinsCiPrompt'], data() { return { gettingStartedTemplateUrl: mergeUrlParams( @@ -23,17 +28,23 @@ export default { this.pipelineEditorPath, ), tracker: null, + migrationPlanUrl: MIGRATION_PLAN_HELP_PATH, + migrationPromptTrackingLabel: MIGRATE_FROM_JENKINS_TRACKING_LABEL, }; }, + mounted() { + if (this.showJenkinsCiPrompt) { + this.trackEvent('render', this.migrationPromptTrackingLabel); + } + }, methods: { - trackEvent(template) { - this.track('template_clicked', { - label: template, - }); + trackEvent(action, label) { + this.track(action, { label }); }, }, }; </script> + <template> <div> <h2 class="gl-font-size-h2 gl-text-gray-900">{{ $options.I18N.title }}</h2> @@ -47,28 +58,62 @@ export default { </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 class="gl-display-flex gl-flex-direction-row gl-flex-wrap"> + <div + v-if="showJenkinsCiPrompt" + class="gl-lg-w-25p gl-md-w-half gl-w-full gl-md-pr-5 gl-pb-8" + data-testid="migrate-from-jenkins-prompt" + > + <gl-card class="gl-bg-blue-50"> + <div class="gl-flex-direction-row"> + <div class="gl-py-5"><gl-emoji class="gl-font-size-h2-xl" data-name="rocket" /></div> + <div class="gl-mb-3"> + <strong class="gl-text-gray-800 gl-mb-2">{{ + $options.I18N.learnBasics.migrateFromJenkins.title + }}</strong> + </div> + <p class="gl-font-sm gl-h-13"> + {{ $options.I18N.learnBasics.migrateFromJenkins.description }} + </p> + </div> + + <gl-button + category="primary" + variant="confirm" + :href="migrationPlanUrl" + target="_blank" + @click="trackEvent('template_clicked', migrationPromptTrackingLabel)" + > + {{ $options.I18N.learnBasics.migrateFromJenkins.cta }} + </gl-button> + </gl-card> + </div> + + <div class="gl-lg-w-25p gl-md-w-half gl-w-full gl-pb-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 gl-h-13"> + {{ $options.I18N.learnBasics.gettingStarted.description }} + </p> </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> + <gl-button + category="primary" + variant="confirm" + :href="gettingStartedTemplateUrl" + data-testid="test-template-link" + @click="trackEvent('template_clicked', $options.STARTER_TEMPLATE_NAME)" + > + {{ $options.I18N.learnBasics.gettingStarted.cta }} + </gl-button> + </gl-card> + </div> </div> <h2 class="gl-font-lg gl-text-gray-900">{{ $options.I18N.templates.title }}</h2> |