Simplify HTML of mini pipeline graph and dropdown

app/assets/stylesheets/framework/variables.scss

@@ -525,3 +525,4 @@ Pipeline Graph
 */
 $stage-hover-bg: #eaf3fc;
 $stage-hover-border: #d1e7fc;
+$action-icon-color: #d6d6d6;

app/views/ci/status/_dropdown_graph_badge.html.haml

+-# Renders the content of each li in the dropdown
+
+- subject = local_assigns.fetch(:subject)
+- status = subject.detailed_status(current_user)
+- klass = "ci-status-icon ci-status-icon-#{status.group}"
+- tooltip = "#{subject.name} - #{status.label}"
+
+- if status.has_details?
+  = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip }  do
+    %span{ class: klass }= custom_icon(status.icon)
+    %span.ci-build-text= subject.name
+- else
+  .mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', title: tooltip } }
+    %span{ class: klass }= custom_icon(status.icon)
+    %span.ci-build-text= subject.name
+
+- if status.has_action?
+  = link_to status.action_path, class: 'ci-action-icon-wrapper js-ci-action-icon', method: status.action_method, data: { toggle: 'tooltip', title: status.action_title }  do
+    = icon(status.action_icon, class: status.action_class)

app/views/projects/ci/pipelines/_pipeline.html.haml

@@ -47,21 +47,18 @@
         - icon_status = "#{detailed_status.icon}_borderless"
         - status_klass = "ci-status-icon ci-status-icon-#{detailed_status.group}"
 
-        .stage-container.mini-pipeline-graph
-          .dropdown.inline.build-content
-            %button.has-tooltip.builds-dropdown.js-builds-dropdown-button{ type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name) } }
-              %span.has-tooltip{ class: status_klass }
-                %span.mini-pipeline-graph-icon-container
-                  %span{ class: status_klass }= custom_icon(icon_status)
-                  = icon('caret-down', class: 'dropdown-caret')
+        .stage-container.dropdown.js-mini-pipeline-graph
+          %button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name) } }
+            = custom_icon(icon_status)
+            = icon('caret-down')
 
-            .js-builds-dropdown-container
-              .dropdown-menu.grouped-pipeline-dropdown
-                .arrow-up
-                .js-builds-dropdown-list
+          %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
+            .arrow-up
+            .js-builds-dropdown-list.scrollable-menu
+
+            .js-builds-dropdown-loading.builds-dropdown-loading.hidden
+              %span.fa.fa-spinner.fa-spin
 
-                .js-builds-dropdown-loading.builds-dropdown-loading.hidden
-                  %span.fa.fa-spinner.fa-spin
 
   %td
     - if pipeline.duration

app/views/projects/pipelines/_stage.html.haml

-%ul
-  - @stage.statuses.latest.each do |status|
-    %li.dropdown-build
-      = render 'ci/status/graph_badge', subject: status
+- @stage.statuses.latest.each do |status|
+  %li
+    = render 'ci/status/dropdown_graph_badge', subject: status

app/views/projects/stage/_in_stage_group.html.haml

@@ -5,9 +5,10 @@
   %span.ci-status-text
     = name
   %span.dropdown-counter-badge= subject.size
-.dropdown-menu.grouped-pipeline-dropdown
+
+%ul.dropdown-menu.big-pipeline-graph-dropdown-menu.js-grouped-pipeline-dropdown
   .arrow
-  %ul
+  .scrollable-menu
     - subject.each do |status|
-      %li.dropdown-build
-        = render 'ci/status/graph_badge', subject: status
+      %li
+        = render 'ci/status/dropdown_graph_badge', subject: status

changelogs/unreleased/pipelines-graph-html-css.yml

+---
+title: Fixes and Improves CSS and HTML problems in mini pipeline graph and builds dropdown
+merge_request: 8443
+author:

spec/features/projects/pipelines/pipelines_spec.rb

@@ -183,7 +183,7 @@ describe 'Pipelines', :feature, :js do
       it 'should render a mini pipeline graph' do
         endpoint = stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: build.name)
 
-        expect(page).to have_selector('.mini-pipeline-graph')
+        expect(page).to have_selector('.js-mini-pipeline-graph')
         expect(page).to have_selector(".js-builds-dropdown-button[data-stage-endpoint='#{endpoint}']")
       end
 
@@ -201,7 +201,7 @@ describe 'Pipelines', :feature, :js do
 
           wait_for_ajax
 
-          find('a.ci-action-icon-container').trigger('click')
+          find('a.js-ci-action-icon').trigger('click')
           expect(page).not_to have_content('Cancel running')
         end
       end

spec/views/projects/pipelines/show.html.haml_spec.rb

@@ -29,7 +29,7 @@ describe 'projects/pipelines/show' do
     render
 
     expect(rendered).to have_css('.js-pipeline-graph')
-    expect(rendered).to have_css('.grouped-pipeline-dropdown')
+    expect(rendered).to have_css('.js-grouped-pipeline-dropdown')
 
     # stages
     expect(rendered).to have_text('Build')