Extract merge request widget JS to separate class

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

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')
@@ -30,8 +24,6 @@ class @MergeRequest
     this.$('.show-all-commits').on 'click', =>
       this.showAllCommits()
-    modal = $('#modal_merge_info').modal(show: false)
-
     # Prevent duplicate event bindings
     @disableTaskList()
@@ -60,17 +52,6 @@ class @MergeRequest
     $(".context .inline-update").on "change", "#merge_request_assignee_id", ->
       $(this).submit()
-  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'
   bindEvents: ->
     this.$('.merge-request-tabs a[data-toggle="tab"]').on 'shown.bs.tab', (e) =>
@@ -86,18 +67,6 @@ class @MergeRequest
       unless @opts.action == 'new'
         @setCurrentAction(tab_action)
-    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),
@@ -147,26 +116,6 @@ class @MergeRequest
     # See https://github.com/rails/turbolinks/issues/363
     history.replaceState {turbolinks: true, url: new_state}, '', new_state
-  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'
@@ -184,21 +133,6 @@ class @MergeRequest
     this.$('.first-commits').remove()
     this.$('.all-commits').removeClass 'hide'
-  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

app/assets/javascripts/merge_request_widget.js.coffee

+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.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)

app/controllers/projects/merge_requests_controller.rb

@@ -155,10 +155,6 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     else
       @status = false
     end
-
-    respond_to do |format|
-      format.js
-    end
   end
   def branch_from

app/views/projects/merge_requests/_show.html.haml

@@ -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}"
   });

app/views/projects/merge_requests/automerge.js.haml

 - if @status
   :plain
-    merge_request.getMergeStatus();
+    merge_request_widget.mergeInProgress();
 - else
   :plain
     $('.mr-widget-body').html("#{escape_javascript(render('projects/merge_requests/widget/open/reload'))}");

app/views/projects/merge_requests/widget/_heading.html.haml

@@ -35,4 +35,4 @@
   :coffeescript
     $ ->
-      merge_request.getCiStatus()
+      merge_request_widget.getCiStatus()

app/views/projects/merge_requests/widget/_merged.html.haml

@@ -24,3 +24,18 @@
           %i.fa.fa-spinner.fa-spin
            
           Removing source branch '#{@merge_request.source_branch}'. Please wait. Page will be automatically reloaded.  
+
+        :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()
+
+

app/views/projects/merge_requests/widget/_show.html.haml

@@ -6,3 +6,15 @@
   = 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}",
+  });
+

app/views/projects/merge_requests/widget/open/_accept.html.haml

-= form_for [:automerge, @project.namespace.becomes(Namespace), @project, @merge_request], remote: true, method: :post do |f|
+= 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.submit "Accept Merge Request", class: "btn btn-create accept_merge_request"
+      = 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
@@ -26,5 +27,8 @@
   :coffeescript
     disableButtonIfEmptyField '#commit_message', '.accept_merge_request'
-    $('.accept_merge_request').on 'click', ->
-      $('.mr-widget-body').html("#{escape_javascript(render('projects/merge_requests/widget/open/mip'))}")
+    $('.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")
+

app/views/projects/merge_requests/widget/open/_check.html.haml

@@ -5,4 +5,4 @@
 :coffeescript
   $ ->
-    merge_request.getMergeStatus()
+    merge_request_widget.getMergeStatus()

app/views/projects/merge_requests/widget/open/_mip.html.haml

-.merge-in-progress
-  %p
-    %i.fa.fa-spinner.fa-spin
-     
-    Merge is in progress. Please wait… Page will be reloaded automatically.