Style grouped builds dropdown

3 files changed, 99 insertions, 15 deletions

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 2d66ab25da6..cc71b8eb045 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -318,9 +318,17 @@
 
     .build-content {
       width: 130px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+
+      .ci-status-text {
+        width: 110px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+        display: inline-block;
+        position: relative;
+        top: -1px;
+      }
 
       a {
         color: $layout-link-gray;
@@ -331,13 +339,74 @@
             text-decoration: underline;
           }
         }
+      }
+
+      .dropdown-menu-toggle {
+        border: none;
+        width: auto;
+        padding: 0;
+        color: $layout-link-gray;
+
+        .ci-status-text {
+          width: 80px;
+        }
+      }
+
+      .grouped-pipeline-dropdown {
+        padding: 8px 0;
+        width: 200px;
+        left: auto;
+        right: -214px;
+        top: -9px;
+
+        a:hover {
+          .ci-status-text {
+            text-decoration: none;
+          }
+        }
+
+        .ci-status-text {
+          width: 145px;
+        }
+
+        .arrow {
+          &:before,
+          &:after {
+            content: '';
+            display: inline-block;
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-color: transparent;
+            border-style: solid;
+            top: 18px;
+          }
+
+          &:before {
+            left: -5px;
+            margin-top: -6px;
+            border-width: 7px 5px 7px 0;
+            border-right-color: $border-color;
+          }
 
+          &:after {
+            left: -4px;
+            margin-top: -9px;
+            border-width: 10px 7px 10px 0;
+            border-right-color: $white-light;
+          }
+        }
+      }
+
+      .badge {
+        background-color: $gray-dark;
+        color: $layout-link-gray;
+        font-weight: normal;
       }
     }
 
     svg {
-      position: relative;
-      top: 2px;
+      vertical-align: middle;
       margin-right: 5px;
     }
 
@@ -442,7 +511,7 @@
       width: 21px;
       height: 25px;
       position: absolute;
-      top: -28.5px;
+      top: -29px;
       border-top: 2px solid $border-color;
     }
 
diff --git a/app/views/projects/ci/builds/_build_pipeline.html.haml b/app/views/projects/ci/builds/_build_pipeline.html.haml
index 36fb0300aeb..5289cd672f5 100644
--- a/app/views/projects/ci/builds/_build_pipeline.html.haml
+++ b/app/views/projects/ci/builds/_build_pipeline.html.haml
@@ -5,11 +5,11 @@
     - if is_playable
       = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, title: 'Play' do
         = render_status_with_link('build', 'play')
-        %span.ci-status-text= subject.name
+        .ci-status-text= subject.name
     - elsif can?(current_user, :read_build, @project)
       = link_to namespace_project_build_path(subject.project.namespace, subject.project, subject) do
         = render_status_with_link('build', subject.status)
-        %span.ci-status-text= subject.name
+        .ci-status-text= subject.name
     - else
       = render_status_with_link('build', subject.status)
       = ci_icon_for_status(subject.status)
diff --git a/app/views/projects/commit/_pipeline_grouped_status.html.haml b/app/views/projects/commit/_pipeline_grouped_status.html.haml
index 7e02703f0a6..dc8efc83d48 100644
--- a/app/views/projects/commit/_pipeline_grouped_status.html.haml
+++ b/app/views/projects/commit/_pipeline_grouped_status.html.haml
@@ -3,10 +3,25 @@
   .build-content
     - group_status = CommitStatus.where(id: subject).status
     = render_status_with_link('build', group_status)
-    %span.ci-status-text
-      = name
-      = subject.length
-
-    // Access all other grouped statuses
-    //- subject.each do |status|
-    //  = render "projects/#{status.to_partial_path}_pipeline", subject: status
+    .dropdown.inline
+      %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %span.ci-status-text
+          = name
+        %span.badge= subject.length
+      %ul.dropdown-menu.grouped-pipeline-dropdown
+        .arrow
+        - subject.each do |status|
+          -# = render "projects/#{status.to_partial_path}_pipeline", subject: status
+          - is_playable = status.playable? && can?(current_user, :update_build, @project)
+          %li
+            - if is_playable
+              = link_to play_namespace_project_build_path(status.project.namespace, status.project, status, return_to: request.original_url), method: :post, title: 'Play' do
+                = render_status_with_link('build', 'play')
+                .ci-status-text= status.name
+            - elsif can?(current_user, :read_build, @project)
+              = link_to namespace_project_build_path(status.project.namespace, status.project, status) do
+                = render_status_with_link('build', status.status)
+                .ci-status-text= status.name
+            - else
+              = render_status_with_link('build', status.status)
+              = ci_icon_for_status(status.status)