Simplifies the HTML strucutre in the mini pipeline graph to make it as similar as the one in haml as possible

3 files changed, 16 insertions, 31 deletions

diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
index 23e70197432..3133a3896f2 100644
--- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
@@ -47,46 +47,30 @@
         const stageIcon = icon.replace(/icon/i, 'stage_icon');
         return this.svgs[this.match(stageIcon)];
       },
-      spanClass() {
-        return `ci-status-icon ci-status-icon-${this.stage.status.group}`;
+      triggerButtonClass() {
+        return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`;
       },
     },
     template: `
-      <div class="dropdown inline build-content">
-
+      <div>
         <button
           @click='fetchBuilds'
           @blur='fetchBuilds'
-          class="has-tooltip builds-dropdown js-builds-dropdown-button"
-          data-placement="top"
+          :class="triggerButtonClass"
           :title='stage.title'
+          data-placement="top"
           data-toggle="dropdown"
-          type="button"
-        >
-          <span :class='tooltip'>
-            <span class="mini-pipeline-graph-icon-container">
-              <span
-                :class='spanClass'
-                v-html='svg'
-              >
-              </span>
-              <i class="fa fa-caret-down dropdown-caret"></i>
-              </span>
-            </span>
-          </span>
-        </button>
+          type="button">
+
+          <span v-html="svg"></span>
+          <i class="fa fa-caret-down "></i>
 
-        <div class="js-builds-dropdown-container">
-          <div class="dropdown-menu grouped-pipeline-dropdown">
-            <div class="arrow-up"></div>
-            <div
-              :class='dropdownClass'
-              v-html='buildsOrSpinner'
-            >
-            </div>
-          </div>
-        </div>
+        </button>
 
+        <ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">
+          <div class="arrow-up"></div>
+          <div :class="dropdownClass" class="js-builds-dropdown-list scrollable-menu" v-html="buildsOrSpinner"></div>
+        </ul>
       </div>
     `,
   });
diff --git a/app/assets/javascripts/vue_pipelines_index/stages.js.es6 b/app/assets/javascripts/vue_pipelines_index/stages.js.es6
index a3b2700adfa..cb176b3f0c6 100644
--- a/app/assets/javascripts/vue_pipelines_index/stages.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/stages.js.es6
@@ -10,7 +10,7 @@
     template: `
       <td class="stage-cell">
         <div
-          class="stage-container mini-pipeline-graph"
+          class="stage-container dropdown js-mini-pipeline-graph"
           v-for='stage in pipeline.details.stages'
         >
           <vue-stage :stage='stage' :svgs='svgs' :match='match'></vue-stage>
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 8f615905853..8861315d776 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -186,6 +186,7 @@
   .stage-cell {
     font-size: 0;
 
+    > .stage-container > div > button > span > svg,
     > .stage-container > button > svg {
       height: 22px;
       width: 22px;