Merge branch 'remove-vue-resource-from-sidebar-service' into 'master'

Remove vue resource from sidebar service

See merge request gitlab-org/gitlab-ce!32400

app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue

@@ -67,18 +67,14 @@ export default {
     saveAssignees() {
       this.loading = true;
 
-      function setLoadingFalse() {
-        this.loading = false;
-      }
-
       this.mediator
         .saveAssignees(this.field)
-        .then(setLoadingFalse.bind(this))
         .then(() => {
+          this.loading = false;
           refreshUserMergeRequestCounts();
         })
         .catch(() => {
-          setLoadingFalse();
+          this.loading = false;
           return new Flash(__('Error occurred when saving assignees'));
         });
     },

app/assets/javascripts/sidebar/services/sidebar_service.js

-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
+import axios from '~/lib/utils/axios_utils';
 
 export default class SidebarService {
   constructor(endpointMap) {
@@ -18,23 +15,15 @@ export default class SidebarService {
   }
 
   get() {
-    return Vue.http.get(this.endpoint);
+    return axios.get(this.endpoint);
   }
 
   update(key, data) {
-    return Vue.http.put(
-      this.endpoint,
-      {
-        [key]: data,
-      },
-      {
-        emulateJSON: true,
-      },
-    );
+    return axios.put(this.endpoint, { [key]: data });
   }
 
   getProjectsAutocomplete(searchTerm) {
-    return Vue.http.get(this.projectsAutocompleteEndpoint, {
+    return axios.get(this.projectsAutocompleteEndpoint, {
       params: {
         search: searchTerm,
       },
@@ -42,11 +31,11 @@ export default class SidebarService {
   }
 
   toggleSubscription() {
-    return Vue.http.post(this.toggleSubscriptionEndpoint);
+    return axios.post(this.toggleSubscriptionEndpoint);
   }
 
   moveIssue(moveToProjectId) {
-    return Vue.http.post(this.moveIssueEndpoint, {
+    return axios.post(this.moveIssueEndpoint, {
       move_to_project_id: moveToProjectId,
     });
   }

app/assets/javascripts/sidebar/sidebar_mediator.js

@@ -32,7 +32,10 @@ export default class SidebarMediator {
 
     // If there are no ids, that means we have to unassign (which is id = 0)
     // And it only accepts an array, hence [0]
-    return this.service.update(field, selected.length === 0 ? [0] : selected);
+    const assignees = selected.length === 0 ? [0] : selected;
+    const data = { assignee_ids: assignees };
+
+    return this.service.update(field, data);
   }
 
   setMoveToProjectId(projectId) {
@@ -42,8 +45,7 @@ export default class SidebarMediator {
   fetch() {
     return this.service
       .get()
-      .then(response => response.json())
-      .then(data => {
+      .then(({ data }) => {
         this.processFetchedData(data);
       })
       .catch(() => new Flash(__('Error occurred when fetching sidebar data')));
@@ -71,23 +73,17 @@ export default class SidebarMediator {
   }
 
   fetchAutocompleteProjects(searchTerm) {
-    return this.service
-      .getProjectsAutocomplete(searchTerm)
-      .then(response => response.json())
-      .then(data => {
-        this.store.setAutocompleteProjects(data);
-        return this.store.autocompleteProjects;
-      });
+    return this.service.getProjectsAutocomplete(searchTerm).then(({ data }) => {
+      this.store.setAutocompleteProjects(data);
+      return this.store.autocompleteProjects;
+    });
   }
 
   moveIssue() {
-    return this.service
-      .moveIssue(this.store.moveToProjectId)
-      .then(response => response.json())
-      .then(data => {
-        if (window.location.pathname !== data.web_url) {
-          visitUrl(data.web_url);
-        }
-      });
+    return this.service.moveIssue(this.store.moveToProjectId).then(({ data }) => {
+      if (window.location.pathname !== data.web_url) {
+        visitUrl(data.web_url);
+      }
+    });
   }
 }

app/views/shared/issuable/_sidebar_assignees.html.haml

 - issuable_type = issuable_sidebar[:type]
 - signed_in = !!issuable_sidebar.dig(:current_user, :id)
 
-#js-vue-sidebar-assignees{ data: { field: "#{issuable_type}[assignee_ids]", signed_in: signed_in } }
+#js-vue-sidebar-assignees{ data: { field: "#{issuable_type}", signed_in: signed_in } }
   .title.hide-collapsed
     = _('Assignee')
     = icon('spinner spin')

changelogs/unreleased/remove-vue-resource-from-sidebar-service.yml

+---
+title: Remove vue resource from sidebar service
+merge_request: 32400
+author: Lee Tickett
+type: other

spec/javascripts/sidebar/mock_data.js

@@ -210,14 +210,4 @@ const mockData = {
   },
 };
 
-mockData.sidebarMockInterceptor = function(request, next) {
-  const body = this.responseMap[request.method.toUpperCase()][request.url];
-
-  next(
-    request.respondWith(JSON.stringify(body), {
-      status: 200,
-    }),
-  );
-}.bind(mockData);
-
 export default mockData;

spec/javascripts/sidebar/sidebar_mediator_spec.js

-import _ from 'underscore';
-import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import SidebarMediator from '~/sidebar/sidebar_mediator';
 import SidebarStore from '~/sidebar/stores/sidebar_store';
 import SidebarService from '~/sidebar/services/sidebar_service';
 import Mock from './mock_data';
 
 describe('Sidebar mediator', function() {
+  let mock;
+
   beforeEach(() => {
-    Vue.http.interceptors.push(Mock.sidebarMockInterceptor);
+    mock = new MockAdapter(axios);
+
     this.mediator = new SidebarMediator(Mock.mediator);
   });
 
@@ -15,7 +18,7 @@ describe('Sidebar mediator', function() {
     SidebarService.singleton = null;
     SidebarStore.singleton = null;
     SidebarMediator.singleton = null;
-    Vue.http.interceptors = _.without(Vue.http.interceptors, Mock.sidebarMockInterceptor);
+    mock.restore();
   });
 
   it('assigns yourself ', () => {
@@ -26,6 +29,7 @@ describe('Sidebar mediator', function() {
   });
 
   it('saves assignees', done => {
+    mock.onPut('/gitlab-org/gitlab-shell/issues/5.json?serializer=sidebar_extras').reply(200, {});
     this.mediator
       .saveAssignees('issue[assignee_ids]')
       .then(resp => {
@@ -38,6 +42,9 @@ describe('Sidebar mediator', function() {
   it('fetches the data', done => {
     const mockData =
       Mock.responseMap.GET['/gitlab-org/gitlab-shell/issues/5.json?serializer=sidebar_extras'];
+    mock
+      .onGet('/gitlab-org/gitlab-shell/issues/5.json?serializer=sidebar_extras')
+      .reply(200, mockData);
     spyOn(this.mediator, 'processFetchedData').and.callThrough();
 
     this.mediator
@@ -74,6 +81,7 @@ describe('Sidebar mediator', function() {
 
   it('fetches autocomplete projects', done => {
     const searchTerm = 'foo';
+    mock.onGet('/autocomplete/projects?project_id=15').reply(200, {});
     spyOn(this.mediator.service, 'getProjectsAutocomplete').and.callThrough();
     spyOn(this.mediator.store, 'setAutocompleteProjects').and.callThrough();
 
@@ -88,7 +96,9 @@ describe('Sidebar mediator', function() {
   });
 
   it('moves issue', done => {
+    const mockData = Mock.responseMap.POST['/gitlab-org/gitlab-shell/issues/5/move'];
     const moveToProjectId = 7;
+    mock.onPost('/gitlab-org/gitlab-shell/issues/5/move').reply(200, mockData);
     this.mediator.store.setMoveToProjectId(moveToProjectId);
     spyOn(this.mediator.service, 'moveIssue').and.callThrough();
     const visitUrl = spyOnDependency(SidebarMediator, 'visitUrl');
@@ -105,6 +115,7 @@ describe('Sidebar mediator', function() {
 
   it('toggle subscription', done => {
     this.mediator.store.setSubscribedState(false);
+    mock.onPost('/gitlab-org/gitlab-shell/issues/5/toggle_subscription').reply(200, {});
     spyOn(this.mediator.service, 'toggleSubscription').and.callThrough();
 
     this.mediator

spec/javascripts/sidebar/sidebar_move_issue_spec.js

 import $ from 'jquery';
-import _ from 'underscore';
-import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import SidebarMediator from '~/sidebar/sidebar_mediator';
 import SidebarStore from '~/sidebar/stores/sidebar_store';
 import SidebarService from '~/sidebar/services/sidebar_service';
@@ -8,8 +8,12 @@ import SidebarMoveIssue from '~/sidebar/lib/sidebar_move_issue';
 import Mock from './mock_data';
 
 describe('SidebarMoveIssue', function() {
+  let mock;
+
   beforeEach(() => {
-    Vue.http.interceptors.push(Mock.sidebarMockInterceptor);
+    mock = new MockAdapter(axios);
+    const mockData = Mock.responseMap.GET['/autocomplete/projects?project_id=15'];
+    mock.onGet('/autocomplete/projects?project_id=15').reply(200, mockData);
     this.mediator = new SidebarMediator(Mock.mediator);
     this.$content = $(`
       <div class="dropdown">
@@ -37,8 +41,7 @@ describe('SidebarMoveIssue', function() {
     SidebarMediator.singleton = null;
 
     this.sidebarMoveIssue.destroy();
-
-    Vue.http.interceptors = _.without(Vue.http.interceptors, Mock.sidebarMockInterceptor);
+    mock.restore();
   });
 
   describe('init', () => {