Disable all merge acceptance buttons on the MR widget pending approval.

app/assets/javascripts/merge_request_widget.js.es6

@@ -144,8 +144,9 @@
     MergeRequestWidget.prototype.getMergeStatus = function() {
       return $.get(this.opts.merge_check_url, function(data) {
         var $html = $(data);
+
         $('.mr-widget-body').replaceWith($html.find('.mr-widget-body'));
-        $('.mr-widget-footer:not(.mr-approvals-footer)').replaceWith($html.find('.mr-widget-footer:not(.mr-approvals-footer)'));
+        $('.mr-widget-footer').replaceWith($html.find('.mr-widget-footer'));
       });
     };
 

app/assets/javascripts/merge_request_widget/ci_bundle.js.es6

@@ -46,7 +46,10 @@
       .on('click', '.js-rebase-button', () => {
         $('.js-rebase-button').html("<i class='fa fa-spinner fa-spin'></i> Rebase in progress");
       });
-    } else {
+    } else if (!$('.mr-approvals-footer').length) {
+      // getMergeStatus replaces the MR widget with new, updated HTML, which means any persistent
+      // event management gets clobbered. When the MR is approvable, MR status is already managed
+      // and breaks when the DOM is clobbered.
       merge_request_widget.getMergeStatus();
     }
   });

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

@@ -3,7 +3,7 @@
 
 - approval_pending = @merge_request.requires_approve? && !@merge_request.approved?
 
-#merge-request-widget-app.mr-state-widget{ 'data-endpoint'=> merge_request_path(@merge_request), 'data-approval-pending' => approval_pending }
+#merge-request-widget-app.mr-state-widget{ 'data-endpoint'=> merge_request_path(@merge_request), 'data-approval-pending' => approval_pending.to_s }
   = render 'projects/merge_requests/widget/heading'
   .mr-widget-body
     -# After conflicts are resolved, the user is redirected back to the MR page.

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

@@ -2,6 +2,7 @@
   = page_specific_javascript_tag('merge_request_widget/ci_bundle.js')
 
 - status_class = @pipeline ? " ci-#{@pipeline.status}" : nil
+- approval_pending = @merge_request.requires_approve? && !@merge_request.approved?
 
 = form_for [:merge, @project.namespace.becomes(Namespace), @project, @merge_request], remote: true, method: :post, html: { class: 'accept-mr-form js-quick-submit js-requires-input' } do |f|
   = hidden_field_tag :authenticity_token, form_authenticity_token
@@ -11,10 +12,10 @@
       .accept-action
         - if @pipeline && @pipeline.active?
           %span.btn-group
-            = button_tag class: "btn btn-create js-merge-button merge_when_build_succeeds" do
+            = button_tag class: "btn btn-create js-merge-button merge_when_build_succeeds", disabled: approval_pending, ":disabled" => "disableAcceptance" do
               Merge When Pipeline Succeeds
             - unless @project.only_allow_merge_if_build_succeeds?
-              = button_tag class: "btn btn-success dropdown-toggle", 'data-toggle' => 'dropdown' do
+              = button_tag class: "btn btn-success dropdown-toggle", 'data-toggle' => 'dropdown', disabled: approval_pending, ":disabled" => "disableAcceptance" do
                 = icon('caret-down')
                 %span.sr-only
                   Select Merge Moment
@@ -28,7 +29,7 @@
                     = icon('warning fw')
                     Merge Immediately
         - else
-          = f.button class: "btn btn-create btn-grouped js-merge-button accept_merge_request #{status_class}", ':disabled' => 'disableAcceptance' do
+          = f.button class: "btn btn-create btn-grouped js-merge-button accept_merge_request #{status_class}", disabled: approval_pending, ":disabled" => "disableAcceptance" do
             Accept Merge Request
       - if @merge_request.force_remove_source_branch?
         .accept-control

changelogs/unreleased-ee/1595-merge-when-pipeline-succeeds-visible-if-approvals-are-pending.yml

+---
+title: Disable all merge acceptance buttons pending MR approval.
+merge_request: !1101
+author:

spec/features/merge_requests/approvals_spec.rb

@@ -238,6 +238,24 @@ feature 'Merge request approvals', js: true, feature: true do
         expect(page).to have_no_css('.approver-avatar')
       end
     end
+
+    context 'when CI is running but no approval given', js: true do
+      before do
+        create :approver_group, group: group, target: merge_request
+        create(:ci_empty_pipeline, project: project, sha: merge_request.diff_head_sha, ref: merge_request.source_branch)
+        visit namespace_project_merge_request_path(project.namespace, project, merge_request)
+      end
+
+      it 'I am unable to set Merge When Pipeline Succeeds' do
+        # before approval status is loaded
+        expect(page).to have_button('Merge When Pipeline Succeeds', disabled: true)
+
+        wait_for_ajax
+
+        # after approval status is loaded
+        expect(page).to have_button('Merge When Pipeline Succeeds', disabled: true)
+      end
+    end
   end
 end