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>