Replace vue resource with axios for environments

app/assets/javascripts/environments/components/environments_app.vue

@@ -68,8 +68,7 @@
         this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', showLoader);
 
         this.service.getFolderContent(folder.folder_path)
-          .then(resp => resp.json())
-          .then(response => this.store.setfolderContent(folder, response.environments))
+          .then(response => this.store.setfolderContent(folder, response.data.environments))
           .then(() => this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', false))
           .catch(() => {
             Flash(s__('Environments|An error occurred while fetching the environments.'));

app/assets/javascripts/environments/mixins/environments_mixin.js

@@ -6,7 +6,6 @@ import Visibility from 'visibilityjs';
 import Poll from '../../lib/utils/poll';
 import {
   getParameterByName,
-  parseQueryStringIntoObject,
 } from '../../lib/utils/common_utils';
 import { s__ } from '../../locale';
 import Flash from '../../flash';
@@ -46,17 +45,14 @@ export default {
 
   methods: {
     saveData(resp) {
-      const headers = resp.headers;
-      return resp.json().then((response) => {
-        this.isLoading = false;
-
-        if (_.isEqual(parseQueryStringIntoObject(resp.url.split('?')[1]), this.requestData)) {
-          this.store.storeAvailableCount(response.available_count);
-          this.store.storeStoppedCount(response.stopped_count);
-          this.store.storeEnvironments(response.environments);
-          this.store.setPagination(headers);
-        }
-      });
+      this.isLoading = false;
+
+      if (_.isEqual(resp.config.params, this.requestData)) {
+        this.store.storeAvailableCount(resp.data.available_count);
+        this.store.storeStoppedCount(resp.data.stopped_count);
+        this.store.storeEnvironments(resp.data.environments);
+        this.store.setPagination(resp.headers);
+      }
     },
 
     /**

app/assets/javascripts/environments/services/environments_service.js

-/* eslint-disable class-methods-use-this */
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
+import axios from '~/lib/utils/axios_utils';
 
 export default class EnvironmentsService {
   constructor(endpoint) {
-    this.environments = Vue.resource(endpoint);
+    this.environmentsEndpoint = endpoint;
     this.folderResults = 3;
   }
 
   get(options = {}) {
     const { scope, page } = options;
-    return this.environments.get({ scope, page });
+    return axios.get(this.environmentsEndpoint, { params: { scope, page } });
   }
 
+  // eslint-disable-next-line class-methods-use-this
   postAction(endpoint) {
-    return Vue.http.post(endpoint, {}, { emulateJSON: true });
+    return axios.post(endpoint, {}, { emulateJSON: true });
   }
 
   getFolderContent(folderUrl) {
-    return Vue.http.get(`${folderUrl}.json?per_page=${this.folderResults}`);
+    return axios.get(`${folderUrl}.json?per_page=${this.folderResults}`);
   }
 }

spec/javascripts/environments/folder/environments_folder_view_spec.js

-import _ from 'underscore';
 import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import environmentsFolderViewComponent from '~/environments/folder/environments_folder_view.vue';
-import { headersInterceptor } from 'spec/helpers/vue_resource_helper';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import { environmentsList } from '../mock_data';
 
 describe('Environments Folder View', () => {
   let Component;
   let component;
+  let mock;
+
   const mockData = {
     endpoint: 'environments.json',
     folderName: 'review',
@@ -17,46 +19,35 @@ describe('Environments Folder View', () => {
   };
 
   beforeEach(() => {
+    mock = new MockAdapter(axios);
+
     Component = Vue.extend(environmentsFolderViewComponent);
   });
 
   afterEach(() => {
+    mock.restore();
+
     component.$destroy();
   });
 
   describe('successfull request', () => {
-    const environmentsResponseInterceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify({
+    beforeEach(() => {
+      mock.onGet(mockData.endpoint).reply(200, {
         environments: environmentsList,
         stopped_count: 1,
         available_count: 0,
-      }), {
-        status: 200,
-        headers: {
-          'X-nExt-pAge': '2',
-          'x-page': '1',
-          'X-Per-Page': '2',
-          'X-Prev-Page': '',
-          'X-TOTAL': '20',
-          'X-Total-Pages': '10',
-        },
-      }));
-    };
-
-    beforeEach(() => {
-      Vue.http.interceptors.push(environmentsResponseInterceptor);
-      Vue.http.interceptors.push(headersInterceptor);
+      }, {
+        'X-nExt-pAge': '2',
+        'x-page': '1',
+        'X-Per-Page': '2',
+        'X-Prev-Page': '',
+        'X-TOTAL': '20',
+        'X-Total-Pages': '10',
+      });
 
       component = mountComponent(Component, mockData);
     });
 
-    afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, environmentsResponseInterceptor,
-      );
-      Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor);
-    });
-
     it('should render a table with environments', (done) => {
       setTimeout(() => {
         expect(component.$el.querySelectorAll('table')).not.toBeNull();
@@ -135,25 +126,15 @@ describe('Environments Folder View', () => {
   });
 
   describe('unsuccessfull request', () => {
-    const environmentsErrorResponseInterceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify([]), {
-        status: 500,
-      }));
-    };
-
     beforeEach(() => {
-      Vue.http.interceptors.push(environmentsErrorResponseInterceptor);
-    });
+      mock.onGet(mockData.endpoint).reply(500, {
+        environments: [],
+      });
 
-    afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, environmentsErrorResponseInterceptor,
-      );
+      component = mountComponent(Component, mockData);
     });
 
     it('should not render a table', (done) => {
-      component = mountComponent(Component, mockData);
-
       setTimeout(() => {
         expect(
           component.$el.querySelector('table'),
@@ -190,27 +171,15 @@ describe('Environments Folder View', () => {
   });
 
   describe('methods', () => {
-    const environmentsEmptyResponseInterceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify([]), {
-        status: 200,
-      }));
-    };
-
     beforeEach(() => {
-      Vue.http.interceptors.push(environmentsEmptyResponseInterceptor);
-      Vue.http.interceptors.push(headersInterceptor);
+      mock.onGet(mockData.endpoint).reply(200, {
+        environments: [],
+      });
 
       component = mountComponent(Component, mockData);
       spyOn(history, 'pushState').and.stub();
     });
 
-    afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, environmentsEmptyResponseInterceptor,
-      );
-      Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor);
-    });
-
     describe('updateContent', () => {
       it('should set given parameters', (done) => {
         component.updateContent({ scope: 'stopped', page: '4' })

spec/javascripts/environments/mock_data.js

@@ -82,6 +82,7 @@ export const environment = {
     stop_path: '/root/review-app/environments/7/stop',
     created_at: '2017-01-31T10:53:46.894Z',
     updated_at: '2017-01-31T10:53:46.894Z',
+    folder_path: '/root/review-app/environments/7',
   },
 };