Make CI badge hitboxes better match container

7 files changed, 68 insertions, 76 deletions

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index be22e7bdc79..243c9153ded 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -428,7 +428,7 @@
         width: 21px;
         height: 25px;
         position: absolute;
-        top: -32px;
+        top: -31px;
         border-top: 2px solid $border-color;
       }
 
@@ -456,32 +456,31 @@
   }
 
   .build {
-    border: 1px solid $border-color;
-    border-radius: 30px;
-    background-color: $white-light;
     position: relative;
-    padding: 8px 4px 9px 10px;
     width: 186px;
     margin-bottom: 10px;
     white-space: normal;
+    color: $gl-text-color-light;
 
-    &:hover {
-      background-color: $stage-hover-bg;
-      border: 1px solid $stage-hover-border;
+    > .build-content {
+      display: inline-block;
+      padding: 8px 10px 9px;
+      width: 100%;
+      border: 1px solid $border-color;
+      border-radius: 30px;
+      background-color: $white-light;
 
-      a,
-      .dropdown-counter-badge,
-      .dropdown-menu-toggle {
+      &:hover {
+        background-color: $stage-hover-bg;
+        border: 1px solid $stage-hover-border;
         color: $gl-text-color;
       }
+    }
 
-      .grouped-pipeline-dropdown a {
-        color: $gl-text-color-light;
-
-        &:hover {
-          color: $gl-text-color;
-        }
-      }
+    > .ci-action-icon-container {
+      position: absolute;
+      right: 4px;
+      top: 5px;
     }
 
     .ci-status-icon {
@@ -621,8 +620,8 @@
     padding: 0;
     width: 191px;
     left: auto;
-    right: -206px;
-    top: -11px;
+    right: -195px;
+    top: -4px;
     box-shadow: 0 1px 5px $black-transparent;
 
     a {
@@ -650,30 +649,20 @@
     .dropdown-build {
       color: $gl-text-color-light;
 
-      a.ci-action-icon-container {
-        padding: 0;
-        font-size: 11px;
-        float: right;
-        margin-top: 4px;
-        display: inline-block;
-        position: relative;
-
-        i {
-          font-size: 11px;
-          margin-top: 0;
-        }
-      }
-
-      &:hover {
-        background-color: $stage-hover-bg;
-        border-radius: 3px;
-        color: $gl-text-color;
+      .build-content {
+        width: 100%;
       }
 
       .ci-action-icon-container {
+        font-size: 11px;
+        position: absolute;
+        right: 4px;
+
         i {
           width: 25px;
           height: 25px;
+          font-size: 11px;
+          margin-top: 0;
 
           &::before {
             top: 1px;
@@ -682,6 +671,12 @@
         }
       }
 
+      &:hover {
+        background-color: $stage-hover-bg;
+        border-radius: 3px;
+        color: $gl-text-color;
+      }
+
       .stage {
         max-width: 100px;
         width: 100px;
@@ -704,9 +699,6 @@
 
 // Action Icons
 .ci-action-icon-container .ci-action-icon-wrapper {
-  float: right;
-  margin-top: -4px;
-
   i {
     color: $border-color;
     border-radius: 100%;
diff --git a/app/views/ci/status/_graph_badge.html.haml b/app/views/ci/status/_graph_badge.html.haml
index 9f3a9c0c6b2..52b4d77d074 100644
--- a/app/views/ci/status/_graph_badge.html.haml
+++ b/app/views/ci/status/_graph_badge.html.haml
@@ -5,12 +5,13 @@
 - klass = "ci-status-icon ci-status-icon-#{status.group}"
 
 - if status.has_details?
-  = link_to status.details_path, data: { toggle: 'tooltip', title: "#{subject.name} - #{status.label}" } do
+  = link_to status.details_path, class: 'build-content' do
     %span{ class: klass }= custom_icon(status.icon)
-    .ci-status-text= subject.name
+    .ci-status-text{ 'data-toggle' => 'tooltip', 'data-title' => "#{subject.name} - #{status.label}" }= subject.name
 - else
-  %span{ class: klass }= custom_icon(status.icon)
-  .ci-status-text= subject.name
+  .build-content
+    %span{ class: klass }= custom_icon(status.icon)
+    .ci-status-text{ 'data-toggle' => 'tooltip', 'data-title' => "#{subject.name} - #{status.label}" }= subject.name
 
 - if status.has_action?
   = link_to status.action_path, method: status.action_method,
diff --git a/app/views/projects/stage/_graph.html.haml b/app/views/projects/stage/_graph.html.haml
index b70b574e687..6919b210a00 100644
--- a/app/views/projects/stage/_graph.html.haml
+++ b/app/views/projects/stage/_graph.html.haml
@@ -10,12 +10,11 @@
       - status_groups.each do |group_name, grouped_statuses|
         - if grouped_statuses.one?
           - status = grouped_statuses.first
-          %li.build
+          %li.build{ 'id' => "ci-badge-#{group_name}"  }
             .curve
-            .build-content
-              = render 'ci/status/graph_badge', subject: status
+            = render 'ci/status/graph_badge', subject: status
         - else
-          %li.build
+          %li.build{ 'id' => "ci-badge-#{group_name}"  }
             .curve
-            .dropdown.inline.build-content
-              = render 'projects/stage/in_stage_group', name: group_name, subject: grouped_statuses
+            = render 'projects/stage/in_stage_group', name: group_name, subject: grouped_statuses
+
diff --git a/app/views/projects/stage/_in_stage_group.html.haml b/app/views/projects/stage/_in_stage_group.html.haml
index b03837d1211..b15f7eaeab2 100644
--- a/app/views/projects/stage/_in_stage_group.html.haml
+++ b/app/views/projects/stage/_in_stage_group.html.haml
@@ -1,8 +1,8 @@
 - group_status = CommitStatus.where(id: subject).status
-%button.dropdown-menu-toggle.has-tooltip{ type: 'button', data: { toggle: 'dropdown', title: "#{name} - #{group_status}" } }
+%button.dropdown-menu-toggle.build-content.has-tooltip{ type: 'button', data: { toggle: 'dropdown'} }
   %span{class: "ci-status-icon ci-status-icon-#{group_status}"}
     = ci_icon_for_status(group_status)
-  %span.ci-status-text
+  %span.ci-status-text{ 'data-toggle' => 'tooltip', 'data-title' => "#{name} - #{group_status}" }
     = name
   %span.dropdown-counter-badge= subject.size
 .dropdown-menu.grouped-pipeline-dropdown
diff --git a/changelogs/unreleased/pipeline-build-hitbox.yml b/changelogs/unreleased/pipeline-build-hitbox.yml
new file mode 100644
index 00000000000..051b538a9a3
--- /dev/null
+++ b/changelogs/unreleased/pipeline-build-hitbox.yml
@@ -0,0 +1,4 @@
+---
+title: Make CI badge hitboxes match parent
+merge_request: 
+author: 
diff --git a/spec/features/projects/pipelines/pipeline_spec.rb b/spec/features/projects/pipelines/pipeline_spec.rb
index 57f1e75ea2c..1210e2745db 100644
--- a/spec/features/projects/pipelines/pipeline_spec.rb
+++ b/spec/features/projects/pipelines/pipeline_spec.rb
@@ -19,7 +19,7 @@ describe "Pipelines", feature: true, js: true do
       @success = create(:ci_build, :success, pipeline: pipeline, stage: 'build', name: 'build')
       @failed = create(:ci_build, :failed, pipeline: pipeline, stage: 'test', name: 'test', commands: 'test')
       @running = create(:ci_build, :running, pipeline: pipeline, stage: 'deploy', name: 'deploy')
-      @manual = create(:ci_build, :manual, pipeline: pipeline, stage: 'deploy', name: 'manual build')
+      @manual = create(:ci_build, :manual, pipeline: pipeline, stage: 'deploy', name: 'manual-build')
       @external = create(:generic_commit_status, status: 'success', pipeline: pipeline, name: 'jenkins', stage: 'external')
     end
 
@@ -41,37 +41,34 @@ describe "Pipelines", feature: true, js: true do
     describe 'pipeline graph' do
       context 'when pipeline has running builds' do
         it 'shows a running icon and a cancel action for the running build' do
-          page.within('a[data-title="deploy - running"]') do
+          page.within('#ci-badge-deploy') do
             expect(page).to have_selector('.ci-status-icon-running')
-            expect(page).to have_content('deploy')
-          end
-
-          page.within('a[data-title="deploy - running"] + .ci-action-icon-container') do
             expect(page).to have_selector('.ci-action-icon-container .fa-ban')
+            expect(page).to have_content('deploy')
           end
         end
 
         it 'should be possible to cancel the running build' do
-          find('a[data-title="deploy - running"] + .ci-action-icon-container').trigger('click')
+          find('#ci-badge-deploy .ci-action-icon-container').trigger('click')
 
           expect(page).not_to have_content('Cancel running')
         end
       end
 
       context 'when pipeline has successful builds' do
-        it 'shows the success icon and a retry action for the successfull build' do
-          page.within('a[data-title="build - passed"]') do
+        it 'shows the success icon and a retry action for the successful build' do
+          page.within('#ci-badge-build') do
             expect(page).to have_selector('.ci-status-icon-success')
             expect(page).to have_content('build')
           end
 
-          page.within('a[data-title="build - passed"] + .ci-action-icon-container') do
+          page.within('#ci-badge-build .ci-action-icon-container') do
             expect(page).to have_selector('.ci-action-icon-container .fa-refresh')
           end
         end
 
         it 'should be possible to retry the success build' do
-          find('a[data-title="build - passed"] + .ci-action-icon-container').trigger('click')
+          find('#ci-badge-build .ci-action-icon-container').trigger('click')
 
           expect(page).not_to have_content('Retry build')
         end
@@ -79,18 +76,18 @@ describe "Pipelines", feature: true, js: true do
 
       context 'when pipeline has failed builds' do
         it 'shows the failed icon and a retry action for the failed build' do
-          page.within('a[data-title="test - failed"]') do
+          page.within('#ci-badge-test') do
             expect(page).to have_selector('.ci-status-icon-failed')
             expect(page).to have_content('test')
           end
 
-          page.within('a[data-title="test - failed"] + .ci-action-icon-container') do
+          page.within('#ci-badge-test .ci-action-icon-container') do
             expect(page).to have_selector('.ci-action-icon-container .fa-refresh')
           end
         end
 
         it 'should be possible to retry the failed build' do
-          find('a[data-title="test - failed"] + .ci-action-icon-container').trigger('click')
+          find('#ci-badge-test .ci-action-icon-container').trigger('click')
 
           expect(page).not_to have_content('Retry build')
         end
@@ -98,18 +95,18 @@ describe "Pipelines", feature: true, js: true do
 
       context 'when pipeline has manual builds' do
         it 'shows the skipped icon and a play action for the manual build' do
-          page.within('a[data-title="manual build - manual play action"]') do
+          page.within('#ci-badge-manual-build') do
             expect(page).to have_selector('.ci-status-icon-manual')
             expect(page).to have_content('manual')
           end
 
-          page.within('a[data-title="manual build - manual play action"] + .ci-action-icon-container') do
+          page.within('#ci-badge-manual-build .ci-action-icon-container') do
             expect(page).to have_selector('.ci-action-icon-container .fa-play')
           end
         end
 
         it 'should be possible to play the manual build' do
-          find('a[data-title="manual build - manual play action"] + .ci-action-icon-container').trigger('click')
+          find('#ci-badge-manual-build .ci-action-icon-container').trigger('click')
 
           expect(page).not_to have_content('Play build')
         end
@@ -167,7 +164,7 @@ describe "Pipelines", feature: true, js: true do
       @success = create(:ci_build, :success, pipeline: pipeline, stage: 'build', name: 'build')
       @failed = create(:ci_build, :failed, pipeline: pipeline, stage: 'test', name: 'test', commands: 'test')
       @running = create(:ci_build, :running, pipeline: pipeline, stage: 'deploy', name: 'deploy')
-      @manual = create(:ci_build, :manual, pipeline: pipeline, stage: 'deploy', name: 'manual build')
+      @manual = create(:ci_build, :manual, pipeline: pipeline, stage: 'deploy', name: 'manual-build')
       @external = create(:generic_commit_status, status: 'success', pipeline: pipeline, name: 'jenkins', stage: 'external')
     end
 
diff --git a/spec/javascripts/fixtures/pipeline_graph.html.haml b/spec/javascripts/fixtures/pipeline_graph.html.haml
index deca50ceaa7..c0b5ab4411e 100644
--- a/spec/javascripts/fixtures/pipeline_graph.html.haml
+++ b/spec/javascripts/fixtures/pipeline_graph.html.haml
@@ -8,8 +8,7 @@
             %ul
               %li.build
                 .curve
-                .build-content
-                  %a
-                    %svg
-                    .ci-status-text
-                      stop_review
+                %a
+                  %svg
+                  .ci-status-text
+                    stop_review