Simplify HTML of mini pipeline graph and dropdown

Creates individual html for dropdown
Adds simplified  CSS for the new dropdown
Removes old CSS
Improves dropdown item in Chrome, Firefox and Safari
Use SCSS variables for colors.
Fix scss linter errors
Adds animation when the stage is hovered.
Adds back tooltip on dropdown toggle
Fixes broken tests
additional css changes to get more into direction of mockups

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')