Merge branch 'refactor-mr-widget' into 'master'

Refactor accept merge request widget

* make each case a simple view
* separate  merge request JS from merge request accept widget JS

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

See merge request !799

28 files changed, 306 insertions, 299 deletions

diff --git a/app/assets/javascripts/merge_request.js.coffee b/app/assets/javascripts/merge_request.js.coffee
index b8f916b5223..25a7815dba2 100644
--- a/app/assets/javascripts/merge_request.js.coffee
+++ b/app/assets/javascripts/merge_request.js.coffee
@@ -11,12 +11,6 @@ class @MergeRequest
   #   commits_loaded - Boolean, have commits been pre-rendered server-side?
   #                    (default: false)
   #
-  #   check_enable           - Boolean, whether to check automerge status
-  #   url_to_automerge_check - String, URL to use to check automerge status
-  #   current_status         - String, current automerge status
-  #   ci_enable              - Boolean, whether a CI service is enabled
-  #   url_to_ci_check        - String, URL to use to check CI status
-  #
   constructor: (@opts) ->
     @initContextWidget()
     this.$el = $('.merge-request')
@@ -27,14 +21,9 @@ class @MergeRequest
     this.bindEvents()
     this.activateTabFromPath()
 
-    this.initMergeWidget()
     this.$('.show-all-commits').on 'click', =>
       this.showAllCommits()
 
-    modal = $('#modal_merge_info').modal(show: false)
-
-    disableButtonIfEmptyField '#commit_message', '.accept_merge_request'
-
     # Prevent duplicate event bindings
     @disableTaskList()
 
@@ -63,20 +52,6 @@ class @MergeRequest
     $(".context .inline-update").on "change", "#merge_request_assignee_id", ->
       $(this).submit()
 
-  initMergeWidget: ->
-    this.showState( @opts.current_status )
-
-    if this.$('.automerge_widget').length and @opts.check_enable
-      $.get @opts.url_to_automerge_check, (data) =>
-        this.showState( data.merge_status )
-      , 'json'
-
-    if @opts.ci_enable
-      $.get @opts.url_to_ci_check, (data) =>
-        this.showCiState data.status
-        if data.coverage
-          this.showCiCoverage data.coverage
-      , 'json'
 
   bindEvents: ->
     this.$('.merge-request-tabs a[data-toggle="tab"]').on 'shown.bs.tab', (e) =>
@@ -92,22 +67,6 @@ class @MergeRequest
       unless @opts.action == 'new'
         @setCurrentAction(tab_action)
 
-    this.$('.accept_merge_request').on 'click', ->
-      $('.automerge_widget.can_be_merged').hide()
-      $('.merge-in-progress').show()
-
-    this.$('.remove_source_branch').on 'click', ->
-      $('.remove_source_branch_widget').hide()
-      $('.remove_source_branch_in_progress').show()
-
-    this.$(".remove_source_branch").on "ajax:success", (e, data, status, xhr) ->
-      location.reload()
-
-    this.$(".remove_source_branch").on "ajax:error", (e, data, status, xhr) =>
-      this.$('.remove_source_branch_widget').hide()
-      this.$('.remove_source_branch_in_progress').hide()
-      this.$('.remove_source_branch_widget.failed').show()
-
   # Activate a tab based on the current URL path
   #
   # If the current action is 'show' or 'new' (i.e., initial page load),
@@ -157,30 +116,6 @@ class @MergeRequest
     # See https://github.com/rails/turbolinks/issues/363
     history.replaceState {turbolinks: true, url: new_state}, '', new_state
 
-  showState: (state) ->
-    $('.automerge_widget').hide()
-    $('.automerge_widget.' + state).show()
-
-  showCiState: (state) ->
-    $('.ci_widget').hide()
-    allowed_states = ["failed", "canceled", "running", "pending", "success"]
-    if state in allowed_states
-      $('.ci_widget.ci-' + state).show()
-      switch state
-        when "failed", "canceled"
-          @setMergeButtonClass('btn-danger')
-        when "running", "pending"
-          @setMergeButtonClass('btn-warning')
-    else
-      $('.ci_widget.ci-error').show()
-      @setMergeButtonClass('btn-danger')
-
-  showCiCoverage: (coverage) ->
-    cov_html = $('<span>')
-    cov_html.addClass('ci-coverage')
-    cov_html.text('Coverage ' + coverage + '%')
-    $('.ci_widget:visible').append(cov_html)
-
   loadDiff: (event) ->
     $.ajax
       type: 'GET'
@@ -198,26 +133,6 @@ class @MergeRequest
     this.$('.first-commits').remove()
     this.$('.all-commits').removeClass 'hide'
 
-  alreadyOrCannotBeMerged: ->
-    this.$('.automerge_widget').hide()
-    this.$('.merge-in-progress').hide()
-    this.$('.automerge_widget.already_cannot_be_merged').show()
-
-  setMergeButtonClass: (css_class) ->
-    $('.accept_merge_request').removeClass("btn-create").addClass(css_class)
-
-  mergeInProgress: ->
-    $.ajax
-      type: 'GET'
-      url: $('.merge-request').data('url')
-      success: (data) =>
-        switch data.state
-          when 'merged'
-            location.reload()
-          else
-            setTimeout(merge_request.mergeInProgress, 3000)
-      dataType: 'json'
-
   initTaskList: ->
     $('.merge-request-details .js-task-list-container').taskList('enable')
     $(document).on 'tasklist:changed', '.merge-request-details .js-task-list-container', @updateTaskList
diff --git a/app/assets/javascripts/merge_request_widget.js.coffee b/app/assets/javascripts/merge_request_widget.js.coffee
new file mode 100644
index 00000000000..ca769e06a4e
--- /dev/null
+++ b/app/assets/javascripts/merge_request_widget.js.coffee
@@ -0,0 +1,58 @@
+class @MergeRequestWidget
+  # Initialize MergeRequestWidget behavior
+  #
+  #   check_enable           - Boolean, whether to check automerge status
+  #   url_to_automerge_check - String, URL to use to check automerge status
+  #   current_status         - String, current automerge status
+  #   ci_enable              - Boolean, whether a CI service is enabled
+  #   url_to_ci_check        - String, URL to use to check CI status
+  #
+  constructor: (@opts) ->
+    modal = $('#modal_merge_info').modal(show: false)
+
+  mergeInProgress: ->
+    $.ajax
+      type: 'GET'
+      url: $('.merge-request').data('url')
+      success: (data) =>
+        switch data.state
+          when 'merged'
+            location.reload()
+          else
+            setTimeout(merge_request_widget.mergeInProgress, 3000)
+      dataType: 'json'
+
+  getMergeStatus: ->
+    $.get @opts.url_to_automerge_check, (data) ->
+      $('.mr-state-widget').replaceWith(data)
+
+  getCiStatus: ->
+    if @opts.ci_enable
+      $.get @opts.url_to_ci_check, (data) =>
+        this.showCiState data.status
+        if data.coverage
+          this.showCiCoverage data.coverage
+      , 'json'
+
+  showCiState: (state) ->
+    $('.ci_widget').hide()
+    allowed_states = ["failed", "canceled", "running", "pending", "success"]
+    if state in allowed_states
+      $('.ci_widget.ci-' + state).show()
+      switch state
+        when "failed", "canceled"
+          @setMergeButtonClass('btn-danger')
+        when "running", "pending"
+          @setMergeButtonClass('btn-warning')
+    else
+      $('.ci_widget.ci-error').show()
+      @setMergeButtonClass('btn-danger')
+
+  showCiCoverage: (coverage) ->
+    cov_html = $('<span>')
+    cov_html.addClass('ci-coverage')
+    cov_html.text('Coverage ' + coverage + '%')
+    $('.ci_widget:visible').append(cov_html)
+
+  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 f5ac7bd8805..61071320973 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -3,7 +3,7 @@
    * MR -> show: Automerge widget
  *
  */
-.automerge_widget {
+.mr-state-widget {
   form {
     margin-bottom: 0;
     .clearfix {
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index 71d3051ab88..14069bafe71 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -139,11 +139,13 @@ class Projects::MergeRequestsController < Projects::ApplicationController
       @merge_request.check_if_can_be_merged
     end
 
-    render json: { merge_status: @merge_request.automerge_status }
+    closes_issues
+
+    render partial: "projects/merge_requests/widget/show.html.haml", layout: false
   end
 
   def automerge
-    return access_denied! unless allowed_to_merge?
+    return access_denied! unless @merge_request.can_be_merged_by?(current_user)
 
     if @merge_request.automergeable?
       AutoMergeWorker.perform_async(@merge_request.id, current_user.id, params)
@@ -252,8 +254,6 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     @commits = @merge_request.commits
 
     @merge_request_diff = @merge_request.merge_request_diff
-    @allowed_to_merge = allowed_to_merge?
-    @show_merge_controls = @merge_request.open? && @commits.any? && @allowed_to_merge
     @source_branch = @merge_request.source_project.repository.find_branch(@merge_request.source_branch).try(:name)
 
     if @merge_request.locked_long_ago?
@@ -262,19 +262,11 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     end
   end
 
-  def allowed_to_merge?
-    allowed_to_push_code?(project, @merge_request.target_branch)
-  end
-
   def invalid_mr
     # Render special view for MR with removed source or target branch
     render 'invalid'
   end
 
-  def allowed_to_push_code?(project, branch)
-    ::Gitlab::GitAccess.new(current_user, project).can_push_to_branch?(branch)
-  end
-
   def merge_request_params
     params.require(:merge_request).permit(
       :title, :assignee_id, :source_project_id, :source_branch,
diff --git a/app/models/merge_request.rb b/app/models/merge_request.rb
index f1f9f23b12c..487d62e65b6 100644
--- a/app/models/merge_request.rb
+++ b/app/models/merge_request.rb
@@ -405,4 +405,16 @@ class MergeRequest < ActiveRecord::Base
 
     locked_at.nil? || locked_at < (Time.now - 1.day)
   end
+
+  def has_ci?
+    source_project.ci_service && commits.any?
+  end
+
+  def branch_missing?
+    !source_branch_exists? || !target_branch_exists?
+  end
+
+  def can_be_merged_by?(user)
+    ::Gitlab::GitAccess.new(user, project).can_push_to_branch?(target_branch)
+  end
 end
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 74f8b9950cf..5d7e73f2b28 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -32,7 +32,7 @@
               %li= link_to "Plain Diff",    merge_request_path(@merge_request, format: :diff)
 
     = render "projects/merge_requests/show/how_to_merge"
-    = render "projects/merge_requests/show/state_widget"
+    = render "projects/merge_requests/widget/show.html.haml"
 
   - if @commits.present?
     %ul.nav.nav-tabs.merge-request-tabs
@@ -69,10 +69,5 @@
   var merge_request;
 
   merge_request = new MergeRequest({
-    url_to_automerge_check: "#{automerge_check_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}",
-    check_enable: #{@merge_request.unchecked? ? "true" : "false"},
-    url_to_ci_check: "#{ci_status_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}",
-    ci_enable: #{@project.ci_service ? "true" : "false"},
-    current_status: "#{@merge_request.automerge_status}",
     action: "#{controller.action_name}"
   });
diff --git a/app/views/projects/merge_requests/automerge.js.haml b/app/views/projects/merge_requests/automerge.js.haml
index a53cbb150a4..33321651e32 100644
--- a/app/views/projects/merge_requests/automerge.js.haml
+++ b/app/views/projects/merge_requests/automerge.js.haml
@@ -1,6 +1,6 @@
--if @status
+- if @status
   :plain
-    merge_request.mergeInProgress();
--else
+    merge_request_widget.mergeInProgress();
+- else
   :plain
-    merge_request.alreadyOrCannotBeMerged()
+    $('.mr-widget-body').html("#{escape_javascript(render('projects/merge_requests/widget/open/reload'))}");
diff --git a/app/views/projects/merge_requests/show/_mr_accept.html.haml b/app/views/projects/merge_requests/show/_mr_accept.html.haml
deleted file mode 100644
index bfd4ab6f3d8..00000000000
--- a/app/views/projects/merge_requests/show/_mr_accept.html.haml
+++ /dev/null
@@ -1,89 +0,0 @@
-- unless @allowed_to_merge
-  - if @project.archived?
-    %p
-      %strong Archived projects do not provide commit access.
-  - else
-    .automerge_widget.cannot_be_merged.hide
-      %strong This merge request contains merge conflicts that must be resolved.
-      Only those with write access to this repository can merge merge requests.
-    .automerge_widget.work_in_progress.hide
-      %strong This merge request is marked as Work In Progress.
-      Only those with write access to this repository can merge merge requests.
-    .automerge_widget.can_be_merged.hide
-      %strong This request can be merged automatically.
-      Only those with write access to this repository can merge merge requests.
-
-
-- if @show_merge_controls
-  .automerge_widget.can_be_merged.hide
-    .clearfix
-      = form_for [:automerge, @project.namespace.becomes(Namespace), @project, @merge_request], remote: true, method: :post do |f|
-        .accept-merge-holder.clearfix.js-toggle-container
-          .accept-action
-            = f.submit "Accept Merge Request", class: "btn btn-create accept_merge_request"
-          - if can_remove_branch?(@merge_request.source_project, @merge_request.source_branch) && !@merge_request.for_fork?
-            .accept-control.checkbox
-              = label_tag :should_remove_source_branch, class: "remove_source_checkbox" do
-                = check_box_tag :should_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
-              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"
-
-
-  .automerge_widget.no_satellite.hide
-    %p
-      %span
-        %strong This repository does not have a satellite. Please ask an administrator to fix this issue!
-
-  .automerge_widget.cannot_be_merged.hide
-    %h4
-      This merge request contains merge conflicts that must be resolved.
-      You can try it manually on the
-      %strong
-        = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
-
-    %p
-      %button.btn.disabled{:type => 'button'}
-        %i.fa.fa-warning
-        Accept Merge Request
-      &nbsp;
-      This happens when Git is not able to automatically resolve conflicts between branches.
-
-  .automerge_widget.work_in_progress.hide
-    %h4
-      This merge request cannot be accepted because it is marked as 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.
-
-  .automerge_widget.unchecked
-    %p
-      %strong
-        %i.fa.fa-spinner.fa-spin
-        Checking automatic merge…
-
-  .automerge_widget.already_cannot_be_merged.hide
-    %p
-      %strong This merge request cannot be merged. Try to reload the page.
-
-  .merge-in-progress.hide
-    %p
-      %i.fa.fa-spinner.fa-spin
-      &nbsp;
-      Merge is in progress. Please wait… Page will be reloaded automatically. &nbsp;
diff --git a/app/views/projects/merge_requests/show/_mr_ci.html.haml b/app/views/projects/merge_requests/show/_mr_ci.html.haml
deleted file mode 100644
index 3b1cd53df37..00000000000
--- a/app/views/projects/merge_requests/show/_mr_ci.html.haml
+++ /dev/null
@@ -1,34 +0,0 @@
-- if @commits.any?
-  .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-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|
-    .ci_widget{class: "ci-#{status}", style: "display:none"}
-      = icon("clock-o")
-      %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"
-
-  .ci_widget
-    = icon("spinner spin")
-    Checking for CI status 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"
-
-  .ci_widget.ci-error{style: "display:none"}
-    = icon("times")
-    %span Cannot connect to the CI server. Please check your settings and try again.
diff --git a/app/views/projects/merge_requests/show/_remove_source_branch.html.haml b/app/views/projects/merge_requests/show/_remove_source_branch.html.haml
deleted file mode 100644
index 59cb85edfce..00000000000
--- a/app/views/projects/merge_requests/show/_remove_source_branch.html.haml
+++ /dev/null
@@ -1,17 +0,0 @@
-- if @source_branch.blank?
-  Source branch has been removed
-
-- elsif can_remove_branch?(@merge_request.source_project, @merge_request.source_branch) && @merge_request.merged?
-  .remove_source_branch_widget
-    %p Changes merged into #{@merge_request.target_branch}. You can remove 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}'
-
-  .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;
diff --git a/app/views/projects/merge_requests/show/_state_widget.html.haml b/app/views/projects/merge_requests/show/_state_widget.html.haml
deleted file mode 100644
index 6396232db22..00000000000
--- a/app/views/projects/merge_requests/show/_state_widget.html.haml
+++ /dev/null
@@ -1,50 +0,0 @@
-.mr-state-widget
-  - if @merge_request.source_project.ci_service && @commits.any?
-    .mr-widget-heading
-      = render "projects/merge_requests/show/mr_ci"
-  .mr-widget-body
-    - if @merge_request.open?
-      - if @merge_request.source_branch_exists? && @merge_request.target_branch_exists?
-        = render "projects/merge_requests/show/mr_accept"
-      - else
-        = render "projects/merge_requests/show/no_accept"
-
-    - if @merge_request.closed?
-      %h4
-        Rejected
-        - 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
-
-    - if @merge_request.merged?
-      %h4
-        Accepted
-        - if @merge_request.merge_event
-          by #{link_to_member(@project, @merge_request.merge_event.author, avatar: true)}
-          #{time_ago_with_tooltip(@merge_request.merge_event.created_at)}
-      = render "projects/merge_requests/show/remove_source_branch"
-
-    - if @merge_request.locked?
-      %h4
-        Merge in progress...
-      %p
-        Merging is in progress. While merging this request is locked and cannot be closed.
-
-    - unless @commits.any?
-      %h4 Nothing to merge
-      %p
-        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.
-
-  - if @closes_issues.present? && @merge_request.open?
-    .mr-widget-footer
-      %span
-        %i.fa.fa-check
-        Accepting this merge request will close #{@closes_issues.size == 1 ? 'issue' : 'issues'}
-        = succeed '.' do
-          != gfm(issues_sentence(@closes_issues))
diff --git a/app/views/projects/merge_requests/widget/_closed.html.haml b/app/views/projects/merge_requests/widget/_closed.html.haml
new file mode 100644
index 00000000000..18164ba771f
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/_closed.html.haml
@@ -0,0 +1,9 @@
+.mr-state-widget
+  = render 'projects/merge_requests/widget/heading'
+  .mr-widget-body
+    %h4
+      Rejected
+      - 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
diff --git a/app/views/projects/merge_requests/widget/_heading.html.haml b/app/views/projects/merge_requests/widget/_heading.html.haml
new file mode 100644
index 00000000000..107c61477e3
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/_heading.html.haml
@@ -0,0 +1,38 @@
+- 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-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|
+      .ci_widget{class: "ci-#{status}", style: "display:none"}
+        = icon("clock-o")
+        %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"
+
+    .ci_widget
+      = icon("spinner spin")
+      Checking for CI status 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"
+
+    .ci_widget.ci-error{style: "display:none"}
+      = icon("times")
+      %span Cannot connect to the CI server. Please check your settings and try again.
+
+  :coffeescript
+    $ ->
+      merge_request_widget.getCiStatus()
diff --git a/app/views/projects/merge_requests/widget/_locked.html.haml b/app/views/projects/merge_requests/widget/_locked.html.haml
new file mode 100644
index 00000000000..13ec278847b
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/_locked.html.haml
@@ -0,0 +1,8 @@
+.mr-state-widget
+  = render 'projects/merge_requests/widget/heading'
+  .mr-widget-body
+    %h4
+      Merge in progress...
+    %p
+      Merging is in progress. While merging this request 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
new file mode 100644
index 00000000000..17c3fdacda8
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/_merged.html.haml
@@ -0,0 +1,41 @@
+.mr-state-widget
+  = render 'projects/merge_requests/widget/heading'
+  .mr-widget-body
+    %h4
+      Accepted
+      - if @merge_request.merge_event
+        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
+
+      - elsif can_remove_branch?(@merge_request.source_project, @merge_request.source_branch) && @merge_request.merged?
+        .remove_source_branch_widget
+          %p Changes merged into #{@merge_request.target_branch}. You can remove 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}'
+
+        .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;
+
+        :coffeescript
+          $('.remove_source_branch').on 'click', ->
+            $('.remove_source_branch_widget').hide()
+            $('.remove_source_branch_in_progress').show()
+
+          $(".remove_source_branch").on "ajax:success", (e, data, status, xhr) ->
+            location.reload()
+
+          $(".remove_source_branch").on "ajax:error", (e, data, status, xhr) ->
+            $('.remove_source_branch_widget').hide()
+            $('.remove_source_branch_in_progress').hide()
+            $('.remove_source_branch_widget.failed').show()
+
+
diff --git a/app/views/projects/merge_requests/widget/_open.html.haml b/app/views/projects/merge_requests/widget/_open.html.haml
new file mode 100644
index 00000000000..bb794912f8f
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/_open.html.haml
@@ -0,0 +1,29 @@
+.mr-state-widget
+  = render 'projects/merge_requests/widget/heading'
+  .mr-widget-body
+    - if @project.archived?
+      = render 'projects/merge_requests/widget/open/archived'
+    - elsif !@project.satellite.exists?
+      = render 'projects/merge_requests/widget/open/no_satellite'
+    - elsif @merge_request.commits.blank?
+      = render 'projects/merge_requests/widget/open/nothing'
+    - elsif @merge_request.branch_missing?
+      = render 'projects/merge_requests/widget/open/missing_branch'
+    - elsif @merge_request.unchecked?
+      = render 'projects/merge_requests/widget/open/check'
+    - elsif @merge_request.cannot_be_merged?
+      = render 'projects/merge_requests/widget/open/conflicts'
+    - elsif @merge_request.work_in_progress?
+      = render 'projects/merge_requests/widget/open/wip'
+    - elsif !@merge_request.can_be_merged_by?(current_user)
+      = render 'projects/merge_requests/widget/open/not_allowed'
+    - elsif @merge_request.can_be_merged?
+      = render 'projects/merge_requests/widget/open/accept'
+
+  - if @closes_issues.present?
+    .mr-widget-footer
+      %span
+        %i.fa.fa-check
+        Accepting this merge request will close #{@closes_issues.size == 1 ? 'issue' : 'issues'}
+        = succeed '.' do
+          != gfm(issues_sentence(@closes_issues))
diff --git a/app/views/projects/merge_requests/widget/_show.html.haml b/app/views/projects/merge_requests/widget/_show.html.haml
new file mode 100644
index 00000000000..263cab7a9e8
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/_show.html.haml
@@ -0,0 +1,20 @@
+- if @merge_request.open?
+  = render 'projects/merge_requests/widget/open'
+- elsif @merge_request.merged?
+  = render 'projects/merge_requests/widget/merged'
+- elsif @merge_request.closed?
+  = render 'projects/merge_requests/widget/closed'
+- elsif @merge_request.locked?
+  = render 'projects/merge_requests/widget/locked'
+
+:javascript
+  var merge_request_widget;
+
+  merge_request_widget = new MergeRequestWidget({
+    url_to_automerge_check: "#{automerge_check_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}",
+    check_enable: #{@merge_request.unchecked? ? "true" : "false"},
+    url_to_ci_check: "#{ci_status_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}",
+    ci_enable: #{@project.ci_service ? "true" : "false"},
+    current_status: "#{@merge_request.automerge_status}",
+  });
+
diff --git a/app/views/projects/merge_requests/widget/open/_accept.html.haml b/app/views/projects/merge_requests/widget/open/_accept.html.haml
new file mode 100644
index 00000000000..41aa66dd76b
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/open/_accept.html.haml
@@ -0,0 +1,34 @@
+= form_for [:automerge, @project.namespace.becomes(Namespace), @project, @merge_request], remote: true, method: :post, html: { class: 'accept-mr-form' } do |f|
+  = hidden_field_tag :authenticity_token, form_authenticity_token
+  .accept-merge-holder.clearfix.js-toggle-container
+    .accept-action
+      = f.button class: "btn btn-create accept_merge_request" do
+        Accept Merge Request
+    - if can_remove_branch?(@merge_request.source_project, @merge_request.source_branch) && !@merge_request.for_fork?
+      .accept-control.checkbox
+        = label_tag :should_remove_source_branch, class: "remove_source_checkbox" do
+          = check_box_tag :should_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
+        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
+    disableButtonIfEmptyField '#commit_message', '.accept_merge_request'
+
+    $('.accept-mr-form').on 'ajax:before', ->
+      btn = $('.accept_merge_request')
+      btn.disable()
+      btn.html("<i class='fa fa-spinner fa-spin'></i> Merge in progress")
+
diff --git a/app/views/projects/merge_requests/widget/open/_archived.html.haml b/app/views/projects/merge_requests/widget/open/_archived.html.haml
new file mode 100644
index 00000000000..eaf113ee568
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/open/_archived.html.haml
@@ -0,0 +1,2 @@
+%p
+  %strong Archived projects do not provide commit access.
diff --git a/app/views/projects/merge_requests/widget/open/_check.html.haml b/app/views/projects/merge_requests/widget/open/_check.html.haml
new file mode 100644
index 00000000000..e775447cb75
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/open/_check.html.haml
@@ -0,0 +1,7 @@
+%strong
+  %i.fa.fa-spinner.fa-spin
+  Checking automatic merge…
+
+:coffeescript
+  $ ->
+    merge_request_widget.getMergeStatus()
diff --git a/app/views/projects/merge_requests/widget/open/_conflicts.html.haml b/app/views/projects/merge_requests/widget/open/_conflicts.html.haml
new file mode 100644
index 00000000000..d1db5fec43a
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/open/_conflicts.html.haml
@@ -0,0 +1,9 @@
+- if @merge_request.can_be_merged_by?(current_user)
+  %h4
+    This merge request contains merge conflicts that must be resolved.
+    You can try it manually on 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.
diff --git a/app/views/projects/merge_requests/show/_no_accept.html.haml b/app/views/projects/merge_requests/widget/open/_missing_branch.html.haml
index 423fcd48e25..423fcd48e25 100644
--- a/app/views/projects/merge_requests/show/_no_accept.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_missing_branch.html.haml
diff --git a/app/views/projects/merge_requests/widget/open/_no_satellite.html.haml b/app/views/projects/merge_requests/widget/open/_no_satellite.html.haml
new file mode 100644
index 00000000000..3718cfd8333
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/open/_no_satellite.html.haml
@@ -0,0 +1,3 @@
+%p
+  %span
+    %strong This repository does not have a satellite. Please ask an administrator to fix this issue!
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
new file mode 100644
index 00000000000..82f6ffd8fcb
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/open/_not_allowed.html.haml
@@ -0,0 +1,2 @@
+%strong This request can be merged automatically.
+Only those with write access to this repository can merge merge requests.
diff --git a/app/views/projects/merge_requests/widget/open/_nothing.html.haml b/app/views/projects/merge_requests/widget/open/_nothing.html.haml
new file mode 100644
index 00000000000..4d526576bc2
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/open/_nothing.html.haml
@@ -0,0 +1,8 @@
+%h4 Nothing to merge
+%p
+  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.
diff --git a/app/views/projects/merge_requests/widget/open/_reload.html.haml b/app/views/projects/merge_requests/widget/open/_reload.html.haml
new file mode 100644
index 00000000000..5787f6efea4
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/open/_reload.html.haml
@@ -0,0 +1 @@
+This merge request cannot be merged. Try to reload the page.
diff --git a/app/views/projects/merge_requests/widget/open/_wip.html.haml b/app/views/projects/merge_requests/widget/open/_wip.html.haml
new file mode 100644
index 00000000000..4ce3ab31278
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/open/_wip.html.haml
@@ -0,0 +1,13 @@
+- if @merge_request.can_be_merged_by?(current_user)
+  %h4
+    This merge request cannot be accepted because it is marked as 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.
diff --git a/features/steps/project/merge_requests.rb b/features/steps/project/merge_requests.rb
index 4ca7cf5e5fe..f6cfa7ef9ed 100644
--- a/features/steps/project/merge_requests.rb
+++ b/features/steps/project/merge_requests.rb
@@ -190,6 +190,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
   end
 
   step 'merge request "Bug NS-05" is mergeable' do
+    merge_request.project.satellite.create
     merge_request.mark_as_mergeable
   end
 
@@ -198,7 +199,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
       merge!: true,
     )
 
-    within '.can_be_merged' do
+    within '.mr-state-widget' do
       click_button "Accept Merge Request"
     end
   end