1 files changed, 43 insertions, 20 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index 2ca5ac2912f..f0b44dfa6d8 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -1,29 +1,45 @@
 <script>
-import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
-import tooltip from '../../vue_shared/directives/tooltip';
+  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+  import tooltip from '../../vue_shared/directives/tooltip';
+  import popover from '../../vue_shared/directives/popover';
 
-export default {
-  props: {
-    pipeline: {
-      type: Object,
-      required: true,
+  export default {
+    props: {
+      pipeline: {
+        type: Object,
+        required: true,
+      },
+      autoDevopsHelpPath: {
+        type: String,
+        required: true,
+      },
     },
-  },
-  components: {
-    userAvatarLink,
-  },
-  directives: {
-    tooltip,
-  },
-  computed: {
-    user() {
-      return this.pipeline.user;
+    components: {
+      userAvatarLink,
     },
-  },
-};
+    directives: {
+      tooltip,
+      popover,
+    },
+    computed: {
+      user() {
+        return this.pipeline.user;
+      },
+      popoverOptions() {
+        return {
+          html: true,
+          delay: { hide: 600 },
+          trigger: 'hover',
+          placement: 'top',
+          title: '<div class="autodevops-title">This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b></div>',
+          content: `<a class="autodevops-link" href="${this.autoDevopsHelpPath}" target="_blank" rel="noopener noreferrer nofollow">Learn more about Auto DevOps</a>`,
+        };
+      },
+    },
+  };
 </script>
 <template>
-  <div class="table-section section-15 hidden-xs hidden-sm">
+  <div class="table-section section-15 hidden-xs hidden-sm pipeline-tags">
     <a
       :href="pipeline.path"
       class="js-pipeline-url-link">
@@ -57,6 +73,13 @@ export default {
         :title="pipeline.yaml_errors">
         yaml invalid
       </span>
+      <a
+        v-if="pipeline.flags.auto_devops"
+        class="js-pipeline-url-autodevops label label-info autodevops-badge"
+        v-popover="popoverOptions"
+        role="button">
+        Auto DevOps
+      </a>
       <span
         v-if="pipeline.flags.stuck"
         class="js-pipeline-url-stuck label label-warning">