Update vue-resource

20 files changed, 91 insertions, 100 deletions

diff --git a/app/assets/javascripts/blob/notebook/index.js b/app/assets/javascripts/blob/notebook/index.js
index 36fe8a7184f..27312d718b0 100644
--- a/app/assets/javascripts/blob/notebook/index.js
+++ b/app/assets/javascripts/blob/notebook/index.js
@@ -51,8 +51,9 @@ export default () => {
     methods: {
       loadFile() {
         this.$http.get(el.dataset.endpoint)
+          .then(response => response.json())
           .then((res) => {
-            this.json = res.json();
+            this.json = res;
             this.loading = false;
           })
           .catch((e) => {
diff --git a/app/assets/javascripts/boards/boards_bundle.js b/app/assets/javascripts/boards/boards_bundle.js
index b94009ee76b..88b054b76e6 100644
--- a/app/assets/javascripts/boards/boards_bundle.js
+++ b/app/assets/javascripts/boards/boards_bundle.js
@@ -81,8 +81,9 @@ $(() => {
     mounted () {
       Store.disabled = this.disabled;
       gl.boardService.all()
+        .then(response => response.json())
         .then((resp) => {
-          resp.json().forEach((board) => {
+          resp.forEach((board) => {
             const list = Store.addList(board, this.defaultAvatar);
 
             if (list.type === 'closed') {
@@ -97,7 +98,8 @@ $(() => {
 
           Store.addBlankState();
           this.loading = false;
-        }).catch(() => new Flash('An error occurred. Please try again.'));
+        })
+        .catch(() => new Flash('An error occurred. Please try again.'));
     },
     methods: {
       updateTokens() {
diff --git a/app/assets/javascripts/boards/components/board_blank_state.js b/app/assets/javascripts/boards/components/board_blank_state.js
index 870e115bd1a..e7f16899362 100644
--- a/app/assets/javascripts/boards/components/board_blank_state.js
+++ b/app/assets/javascripts/boards/components/board_blank_state.js
@@ -64,8 +64,9 @@ export default {
 
       // Save the labels
       gl.boardService.generateDefaultLists()
-        .then((resp) => {
-          resp.json().forEach((listObj) => {
+        .then(resp => resp.json())
+        .then((data) => {
+          data.forEach((listObj) => {
             const list = Store.findList('title', listObj.title);
 
             list.id = listObj.id;
diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js
index 6356c266ee2..1d36519c75c 100644
--- a/app/assets/javascripts/boards/components/modal/index.js
+++ b/app/assets/javascripts/boards/components/modal/index.js
@@ -88,9 +88,9 @@ gl.issueBoards.IssuesModal = Vue.extend({
       return gl.boardService.getBacklog(queryData(this.filter.path, {
         page: this.page,
         per: this.perPage,
-      })).then((res) => {
-        const data = res.json();
-
+      }))
+      .then(resp => resp.json())
+      .then((data) => {
         if (clearIssues) {
           this.issues = [];
         }
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index b4b09b3876e..08f7c5ddcd2 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/app/assets/javascripts/boards/models/list.js
@@ -40,9 +40,8 @@ class List {
 
   save () {
     return gl.boardService.createList(this.label.id)
-      .then((resp) => {
-        const data = resp.json();
-
+      .then(resp => resp.json())
+      .then((data) => {
         this.id = data.id;
         this.type = data.list_type;
         this.position = data.position;
@@ -91,8 +90,8 @@ class List {
     }
 
     return gl.boardService.getIssuesForList(this.id, data)
-      .then((resp) => {
-        const data = resp.json();
+      .then(resp => resp.json())
+      .then((data) => {
         this.loading = false;
         this.issuesSize = data.size;
 
@@ -109,8 +108,8 @@ class List {
     this.issuesSize += 1;
 
     return gl.boardService.newIssue(this.id, issue)
-      .then((resp) => {
-        const data = resp.json();
+      .then(resp => resp.json())
+      .then((data) => {
         issue.id = data.iid;
 
         if (this.issuesSize > 1) {
diff --git a/app/assets/javascripts/boards/services/board_service.js b/app/assets/javascripts/boards/services/board_service.js
index db9bced2f89..3742507b236 100644
--- a/app/assets/javascripts/boards/services/board_service.js
+++ b/app/assets/javascripts/boards/services/board_service.js
@@ -23,11 +23,6 @@ class BoardService {
         url: bulkUpdatePath,
       },
     });
-
-    Vue.http.interceptors.push((request, next) => {
-      request.headers['X-CSRF-Token'] = $.rails.csrfToken();
-      next();
-    });
   }
 
   all () {
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index 3c77f14d533..6d31b78b36d 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -51,11 +51,11 @@
     },
     methods: {
       successCallback(resp) {
-        const response = resp.json();
-
-        // depending of the endpoint the response can either bring a `pipelines` key or not.
-        const pipelines = response.pipelines || response;
-        this.setCommonData(pipelines);
+        return resp.json().then((response) => {
+          // depending of the endpoint the response can either bring a `pipelines` key or not.
+          const pipelines = response.pipelines || response;
+          this.setCommonData(pipelines);
+        });
       },
     },
   };
diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js b/app/assets/javascripts/diff_notes/components/resolve_btn.js
index 9d51fb53eb2..efb6ced9f46 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_btn.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js
@@ -1,4 +1,4 @@
-/* eslint-disable comma-dangle, object-shorthand, func-names, quote-props, no-else-return, camelcase, no-new, max-len */
+/* eslint-disable comma-dangle, object-shorthand, func-names, quote-props, no-else-return, camelcase, max-len */
 /* global CommentsStore */
 /* global ResolveService */
 /* global Flash */
@@ -64,8 +64,6 @@ const ResolveBtn = Vue.extend({
       });
     },
     resolve: function () {
-      const errorFlashMsg = 'An error occurred when trying to resolve a comment. Please try again.';
-
       if (!this.canResolve) return;
 
       let promise;
@@ -79,24 +77,20 @@ const ResolveBtn = Vue.extend({
           .resolve(this.noteId);
       }
 
-      promise.then((response) => {
-        this.loading = false;
+      promise
+        .then(resp => resp.json())
+        .then((data) => {
+          this.loading = false;
 
-        if (response.status === 200) {
-          const data = response.json();
           const resolved_by = data ? data.resolved_by : null;
 
           CommentsStore.update(this.discussionId, this.noteId, !this.isResolved, resolved_by);
           this.discussion.updateHeadline(data);
           gl.mrWidget.checkStatus();
-        } else {
-          new Flash(errorFlashMsg);
-        }
 
-        this.updateTooltip();
-      }).catch(() => {
-        new Flash(errorFlashMsg);
-      });
+          this.updateTooltip();
+        })
+        .catch(() => new Flash('An error occurred when trying to resolve a comment. Please try again.'));
     }
   },
   mounted: function () {
diff --git a/app/assets/javascripts/diff_notes/services/resolve.js b/app/assets/javascripts/diff_notes/services/resolve.js
index 807ab11d292..2f063f6fe1f 100644
--- a/app/assets/javascripts/diff_notes/services/resolve.js
+++ b/app/assets/javascripts/diff_notes/services/resolve.js
@@ -1,4 +1,3 @@
-/* eslint-disable class-methods-use-this, one-var, camelcase, no-new, comma-dangle, no-param-reassign, max-len */
 /* global Flash */
 /* global CommentsStore */
 
@@ -32,27 +31,22 @@ class ResolveServiceClass {
       promise = this.resolveAll(mergeRequestId, discussionId);
     }
 
-    promise.then((response) => {
-      discussion.loading = false;
-
-      if (response.status === 200) {
-        const data = response.json();
-        const resolved_by = data ? data.resolved_by : null;
+    promise
+      .then(resp => resp.json())
+      .then((data) => {
+        discussion.loading = false;
+        const resolvedBy = data ? data.resolved_by : null;
 
         if (isResolved) {
           discussion.unResolveAllNotes();
         } else {
-          discussion.resolveAllNotes(resolved_by);
+          discussion.resolveAllNotes(resolvedBy);
         }
 
         gl.mrWidget.checkStatus();
         discussion.updateHeadline(data);
-      } else {
-        throw new Error('An error occurred when trying to resolve discussion.');
-      }
-    }).catch(() => {
-      new Flash('An error occurred when trying to resolve a discussion. Please try again.');
-    });
+      })
+      .catch(() => new Flash('An error occurred when trying to resolve a discussion. Please try again.'));
   }
 
   resolveAll(mergeRequestId, discussionId) {
@@ -62,7 +56,7 @@ class ResolveServiceClass {
 
     return this.discussionResource.save({
       mergeRequestId,
-      discussionId
+      discussionId,
     }, {});
   }
 
@@ -73,7 +67,7 @@ class ResolveServiceClass {
 
     return this.discussionResource.delete({
       mergeRequestId,
-      discussionId
+      discussionId,
     }, {});
   }
 }
diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js
index 25b24fbd6dc..8f4066e3a6e 100644
--- a/app/assets/javascripts/environments/mixins/environments_mixin.js
+++ b/app/assets/javascripts/environments/mixins/environments_mixin.js
@@ -1,17 +1,15 @@
 export default {
   methods: {
     saveData(resp) {
-      const response = {
-        headers: resp.headers,
-        body: resp.json(),
-      };
+      const headers = resp.headers;
+      return resp.json().then((response) => {
+        this.isLoading = false;
 
-      this.isLoading = false;
-
-      this.store.storeAvailableCount(response.body.available_count);
-      this.store.storeStoppedCount(response.body.stopped_count);
-      this.store.storeEnvironments(response.body.environments);
-      this.store.setPagination(response.headers);
+        this.store.storeAvailableCount(response.available_count);
+        this.store.storeStoppedCount(response.stopped_count);
+        this.store.storeEnvironments(response.environments);
+        this.store.setPagination(headers);
+      });
     },
   },
 };
diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js
index ff601db2aa6..00e1bd94c9c 100644
--- a/app/assets/javascripts/groups/index.js
+++ b/app/assets/javascripts/groups/index.js
@@ -99,8 +99,10 @@ document.addEventListener('DOMContentLoaded', () => {
               page: currentPath,
             }, document.title, currentPath);
 
-            this.updateGroups(response.json());
-            this.updatePagination(response.headers);
+            return response.json().then((data) => {
+              this.updateGroups(data);
+              this.updatePagination(response.headers);
+            });
           })
           .catch(this.handleErrorResponse);
       },
@@ -114,18 +116,19 @@ document.addEventListener('DOMContentLoaded', () => {
       },
       leaveGroup(group, collection) {
         this.service.leaveGroup(group.leavePath)
+          .then(resp => resp.json())
           .then((response) => {
             $.scrollTo(0);
 
             this.store.removeGroup(group, collection);
 
             // eslint-disable-next-line no-new
-            new Flash(response.json().notice, 'notice');
+            new Flash(response.notice, 'notice');
           })
-          .catch((response) => {
+          .catch((error) => {
             let message = 'An error occurred. Please try again.';
 
-            if (response.status === 403) {
+            if (error.status === 403) {
               message = 'Failed to leave the group. Please make sure you are not the only owner';
             }
 
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index 3d5fb7f441c..efae112923d 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -202,10 +202,7 @@ export default {
     this.poll = new Poll({
       resource: this.service,
       method: 'getData',
-      successCallback: (res) => {
-        const data = res.json();
-        this.store.updateState(data);
-      },
+      successCallback: res => res.json().then(data => this.store.updateState(data)),
       errorCallback(err) {
         throw new Error(err);
       },
diff --git a/app/assets/javascripts/jobs/job_details_mediator.js b/app/assets/javascripts/jobs/job_details_mediator.js
index 063c52fac74..cc014b815c4 100644
--- a/app/assets/javascripts/jobs/job_details_mediator.js
+++ b/app/assets/javascripts/jobs/job_details_mediator.js
@@ -54,9 +54,8 @@ export default class JobMediator {
   }
 
   successCallback(response) {
-    const data = response.json();
     this.state.isLoading = false;
-    this.store.storeJob(data);
+    return response.json().then(data => this.store.storeJob(data));
   }
 
   errorCallback() {
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 1a68c5bca00..b2c503d1656 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1270,7 +1270,7 @@ export default class Notes {
          <div class="timeline-entry-inner">
             <div class="timeline-icon">
                <a href="/${currentUsername}">
-                 <img class="avatar s40" src="${currentUserAvatar}">
+                 <img class="avatar s40" src="${currentUserAvatar}" />
                </a>
             </div>
             <div class="timeline-content ${discussionClass}">
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index 01ae07aad65..5df317a76bf 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -129,14 +129,11 @@
       },
 
       successCallback(resp) {
-        const response = {
-          headers: resp.headers,
-          body: resp.json(),
-        };
-
-        this.store.storeCount(response.body.count);
-        this.store.storePagination(response.headers);
-        this.setCommonData(response.body.pipelines);
+        return resp.json().then((response) => {
+          this.store.storeCount(response.count);
+          this.store.storePagination(resp.headers);
+          this.setCommonData(response.pipelines);
+        });
       },
     },
   };
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index 87b2725a045..a4a27247406 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -73,8 +73,9 @@ export default {
 
     fetchJobs() {
       this.$http.get(this.stage.dropdown_path)
-        .then((response) => {
-          this.dropdownContent = response.json().html;
+        .then(response => response.json())
+        .then((data) => {
+          this.dropdownContent = data.html;
           this.isLoading = false;
         })
         .catch(() => {
diff --git a/app/assets/javascripts/pipelines/pipeline_details_mediatior.js b/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
index 82537ea06f5..385e7430a7d 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
@@ -40,10 +40,10 @@ export default class pipelinesMediator {
   }
 
   successCallback(response) {
-    const data = response.json();
-
-    this.state.isLoading = false;
-    this.store.storePipeline(data);
+    return response.json().then((data) => {
+      this.state.isLoading = false;
+      this.store.storePipeline(data);
+    });
   }
 
   errorCallback() {
diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js
index 5ccfb4ee9c1..721e92221cf 100644
--- a/app/assets/javascripts/sidebar/sidebar_mediator.js
+++ b/app/assets/javascripts/sidebar/sidebar_mediator.js
@@ -28,8 +28,8 @@ export default class SidebarMediator {
 
   fetch() {
     this.service.get()
-      .then((response) => {
-        const data = response.json();
+      .then(response => response.json())
+      .then((data) => {
         this.store.setAssigneeData(data);
         this.store.setTimeTrackingData(data);
       })
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 8303c556f64..4e10bbc7408 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -44,9 +44,8 @@
               text: this.$slots.textarea[0].elm.value,
             },
           )
-          .then((res) => {
-            const data = res.json();
-
+          .then(resp => resp.json())
+          .then((data) => {
             this.markdownPreviewLoading = false;
             this.markdownPreview = data.body;
 
diff --git a/app/assets/javascripts/vue_shared/vue_resource_interceptor.js b/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
index 740930dce5b..7f8e514fda1 100644
--- a/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
+++ b/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
@@ -14,11 +14,22 @@ Vue.http.interceptors.push((request, next) => {
   });
 });
 
-// Inject CSRF token so we don't break any tests.
+// Inject CSRF token and parse headers.
+// New Vue Resource version uses Headers, we are expecting a plain object to render pagination
+// and polling.
 Vue.http.interceptors.push((request, next) => {
   if ($.rails) {
-    // eslint-disable-next-line no-param-reassign
-    request.headers['X-CSRF-Token'] = $.rails.csrfToken();
+    request.headers.set('X-CSRF-Token', $.rails.csrfToken());
   }
-  next();
+
+  next((response) => {
+    // Headers object has a `forEach` property that iterates through all values.
+    const headers = {};
+
+    response.headers.forEach((value, key) => {
+      headers[key] = value;
+    });
+    // eslint-disable-next-line no-param-reassign
+    response.headers = headers;
+  });
 });