Merge branch '23273-retry-build-btn' into 'master'

Resolve "Improve build "Retry" button on Build Page"

* On desktop, adds retry button on build page header
* On mobile, adds retry button in sidebar

![Screen_Shot_2016-10-28_at_1.35.07_PM](/uploads/2f9f87a9fc3e85c9aafc8c3d7a231639/Screen_Shot_2016-10-28_at_1.35.07_PM.png)
![Screen_Shot_2016-10-26_at_1.01.44_PM](/uploads/d02ce3a422a505b14ab357f695de8bba/Screen_Shot_2016-10-26_at_1.01.44_PM.png)

Closes #23273

See merge request !7126

5 files changed, 44 insertions, 18 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b47b0891686..722fb2b4cbe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -104,6 +104,7 @@ Please view this file on the master branch, on stable branches it's out of date.
   - API: Fix project deploy keys 400 and 500 errors when adding an existing key. !6784 (Joshua Welsh)
   - Replace jquery.cookie plugin with js.cookie !7085
   - Use MergeRequestsClosingIssues cache data on Issue#closed_by_merge_requests method
+  - Add `Retry build` button in build page header on desktop
   - Fix Sign in page 'Forgot your password?' link overlaps on medium-large screens
   - Show full status link on MR & commit pipelines
   - Fix documents and comments on Build API `scope`
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index d6a55fbd464..6300ac9662f 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -52,10 +52,25 @@
 
 .build-header {
   position: relative;
-  padding-right: 40px;
+  padding: 0;
+  display: flex;
+  min-height: 58px;
+  align-items: center;
 
-  @media (min-width: $screen-sm-min) {
-    padding-right: 0;
+  .btn-inverted {
+    @include btn-outline($white-light, $blue-normal, $blue-normal, $blue-light, $white-light, $blue-light);
+  }
+
+  @media (max-width: $screen-sm-max) {
+    padding-right: 40px;
+
+    .btn-inverted {
+      display: none;
+    }
+  }
+
+  .header-content {
+    flex: 1;
   }
 
   a {
@@ -137,10 +152,15 @@
 
   .retry-link {
     color: $gl-link-color;
+    display: none;
 
     &:hover {
       text-decoration: underline;
     }
+
+    @media (max-width: $screen-sm-max) {
+      display: block;
+    }
   }
 
   .stage-item {
diff --git a/app/views/projects/builds/_header.html.haml b/app/views/projects/builds/_header.html.haml
index 51b5bd9db42..3f2ce7377fd 100644
--- a/app/views/projects/builds/_header.html.haml
+++ b/app/views/projects/builds/_header.html.haml
@@ -1,16 +1,19 @@
 .content-block.build-header
-  = ci_status_with_icon(@build.status)
-  Build
-  %strong ##{@build.id}
-  for commit
-  = link_to ci_status_path(@build.pipeline) do
-    %strong= @build.pipeline.short_sha
-  from
-  = link_to namespace_project_commits_path(@project.namespace, @project, @build.ref) do
-    %code
-      = @build.ref
-  - if @build.user
-    = render "user"
-  = time_ago_with_tooltip(@build.created_at)
+  .header-content
+    = ci_status_with_icon(@build.status)
+    Build
+    %strong ##{@build.id}
+    for commit
+    = link_to ci_status_path(@build.pipeline) do
+      %strong= @build.pipeline.short_sha
+    from
+    = link_to namespace_project_commits_path(@project.namespace, @project, @build.ref) do
+      %code
+        = @build.ref
+    - if @build.user
+      = render "user"
+    = time_ago_with_tooltip(@build.created_at)
+  - if can?(current_user, :update_build, @build) && @build.retryable?
+    = link_to "Retry build", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'btn btn-inverted pull-right', method: :post
   %button.btn.btn-default.pull-right.visible-xs-block.visible-sm-block.build-gutter-toggle.js-sidebar-build-toggle{ role: "button", type: "button" }
     = icon('angle-double-left')
diff --git a/app/views/projects/builds/_sidebar.html.haml b/app/views/projects/builds/_sidebar.html.haml
index b1053028279..28f519f11b2 100644
--- a/app/views/projects/builds/_sidebar.html.haml
+++ b/app/views/projects/builds/_sidebar.html.haml
@@ -44,7 +44,7 @@
       .title
         Build details
         - if can?(current_user, :update_build, @build) && @build.retryable?
-          = link_to "Retry", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'pull-right retry-link', method: :post
+          = link_to "Retry build", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'pull-right retry-link', method: :post
       - if @build.merge_request
         %p.build-detail-row
           %span.build-light-text Merge Request:
diff --git a/spec/features/projects/builds_spec.rb b/spec/features/projects/builds_spec.rb
index d1685f95503..63a23a14f20 100644
--- a/spec/features/projects/builds_spec.rb
+++ b/spec/features/projects/builds_spec.rb
@@ -216,7 +216,9 @@ describe "Builds" do
         @build.run!
         visit namespace_project_build_path(@project.namespace, @project, @build)
         click_link 'Cancel'
-        click_link 'Retry'
+        page.within('.build-header') do
+          click_link 'Retry build'
+        end
       end
 
       it 'shows the right status and buttons' do