Ensure MR accept disabled and enabled appropriately.

app/assets/javascripts/merge_request_widget/approvals/components/approvals_body.js.es6

@@ -35,6 +35,9 @@
         return gl.ApprovalsStore.approve();
       },
     },
+    beforeCreate() {
+      gl.ApprovalsStore.initStoreOnce();
+    },
     template: `
       <div class='approvals-body mr-widget-body'>
         <h4> Requires {{ approvalsRequiredStringified }}

app/assets/javascripts/merge_request_widget/approvals/components/approvals_footer.js.es6

@@ -19,9 +19,7 @@
       },
     },
     beforeCreate() {
-      gl.ApprovalsStore.initStoreOnce().then(() => {
-        this.loaded = true;
-      });
+      gl.ApprovalsStore.initStoreOnce();
     },
     template: `
       <div class='mr-widget-footer approved-by-users approvals-footer clearfix'>

app/assets/javascripts/merge_request_widget/approvals/stores/approvals_store.js.es6

@@ -16,18 +16,18 @@
       this.rootStore = rootStore;
       this.api = new gl.ApprovalsApi(rootStore.dataset.endpoint);
       this.state = {
-        loading: false,
+        fetching: false,
       };
     }
 
     initStoreOnce() {
       const state = this.state;
-      if (!state.loading) {
-        state.loading = true;
+      if (!state.fetching) {
+        state.fetching = true;
         return this.fetch()
           .then(() => {
-            state.loading = false;
-            this.assignToRootStore(false, 'loading');
+            state.fetching = false;
+            this.assignToRootStore('showApprovals', true);
           })
           .catch((err) => {
             console.error(`Failed to initialize approvals store: ${err}`);
@@ -38,19 +38,24 @@
 
     fetch() {
       return this.api.fetchApprovals()
-        .then(res => this.assignToRootStore('approvals', res.data));
+        .then(res => this.assignToRootStore('approvals', res.data))
+        .then(data => this.maybeDisableAcceptance(data.approvals_left));
     }
 
     approve() {
       return this.api.approveMergeRequest()
         .then(res => this.assignToRootStore('approvals', res.data))
-        .then(data => this.maybeHideWidgetBody(data.approvals_left));
+        .then(data => this.maybeDisableAcceptance(data.approvals_left));
     }
 
     unapprove() {
       return this.api.unapproveMergeRequest()
         .then(res => this.assignToRootStore('approvals', res.data))
-        .then(data => this.maybeHideWidgetBody(data.approvals_left));
+        .then(data => this.maybeDisableAcceptance(data.approvals_left));
+    }
+
+    maybeDisableAcceptance(approvals_left) {
+      return this.rootStore.assignToData('disableAcceptance', !!approvals_left);
     }
 
     assignToRootStore(key, data) {

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

@@ -25,6 +25,8 @@
     initState() {
       this.assignToData('loading', true);
       this.assignToData('showWidgetBody', true);
+      this.assignToData('showApprovals', false);
+      this.assignToData('disableAcceptance', false);
     }
 
     initApprovals() {

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

@@ -4,13 +4,6 @@
 #merge-request-widget-app.mr-state-widget{ 'data-endpoint'=> merge_request_path(@merge_request) }
   = render 'projects/merge_requests/widget/heading'
   .mr-widget-body
-    - if @merge_request.requires_approve?
-      .loading{ 'v-show' => 'loading' }
-        = icon('spinner spin')
-      = render 'projects/merge_requests/widget/open/approvals_body'
-      = render 'projects/merge_requests/widget/open/approvals_footer'
-
-
     -# After conflicts are resolved, the user is redirected back to the MR page.
     -# There is a short window before background workers run and GitLab processes
     -# the new push and commits, during which it will think the conflicts still exist.
@@ -55,3 +48,11 @@
           != markdown issues_sentence(mr_closes_issues), pipeline: :gfm, author: @merge_request.author
         = mr_assign_issues_link
 
+  - if @merge_request.requires_approve?
+    .loading{ 'v-show' => '!showApprovals' }
+      = icon('spinner spin')
+    .approvals-components{ 'v-show' => 'showApprovals' }
+    = render 'projects/merge_requests/widget/open/approvals_body'
+    = render 'projects/merge_requests/widget/open/approvals_footer'
+
+

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

@@ -25,7 +25,7 @@
                     = icon('warning fw')
                     Merge Immediately
         - else
-          = f.button class: "btn btn-create btn-grouped js-merge-button accept_merge_request #{status_class}" do
+          = f.button class: "btn btn-create btn-grouped js-merge-button accept_merge_request #{status_class}", ':disabled' => 'disableAcceptance' do
             Accept Merge Request
       - if @merge_request.force_remove_source_branch?
         .accept-control

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

-%approvals-body{':user-can-approve' => 'approvals.user_can_approve', ':user-has-approved' => 'approvals.user_has_approved', ':approved-by' => 'approvals.approved_by', ':approvals-left':'approvals.approvals_left', ':suggested-approvers' => 'approvals.suggested_approvers', ':widget-loading' => 'loading'}
+%approvals-body{':user-can-approve' => 'approvals.user_can_approve', ':user-has-approved' => 'approvals.user_has_approved', ':approved-by' => 'approvals.approved_by', ':approvals-left':'approvals.approvals_left', ':suggested-approvers' => 'approvals.suggested_approvers'}