Add latest changes from gitlab-org/gitlab@master

1 files changed, 49 insertions, 19 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue
index f08bfb3a90f..9942861d9e4 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue
@@ -1,45 +1,75 @@
 <script>
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import MrWidgetIcon from './mr_widget_icon.vue';
+import PipelineTourState from './states/mr_widget_pipeline_tour.vue';
 
 export default {
   name: 'MRWidgetSuggestPipeline',
   iconName: 'status_notfound',
+  popoverTarget: 'suggest-popover',
+  popoverContainer: 'suggest-pipeline',
+  trackLabel: 'no_pipeline_noticed',
+  linkTrackValue: 30,
+  linkTrackEvent: 'click_link',
   components: {
     GlLink,
     GlSprintf,
     MrWidgetIcon,
+    PipelineTourState,
   },
   props: {
     pipelinePath: {
       type: String,
       required: true,
     },
+    pipelineSvgPath: {
+      type: String,
+      required: true,
+    },
+    humanAccess: {
+      type: String,
+      required: true,
+    },
   },
 };
 </script>
 <template>
-  <div class="d-flex mr-pipeline-suggest append-bottom-default">
+  <div :id="$options.popoverContainer" class="d-flex mr-pipeline-suggest append-bottom-default">
     <mr-widget-icon :name="$options.iconName" />
-    <gl-sprintf
-      class="js-no-pipeline-message"
-      :message="
-        s__(`mrWidget|%{prefixToLinkStart}No pipeline%{prefixToLinkEnd}
+    <div :id="$options.popoverTarget">
+      <gl-sprintf
+        :message="
+          s__(`mrWidget|%{prefixToLinkStart}No pipeline%{prefixToLinkEnd}
           %{addPipelineLinkStart}Add the .gitlab-ci.yml file%{addPipelineLinkEnd}
           to create one.`)
-      "
-    >
-      <template #prefixToLink="{content}">
-        <strong>
-          {{ content }}
-        </strong>
-      </template>
-      <template #addPipelineLink="{content}">
-        <gl-link :href="pipelinePath" class="ml-2">
-          {{ content }}
-        </gl-link>
-        &nbsp;
-      </template>
-    </gl-sprintf>
+        "
+      >
+        <template #prefixToLink="{content}">
+          <strong>
+            {{ content }}
+          </strong>
+        </template>
+        <template #addPipelineLink="{content}">
+          <gl-link
+            :href="pipelinePath"
+            class="ml-2 js-add-pipeline-path"
+            :data-track-property="humanAccess"
+            :data-track-value="$options.linkTrackValue"
+            :data-track-event="$options.linkTrackEvent"
+            :data-track-label="$options.trackLabel"
+          >
+            {{ content }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
+      <pipeline-tour-state
+        :pipeline-path="pipelinePath"
+        :pipeline-svg-path="pipelineSvgPath"
+        :human-access="humanAccess"
+        :popover-target="$options.popoverTarget"
+        :popover-container="$options.popoverContainer"
+        :track-label="$options.trackLabel"
+      />
+    </div>
   </div>
 </template>