Switch vue_merge_request_widget to Axios

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js

@@ -34,10 +34,10 @@ export default {
 
       if (isConfirmed) {
         MRWidgetService.stopEnvironment(deployment.stop_url)
-          .then(res => res.json())
-          .then((res) => {
-            if (res.redirect_url) {
-              visitUrl(res.redirect_url);
+          .then(res => res.data)
+          .then((data) => {
+            if (data.redirect_url) {
+              visitUrl(data.redirect_url);
             }
           })
           .catch(() => {

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js

@@ -102,11 +102,11 @@ export default {
             return res;
           }
 
-          return res.json();
+          return res.data;
         })
-        .then((res) => {
-          this.computeGraphData(res.metrics, res.deployment_time);
-          return res;
+        .then((data) => {
+          this.computeGraphData(data.metrics, data.deployment_time);
+          return data;
         })
         .catch(() => {
           this.loadFailed = true;

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js

@@ -31,9 +31,9 @@ export default {
     cancelAutomaticMerge() {
       this.isCancellingAutoMerge = true;
       this.service.cancelAutomaticMerge()
-        .then(res => res.json())
-        .then((res) => {
-          eventHub.$emit('UpdateWidgetData', res);
+        .then(res => res.data)
+        .then((data) => {
+          eventHub.$emit('UpdateWidgetData', data);
         })
         .catch(() => {
           this.isCancellingAutoMerge = false;
@@ -49,9 +49,9 @@ export default {
 
       this.isRemovingSourceBranch = true;
       this.service.mergeResource.save(options)
-        .then(res => res.json())
-        .then((res) => {
-          if (res.status === 'merge_when_pipeline_succeeds') {
+        .then(res => res.data)
+        .then((data) => {
+          if (data.status === 'merge_when_pipeline_succeeds') {
             eventHub.$emit('MRWidgetUpdateRequested');
           }
         })

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js

@@ -47,9 +47,9 @@ export default {
     removeSourceBranch() {
       this.isMakingRequest = true;
       this.service.removeSourceBranch()
-        .then(res => res.json())
-        .then((res) => {
-          if (res.message === 'Branch was removed') {
+        .then(res => res.data)
+        .then((data) => {
+          if (data.message === 'Branch was removed') {
             eventHub.$emit('MRWidgetUpdateRequested', () => {
               this.isMakingRequest = false;
             });

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js

@@ -135,16 +135,16 @@ export default {
 
       this.isMakingRequest = true;
       this.service.merge(options)
-        .then(res => res.json())
-        .then((res) => {
-          const hasError = res.status === 'failed' || res.status === 'hook_validation_error';
+        .then(res => res.data)
+        .then((data) => {
+          const hasError = data.status === 'failed' || data.status === 'hook_validation_error';
 
-          if (res.status === 'merge_when_pipeline_succeeds') {
+          if (data.status === 'merge_when_pipeline_succeeds') {
             eventHub.$emit('MRWidgetUpdateRequested');
-          } else if (res.status === 'success') {
+          } else if (data.status === 'success') {
             this.initiateMergePolling();
           } else if (hasError) {
-            eventHub.$emit('FailedToMerge', res.merge_error);
+            eventHub.$emit('FailedToMerge', data.merge_error);
           }
         })
         .catch(() => {
@@ -159,9 +159,9 @@ export default {
     },
     handleMergePolling(continuePolling, stopPolling) {
       this.service.poll()
-        .then(res => res.json())
-        .then((res) => {
-          if (res.state === 'merged') {
+        .then(res => res.data)
+        .then((data) => {
+          if (data.state === 'merged') {
             // If state is merged we should update the widget and stop the polling
             eventHub.$emit('MRWidgetUpdateRequested');
             eventHub.$emit('FetchActionsContent');
@@ -174,11 +174,11 @@ export default {
 
             // If user checked remove source branch and we didn't remove the branch yet
             // we should start another polling for source branch remove process
-            if (this.removeSourceBranch && res.source_branch_exists) {
+            if (this.removeSourceBranch && data.source_branch_exists) {
               this.initiateRemoveSourceBranchPolling();
             }
-          } else if (res.merge_error) {
-            eventHub.$emit('FailedToMerge', res.merge_error);
+          } else if (data.merge_error) {
+            eventHub.$emit('FailedToMerge', data.merge_error);
             stopPolling();
           } else {
             // MR is not merged yet, continue polling until the state becomes 'merged'
@@ -199,11 +199,11 @@ export default {
     },
     handleRemoveBranchPolling(continuePolling, stopPolling) {
       this.service.poll()
-        .then(res => res.json())
-        .then((res) => {
+        .then(res => res.data)
+        .then((data) => {
           // If source branch exists then we should continue polling
           // because removing a source branch is a background task and takes time
-          if (res.source_branch_exists) {
+          if (data.source_branch_exists) {
             continuePolling();
           } else {
             // Branch is removed. Update widget, stop polling and hide the spinner

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js

@@ -23,9 +23,9 @@ export default {
     removeWIP() {
       this.isMakingRequest = true;
       this.service.removeWIP()
-        .then(res => res.json())
-        .then((res) => {
-          eventHub.$emit('UpdateWidgetData', res);
+        .then(res => res.data)
+        .then((data) => {
+          eventHub.$emit('UpdateWidgetData', data);
           new window.Flash('The merge request can now be merged.', 'notice'); // eslint-disable-line
           $('.merge-request .detail-page-description .title').text(this.mr.title);
         })

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -84,14 +84,14 @@ export default {
     },
     checkStatus(cb) {
       return this.service.checkStatus()
-        .then(res => res.json())
-        .then((res) => {
-          this.handleNotification(res);
-          this.mr.setData(res);
+        .then(res => res.data)
+        .then((data) => {
+          this.handleNotification(data);
+          this.mr.setData(data);
           this.setFaviconHelper();
 
           if (cb) {
-            cb.call(null, res);
+            cb.call(null, data);
           }
         })
         .catch(() => {
@@ -124,10 +124,10 @@ export default {
     },
     fetchDeployments() {
       return this.service.fetchDeployments()
-        .then(res => res.json())
-        .then((res) => {
-          if (res.length) {
-            this.mr.deployments = res;
+        .then(res => res.data)
+        .then((data) => {
+          if (data.length) {
+            this.mr.deployments = data;
           }
         })
         .catch(() => {
@@ -137,9 +137,9 @@ export default {
     fetchActionsContent() {
       this.service.fetchMergeActionsContent()
         .then((res) => {
-          if (res.body) {
+          if (res.data) {
             const el = document.createElement('div');
-            el.innerHTML = res.body;
+            el.innerHTML = res.data;
             document.body.appendChild(el);
             Project.initRefSwitcher();
           }

app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js

-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
+import axios from '../../lib/utils/axios_utils';
 
 export default class MRWidgetService {
   constructor(endpoints) {
-    this.mergeResource = Vue.resource(endpoints.mergePath);
-    this.mergeCheckResource = Vue.resource(`${endpoints.statusPath}?serializer=widget`);
-    this.cancelAutoMergeResource = Vue.resource(endpoints.cancelAutoMergePath);
-    this.removeWIPResource = Vue.resource(endpoints.removeWIPPath);
-    this.removeSourceBranchResource = Vue.resource(endpoints.sourceBranchPath);
-    this.deploymentsResource = Vue.resource(endpoints.ciEnvironmentsStatusPath);
-    this.pollResource = Vue.resource(`${endpoints.statusPath}?serializer=basic`);
-    this.mergeActionsContentResource = Vue.resource(endpoints.mergeActionsContentPath);
+    this.endpoints = endpoints;
   }
 
   merge(data) {
-    return this.mergeResource.save(data);
+    return axios.post(this.endpoints.mergePath, data);
   }
 
   cancelAutomaticMerge() {
-    return this.cancelAutoMergeResource.save();
+    return axios.post(this.endpoints.cancelAutoMergePath);
   }
 
   removeWIP() {
-    return this.removeWIPResource.save();
+    return axios.post(this.endpoints.removeWIPPath);
   }
 
   removeSourceBranch() {
-    return this.removeSourceBranchResource.delete();
+    return axios.delete(this.endpoints.sourceBranchPath);
   }
 
   fetchDeployments() {
-    return this.deploymentsResource.get();
+    return axios.get(this.endpoints.ciEnvironmentsStatusPath);
   }
 
   poll() {
-    return this.pollResource.get();
+    return axios.get(`${this.endpoints.statusPath}?serializer=basic`);
   }
 
   checkStatus() {
-    return this.mergeCheckResource.get();
+    return axios.get(`${this.endpoints.statusPath}?serializer=widget`);
   }
 
   fetchMergeActionsContent() {
-    return this.mergeActionsContentResource.get();
+    return axios.get(this.endpoints.mergeActionsContentPath);
   }
 
   static stopEnvironment(url) {
-    return Vue.http.post(url);
+    return axios.post(url);
   }
 
   static fetchMetrics(metricsUrl) {
-    return Vue.http.get(`${metricsUrl}.json`);
+    return axios.get(`${metricsUrl}.json`);
   }
 }

spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js

@@ -95,10 +95,8 @@ describe('MRWidgetDeployment', () => {
       const url = '/foo/bar';
       const returnPromise = () => new Promise((resolve) => {
         resolve({
-          json() {
-            return {
+          data: {
             redirect_url: url,
-            };
           },
         });
       });

spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js

@@ -155,9 +155,7 @@ describe('MemoryUsage', () => {
     describe('loadMetrics', () => {
       const returnServicePromise = () => new Promise((resolve) => {
         resolve({
-          json() {
-            return metricsMockData;
-          },
+          data: metricsMockData,
         });
       });
 

spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js

@@ -108,9 +108,7 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
         spyOn(eventHub, '$emit');
         spyOn(vm.service, 'cancelAutomaticMerge').and.returnValue(new Promise((resolve) => {
           resolve({
-            json() {
-              return mrObj;
-            },
+            data: mrObj,
           });
         }));
 
@@ -129,10 +127,8 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
         spyOn(eventHub, '$emit');
         spyOn(vm.service.mergeResource, 'save').and.returnValue(new Promise((resolve) => {
           resolve({
-            json() {
-              return {
+            data: {
               status: 'merge_when_pipeline_succeeds',
-              };
             },
           });
         }));

spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js

@@ -111,10 +111,8 @@ describe('MRWidgetMerged', () => {
         spyOn(eventHub, '$emit');
         spyOn(vm.service, 'removeSourceBranch').and.returnValue(new Promise((resolve) => {
           resolve({
-            json() {
-              return {
+            data: {
               message: 'Branch was removed',
-              };
             },
           });
         }));

spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js

@@ -292,8 +292,8 @@ describe('MRWidgetReadyToMerge', () => {
     describe('handleMergeButtonClick', () => {
       const returnPromise = status => new Promise((resolve) => {
         resolve({
-          json() {
-            return { status };
+          data: {
+            status,
           },
         });
       });
@@ -364,8 +364,9 @@ describe('MRWidgetReadyToMerge', () => {
     describe('handleMergePolling', () => {
       const returnPromise = state => new Promise((resolve) => {
         resolve({
-          json() {
-            return { state, source_branch_exists: true };
+          data: {
+            state,
+            source_branch_exists: true,
           },
         });
       });
@@ -422,8 +423,8 @@ describe('MRWidgetReadyToMerge', () => {
     describe('handleRemoveBranchPolling', () => {
       const returnPromise = state => new Promise((resolve) => {
         resolve({
-          json() {
-            return { source_branch_exists: state };
+          data: {
+            source_branch_exists: state,
           },
         });
       });

spec/javascripts/vue_mr_widget/components/states/mr_widget_wip_spec.js

@@ -50,9 +50,7 @@ describe('MRWidgetWIP', () => {
         spyOn(eventHub, '$emit');
         spyOn(vm.service, 'removeWIP').and.returnValue(new Promise((resolve) => {
           resolve({
-            json() {
-              return mrObj;
-            },
+            data: mrObj,
           });
         }));
 

spec/javascripts/vue_mr_widget/mr_widget_options_spec.js

@@ -8,10 +8,7 @@ import mountComponent from '../helpers/vue_mount_component_helper';
 
 const returnPromise = data => new Promise((resolve) => {
   resolve({
-    json() {
-      return data;
-    },
-    body: data,
+    data,
   });
 });