1 files changed, 46 insertions, 8 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 78b69073cd3..ee26ea2f007 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue
@@ -1,7 +1,25 @@
 <script>
 import { GlButton } from '@gitlab/ui';
+import { isExperimentEnabled } from '~/lib/utils/experimentation';
+import { s__ } from '~/locale';
+import Tracking from '~/tracking';
 
 export default {
+  i18n: {
+    control: {
+      infoMessage: s__(`Pipelines|Continuous Integration can help
+        catch bugs by running your tests automatically,
+        while Continuous Deployment can help you deliver
+        code to your product environment.`),
+      buttonMessage: s__('Pipelines|Get started with Pipelines'),
+    },
+    experiment: {
+      infoMessage: 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.`),
+      buttonMessage: s__('Pipelines|Get started with CI/CD'),
+    },
+  },
   name: 'PipelinesEmptyState',
   components: {
     GlButton,
@@ -20,6 +38,23 @@ export default {
       required: true,
     },
   },
+  mounted() {
+    this.track('viewed');
+  },
+  methods: {
+    track(action) {
+      if (!gon.tracking_data) {
+        return;
+      }
+
+      const { category, value, label, property } = gon.tracking_data;
+
+      Tracking.event(category, action, { value, label, property });
+    },
+    isExperimentEnabled() {
+      return isExperimentEnabled('pipelinesEmptyState');
+    },
+  },
 };
 </script>
 <template>
@@ -29,18 +64,16 @@ export default {
     </div>
 
     <div class="col-12">
-      <div class="gl-text-content">
+      <div class="text-content">
         <template v-if="canSetCi">
-          <h4 class="gl-text-center" data-testid="header-text">
+          <h4 data-testid="header-text" class="gl-text-center">
             {{ s__('Pipelines|Build with confidence') }}
           </h4>
-
           <p data-testid="info-text">
             {{
-              s__(`Pipelines|Continuous Integration can help
-                catch bugs by running your tests automatically,
-                while Continuous Deployment can help you deliver
-                code to your product environment.`)
+              isExperimentEnabled()
+                ? $options.i18n.experiment.infoMessage
+                : $options.i18n.control.infoMessage
             }}
           </p>
 
@@ -50,8 +83,13 @@ export default {
               variant="info"
               category="primary"
               data-testid="get-started-pipelines"
+              @click="track('documentation_clicked')"
             >
-              {{ s__('Pipelines|Get started with Pipelines') }}
+              {{
+                isExperimentEnabled()
+                  ? $options.i18n.experiment.buttonMessage
+                  : $options.i18n.control.buttonMessage
+              }}
             </gl-button>
           </div>
         </template>