Merge branch 'zj-auto-devops-table' of gitlab.com:zj/gitlab-ce into zj-auto-devops-table

app/assets/javascripts/pipelines/components/pipeline_url.vue

@@ -25,17 +25,21 @@
       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="${this.autoDevopsHelpPath}" target="_blank" rel="noopener noreferrer nofollow">Learn more about Auto DevOps</a>`;
+      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">
@@ -71,14 +75,9 @@
       </span>
       <a
         v-if="pipeline.flags.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">
+        class="js-pipeline-url-autodevops label label-info autodevops-badge"
+        v-popover="popoverOptions"
+        role="button">
         Auto DevOps
       </a>
       <span

app/assets/javascripts/pipelines/components/pipelines.vue

@@ -27,7 +27,7 @@
         endpoint: pipelinesData.endpoint,
         cssClass: pipelinesData.cssClass,
         helpPagePath: pipelinesData.helpPagePath,
-        autoDevopsPath: pipelinesData.helpautoDevopsPath,
+        autoDevopsPath: pipelinesData.helpAutoDevopsPath,
         newPipelinePath: pipelinesData.newPipelinePath,
         canCreatePipeline: pipelinesData.canCreatePipeline,
         allPath: pipelinesData.allPath,

app/assets/javascripts/vue_shared/directives/popover.js

@@ -7,15 +7,11 @@
  * {
  *   directives: [popover]
  * }
- * <a v-popover>popover</a>
+ * <a v-popover="{options}">popover</a>
  */
 export default {
   bind(el, binding) {
-    const renderHTML = binding.arg === 'html';
-
-    $(el).popover({
-      html: renderHTML,
-    });
+    $(el).popover(binding.value);
   },
 
   unbind(el) {

app/assets/stylesheets/pages/commits.scss

@@ -220,12 +220,20 @@
 .commit,
 .generic_commit_status {
 
-  a:not(.label):not(.autodevops-link),
+  a,
   button {
     color: $gl-text-color;
     vertical-align: baseline;
   }
 
+  a.autodevops-badge {
+    color: $white-light;
+  }
+
+  a.autodevops-link {
+    color: $gl-link-color;
+  }
+
   .commit-row-description {
     font-size: 14px;
     padding: 10px 15px;

app/assets/stylesheets/pages/pipelines.scss

@@ -202,6 +202,10 @@
   .btn-group.open .dropdown-toggle {
     box-shadow: none;
   }
+
+  .pipeline-tags .label-container {
+    white-space: normal;
+  }
 }
 
 .stage-cell {
@@ -935,7 +939,3 @@ button.mini-pipeline-graph-dropdown-toggle {
   font-weight: $gl-font-weight-normal;
   line-height: 1.5;
 }
-
-.autodevops-link {
-  color: $gl-link-color;
-}