Remove vue-resource from related-issues

Addresses https://gitlab.com/gitlab-org/gitlab-ee/issues/14024

ee/app/assets/javascripts/related_issues/components/related_issues_root.vue

@@ -114,8 +114,7 @@ export default {
 
       if (issueToRemove) {
         RelatedIssuesService.remove(issueToRemove.relation_path)
-          .then(res => res.json())
-          .then(data => {
+          .then(({ data }) => {
             this.store.setRelatedIssues(data.issuables);
           })
           .catch(res => {
@@ -140,8 +139,7 @@ export default {
         this.isSubmitting = true;
         this.service
           .addRelatedIssues(this.state.pendingReferences)
-          .then(res => res.json())
-          .then(data => {
+          .then(({ data }) => {
             // We could potentially lose some pending issues in the interim here
             this.store.setPendingReferences([]);
             this.store.setRelatedIssues(data.issuables);
@@ -169,9 +167,8 @@ export default {
       this.isFetching = true;
       this.service
         .fetchRelatedIssues()
-        .then(res => res.json())
-        .then(issues => {
-          this.store.setRelatedIssues(issues);
+        .then(({ data }) => {
+          this.store.setRelatedIssues(data);
           this.isFetching = false;
         })
         .catch(() => {
@@ -189,9 +186,8 @@ export default {
           move_before_id: beforeId,
           move_after_id: afterId,
         })
-          .then(res => res.json())
-          .then(res => {
-            if (!res.message) {
+          .then(({ data }) => {
+            if (!data.message) {
               this.store.updateIssueOrder(oldIndex, newIndex);
             }
           })

ee/app/assets/javascripts/related_issues/services/related_issues_service.js

-import Vue from 'vue';
-import vueResource from 'vue-resource';
-
-Vue.use(vueResource);
+import axios from '~/lib/utils/axios_utils';
 
 class RelatedIssuesService {
   constructor(endpoint) {
-    this.relatedIssuesResource = Vue.resource(endpoint);
+    this.endpoint = endpoint;
   }
 
   fetchRelatedIssues() {
-    return this.relatedIssuesResource.get();
+    return axios.get(this.endpoint);
   }
 
   addRelatedIssues(newIssueReferences) {
-    return this.relatedIssuesResource.save(
-      {},
-      {
-        issuable_references: newIssueReferences,
-      },
-    );
+    return axios.post(this.endpoint, {
+      issuable_references: newIssueReferences,
+    });
   }
 
   static saveOrder({ endpoint, move_before_id, move_after_id }) {
-    return Vue.http.put(endpoint, {
+    return axios.put(endpoint, {
       epic: {
         move_before_id,
         move_after_id,
@@ -31,7 +25,7 @@ class RelatedIssuesService {
   }
 
   static remove(endpoint) {
-    return Vue.http.delete(endpoint);
+    return axios.delete(endpoint);
   }
 }
 

ee/changelogs/unreleased/remove-vue-resource-from-related-issues.yml

+---
+title: Remove vue-resource from related-issues
+merge_request: 16057
+author: Lee Tickett
+type: other

ee/spec/javascripts/issuable/related_issues/components/related_issues_root_spec.js

 import Vue from 'vue';
-import _ from 'underscore';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import relatedIssuesRoot from 'ee/related_issues/components/related_issues_root.vue';
 import relatedIssuesService from 'ee/related_issues/services/related_issues_service';
 import {
@@ -11,15 +12,18 @@ import {
 describe('RelatedIssuesRoot', () => {
   let RelatedIssuesRoot;
   let vm;
+  let mock;
 
   beforeEach(() => {
     RelatedIssuesRoot = Vue.extend(relatedIssuesRoot);
+    mock = new MockAdapter(axios);
   });
 
   afterEach(() => {
     if (vm) {
       vm.$destroy();
     }
+    mock.restore();
   });
 
   describe('methods', () => {
@@ -40,40 +44,19 @@ describe('RelatedIssuesRoot', () => {
       });
 
       it('remove related issue and succeeds', done => {
-        const interceptor = (request, next) => {
-          next(
-            request.respondWith(
-              JSON.stringify({
-                issues: [],
-              }),
-              {
-                status: 200,
-              },
-            ),
-          );
-        };
-        Vue.http.interceptors.push(interceptor);
+        mock.onAny().reply(200, { issues: [] });
 
         vm.onRelatedIssueRemoveRequest(issuable1.id);
 
         setTimeout(() => {
           expect(vm.state.relatedIssues).toEqual([]);
 
-          Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
-
           done();
         });
       });
 
       it('remove related issue, fails, and restores to related issues', done => {
-        const interceptor = (request, next) => {
-          next(
-            request.respondWith(JSON.stringify({}), {
-              status: 422,
-            }),
-          );
-        };
-        Vue.http.interceptors.push(interceptor);
+        mock.onAny().reply(422, {});
 
         vm.onRelatedIssueRemoveRequest(issuable1.id);
 
@@ -81,8 +64,6 @@ describe('RelatedIssuesRoot', () => {
           expect(vm.state.relatedIssues.length).toEqual(1);
           expect(vm.state.relatedIssues[0].id).toEqual(issuable1.id);
 
-          Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
-
           done();
         });
       });
@@ -162,23 +143,13 @@ describe('RelatedIssuesRoot', () => {
       });
 
       it('submit pending issue as related issue', done => {
-        const interceptor = (request, next) => {
-          next(
-            request.respondWith(
-              JSON.stringify({
-                issuables: [issuable1],
-                result: {
-                  message: 'something was successfully related',
-                  status: 'success',
-                },
-              }),
-              {
-                status: 200,
-              },
-            ),
-          );
-        };
-        Vue.http.interceptors.push(interceptor);
+        mock.onAny().reply(200, {
+          issuables: [issuable1],
+          result: {
+            message: 'something was successfully related',
+            status: 'success',
+          },
+        });
 
         vm.store.setPendingReferences([issuable1.reference]);
         vm.onPendingFormSubmit();
@@ -188,30 +159,18 @@ describe('RelatedIssuesRoot', () => {
           expect(vm.state.relatedIssues.length).toEqual(1);
           expect(vm.state.relatedIssues[0].id).toEqual(issuable1.id);
 
-          Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
-
           done();
         });
       });
 
       it('submit multiple pending issues as related issues', done => {
-        const interceptor = (request, next) => {
-          next(
-            request.respondWith(
-              JSON.stringify({
-                issuables: [issuable1, issuable2],
-                result: {
-                  message: 'something was successfully related',
-                  status: 'success',
-                },
-              }),
-              {
-                status: 200,
-              },
-            ),
-          );
-        };
-        Vue.http.interceptors.push(interceptor);
+        mock.onAny().reply(200, {
+          issuables: [issuable1, issuable2],
+          result: {
+            message: 'something was successfully related',
+            status: 'success',
+          },
+        });
 
         vm.store.setPendingReferences([issuable1.reference, issuable2.reference]);
         vm.onPendingFormSubmit();
@@ -222,8 +181,6 @@ describe('RelatedIssuesRoot', () => {
           expect(vm.state.relatedIssues[0].id).toEqual(issuable1.id);
           expect(vm.state.relatedIssues[1].id).toEqual(issuable2.id);
 
-          Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
-
           done();
         });
       });
@@ -248,29 +205,17 @@ describe('RelatedIssuesRoot', () => {
     });
 
     describe('fetchRelatedIssues', () => {
-      const interceptor = (request, next) => {
-        next(
-          request.respondWith(JSON.stringify([issuable1, issuable2]), {
-            status: 200,
-          }),
-        );
-      };
-
       beforeEach(done => {
-        Vue.http.interceptors.push(interceptor);
-
         vm = new RelatedIssuesRoot({
           propsData: defaultProps,
         }).$mount();
 
+        mock.onAny().reply(200, [issuable1, issuable2]);
+
         // wait for internal call to fetchRelatedIssues to resolve
         setTimeout(done);
       });
 
-      afterEach(() => {
-        Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
-      });
-
       it('sets isFetching while fetching', done => {
         vm.fetchRelatedIssues();