From e64d4fd36f0d0b3c5be6e5f666af72ebd58a4293 Mon Sep 17 00:00:00 2001
From: Simon Knox <simon@gitlab.com>
Date: Fri, 29 Jun 2018 20:27:15 +0000
Subject: Resolve "Tooltips scroll along the list within Pipeline jobs dropdown
 on MR widget"

---
 .../components/graph/dropdown_job_component.vue    |  1 +
 .../pipelines/components/graph/job_component.vue   | 11 ++++++-
 .../javascripts/pipelines/components/stage.vue     | 37 ++++++++++------------
 3 files changed, 27 insertions(+), 22 deletions(-)

(limited to 'app/assets')

diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
index e047d10ac93..c32dc83da8e 100644
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
@@ -109,6 +109,7 @@ export default {
             :key="i"
           >
             <job-component
+              :dropdown-length="job.size"
               :job="item"
               css-class-job-name="mini-pipeline-graph-dropdown-item"
               @pipelineActionRequestComplete="pipelineActionRequestComplete"
diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue
index 886e62ab1a7..8af984ef91a 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue
@@ -46,6 +46,11 @@ export default {
       required: false,
       default: '',
     },
+    dropdownLength: {
+      type: Number,
+      required: false,
+      default: Infinity,
+    },
   },
   computed: {
     status() {
@@ -70,6 +75,10 @@ export default {
       return textBuilder.join(' ');
     },
 
+    tooltipBoundary() {
+      return this.dropdownLength < 5 ? 'viewport' : null;
+    },
+
     /**
      * Verifies if the provided job has an action path
      *
@@ -94,9 +103,9 @@ export default {
       :href="status.details_path"
       :title="tooltipText"
       :class="cssClassJobName"
+      :data-boundary="tooltipBoundary"
       data-container="body"
       data-html="true"
-      data-boundary="viewport"
       class="js-pipeline-graph-job-link"
     >
 
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index b9231c002fd..56fdb858088 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -186,32 +186,27 @@ export default {
       </i>
     </button>
 
-    <ul
+    <div
       class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container"
       aria-labelledby="stageDropdown"
     >
-
-      <li
+      <loading-icon v-if="isLoading"/>
+      <ul
+        v-else
         class="js-builds-dropdown-list scrollable-menu"
       >
-
-        <loading-icon v-if="isLoading"/>
-
-        <ul
-          v-else
+        <li
+          v-for="job in dropdownContent"
+          :key="job.id"
         >
-          <li
-            v-for="job in dropdownContent"
-            :key="job.id"
-          >
-            <job-component
-              :job="job"
-              css-class-job-name="mini-pipeline-graph-dropdown-item"
-              @pipelineActionRequestComplete="pipelineActionRequestComplete"
-            />
-          </li>
-        </ul>
-      </li>
-    </ul>
+          <job-component
+            :dropdown-length="dropdownContent.length"
+            :job="job"
+            css-class-job-name="mini-pipeline-graph-dropdown-item"
+            @pipelineActionRequestComplete="pipelineActionRequestComplete"
+          />
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
-- 
cgit v1.2.3