Renders json endpoint + updates CSS to render the same between pipelines table and pipeline graph

app/assets/javascripts/mini_pipeline_graph_dropdown.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-new */
-
 import $ from 'jquery';
 import flash from './flash';
 import axios from './lib/utils/axios_utils';
@@ -62,7 +60,7 @@ export default class MiniPipelineGraph {
    */
   renderBuildsList(stageContainer, data) {
     const dropdownContainer = stageContainer.parentElement.querySelector(
-      `${this.dropdownListSelector} .js-builds-dropdown-list`,
+      `${this.dropdownListSelector} .js-builds-dropdown-list ul`,
     );
 
     dropdownContainer.innerHTML = data;

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

@@ -95,6 +95,7 @@
         axios
           .get(this.stage.dropdown_path)
           .then(({ data }) => {
+            // TODO: REMOVE THIS ONCE WE HAVE BACKEND
             this.dropdownContent = [
               {
                 id: 966,

app/assets/stylesheets/framework/variables.scss

@@ -686,6 +686,8 @@ $stage-hover-bg: $gray-darker;
 $ci-action-icon-size: 22px;
 $pipeline-dropdown-line-height: 20px;
 $pipeline-dropdown-status-icon-size: 18px;
+$ci-action-dropdown-button-size: 24px;
+$ci-action-dropdown-svg-size: 12px;
 
 /*
 CI variable lists

app/assets/stylesheets/pages/pipelines.scss

@@ -462,12 +462,6 @@
     text-overflow: ellipsis;
   }
 
-  .build {
-    position: relative;
-    width: 186px;
-    margin-bottom: 10px;
-    white-space: normal;
-
   .ci-job-dropdown-container {
     // override dropdown.scss
     .dropdown-menu li button {
@@ -476,11 +470,6 @@
     }
   }
 
-    // ensure .build-content has hover style when action-icon is hovered
-    .ci-job-dropdown-container:hover .build-content {
-      @extend .build-content:hover;
-    }
-
   .ci-action-icon-container {
     position: absolute;
     right: 5px;
@@ -518,6 +507,17 @@
     }
  }
 
+  .build {
+    position: relative;
+    width: 186px;
+    margin-bottom: 10px;
+    white-space: normal;
+
+    // ensure .build-content has hover style when action-icon is hovered
+    .ci-job-dropdown-container:hover .build-content {
+      @extend .build-content:hover;
+    }
+
     .ci-status-icon svg {
       height: 20px;
       width: 20px;
@@ -604,6 +604,55 @@
   }
 }
 
+
+/**
+ Icons inside dropdown
+*/
+.big-pipeline-graph-dropdown-menu,
+.mini-pipeline-graph-dropdown-menu {
+
+  // override dropdown.scss
+  &.dropdown-menu li button {
+    padding: 0;
+    text-align: center;
+  }
+
+  .ci-action-icon-container {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+
+    // Action Icons in big pipeline-graph nodes
+    &.ci-action-icon-wrapper {
+      height: $ci-action-dropdown-button-size;
+      width: $ci-action-dropdown-button-size;
+
+      background: $white-light;
+      border: 1px solid $border-color;
+      border-radius: 50%;
+      display: block;
+
+      &:hover {
+        background-color: $stage-hover-bg;
+        border: 1px solid $dropdown-toggle-active-border-color;
+
+        svg {
+          fill: $gl-text-color;
+        }
+      }
+
+      svg {
+        width: $ci-action-dropdown-svg-size;
+        height: $ci-action-dropdown-svg-size;
+        fill: $gl-text-color-secondary;
+        position: relative;
+        top: 0px;
+        vertical-align: initial;
+      }
+    }
+  }
+}
+
 // Triggers the dropdown in the big pipeline graph
 .dropdown-counter-badge {
   font-weight: 100;

app/views/shared/_mini_pipeline_graph.html.haml

@@ -12,6 +12,7 @@
 
         %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
           %li.js-builds-dropdown-list.scrollable-menu
+            %ul
 
           %li.js-builds-dropdown-loading.hidden
             .text-center