Merge branch 'improve-merge-request-widget' into 'master'

Improve merge request widget

Return merge request widget improvements that were reverted with satellites

See merge request !1140

21 files changed, 224 insertions, 250 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 0c314e2d551..a157a53d6e6 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -47,6 +47,8 @@ v 7.14.0 (unreleased)
   - Add support for CI skipped status
   - Fetch code from forks to refs/merge-requests/:id/head when merge request created
   - Remove comments and email addresses when publicly exposing ssh keys (Zeger-Jan van de Weg)
+  - Improve MR merge widget text and UI consistency.
+  - Improve text in MR "How To Merge" modal.
   - Cache all events
   - Order commits by date when comparing branches
   - Fix bug causing error when the target branch of a symbolic ref was deleted
diff --git a/app/assets/javascripts/merge_request_widget.js.coffee b/app/assets/javascripts/merge_request_widget.js.coffee
index 762eec63dee..5ab91261d75 100644
--- a/app/assets/javascripts/merge_request_widget.js.coffee
+++ b/app/assets/javascripts/merge_request_widget.js.coffee
@@ -49,10 +49,8 @@ class @MergeRequestWidget
       @setMergeButtonClass('btn-danger')
 
   showCiCoverage: (coverage) ->
-    cov_html = $('<span>')
-    cov_html.addClass('ci-coverage')
-    cov_html.text('Coverage ' + coverage + '%')
-    $('.ci_widget:visible').append(cov_html)
+    text = 'Coverage ' + coverage + '%'
+    $('.ci_widget:visible .ci-coverage').text(text)
 
   setMergeButtonClass: (css_class) ->
     $('.accept_merge_request').removeClass("btn-create").addClass(css_class)
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index baba6f32129..30bbec7b795 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -1,9 +1,15 @@
-
-  /**
-   * MR -> show: Automerge widget
+/**
+ * MR -> show: Automerge widget
  *
  */
 .mr-state-widget {
+  background: #FAFAFA;
+  margin-bottom: 20px;
+  color: #666;
+  border: 1px solid #e5e5e5;
+  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
+  @include border-radius(3px);
+
   form {
     margin-bottom: 0;
     .clearfix {
@@ -20,16 +26,67 @@
       display: inline-block;
       margin: 0;
       margin-left: 20px;
-      padding: 10px 0;
+      padding: 5px;
       line-height: 20px;
-      font-weight: bold;
 
       .remove_source_checkbox {
         margin: 0;
-        font-weight: bold;
       }
     }
   }
+
+  .ci_widget {
+    border-bottom: 1px solid #EEE;
+
+    i {
+      margin-right: 4px;
+    }
+
+    &.ci-success {
+      color: $gl-success;
+    }
+
+    &.ci-skipped {
+      background-color: #eee;
+      color: #888;
+    }
+
+    &.ci-pending,
+    &.ci-running {
+      color: $gl-warning;
+    }
+
+    &.ci-failed,
+    &.ci-canceled,
+    &.ci-error {
+      color: $gl-danger;
+    }
+  }
+
+  .mr-widget-body,
+  .ci_widget,
+  .mr-widget-footer {
+    padding: 15px;
+  }
+
+  .mr-widget-body {
+    h4 {
+      font-weight: bold;
+      margin: 5px 0;
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .mr-widget-footer {
+    border-top: 1px solid #EEE;
+  }
+
+  .ci-coverage {
+    float: right;
+  }
 }
 
 @media(min-width: $screen-sm-max) {
@@ -61,23 +118,10 @@
 }
 
 .label-branch {
-  @include border-radius(4px);
-  padding: 3px 4px;
-  border: none;
-  background: $hover;
-  color: #333;
+  color: #222;
   font-family: $monospace_font;
-  font-weight: normal;
+  font-weight: bold;
   overflow: hidden;
-
-  .label-project {
-    @include border-radius-left(4px);
-    padding: 3px 4px;
-    background: #279;
-    position: relative;
-    left: -4px;
-    letter-spacing: -1px;
-  }
 }
 
 .mr-list {
@@ -124,64 +168,6 @@
   display: none;
 }
 
-.mr-state-widget {
-  font-size: 13px;
-  background: #FAFAFA;
-  margin-bottom: 20px;
-  color: #666;
-  border: 1px solid #e5e5e5;
-  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
-  @include border-radius(3px);
-
-  .ci_widget {
-    padding: 10px 15px;
-    font-size: 15px;
-    border-bottom: 1px solid #EEE;
-
-    &.ci-success {
-      color: $gl-success;
-    }
-
-    &.ci-skipped {
-      background-color: #eee;
-      color: #888;
-    }
-
-    &.ci-pending,
-    &.ci-running {
-      color: $gl-warning;
-    }
-
-    &.ci-failed,
-    &.ci-canceled,
-    &.ci-error {
-      color: $gl-danger;
-    }
-  }
-
-  .mr-widget-body {
-    padding: 10px 15px;
-
-    h4 {
-      font-weight: bold;
-      margin: 5px 0;
-    }
-
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .mr-widget-footer {
-    padding: 10px 15px;
-    border-top: 1px solid #EEE;
-  }
-
-  .ci-coverage {
-    float: right;
-  }
-}
-
 .merge-request-show-labels {
   a {
     margin-right: 5px;
@@ -196,3 +182,7 @@
 .merge-request-form .select2-container {
   width: 250px !important;
 }
+
+#modal_merge_info .modal-dialog {
+  width: 600px;
+}
diff --git a/app/helpers/merge_requests_helper.rb b/app/helpers/merge_requests_helper.rb
index 45ee4fe4135..f8169b4f288 100644
--- a/app/helpers/merge_requests_helper.rb
+++ b/app/helpers/merge_requests_helper.rb
@@ -61,4 +61,14 @@ module MergeRequestsHelper
       }
     )
   end
+
+  def source_branch_with_namespace(merge_request)
+    if merge_request.for_fork?
+      namespace = link_to(merge_request.source_project_namespace,
+        project_path(merge_request.source_project))
+      namespace + ":#{merge_request.source_branch}"
+    else
+      merge_request.source_branch
+    end
+  end
 end
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index c57eee14143..2662e3aff6b 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -6,40 +6,25 @@
     = render "projects/merge_requests/show/mr_box"
     %hr
     .append-bottom-20
-      .slead
-        %span From
-        - if @merge_request.for_fork?
-          %strong.label-branch<
-            - if @merge_request.source_project
-              = link_to @merge_request.source_project_namespace, namespace_project_path(@merge_request.source_project.namespace, @merge_request.source_project)
-            - else
-              \ #{@merge_request.source_project_namespace}
-            \:#{@merge_request.source_branch}
+      - if @merge_request.open?
+        .btn-group.btn-group-sm.pull-right
+          %a.btn.btn-sm.dropdown-toggle{ data: {toggle: :dropdown} }
+            = icon('download')
+            Download as
+            %span.caret
+          %ul.dropdown-menu
+            %li= link_to "Email Patches", merge_request_path(@merge_request, format: :patch)
+            %li= link_to "Plain Diff",    merge_request_path(@merge_request, format: :diff)
+      .light
+        %div
+          %span From
+          %span.label-branch #{source_branch_with_namespace(@merge_request)}
           %span into
-          %strong.label-branch #{@merge_request.target_project_namespace}:#{@merge_request.target_branch}
-        - else
-          %strong.label-branch #{@merge_request.source_branch}
-          %span into
-          %strong.label-branch #{@merge_request.target_branch}
-        - if @merge_request.open?
-          .btn-group.btn-group-sm.pull-right
-            %a.btn.btn-sm.dropdown-toggle{ data: {toggle: :dropdown} }
-              = icon('download')
-              Download as
-              %span.caret
-            %ul.dropdown-menu
-              %li= link_to "Email Patches", merge_request_path(@merge_request, format: :patch)
-              %li= link_to "Plain Diff",    merge_request_path(@merge_request, format: :diff)
-
-    - if @merge_request.open? and @merge_request.source_branch_exists?
-      .append-bottom-20
-        .slead
-          %span
-            Fetch the branch with
-            %strong.label-branch<
-              git fetch
-              \ #{@merge_request.source_project.http_url_to_repo}
-              \ #{@merge_request.source_branch}
+          %span.label-branch #{@merge_request.target_branch}
+        - if @merge_request.open? && !@merge_request.branch_missing?
+          %div
+            If you want to try or merge this request manually, you can use the
+            = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
 
     = render "projects/merge_requests/show/how_to_merge"
     = render "projects/merge_requests/widget/show.html.haml"
diff --git a/app/views/projects/merge_requests/show/_how_to_merge.html.haml b/app/views/projects/merge_requests/show/_how_to_merge.html.haml
index 22f601ac99e..db1575f899a 100644
--- a/app/views/projects/merge_requests/show/_how_to_merge.html.haml
+++ b/app/views/projects/merge_requests/show/_how_to_merge.html.haml
@@ -3,42 +3,45 @@
     .modal-content
       .modal-header
         %a.close{href: "#", "data-dismiss" => "modal"} ×
-        %h3 How to merge
+        %h3 Check out, review and merge locally
       .modal-body
-        - if @merge_request.for_fork?
-          - source_remote = @merge_request.source_project.namespace.nil? ? "source" :@merge_request.source_project.namespace.path
-          - target_remote = @merge_request.target_project.namespace.nil? ? "target" :@merge_request.target_project.namespace.path
-          %p
-            %strong Step 1.
-            Fetch the code and create a new branch pointing to it
-          %pre.dark
+        %p
+          %strong Step 1. 
+          Fetch and check out the branch for this merge request
+        %pre.dark
+          - if @merge_request.for_fork?
             :preserve
               git fetch #{@merge_request.source_project.http_url_to_repo} #{@merge_request.source_branch}
               git checkout -b #{@merge_request.source_project_path}-#{@merge_request.source_branch} FETCH_HEAD
-          %p
-            %strong Step 2.
-            Merge the branch and push the changes to GitLab
-          %pre.dark
-            :preserve
-              git checkout #{@merge_request.target_branch}
-              git merge --no-ff #{@merge_request.source_project_path}-#{@merge_request.source_branch}
-              git push origin #{@merge_request.target_branch}
-        - else
-          %p
-            %strong Step 1.
-            Update the repo and checkout the branch we are going to merge
-          %pre.dark
+          - else
             :preserve
               git fetch origin
               git checkout -b #{@merge_request.source_branch} origin/#{@merge_request.source_branch}
-          %p
-            %strong Step 2.
-            Merge the branch and push the changes to GitLab
-          %pre.dark
+        %p
+          %strong Step 2.
+          Review the changes locally
+
+        %p
+          %strong Step 3.
+          Merge the branch and fix any conflicts that come up
+        %pre.dark
+          - if @merge_request.for_fork?
+            :preserve
+              git checkout #{@merge_request.target_branch}
+              git merge --no-ff #{@merge_request.source_project_path}-#{@merge_request.source_branch}
+          - else
             :preserve
               git checkout #{@merge_request.target_branch}
               git merge --no-ff #{@merge_request.source_branch}
-              git push origin #{@merge_request.target_branch}
+        %p
+          %strong Step 4.
+          Push the result of the merge to GitLab
+        %pre.dark
+          :preserve
+            git push origin #{@merge_request.target_branch}
+        - unless @merge_request.can_be_merged_by?(current_user)
+          %p
+            Note that pushing to GitLab requires write access to this repository.
 
 :javascript
   $(function(){
diff --git a/app/views/projects/merge_requests/widget/_closed.html.haml b/app/views/projects/merge_requests/widget/_closed.html.haml
index b5704c502c8..f3cc0e7e8a1 100644
--- a/app/views/projects/merge_requests/widget/_closed.html.haml
+++ b/app/views/projects/merge_requests/widget/_closed.html.haml
@@ -6,4 +6,7 @@
       - if @merge_request.closed_event
         by #{link_to_member(@project, @merge_request.closed_event.author, avatar: true)}
         #{time_ago_with_tooltip(@merge_request.closed_event.created_at)}
-    %p Changes were not merged into target branch
+    %p 
+      = succeed '.' do
+        The changes were not merged into
+        %span.label-branch= @merge_request.target_branch
diff --git a/app/views/projects/merge_requests/widget/_heading.html.haml b/app/views/projects/merge_requests/widget/_heading.html.haml
index f04eac0e3bb..4d4e2f68f61 100644
--- a/app/views/projects/merge_requests/widget/_heading.html.haml
+++ b/app/views/projects/merge_requests/widget/_heading.html.haml
@@ -1,49 +1,28 @@
 - if @merge_request.has_ci?
   .mr-widget-heading
-    .ci_widget.ci-success{style: "display:none"}
-      = icon("check")
-      %span CI build passed
-      for #{@merge_request.last_commit_short_sha}.
-      = link_to "View build page", ci_build_details_path(@merge_request), :"data-no-turbolink" => "data-no-turbolink"
-
-    .ci_widget.ci-skipped{style: "display:none"}
-      = icon("check")
-      %span CI build skipped
-      for #{@merge_request.last_commit_short_sha}.
-      = link_to "View build page", ci_build_details_path(@merge_request), :"data-no-turbolink" => "data-no-turbolink"
-
-    .ci_widget.ci-failed{style: "display:none"}
-      = icon("times")
-      %span CI build failed
-      for #{@merge_request.last_commit_short_sha}.
-      = link_to "View build page", ci_build_details_path(@merge_request), :"data-no-turbolink" => "data-no-turbolink"
-
-    - [:running, :pending].each do |status|
+    - [:success, :skipped, :canceled, :failed, :running, :pending].each do |status|
       .ci_widget{class: "ci-#{status}", style: "display:none"}
-        = icon("clock-o")
+        - if status == :success
+          - status = "passed"
+          = icon("check-circle")
+        - else
+          = icon("circle")
         %span CI build #{status}
         for #{@merge_request.last_commit_short_sha}.
-        = link_to "View build page", ci_build_details_path(@merge_request), :"data-no-turbolink" => "data-no-turbolink"
+        %span.ci-coverage
+        = link_to "View build details", ci_build_details_path(@merge_request), :"data-no-turbolink" => "data-no-turbolink"
 
     .ci_widget
       = icon("spinner spin")
-      Checking for CI status for #{@merge_request.last_commit_short_sha}
+      Checking CI status for #{@merge_request.last_commit_short_sha}&hellip;
 
     .ci_widget.ci-not_found{style: "display:none"}
-      = icon("times")
-      %span Can not find commit in the CI server
-      for #{@merge_request.last_commit_short_sha}.
-      
-
-    .ci_widget.ci-canceled{style: "display:none"}
-      = icon("times")
-      %span CI build canceled
-      for #{@merge_request.last_commit_short_sha}.
-      = link_to "View build page", ci_build_details_path(@merge_request), :"data-no-turbolink" => "data-no-turbolink"
+      = icon("times-circle")
+      Could not find CI status for #{@merge_request.last_commit_short_sha}.
 
     .ci_widget.ci-error{style: "display:none"}
-      = icon("times")
-      %span Cannot connect to the CI server. Please check your settings and try again.
+      = icon("times-circle")
+      Could not connect to the CI server. Please check your settings and try again.
 
   :coffeescript
     $ ->
diff --git a/app/views/projects/merge_requests/widget/_locked.html.haml b/app/views/projects/merge_requests/widget/_locked.html.haml
index 13ec278847b..78d0783cba0 100644
--- a/app/views/projects/merge_requests/widget/_locked.html.haml
+++ b/app/views/projects/merge_requests/widget/_locked.html.haml
@@ -2,7 +2,8 @@
   = render 'projects/merge_requests/widget/heading'
   .mr-widget-body
     %h4
-      Merge in progress...
+      = icon("spinner spin")
+      Merge in progress&hellip;
     %p
-      Merging is in progress. While merging this request is locked and cannot be closed.
+      This merge request is in the process of being merged, during which time it is locked and cannot be closed.
 
diff --git a/app/views/projects/merge_requests/widget/_merged.html.haml b/app/views/projects/merge_requests/widget/_merged.html.haml
index a3b13140810..d22dfa085b8 100644
--- a/app/views/projects/merge_requests/widget/_merged.html.haml
+++ b/app/views/projects/merge_requests/widget/_merged.html.haml
@@ -7,23 +7,31 @@
         by #{link_to_member(@project, @merge_request.merge_event.author, avatar: true)}
         #{time_ago_with_tooltip(@merge_request.merge_event.created_at)}
     %div
-      - if @source_branch.blank?
-        Source branch has been removed
+      - if !@merge_request.source_branch_exists?
+        = succeed '.' do
+          The changes were merged into
+          %span.label-branch= @merge_request.target_branch
+        The source branch has been removed.
 
-      - elsif can_remove_branch?(@merge_request.source_project, @merge_request.source_branch) && @merge_request.merged?
+      - elsif can_remove_branch?(@merge_request.source_project, @merge_request.source_branch)
         .remove_source_branch_widget
-          %p Changes merged into #{@merge_request.target_branch}. You can remove source branch now
+          %p 
+            = succeed '.' do
+              The changes were merged into
+              %span.label-branch= @merge_request.target_branch
+            You can remove the source branch now.
           = link_to namespace_project_branch_path(@merge_request.source_project.namespace, @merge_request.source_project, @source_branch), remote: true, method: :delete, class: "btn btn-primary btn-sm remove_source_branch" do
             %i.fa.fa-times
             Remove Source Branch
 
         .remove_source_branch_widget.failed.hide
-          Failed to remove source branch '#{@merge_request.source_branch}'
+          %p 
+            Failed to remove source branch '#{@merge_request.source_branch}'.
 
         .remove_source_branch_in_progress.hide
-          %i.fa.fa-spinner.fa-spin
-          &nbsp;
-          Removing source branch '#{@merge_request.source_branch}'. Please wait. Page will be automatically reloaded. &nbsp;
+          %p
+            = icon('spinner spin')
+            Removing source branch '#{@merge_request.source_branch}'. Please wait. This page will be automatically reload.
 
         :coffeescript
           $('.remove_source_branch').on 'click', ->
diff --git a/app/views/projects/merge_requests/widget/_open.html.haml b/app/views/projects/merge_requests/widget/_open.html.haml
index bb794912f8f..8c61e819374 100644
--- a/app/views/projects/merge_requests/widget/_open.html.haml
+++ b/app/views/projects/merge_requests/widget/_open.html.haml
@@ -24,6 +24,6 @@
     .mr-widget-footer
       %span
         %i.fa.fa-check
-        Accepting this merge request will close #{@closes_issues.size == 1 ? 'issue' : 'issues'}
+        Accepting this merge request will close #{"issue".pluralize(@closes_issues.size)}
         = succeed '.' do
           != gfm(issues_sentence(@closes_issues))
diff --git a/app/views/projects/merge_requests/widget/open/_accept.html.haml b/app/views/projects/merge_requests/widget/open/_accept.html.haml
index f5bacaf280a..d8f6ce91c0c 100644
--- a/app/views/projects/merge_requests/widget/open/_accept.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_accept.html.haml
@@ -8,22 +8,16 @@
       .accept-control.checkbox
         = label_tag :should_remove_source_branch, class: "remove_source_checkbox" do
           = check_box_tag :should_remove_source_branch
-          Remove source-branch
+          Remove source branch
     .accept-control
-      = link_to "#", class: "modify-merge-commit-link js-toggle-button", title: "Modify merge commit message" do
-        %i.fa.fa-edit
+      = link_to "#", class: "modify-merge-commit-link js-toggle-button" do
+        = icon('edit')
         Modify commit message
     .js-toggle-content.hide.prepend-top-20
       = render 'shared/commit_message_container', params: params,
           text: @merge_request.merge_commit_message,
           rows: 14, hint: true
 
-  %br
-  .light
-    If you want to merge this request manually, you can use the
-    %strong
-      = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
-
   :coffeescript
     $('.accept-mr-form').on 'ajax:before', ->
       btn = $('.accept_merge_request')
diff --git a/app/views/projects/merge_requests/widget/open/_archived.html.haml b/app/views/projects/merge_requests/widget/open/_archived.html.haml
index eaf113ee568..ab30fa6b243 100644
--- a/app/views/projects/merge_requests/widget/open/_archived.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_archived.html.haml
@@ -1,2 +1,4 @@
+%h4 
+  Project is archived
 %p
-  %strong Archived projects do not provide commit access.
+  This merge request cannot be merged because archived projects cannot be written to.
diff --git a/app/views/projects/merge_requests/widget/open/_check.html.haml b/app/views/projects/merge_requests/widget/open/_check.html.haml
index e775447cb75..b6b8974297e 100644
--- a/app/views/projects/merge_requests/widget/open/_check.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_check.html.haml
@@ -1,6 +1,6 @@
 %strong
-  %i.fa.fa-spinner.fa-spin
-  Checking automatic merge…
+  = icon("spinner spin")
+  Checking ability to merge automatically&hellip;
 
 :coffeescript
   $ ->
diff --git a/app/views/projects/merge_requests/widget/open/_conflicts.html.haml b/app/views/projects/merge_requests/widget/open/_conflicts.html.haml
index 7dc3b4eb2cc..e6c089fefb2 100644
--- a/app/views/projects/merge_requests/widget/open/_conflicts.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_conflicts.html.haml
@@ -1,10 +1,10 @@
-- if @merge_request.can_be_merged_by?(current_user)
-  %h4
-    This merge request contains merge conflicts that must be resolved.
-  %p
-    You can merge it manually using the
-    %strong
-      = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
-- else
-  %strong This merge request contains merge conflicts that must be resolved.
-  Only those with write access to this repository can merge merge requests.
+%h4
+  = icon("exclamation-triangle")
+  This merge request contains merge conflicts
+
+%p
+  Please resolve these conflicts or 
+  - if @merge_request.can_be_merged_by?(current_user)
+    #{link_to "merge this request manually", "#modal_merge_info", class: "how_to_merge_link vlink", "data-toggle" => "modal"}.
+  - else
+    ask someone with write access to this repository to merge this request manually.
diff --git a/app/views/projects/merge_requests/widget/open/_missing_branch.html.haml b/app/views/projects/merge_requests/widget/open/_missing_branch.html.haml
index 1c565bae80a..c9f07629493 100644
--- a/app/views/projects/merge_requests/widget/open/_missing_branch.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_missing_branch.html.haml
@@ -1,16 +1,16 @@
-%h4
-  Can't be merged
-%p
-  This merge request can not be accepted because branch
-  - unless @merge_request.source_branch_exists?
-    %span.label.label-inverse= @merge_request.source_branch
-    does not exist in
-    %span.label.label-info= @merge_request.source_project_path
-    %br
-    %strong Please close this merge request and open a new merge request to change source branches.
-  - else
-    %span.label.label-inverse= @merge_request.target_branch
-    does not exist in
-    %span.label.label-info= @merge_request.target_project_path
-    %br
-    %strong Please close this merge request or change to another target branch.
+- unless @merge_request.source_branch_exists?
+  %h4
+    = icon("exclamation-triangle")
+    Source branch
+    %span.label-branch= source_branch_with_namespace(@merge_request)
+    does not exist
+  %p
+    Please restore the source branch or close this merge request and open a new merge request with a different source branch.
+- else
+  %h4
+    = icon("exclamation-triangle")
+    Target branch
+    %span.label-branch= @merge_request.target_branch
+    does not exist
+  %p
+    Please restore the target branch or use a different target branch.
diff --git a/app/views/projects/merge_requests/widget/open/_not_allowed.html.haml b/app/views/projects/merge_requests/widget/open/_not_allowed.html.haml
index 82f6ffd8fcb..a8145558ca8 100644
--- a/app/views/projects/merge_requests/widget/open/_not_allowed.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_not_allowed.html.haml
@@ -1,2 +1,4 @@
-%strong This request can be merged automatically.
-Only those with write access to this repository can merge merge requests.
+%h4 
+  Ready to be merged automatically
+%p
+  Ask someone with write access to this repository to merge this request.
diff --git a/app/views/projects/merge_requests/widget/open/_nothing.html.haml b/app/views/projects/merge_requests/widget/open/_nothing.html.haml
index 4d526576bc2..35626b624b7 100644
--- a/app/views/projects/merge_requests/widget/open/_nothing.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_nothing.html.haml
@@ -1,8 +1,8 @@
-%h4 Nothing to merge
-%p
+%h4 
+  = icon("exclamation-triangle")
   Nothing to merge from
-  %span.label-branch #{@merge_request.source_branch}
-  to
-  %span.label-branch #{@merge_request.target_branch}
-  %br
-  Try to use different branches or push new code.
+  %span.label-branch= source_branch_with_namespace(@merge_request)
+  into
+  %span.label-branch= @merge_request.target_branch
+%p
+  Please push new commits to the source branch or use a different target branch.
diff --git a/app/views/projects/merge_requests/widget/open/_reload.html.haml b/app/views/projects/merge_requests/widget/open/_reload.html.haml
index 5787f6efea4..acfc31725eb 100644
--- a/app/views/projects/merge_requests/widget/open/_reload.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_reload.html.haml
@@ -1 +1,6 @@
-This merge request cannot be merged. Try to reload the page.
+%h4
+  = icon("exclamation-triangle")
+  This merge request failed to be merged automatically
+
+%p
+  Please reload the page to find out the reason.
diff --git a/app/views/projects/merge_requests/widget/open/_wip.html.haml b/app/views/projects/merge_requests/widget/open/_wip.html.haml
index 4ce3ab31278..0cf16542cc1 100644
--- a/app/views/projects/merge_requests/widget/open/_wip.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_wip.html.haml
@@ -1,13 +1,5 @@
-- if @merge_request.can_be_merged_by?(current_user)
-  %h4
-    This merge request cannot be accepted because it is marked as Work In Progress.
+%h4
+  This merge request is currently a Work In Progress
 
-  %p
-    %button.btn.disabled{:type => 'button'}
-      %i.fa.fa-warning
-      Accept Merge Request
-    &nbsp;
-    When the merge request is ready, remove the "WIP" prefix from the title to allow it to be accepted.
-- else
-  %strong This merge request is marked as Work In Progress.
-  Only those with write access to this repository can merge merge requests.
+%p
+  When this merge request is ready, remove the "WIP" prefix from the title to allow it to be merged.
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index ac8c1936c9e..3489bf3f191 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -16,10 +16,10 @@
       %p.help-block
         - if issuable.work_in_progress?
           Remove the <code>WIP</code> prefix from the title to allow this
-          <strong>Work In Progress</strong> merge request to be accepted when it's ready.
+          <strong>Work In Progress</strong> merge request to be merged when it's ready.
         - else
           Start the title with <code>[WIP]</code> or <code>WIP:</code> to prevent a
-          <strong>Work In Progress</strong> merge request from being accepted before it's ready.
+          <strong>Work In Progress</strong> merge request from being merged before it's ready.
 .form-group.issuable-description
   = f.label :description, 'Description', class: 'control-label'
   .col-sm-10