Update vue-resource

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) => {

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() {

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;

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 = [];
         }

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) {

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 () {

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);
+        });
       },
     },
   };

app/assets/javascripts/diff_notes/components/resolve_btn.js

-/* 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;
-        if (response.status === 200) {
-          const data = response.json();
+      promise
+        .then(resp => resp.json())
+        .then((data) => {
+          this.loading = false;
           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 () {

app/assets/javascripts/diff_notes/services/resolve.js

-/* 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,
     }, {});
   }
 }

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

 export default {
   methods: {
     saveData(resp) {
-      const response = {
-        headers: resp.headers,
-        body: resp.json(),
-      };
-      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);
+      const headers = resp.headers;
+      return resp.json().then((response) => {
+        this.isLoading = false;
+        this.store.storeAvailableCount(response.available_count);
+        this.store.storeStoppedCount(response.stopped_count);
+        this.store.storeEnvironments(response.environments);
+        this.store.setPagination(headers);
+      });
     },
   },
 };

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';
             }

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);
       },

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() {

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}">

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);
+        });
       },
     },
   };

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(() => {

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() {

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);
       })

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;

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;
+  });
 });