1 files changed, 73 insertions, 4 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue
index e9773f055a7..104a3caab4c 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue
@@ -2,6 +2,7 @@
 import { GlEmptyState, GlButton } from '@gitlab/ui';
 import { startCodeQualityWalkthrough, track } from '~/code_quality_walkthrough/utils';
 import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue';
+import ExperimentTracking from '~/experimentation/experiment_tracking';
 import { getExperimentData } from '~/experimentation/utils';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
@@ -13,7 +14,9 @@ export default {
     description: s__(`Pipelines|GitLab CI/CD can automatically build,
       test, and deploy your code. Let GitLab take care of time
       consuming tasks, so you can spend more time creating.`),
-    btnText: s__('Pipelines|Get started with CI/CD'),
+    aboutRunnersBtnText: s__('Pipelines|Learn about Runners'),
+    installRunnersBtnText: s__('Pipelines|Install GitLab Runners'),
+    getStartedBtnText: s__('Pipelines|Get started with CI/CD'),
     codeQualityTitle: s__('Pipelines|Improve code quality with GitLab CI/CD'),
     codeQualityDescription: s__(`Pipelines|To keep your codebase simple,
       readable, and accessible to contributors, use GitLab CI/CD
@@ -42,6 +45,11 @@ export default {
       required: false,
       default: null,
     },
+    ciRunnerSettingsPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     ciHelpPagePath() {
@@ -50,6 +58,12 @@ export default {
     isPipelineEmptyStateTemplatesExperimentActive() {
       return this.canSetCi && Boolean(getExperimentData('pipeline_empty_state_templates'));
     },
+    isCodeQualityExperimentActive() {
+      return this.canSetCi && Boolean(getExperimentData('code_quality_walkthrough'));
+    },
+    isCiRunnerTemplatesExperimentActive() {
+      return this.canSetCi && Boolean(getExperimentData('ci_runner_templates'));
+    },
   },
   mounted() {
     startCodeQualityWalkthrough();
@@ -58,6 +72,10 @@ export default {
     trackClick() {
       track('cta_clicked');
     },
+    trackCiRunnerTemplatesClick(action) {
+      const tracking = new ExperimentTracking('ci_runner_templates');
+      tracking.event(action);
+    },
   },
 };
 </script>
@@ -72,7 +90,7 @@ export default {
           :title="$options.i18n.title"
           :svg-path="emptyStateSvgPath"
           :description="$options.i18n.description"
-          :primary-button-text="$options.i18n.btnText"
+          :primary-button-text="$options.i18n.getStartedBtnText"
           :primary-button-link="ciHelpPagePath"
         />
       </template>
@@ -80,7 +98,7 @@ export default {
         <pipelines-ci-templates />
       </template>
     </gitlab-experiment>
-    <gitlab-experiment v-else-if="canSetCi" name="code_quality_walkthrough">
+    <gitlab-experiment v-else-if="isCodeQualityExperimentActive" name="code_quality_walkthrough">
       <template #control>
         <gl-empty-state
           :title="$options.i18n.title"
@@ -89,7 +107,7 @@ export default {
         >
           <template #actions>
             <gl-button :href="ciHelpPagePath" variant="confirm" @click="trackClick()">
-              {{ $options.i18n.btnText }}
+              {{ $options.i18n.getStartedBtnText }}
             </gl-button>
           </template>
         </gl-empty-state>
@@ -108,6 +126,57 @@ export default {
         </gl-empty-state>
       </template>
     </gitlab-experiment>
+    <gitlab-experiment v-else-if="isCiRunnerTemplatesExperimentActive" name="ci_runner_templates">
+      <template #control>
+        <gl-empty-state
+          :title="$options.i18n.title"
+          :svg-path="emptyStateSvgPath"
+          :description="$options.i18n.description"
+        >
+          <template #actions>
+            <gl-button
+              :href="ciHelpPagePath"
+              variant="confirm"
+              @click="trackCiRunnerTemplatesClick('get_started_button_clicked')"
+            >
+              {{ $options.i18n.getStartedBtnText }}
+            </gl-button>
+          </template>
+        </gl-empty-state>
+      </template>
+      <template #candidate>
+        <gl-empty-state
+          :title="$options.i18n.title"
+          :svg-path="emptyStateSvgPath"
+          :description="$options.i18n.description"
+        >
+          <template #actions>
+            <gl-button
+              :href="ciRunnerSettingsPath"
+              variant="confirm"
+              @click="trackCiRunnerTemplatesClick('install_runners_button_clicked')"
+            >
+              {{ $options.i18n.installRunnersBtnText }}
+            </gl-button>
+            <gl-button
+              :href="ciHelpPagePath"
+              variant="default"
+              @click="trackCiRunnerTemplatesClick('learn_button_clicked')"
+            >
+              {{ $options.i18n.aboutRunnersBtnText }}
+            </gl-button>
+          </template>
+        </gl-empty-state>
+      </template>
+    </gitlab-experiment>
+    <gl-empty-state
+      v-else-if="canSetCi"
+      :title="$options.i18n.title"
+      :svg-path="emptyStateSvgPath"
+      :description="$options.i18n.description"
+      :primary-button-text="$options.i18n.getStartedBtnText"
+      :primary-button-link="ciHelpPagePath"
+    />
     <gl-empty-state
       v-else
       title=""