added inline pipeline graph23785-with-builds-tab-gone-give-additional-context-in-system-information-element-in-mr-commit-views-by-adding-mini-pipeline-graph

Added tests

review changes

3 files changed, 30 insertions, 25 deletions

diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml
index cdab1e1b1a6..ac0fd87fd8d 100644
--- a/app/views/projects/ci/pipelines/_pipeline.html.haml
+++ b/app/views/projects/ci/pipelines/_pipeline.html.haml
@@ -40,25 +40,8 @@
       - else
         Cant find HEAD commit for this branch
 
-  %td.stage-cell
-    - pipeline.stages.each do |stage|
-      - if stage.status
-        - detailed_status = stage.detailed_status(current_user)
-        - icon_status = "#{detailed_status.icon}_borderless"
-        - status_klass = "ci-status-icon ci-status-icon-#{detailed_status.group}"
-
-        .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')
-
-          %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
-
+  %td
+    = render 'shared/mini_pipeline_graph', pipeline: pipeline, klass: 'js-mini-pipeline-graph'
 
   %td
     - if pipeline.duration
diff --git a/app/views/projects/merge_requests/widget/_heading.html.haml b/app/views/projects/merge_requests/widget/_heading.html.haml
index ae134563ead..bef76f16ca7 100644
--- a/app/views/projects/merge_requests/widget/_heading.html.haml
+++ b/app/views/projects/merge_requests/widget/_heading.html.haml
@@ -1,16 +1,20 @@
 - if @pipeline
   .mr-widget-heading
     - %w[success success_with_warnings skipped canceled failed running pending].each do |status|
-      .ci_widget{ class: "ci-#{status} ci-status-icon-#{status}", style: ("display:none" unless @pipeline.status == status) }
-        = link_to namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), class: 'icon-link' do
-          = ci_icon_for_status(status)
+      .ci_widget{ class: "ci-#{status}", style: ("display:none" unless @pipeline.status == status) }
+        %div{ class: "ci-status-icon-#{status}" }
+          = link_to namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), class: 'icon-link' do
+            = ci_icon_for_status(status)
         %span
           Pipeline
           = link_to "##{@pipeline.id}", namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), class: 'pipeline'
           = ci_label_for_status(status)
-        for
-        = succeed "." do
-          = link_to @pipeline.short_sha, namespace_project_commit_path(@merge_request.source_project.namespace, @merge_request.source_project, @pipeline.sha), class: "monospace js-commit-link"
+        .mr-widget-pipeline-graph
+          = render 'shared/mini_pipeline_graph', pipeline: @pipeline, klass: 'js-pipeline-inline-mr-widget-graph'
+        %span
+          for
+          = succeed "." do
+            = link_to @pipeline.short_sha, namespace_project_commit_path(@merge_request.source_project.namespace, @merge_request.source_project, @pipeline.sha), class: "monospace js-commit-link"
         %span.ci-coverage
 
 - elsif @merge_request.has_ci?
diff --git a/app/views/shared/_mini_pipeline_graph.html.haml b/app/views/shared/_mini_pipeline_graph.html.haml
new file mode 100644
index 00000000000..b0778653d4e
--- /dev/null
+++ b/app/views/shared/_mini_pipeline_graph.html.haml
@@ -0,0 +1,18 @@
+.stage-cell
+  - pipeline.stages.each do |stage|
+    - if stage.status
+      - detailed_status = stage.detailed_status(current_user)
+      - icon_status = "#{detailed_status.icon}_borderless"
+      - status_klass = "ci-status-icon ci-status-icon-#{detailed_status.group}"
+
+      .stage-container.dropdown{ class: klass }
+        %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')
+
+        %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