From 1fb2c1ca4ec6bb8b66a4cd06ea5c8374572c525b Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 1 Sep 2017 10:46:08 +0100
Subject: [PATCH] Adds tooltip for Auto DevOps badge in pipeline table

---
 .../pipelines/components/pipeline_url.vue     | 61 +++++++++++--------
 .../vue_shared/directives/popover.js          | 24 ++++++++
 app/assets/stylesheets/pages/commits.scss     |  2 +-
 app/assets/stylesheets/pages/pipelines.scss   |  9 +++
 .../pipelines/pipeline_url_spec.js            | 21 +++++++
 5 files changed, 92 insertions(+), 25 deletions(-)
 create mode 100644 app/assets/javascripts/vue_shared/directives/popover.js

diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index 3cab411d321..6988417bd39 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -1,26 +1,34 @@
 <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,
+      },
     },
-  },
-  components: {
-    userAvatarLink,
-  },
-  directives: {
-    tooltip,
-  },
-  computed: {
-    user() {
-      return this.pipeline.user;
+    components: {
+      userAvatarLink,
     },
-  },
-};
+    directives: {
+      tooltip,
+      popover,
+    },
+    computed: {
+      user() {
+        return this.pipeline.user;
+      },
+      autoDevOpsTitle() {
+        return '<div class="autodevops-title">This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b></div>';
+      },
+      autoDevOpsContent() {
+        return '<a class="autodevops-link" href="">Learn more about Auto DevOps</a>';
+      },
+    },
+  };
 </script>
 <template>
   <div class="table-section section-15 hidden-xs hidden-sm">
@@ -57,13 +65,18 @@ export default {
         :title="pipeline.yaml_errors">
         yaml invalid
       </span>
-      <span
+      <a
         v-if="pipeline.flags.auto_devops"
-        v-tooltip
-        class="label label-info"
-        title="Pipeline was configured by Auto DevOps">
+        class="js-pipeline-url-autodevops label label-info"
+        v-popover:html
+        tabindex="0"
+        role="button"
+        data-trigger="focus"
+        data-placement="top"
+        :title="autoDevOpsTitle"
+        :data-content="autoDevOpsContent">
         Auto DevOps
-      </span>
+      </a>
       <span
         v-if="pipeline.flags.stuck"
         class="js-pipeline-url-stuck label label-warning">
diff --git a/app/assets/javascripts/vue_shared/directives/popover.js b/app/assets/javascripts/vue_shared/directives/popover.js
new file mode 100644
index 00000000000..ac78231a347
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/directives/popover.js
@@ -0,0 +1,24 @@
+/**
+ * Helper to user bootstrap popover in vue.js.
+ * Follow docs for html attributes: https://getbootstrap.com/docs/3.3/javascript/#static-popover
+ *
+ * @example
+ * import popover from 'vue_shared/directives/popover.js';
+ * {
+ *   directives: [popover]
+ * }
+ * <a v-popover>popover</a>
+ */
+export default {
+  bind(el, binding) {
+    const renderHTML = binding.arg === 'html';
+
+    $(el).popover({
+      html: renderHTML,
+    });
+  },
+
+  unbind(el) {
+    $(el).popover('destroy');
+  },
+};
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index c051d37aad6..525e1d57fee 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -220,7 +220,7 @@
 .commit,
 .generic_commit_status {
 
-  a,
+  a:not(.label):not(.autodevops-link),
   button {
     color: $gl-text-color;
     vertical-align: baseline;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 51656669c98..9071e1ca0c8 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -931,3 +931,12 @@ button.mini-pipeline-graph-dropdown-toggle {
 .pipelines-container .top-area .nav-controls > .btn:last-child {
   float: none;
 }
+
+.autodevops-title {
+  font-weight: $gl-font-weight-normal;
+  line-height: 1.5;
+}
+
+.autodevops-link {
+  color: $gl-link-color;
+}
diff --git a/spec/javascripts/pipelines/pipeline_url_spec.js b/spec/javascripts/pipelines/pipeline_url_spec.js
index 3c4b20a5f06..48b6a7cc7eb 100644
--- a/spec/javascripts/pipelines/pipeline_url_spec.js
+++ b/spec/javascripts/pipelines/pipeline_url_spec.js
@@ -98,4 +98,25 @@ describe('Pipeline Url Component', () => {
     expect(component.$el.querySelector('.js-pipeline-url-yaml').textContent).toContain('yaml invalid');
     expect(component.$el.querySelector('.js-pipeline-url-stuck').textContent).toContain('stuck');
   });
+
+  it('should render a badge for autodevops', () => {
+    const component = new PipelineUrlComponent({
+      propsData: {
+        pipeline: {
+          id: 1,
+          path: 'foo',
+          flags: {
+            latest: true,
+            yaml_errors: true,
+            stuck: true,
+            auto_devops: true,
+          },
+        },
+      },
+    }).$mount();
+
+    expect(
+      component.$el.querySelector('.js-pipeline-url-autodevops').textContent.trim(),
+    ).toEqual('Auto DevOps');
+  });
 });