Merge branch 'ph-axios-4' into 'master'

More conversions of $.ajax to axios

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

9 files changed, 140 insertions, 166 deletions

diff --git a/app/assets/javascripts/project_label_subscription.js b/app/assets/javascripts/project_label_subscription.js
index b65521b278f..64b7dd540f9 100644
--- a/app/assets/javascripts/project_label_subscription.js
+++ b/app/assets/javascripts/project_label_subscription.js
@@ -1,3 +1,7 @@
+import { __ } from './locale';
+import axios from './lib/utils/axios_utils';
+import flash from './flash';
+
 export default class ProjectLabelSubscription {
   constructor(container) {
     this.$container = $(container);
@@ -17,10 +21,7 @@ export default class ProjectLabelSubscription {
     $btn.addClass('disabled');
     $span.toggleClass('hidden');
 
-    $.ajax({
-      type: 'POST',
-      url,
-    }).done(() => {
+    axios.post(url).then(() => {
       let newStatus;
       let newAction;
 
@@ -45,6 +46,6 @@ export default class ProjectLabelSubscription {
 
         return button;
       });
-    });
+    }).catch(() => flash(__('There was an error subscribing to this label.')));
   }
 }
diff --git a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
index 55c93923cc8..59ad5b45855 100644
--- a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
+++ b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
@@ -1,3 +1,4 @@
+import axios from '../lib/utils/axios_utils';
 import PANEL_STATE from './constants';
 import { backOff } from '../lib/utils/common_utils';
 
@@ -81,24 +82,20 @@ export default class PrometheusMetrics {
   loadActiveMetrics() {
     this.showMonitoringMetricsPanelState(PANEL_STATE.LOADING);
     backOff((next, stop) => {
-      $.ajax({
-        url: this.activeMetricsEndpoint,
-        dataType: 'json',
-        global: false,
-      })
-        .done((res) => {
-          if (res && res.success) {
-            stop(res);
+      axios.get(this.activeMetricsEndpoint)
+        .then(({ data }) => {
+          if (data && data.success) {
+            stop(data);
           } else {
             this.backOffRequestCounter = this.backOffRequestCounter += 1;
             if (this.backOffRequestCounter < 3) {
               next();
             } else {
-              stop(res);
+              stop(data);
             }
           }
         })
-        .fail(stop);
+        .catch(stop);
     })
     .then((res) => {
       if (res && res.data && res.data.length) {
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit.js b/app/assets/javascripts/protected_branches/protected_branch_edit.js
index 632625da8e7..b51b3e9a6ff 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_edit.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_edit.js
@@ -1,5 +1,5 @@
-/* eslint-disable no-new */
-import Flash from '../flash';
+import flash from '../flash';
+import axios from '../lib/utils/axios_utils';
 import ProtectedBranchAccessDropdown from './protected_branch_access_dropdown';
 
 export default class ProtectedBranchEdit {
@@ -38,29 +38,25 @@ export default class ProtectedBranchEdit {
     this.$allowedToMergeDropdown.disable();
     this.$allowedToPushDropdown.disable();
 
-    $.ajax({
-      type: 'POST',
-      url: this.$wrap.data('url'),
-      dataType: 'json',
-      data: {
-        _method: 'PATCH',
-        protected_branch: {
-          merge_access_levels_attributes: [{
-            id: this.$allowedToMergeDropdown.data('access-level-id'),
-            access_level: $allowedToMergeInput.val(),
-          }],
-          push_access_levels_attributes: [{
-            id: this.$allowedToPushDropdown.data('access-level-id'),
-            access_level: $allowedToPushInput.val(),
-          }],
-        },
+    axios.patch(this.$wrap.data('url'), {
+      protected_branch: {
+        merge_access_levels_attributes: [{
+          id: this.$allowedToMergeDropdown.data('access-level-id'),
+          access_level: $allowedToMergeInput.val(),
+        }],
+        push_access_levels_attributes: [{
+          id: this.$allowedToPushDropdown.data('access-level-id'),
+          access_level: $allowedToPushInput.val(),
+        }],
       },
-      error() {
-        new Flash('Failed to update branch!', 'alert', document.querySelector('.js-protected-branches-list'));
-      },
-    }).always(() => {
+    }).then(() => {
+      this.$allowedToMergeDropdown.enable();
+      this.$allowedToPushDropdown.enable();
+    }).catch(() => {
       this.$allowedToMergeDropdown.enable();
       this.$allowedToPushDropdown.enable();
+
+      flash('Failed to update branch!', 'alert', document.querySelector('.js-protected-branches-list'));
     });
   }
 }
diff --git a/app/assets/javascripts/protected_tags/protected_tag_edit.js b/app/assets/javascripts/protected_tags/protected_tag_edit.js
index dad0ad25b65..21a258cf93c 100644
--- a/app/assets/javascripts/protected_tags/protected_tag_edit.js
+++ b/app/assets/javascripts/protected_tags/protected_tag_edit.js
@@ -1,5 +1,5 @@
-/* eslint-disable no-new */
-import Flash from '../flash';
+import flash from '../flash';
+import axios from '../lib/utils/axios_utils';
 import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
 
 export default class ProtectedTagEdit {
@@ -28,24 +28,19 @@ export default class ProtectedTagEdit {
 
     this.$allowedToCreateDropdownButton.disable();
 
-    $.ajax({
-      type: 'POST',
-      url: this.$wrap.data('url'),
-      dataType: 'json',
-      data: {
-        _method: 'PATCH',
-        protected_tag: {
-          create_access_levels_attributes: [{
-            id: this.$allowedToCreateDropdownButton.data('access-level-id'),
-            access_level: $allowedToCreateInput.val(),
-          }],
-        },
+    axios.patch(this.$wrap.data('url'), {
+      protected_tag: {
+        create_access_levels_attributes: [{
+          id: this.$allowedToCreateDropdownButton.data('access-level-id'),
+          access_level: $allowedToCreateInput.val(),
+        }],
       },
-      error() {
-        new Flash('Failed to update tag!', 'alert', document.querySelector('.js-protected-tags-list'));
-      },
-    }).always(() => {
+    }).then(() => {
+      this.$allowedToCreateDropdownButton.enable();
+    }).catch(() => {
       this.$allowedToCreateDropdownButton.enable();
+
+      flash('Failed to update tag!', 'alert', document.querySelector('.js-protected-tags-list'));
     });
   }
 }
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index b830fcf7e80..01c3be5411f 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -2,6 +2,8 @@
 
 import _ from 'underscore';
 import Cookies from 'js-cookie';
+import flash from './flash';
+import axios from './lib/utils/axios_utils';
 
 function Sidebar(currentUser) {
   this.toggleTodo = this.toggleTodo.bind(this);
@@ -62,7 +64,7 @@ Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
 Sidebar.prototype.toggleTodo = function(e) {
   var $btnText, $this, $todoLoading, ajaxType, url;
   $this = $(e.currentTarget);
-  ajaxType = $this.attr('data-delete-path') ? 'DELETE' : 'POST';
+  ajaxType = $this.attr('data-delete-path') ? 'delete' : 'post';
   if ($this.attr('data-delete-path')) {
     url = "" + ($this.attr('data-delete-path'));
   } else {
@@ -71,25 +73,14 @@ Sidebar.prototype.toggleTodo = function(e) {
 
   $this.tooltip('hide');
 
-  return $.ajax({
-    url: url,
-    type: ajaxType,
-    dataType: 'json',
-    data: {
-      issuable_id: $this.data('issuable-id'),
-      issuable_type: $this.data('issuable-type')
-    },
-    beforeSend: (function(_this) {
-      return function() {
-        $('.js-issuable-todo').disable()
-          .addClass('is-loading');
-      };
-    })(this)
-  }).done((function(_this) {
-    return function(data) {
-      return _this.todoUpdateDone(data);
-    };
-  })(this));
+  $('.js-issuable-todo').disable().addClass('is-loading');
+
+  axios[ajaxType](url, {
+    issuable_id: $this.data('issuable-id'),
+    issuable_type: $this.data('issuable-type'),
+  }).then(({ data }) => {
+    this.todoUpdateDone(data);
+  }).catch(() => flash(`There was an error ${ajaxType === 'post' ? 'adding a' : 'deleting the'} todo.`));
 };
 
 Sidebar.prototype.todoUpdateDone = function(data) {
diff --git a/app/assets/javascripts/shortcuts.js b/app/assets/javascripts/shortcuts.js
index cd5ab53eace..c5dddd001bb 100644
--- a/app/assets/javascripts/shortcuts.js
+++ b/app/assets/javascripts/shortcuts.js
@@ -1,5 +1,6 @@
 import Cookies from 'js-cookie';
 import Mousetrap from 'mousetrap';
+import axios from './lib/utils/axios_utils';
 import { refreshCurrentPage, visitUrl } from './lib/utils/url_utility';
 import findAndFollowLink from './shortcuts_dashboard_navigation';
 
@@ -85,21 +86,21 @@ export default class Shortcuts {
       $modal.modal('toggle');
     }
 
-    $.ajax({
-      url: gon.shortcuts_path,
-      dataType: 'script',
-      success() {
-        if (location && location.length > 0) {
-          const results = [];
-          for (let i = 0, len = location.length; i < len; i += 1) {
-            results.push($(location[i]).show());
-          }
-          return results;
+    return axios.get(gon.shortcuts_path, {
+      responseType: 'text',
+    }).then(({ data }) => {
+      $.globalEval(data);
+
+      if (location && location.length > 0) {
+        const results = [];
+        for (let i = 0, len = location.length; i < len; i += 1) {
+          results.push($(location[i]).show());
         }
+        return results;
+      }
 
-        $('.hidden-shortcut').show();
-        return $('.js-more-help-button').remove();
-      },
+      $('.hidden-shortcut').show();
+      return $('.js-more-help-button').remove();
     });
   }
 
diff --git a/app/assets/javascripts/task_list.js b/app/assets/javascripts/task_list.js
index dcbec40c79e..129a551cbcd 100644
--- a/app/assets/javascripts/task_list.js
+++ b/app/assets/javascripts/task_list.js
@@ -1,4 +1,5 @@
 import 'deckar01-task_list';
+import axios from './lib/utils/axios_utils';
 import Flash from './flash';
 
 export default class TaskList {
@@ -7,11 +8,11 @@ export default class TaskList {
     this.dataType = options.dataType;
     this.fieldName = options.fieldName;
     this.onSuccess = options.onSuccess || (() => {});
-    this.onError = function showFlash(response) {
+    this.onError = function showFlash(e) {
       let errorMessages = '';
 
-      if (response.responseJSON) {
-        errorMessages = response.responseJSON.errors.join(' ');
+      if (e.response.data && typeof e.response.data === 'object') {
+        errorMessages = e.response.data.errors.join(' ');
       }
 
       return new Flash(errorMessages || 'Update failed', 'alert');
@@ -38,12 +39,9 @@ export default class TaskList {
     patchData[this.dataType] = {
       [this.fieldName]: $target.val(),
     };
-    return $.ajax({
-      type: 'PATCH',
-      url: $target.data('update-url') || $('form.js-issuable-update').attr('action'),
-      data: patchData,
-      success: this.onSuccess,
-      error: this.onError,
-    });
+
+    return axios.patch($target.data('update-url') || $('form.js-issuable-update').attr('action'), patchData)
+      .then(({ data }) => this.onSuccess(data))
+      .catch(err => this.onError(err));
   }
 }
diff --git a/app/assets/javascripts/users/user_tabs.js b/app/assets/javascripts/users/user_tabs.js
index 992baa9a1ef..e13b9839a20 100644
--- a/app/assets/javascripts/users/user_tabs.js
+++ b/app/assets/javascripts/users/user_tabs.js
@@ -1,6 +1,9 @@
+import axios from '../lib/utils/axios_utils';
 import Activities from '../activities';
 import ActivityCalendar from './activity_calendar';
 import { localTimeAgo } from '../lib/utils/datetime_utility';
+import { __ } from '../locale';
+import flash from '../flash';
 
 /**
  * UserTabs
@@ -131,18 +134,20 @@ export default class UserTabs {
   }
 
   loadTab(action, endpoint) {
-    return $.ajax({
-      beforeSend: () => this.toggleLoading(true),
-      complete: () => this.toggleLoading(false),
-      dataType: 'json',
-      url: endpoint,
-      success: (data) => {
+    this.toggleLoading(true);
+
+    return axios.get(endpoint)
+      .then(({ data }) => {
         const tabSelector = `div#${action}`;
         this.$parentEl.find(tabSelector).html(data.html);
         this.loaded[action] = true;
         localTimeAgo($('.js-timeago', tabSelector));
-      },
-    });
+
+        this.toggleLoading(false);
+      })
+      .catch(() => {
+        this.toggleLoading(false);
+      });
   }
 
   loadActivities() {
@@ -158,17 +163,15 @@ export default class UserTabs {
       utcFormatted = `UTC${utcOffset > 0 ? '+' : ''}${(utcOffset / 3600)}`;
     }
 
-    $.ajax({
-      dataType: 'json',
-      url: calendarPath,
-      success: (activityData) => {
+    axios.get(calendarPath)
+      .then(({ data }) => {
         $calendarWrap.html(CALENDAR_TEMPLATE);
         $calendarWrap.find('.calendar-hint').append(`(Timezone: ${utcFormatted})`);
 
         // eslint-disable-next-line no-new
-        new ActivityCalendar('.js-contrib-calendar', activityData, calendarActivitiesPath, utcOffset);
-      },
-    });
+        new ActivityCalendar('.js-contrib-calendar', data, calendarActivitiesPath, utcOffset);
+      })
+      .catch(() => flash(__('There was an error loading users activity calendar.')));
 
     // eslint-disable-next-line no-new
     new Activities();
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index ab108906732..eaed81cf79e 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -2,6 +2,7 @@
 /* global Issuable */
 /* global emitSidebarEvent */
 import _ from 'underscore';
+import axios from './lib/utils/axios_utils';
 
 // TODO: remove eventHub hack after code splitting refactor
 window.emitSidebarEvent = window.emitSidebarEvent || $.noop;
@@ -177,32 +178,28 @@ function UsersSelect(currentUser, els, options = {}) {
         $loading.removeClass('hidden').fadeIn();
         $dropdown.trigger('loading.gl.dropdown');
 
-        return $.ajax({
-          type: 'PUT',
-          dataType: 'json',
-          url: issueURL,
-          data: data
-        }).done(function(data) {
-          var user;
-          $dropdown.trigger('loaded.gl.dropdown');
-          $loading.fadeOut();
-          if (data.assignee) {
-            user = {
-              name: data.assignee.name,
-              username: data.assignee.username,
-              avatar: data.assignee.avatar_url
-            };
-          } else {
-            user = {
-              name: 'Unassigned',
-              username: '',
-              avatar: ''
-            };
-          }
-          $value.html(assigneeTemplate(user));
-          $collapsedSidebar.attr('title', _.escape(user.name)).tooltip('fixTitle');
-          return $collapsedSidebar.html(collapsedAssigneeTemplate(user));
-        });
+        return axios.put(issueURL, data)
+          .then(({ data }) => {
+            var user;
+            $dropdown.trigger('loaded.gl.dropdown');
+            $loading.fadeOut();
+            if (data.assignee) {
+              user = {
+                name: data.assignee.name,
+                username: data.assignee.username,
+                avatar: data.assignee.avatar_url
+              };
+            } else {
+              user = {
+                name: 'Unassigned',
+                username: '',
+                avatar: ''
+              };
+            }
+            $value.html(assigneeTemplate(user));
+            $collapsedSidebar.attr('title', _.escape(user.name)).tooltip('fixTitle');
+            return $collapsedSidebar.html(collapsedAssigneeTemplate(user));
+          });
       };
       collapsedAssigneeTemplate = _.template('<% if( avatar ) { %> <a class="author_link" href="/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>');
       assigneeTemplate = _.template('<% if (username) { %> <a class="author_link bold" href="/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> No assignee - <a href="#" class="js-assign-yourself"> assign yourself </a> </span> <% } %>');
@@ -660,38 +657,33 @@ UsersSelect.prototype.user = function(user_id, callback) {
   var url;
   url = this.buildUrl(this.userPath);
   url = url.replace(':id', user_id);
-  return $.ajax({
-    url: url,
-    dataType: "json"
-  }).done(function(user) {
-    return callback(user);
-  });
+  return axios.get(url)
+    .then(({ data }) => {
+      callback(data);
+    });
 };
 
 // Return users list. Filtered by query
 // Only active users retrieved
 UsersSelect.prototype.users = function(query, options, callback) {
-  var url;
-  url = this.buildUrl(this.usersPath);
-  return $.ajax({
-    url: url,
-    data: {
-      search: query,
-      per_page: options.perPage || 20,
-      active: true,
-      project_id: options.projectId || null,
-      group_id: options.groupId || null,
-      skip_ldap: options.skipLdap || null,
-      todo_filter: options.todoFilter || null,
-      todo_state_filter: options.todoStateFilter || null,
-      current_user: options.showCurrentUser || null,
-      author_id: options.authorId || null,
-      skip_users: options.skipUsers || null
-    },
-    dataType: "json"
-  }).done(function(users) {
-    return callback(users);
-  });
+  const url = this.buildUrl(this.usersPath);
+  const params = {
+    search: query,
+    per_page: options.perPage || 20,
+    active: true,
+    project_id: options.projectId || null,
+    group_id: options.groupId || null,
+    skip_ldap: options.skipLdap || null,
+    todo_filter: options.todoFilter || null,
+    todo_state_filter: options.todoStateFilter || null,
+    current_user: options.showCurrentUser || null,
+    author_id: options.authorId || null,
+    skip_users: options.skipUsers || null
+  };
+  return axios.get(url, { params })
+    .then(({ data }) => {
+      callback(data);
+    });
 };
 
 UsersSelect.prototype.buildUrl = function(url) {