Replace vue resource with axios for pipeline details page

app/assets/javascripts/pipelines/pipeline_details_mediator.js

@@ -40,10 +40,8 @@ export default class pipelinesMediator {
   }
 
   successCallback(response) {
-    return response.json().then((data) => {
     this.state.isLoading = false;
-      this.store.storePipeline(data);
-    });
+    this.store.storePipeline(response.data);
   }
 
   errorCallback() {

app/assets/javascripts/pipelines/services/pipeline_service.js

@@ -1,19 +1,16 @@
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
+import axios from '../../lib/utils/axios_utils';
 
 export default class PipelineService {
   constructor(endpoint) {
-    this.pipeline = Vue.resource(endpoint);
+    this.pipeline = endpoint;
   }
 
   getPipeline() {
-    return this.pipeline.get();
+    return axios.get(this.pipeline);
   }
 
-  // eslint-disable-next-line
+  // eslint-disable-next-line class-methods-use-this
   postAction(endpoint) {
-    return Vue.http.post(`${endpoint}.json`);
+    return axios.post(`${endpoint}.json`);
   }
 }

changelogs/unreleased/fl-pipelines-details-axios.yml

@@ -0,0 +1,5 @@
+---
+title: Replace vue resource with axios for pipelines details page
+merge_request:
+author:
+type: other

spec/javascripts/pipelines/pipeline_details_mediator_spec.js

@@ -1,42 +1,36 @@
-import _ from 'underscore';
-import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import PipelineMediator from '~/pipelines/pipeline_details_mediator';
 
 describe('PipelineMdediator', () => {
   let mediator;
+  let mock;
+
   beforeEach(() => {
-    mediator = new PipelineMediator({ endpoint: 'foo' });
+    mock = new MockAdapter(axios);
+    mediator = new PipelineMediator({ endpoint: 'foo.json' });
+  });
+
+  afterEach(() => {
+    mock.restore();
   });
 
   it('should set defaults', () => {
-    expect(mediator.options).toEqual({ endpoint: 'foo' });
+    expect(mediator.options).toEqual({ endpoint: 'foo.json' });
     expect(mediator.state.isLoading).toEqual(false);
     expect(mediator.store).toBeDefined();
     expect(mediator.service).toBeDefined();
   });
 
   describe('request and store data', () => {
-    const interceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify({ foo: 'bar' }), {
-        status: 200,
-      }));
-    };
-
-    beforeEach(() => {
-      Vue.http.interceptors.push(interceptor);
-    });
-
-    afterEach(() => {
-      Vue.http.interceptors = _.without(Vue.http.interceptor, interceptor);
-    });
-
-    it('should store received data', (done) => {
+    it('should store received data', done => {
+      mock.onGet('foo.json').reply(200, { id: '121123' });
       mediator.fetchPipeline();
 
       setTimeout(() => {
-        expect(mediator.store.state.pipeline).toEqual({ foo: 'bar' });
+        expect(mediator.store.state.pipeline).toEqual({ id: '121123' });
         done();
-      });
+      }, 0);
     });
   });
 });