Completely wire up approvals_api.

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

@@ -5,11 +5,6 @@
   Vue.component('approvals-body', {
     name: 'approvals-body',
     props: ['approvedBy', 'approvalsLeft', 'userCanApprove', 'userHasApproved'],
-    data() {
-      return {
-        loading: true,
-      };
-    },
     computed: {
       approvalsRequiredStringified() {
         return this.approvalsLeft === 1 ? 'one more approval' :
@@ -37,9 +32,7 @@
       },
     },
     beforeCreate() {
-      gl.ApprovalsStore.fetch().then(() => {
-        this.loading = false;
-      });
+      return gl.ApprovalsStore.fetch().then();
     },
     template: `
       <div>
@@ -53,7 +46,6 @@
             </button>
           </div>
         </div>
-        <loading-icon v-if='loading'></loading-icon>
       </div>
     `,
   });

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

 //= require ../stores/approvals_store
 //= require vue_common_component/link_to_member_avatar
-//= require vue_common_component/loading_icon
 
 (() => {
 
   Vue.component('approvals-footer', {
     name: 'approvals-footer',
     props: ['userCanApprove', 'userHasApproved', 'approvedBy', 'approvalsLeft', 'pendingAvatarSvg', 'checkmarkSvg'],
-    data() {
-      return {
-        loading: true,
-      };
-    },
     computed: {
       hasApprovers() {
         return this.approvedBy && this.approvedBy.length;
@@ -22,13 +16,11 @@
     },
     methods: {
       removeApproval() {
-        return gl.ApprovalsStore.unapprove();
+        gl.ApprovalsStore.unapprove();
       },
     },
     beforeCreate() {
-      return gl.ApprovalsStore.fetch().then(() => {
-        this.loading = false;
-      });
+      return gl.ApprovalsStore.fetch();
     },
     template: `
       <div v-if='hasApprovers' class='mr-widget-footer approved-by-users approvals-footer clearfix'>
@@ -54,9 +46,8 @@
         </span>
         <span class='unapprove-btn-wrap' v-if='showUnapproveButton'>
           <i class='fa fa-close'></i>
-          <span @click='removeApproval'>Remove your approval</span>
+          <span @click='removeApproval()'>Remove your approval</span>
         </span>
-        <loading-icon v-if='loading'></loading-icon>
       </div>
     `,
   });

app/assets/javascripts/merge_request_widget/approvals/services/approvals_api.js.es6

@@ -9,6 +9,7 @@
 
     init(mergeRequestEndpoint) {
       this.baseEndpoint = mergeRequestEndpoint;
+      Vue.http.headers.common['X-CSRF-Token'] = $.rails.csrfToken();
     }
 
     fetchApprovals() {
@@ -20,7 +21,7 @@
 
     approveMergeRequest() {
       const endpoint = `${this.baseEndpoint}/approvals`;
-      return Vue.http.save(endpoint).catch((err) => {
+      return Vue.http.post(endpoint).catch((err) => {
         console.error(`Error approving merge request. ${err}`);
       });
     }

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

@@ -28,12 +28,12 @@
 
     approve() {
       return this.api.approveMergeRequest()
-        .then(res => this.rootStore.assignToData(res.data));
+        .then(res => this.assignToRootStore(res.data));
     }
 
     unapprove() {
       return this.api.unapproveMergeRequest()
-        .then(res => this.rootStore.assignToData(res.data));
+        .then(res => this.assignToRootStore(res.data));
     }
   }