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

This reverts merge request !32400

4 files changed, 42 insertions, 23 deletions

diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
index ce592720531..c6cc04a139f 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
@@ -67,14 +67,18 @@ 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(() => {
-          this.loading = false;
+          setLoadingFalse();
           return new Flash(__('Error occurred when saving assignees'));
         });
     },
diff --git a/app/assets/javascripts/sidebar/services/sidebar_service.js b/app/assets/javascripts/sidebar/services/sidebar_service.js
index feb08e3acaf..cbe20f761ff 100644
--- a/app/assets/javascripts/sidebar/services/sidebar_service.js
+++ b/app/assets/javascripts/sidebar/services/sidebar_service.js
@@ -1,4 +1,7 @@
-import axios from '~/lib/utils/axios_utils';
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
 
 export default class SidebarService {
   constructor(endpointMap) {
@@ -15,15 +18,23 @@ export default class SidebarService {
   }
 
   get() {
-    return axios.get(this.endpoint);
+    return Vue.http.get(this.endpoint);
   }
 
   update(key, data) {
-    return axios.put(this.endpoint, { [key]: data });
+    return Vue.http.put(
+      this.endpoint,
+      {
+        [key]: data,
+      },
+      {
+        emulateJSON: true,
+      },
+    );
   }
 
   getProjectsAutocomplete(searchTerm) {
-    return axios.get(this.projectsAutocompleteEndpoint, {
+    return Vue.http.get(this.projectsAutocompleteEndpoint, {
       params: {
         search: searchTerm,
       },
@@ -31,11 +42,11 @@ export default class SidebarService {
   }
 
   toggleSubscription() {
-    return axios.post(this.toggleSubscriptionEndpoint);
+    return Vue.http.post(this.toggleSubscriptionEndpoint);
   }
 
   moveIssue(moveToProjectId) {
-    return axios.post(this.moveIssueEndpoint, {
+    return Vue.http.post(this.moveIssueEndpoint, {
       move_to_project_id: moveToProjectId,
     });
   }
diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js
index 4a7000cbbda..643fe6c00b6 100644
--- a/app/assets/javascripts/sidebar/sidebar_mediator.js
+++ b/app/assets/javascripts/sidebar/sidebar_mediator.js
@@ -32,10 +32,7 @@ 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]
-    const assignees = selected.length === 0 ? [0] : selected;
-    const data = { assignee_ids: assignees };
-
-    return this.service.update(field, data);
+    return this.service.update(field, selected.length === 0 ? [0] : selected);
   }
 
   setMoveToProjectId(projectId) {
@@ -45,7 +42,8 @@ export default class SidebarMediator {
   fetch() {
     return this.service
       .get()
-      .then(({ data }) => {
+      .then(response => response.json())
+      .then(data => {
         this.processFetchedData(data);
       })
       .catch(() => new Flash(__('Error occurred when fetching sidebar data')));
@@ -73,17 +71,23 @@ export default class SidebarMediator {
   }
 
   fetchAutocompleteProjects(searchTerm) {
-    return this.service.getProjectsAutocomplete(searchTerm).then(({ data }) => {
-      this.store.setAutocompleteProjects(data);
-      return this.store.autocompleteProjects;
-    });
+    return this.service
+      .getProjectsAutocomplete(searchTerm)
+      .then(response => response.json())
+      .then(data => {
+        this.store.setAutocompleteProjects(data);
+        return this.store.autocompleteProjects;
+      });
   }
 
   moveIssue() {
-    return this.service.moveIssue(this.store.moveToProjectId).then(({ data }) => {
-      if (window.location.pathname !== data.web_url) {
-        visitUrl(data.web_url);
-      }
-    });
+    return this.service
+      .moveIssue(this.store.moveToProjectId)
+      .then(response => response.json())
+      .then(data => {
+        if (window.location.pathname !== data.web_url) {
+          visitUrl(data.web_url);
+        }
+      });
   }
 }
diff --git a/app/views/shared/issuable/_sidebar_assignees.html.haml b/app/views/shared/issuable/_sidebar_assignees.html.haml
index dfb0e7ed297..1dc538826dc 100644
--- a/app/views/shared/issuable/_sidebar_assignees.html.haml
+++ b/app/views/shared/issuable/_sidebar_assignees.html.haml
@@ -1,7 +1,7 @@
 - issuable_type = issuable_sidebar[:type]
 - signed_in = !!issuable_sidebar.dig(:current_user, :id)
 
-#js-vue-sidebar-assignees{ data: { field: "#{issuable_type}", signed_in: signed_in } }
+#js-vue-sidebar-assignees{ data: { field: "#{issuable_type}[assignee_ids]", signed_in: signed_in } }
   .title.hide-collapsed
     = _('Assignee')
     = icon('spinner spin')