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

More conversions to axios

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

12 files changed, 257 insertions, 264 deletions

diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index 411c820cc43..ff65ea99e9a 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -1,7 +1,8 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, no-underscore-dangle, one-var-declaration-per-line, object-shorthand, no-unused-vars, no-new, comma-dangle, consistent-return, quotes, dot-notation, quote-props, prefer-arrow-callback, max-len */
 import 'vendor/jquery.waitforimages';
+import axios from './lib/utils/axios_utils';
 import { addDelimiter } from './lib/utils/text_utility';
-import Flash from './flash';
+import flash from './flash';
 import TaskList from './task_list';
 import CreateMergeRequestDropdown from './create_merge_request_dropdown';
 import IssuablesHelper from './helpers/issuables_helper';
@@ -42,12 +43,8 @@ export default class Issue {
       this.disableCloseReopenButton($button);
 
       url = $button.attr('href');
-      return $.ajax({
-        type: 'PUT',
-        url: url
-      })
-      .fail(() => new Flash(issueFailMessage))
-      .done((data) => {
+      return axios.put(url)
+      .then(({ data }) => {
         const isClosedBadge = $('div.status-box-issue-closed');
         const isOpenBadge = $('div.status-box-open');
         const projectIssuesCounter = $('.issue_counter');
@@ -74,9 +71,10 @@ export default class Issue {
             }
           }
         } else {
-          new Flash(issueFailMessage);
+          flash(issueFailMessage);
         }
       })
+      .catch(() => flash(issueFailMessage))
       .then(() => {
         this.disableCloseReopenButton($button, false);
       });
@@ -115,24 +113,22 @@ export default class Issue {
   static initMergeRequests() {
     var $container;
     $container = $('#merge-requests');
-    return $.getJSON($container.data('url')).fail(function() {
-      return new Flash('Failed to load referenced merge requests');
-    }).done(function(data) {
-      if ('html' in data) {
-        return $container.html(data.html);
-      }
-    });
+    return axios.get($container.data('url'))
+      .then(({ data }) => {
+        if ('html' in data) {
+          $container.html(data.html);
+        }
+      }).catch(() => flash('Failed to load referenced merge requests'));
   }
 
   static initRelatedBranches() {
     var $container;
     $container = $('#related-branches');
-    return $.getJSON($container.data('url')).fail(function() {
-      return new Flash('Failed to load related branches');
-    }).done(function(data) {
-      if ('html' in data) {
-        return $container.html(data.html);
-      }
-    });
+    return axios.get($container.data('url'))
+      .then(({ data }) => {
+        if ('html' in data) {
+          $container.html(data.html);
+        }
+      }).catch(() => flash('Failed to load related branches'));
   }
 }
diff --git a/app/assets/javascripts/job.js b/app/assets/javascripts/job.js
index 9b5092c5e3f..d0b7ea75082 100644
--- a/app/assets/javascripts/job.js
+++ b/app/assets/javascripts/job.js
@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import axios from './lib/utils/axios_utils';
 import { visitUrl } from './lib/utils/url_utility';
 import bp from './breakpoints';
 import { numberToHumanSize } from './lib/utils/number_utils';
@@ -8,6 +9,7 @@ export default class Job {
   constructor(options) {
     this.timeout = null;
     this.state = null;
+    this.fetchingStatusFavicon = false;
     this.options = options || $('.js-build-options').data();
 
     this.pagePath = this.options.pagePath;
@@ -171,12 +173,23 @@ export default class Job {
   }
 
   getBuildTrace() {
-    return $.ajax({
-      url: `${this.pagePath}/trace.json`,
-      data: { state: this.state },
+    return axios.get(`${this.pagePath}/trace.json`, {
+      params: { state: this.state },
     })
-      .done((log) => {
-        setCiStatusFavicon(`${this.pagePath}/status.json`);
+      .then((res) => {
+        const log = res.data;
+
+        if (!this.fetchingStatusFavicon) {
+          this.fetchingStatusFavicon = true;
+
+          setCiStatusFavicon(`${this.pagePath}/status.json`)
+            .then(() => {
+              this.fetchingStatusFavicon = false;
+            })
+            .catch(() => {
+              this.fetchingStatusFavicon = false;
+            });
+        }
 
         if (log.state) {
           this.state = log.state;
@@ -217,7 +230,7 @@ export default class Job {
           visitUrl(this.pagePath);
         }
       })
-      .fail(() => {
+      .catch(() => {
         this.$buildRefreshAnimation.remove();
       })
       .then(() => {
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index 664e793fc8e..5ecf81ad11d 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -2,9 +2,12 @@
 /* global Issuable */
 /* global ListLabel */
 import _ from 'underscore';
+import { __ } from './locale';
+import axios from './lib/utils/axios_utils';
 import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
 import DropdownUtils from './filtered_search/dropdown_utils';
 import CreateLabelDropdown from './create_label';
+import flash from './flash';
 
 export default class LabelsSelect {
   constructor(els, options = {}) {
@@ -82,99 +85,96 @@ export default class LabelsSelect {
         }
         $loading.removeClass('hidden').fadeIn();
         $dropdown.trigger('loading.gl.dropdown');
-        return $.ajax({
-          type: 'PUT',
-          url: issueUpdateURL,
-          dataType: 'JSON',
-          data: data
-        }).done(function(data) {
-          var labelCount, template, labelTooltipTitle, labelTitles;
-          $loading.fadeOut();
-          $dropdown.trigger('loaded.gl.dropdown');
-          $selectbox.hide();
-          data.issueURLSplit = issueURLSplit;
-          labelCount = 0;
-          if (data.labels.length) {
-            template = labelHTMLTemplate(data);
-            labelCount = data.labels.length;
-          }
-          else {
-            template = labelNoneHTMLTemplate;
-          }
-          $value.removeAttr('style').html(template);
-          $sidebarCollapsedValue.text(labelCount);
+        axios.put(issueUpdateURL, data)
+          .then(({ data }) => {
+            var labelCount, template, labelTooltipTitle, labelTitles;
+            $loading.fadeOut();
+            $dropdown.trigger('loaded.gl.dropdown');
+            $selectbox.hide();
+            data.issueURLSplit = issueURLSplit;
+            labelCount = 0;
+            if (data.labels.length) {
+              template = labelHTMLTemplate(data);
+              labelCount = data.labels.length;
+            }
+            else {
+              template = labelNoneHTMLTemplate;
+            }
+            $value.removeAttr('style').html(template);
+            $sidebarCollapsedValue.text(labelCount);
 
-          if (data.labels.length) {
-            labelTitles = data.labels.map(function(label) {
-              return label.title;
-            });
+            if (data.labels.length) {
+              labelTitles = data.labels.map(function(label) {
+                return label.title;
+              });
 
-            if (labelTitles.length > 5) {
-              labelTitles = labelTitles.slice(0, 5);
-              labelTitles.push('and ' + (data.labels.length - 5) + ' more');
-            }
+              if (labelTitles.length > 5) {
+                labelTitles = labelTitles.slice(0, 5);
+                labelTitles.push('and ' + (data.labels.length - 5) + ' more');
+              }
 
-            labelTooltipTitle = labelTitles.join(', ');
-          }
-          else {
-            labelTooltipTitle = '';
-            $sidebarLabelTooltip.tooltip('destroy');
-          }
+              labelTooltipTitle = labelTitles.join(', ');
+            }
+            else {
+              labelTooltipTitle = '';
+              $sidebarLabelTooltip.tooltip('destroy');
+            }
 
-          $sidebarLabelTooltip
-            .attr('title', labelTooltipTitle)
-            .tooltip('fixTitle');
+            $sidebarLabelTooltip
+              .attr('title', labelTooltipTitle)
+              .tooltip('fixTitle');
 
-          $('.has-tooltip', $value).tooltip({
-            container: 'body'
-          });
-        });
+            $('.has-tooltip', $value).tooltip({
+              container: 'body'
+            });
+          })
+          .catch(() => flash(__('Error saving label update.')));
       };
       $dropdown.glDropdown({
         showMenuAbove: showMenuAbove,
         data: function(term, callback) {
-          return $.ajax({
-            url: labelUrl
-          }).done(function(data) {
-            data = _.chain(data).groupBy(function(label) {
-              return label.title;
-            }).map(function(label) {
-              var color;
-              color = _.map(label, function(dup) {
-                return dup.color;
-              });
-              return {
-                id: label[0].id,
-                title: label[0].title,
-                color: color,
-                duplicate: color.length > 1
-              };
-            }).value();
-            if ($dropdown.hasClass('js-extra-options')) {
-              var extraData = [];
-              if (showNo) {
-                extraData.unshift({
-                  id: 0,
-                  title: 'No Label'
+          axios.get(labelUrl)
+            .then((res) => {
+              let data = _.chain(res.data).groupBy(function(label) {
+                return label.title;
+              }).map(function(label) {
+                var color;
+                color = _.map(label, function(dup) {
+                  return dup.color;
                 });
+                return {
+                  id: label[0].id,
+                  title: label[0].title,
+                  color: color,
+                  duplicate: color.length > 1
+                };
+              }).value();
+              if ($dropdown.hasClass('js-extra-options')) {
+                var extraData = [];
+                if (showNo) {
+                  extraData.unshift({
+                    id: 0,
+                    title: 'No Label'
+                  });
+                }
+                if (showAny) {
+                  extraData.unshift({
+                    isAny: true,
+                    title: 'Any Label'
+                  });
+                }
+                if (extraData.length) {
+                  extraData.push('divider');
+                  data = extraData.concat(data);
+                }
               }
-              if (showAny) {
-                extraData.unshift({
-                  isAny: true,
-                  title: 'Any Label'
-                });
-              }
-              if (extraData.length) {
-                extraData.push('divider');
-                data = extraData.concat(data);
-              }
-            }
 
-            callback(data);
-            if (showMenuAbove) {
-              $dropdown.data('glDropdown').positionMenuAbove();
-            }
-          });
+              callback(data);
+              if (showMenuAbove) {
+                $dropdown.data('glDropdown').positionMenuAbove();
+              }
+            })
+            .catch(() => flash(__('Error fetching labels.')));
         },
         renderRow: function(label, instance) {
           var $a, $li, color, colorEl, indeterminate, removesAll, selectedClass, spacing, i, marked, dropdownName, dropdownValue;
diff --git a/app/assets/javascripts/lib/utils/ajax_cache.js b/app/assets/javascripts/lib/utils/ajax_cache.js
index 629d8f44e18..616d8952ada 100644
--- a/app/assets/javascripts/lib/utils/ajax_cache.js
+++ b/app/assets/javascripts/lib/utils/ajax_cache.js
@@ -1,3 +1,4 @@
+import axios from './axios_utils';
 import Cache from './cache';
 
 class AjaxCache extends Cache {
@@ -18,25 +19,18 @@ class AjaxCache extends Cache {
     let pendingRequest = this.pendingRequests[endpoint];
 
     if (!pendingRequest) {
-      pendingRequest = new Promise((resolve, reject) => {
-        // jQuery 2 is not Promises/A+ compatible (missing catch)
-        $.ajax(endpoint) // eslint-disable-line promise/catch-or-return
-        .then(data => resolve(data),
-          (jqXHR, textStatus, errorThrown) => {
-            const error = new Error(`${endpoint}: ${errorThrown}`);
-            error.textStatus = textStatus;
-            reject(error);
-          },
-        );
-      })
-      .then((data) => {
-        this.internalStorage[endpoint] = data;
-        delete this.pendingRequests[endpoint];
-      })
-      .catch((error) => {
-        delete this.pendingRequests[endpoint];
-        throw error;
-      });
+      pendingRequest = axios.get(endpoint)
+        .then(({ data }) => {
+          this.internalStorage[endpoint] = data;
+          delete this.pendingRequests[endpoint];
+        })
+        .catch((e) => {
+          const error = new Error(`${endpoint}: ${e.message}`);
+          error.textStatus = e.message;
+
+          delete this.pendingRequests[endpoint];
+          throw error;
+        });
 
       this.pendingRequests[endpoint] = pendingRequest;
     }
diff --git a/app/assets/javascripts/lib/utils/axios_utils.js b/app/assets/javascripts/lib/utils/axios_utils.js
index 585214049c7..792871e2ecf 100644
--- a/app/assets/javascripts/lib/utils/axios_utils.js
+++ b/app/assets/javascripts/lib/utils/axios_utils.js
@@ -19,6 +19,10 @@ axios.interceptors.response.use((config) => {
   window.activeVueResources -= 1;
 
   return config;
+}, (e) => {
+  window.activeVueResources -= 1;
+
+  return Promise.reject(e);
 });
 
 export default axios;
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 8018ec411c1..5811d059e0b 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -1,5 +1,5 @@
-import { getLocationHash } from './url_utility';
 import axios from './axios_utils';
+import { getLocationHash } from './url_utility';
 
 export const getPagePath = (index = 0) => $('body').attr('data-page').split(':')[index];
 
@@ -28,16 +28,11 @@ export const isInIssuePage = () => {
   return page === 'issues' && action === 'show';
 };
 
-export const ajaxGet = url => $.ajax({
-  type: 'GET',
-  url,
-  dataType: 'script',
-});
-
-export const ajaxPost = (url, data) => $.ajax({
-  type: 'POST',
-  url,
-  data,
+export const ajaxGet = url => axios.get(url, {
+  params: { format: 'js' },
+  responseType: 'text',
+}).then(({ data }) => {
+  $.globalEval(data);
 });
 
 export const rstrip = (val) => {
@@ -412,7 +407,6 @@ window.gl.utils = {
   getGroupSlug,
   isInIssuePage,
   ajaxGet,
-  ajaxPost,
   rstrip,
   updateTooltipTitle,
   disableButtonIfEmptyField,
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_service.js b/app/assets/javascripts/merge_conflicts/merge_conflict_service.js
index c012b77e0bf..c68b47c9348 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflict_service.js
+++ b/app/assets/javascripts/merge_conflicts/merge_conflict_service.js
@@ -1,4 +1,5 @@
 /* eslint-disable no-param-reassign, comma-dangle */
+import axios from '../lib/utils/axios_utils';
 
 ((global) => {
   global.mergeConflicts = global.mergeConflicts || {};
@@ -10,20 +11,11 @@
     }
 
     fetchConflictsData() {
-      return $.ajax({
-        dataType: 'json',
-        url: this.conflictsPath
-      });
+      return axios.get(this.conflictsPath);
     }
 
     submitResolveConflicts(data) {
-      return $.ajax({
-        url: this.resolveConflictsPath,
-        data: JSON.stringify(data),
-        contentType: 'application/json',
-        dataType: 'json',
-        method: 'POST'
-      });
+      return axios.post(this.resolveConflictsPath, data);
     }
   }
 
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
index 792b7523889..b4b3c15108d 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
+++ b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
@@ -38,24 +38,23 @@ $(() => {
       showDiffViewTypeSwitcher() { return mergeConflictsStore.fileTextTypePresent(); }
     },
     created() {
-      mergeConflictsService
-        .fetchConflictsData()
-        .done((data) => {
+      mergeConflictsService.fetchConflictsData()
+        .then(({ data }) => {
           if (data.type === 'error') {
             mergeConflictsStore.setFailedRequest(data.message);
           } else {
             mergeConflictsStore.setConflictsData(data);
           }
-        })
-        .error(() => {
-          mergeConflictsStore.setFailedRequest();
-        })
-        .always(() => {
+
           mergeConflictsStore.setLoadingState(false);
 
           this.$nextTick(() => {
             syntaxHighlight($('.js-syntax-highlight'));
           });
+        })
+        .catch(() => {
+          mergeConflictsStore.setLoadingState(false);
+          mergeConflictsStore.setFailedRequest();
         });
     },
     methods: {
@@ -82,10 +81,10 @@ $(() => {
 
         mergeConflictsService
           .submitResolveConflicts(mergeConflictsStore.getCommitData())
-          .done((data) => {
+          .then(({ data }) => {
             window.location.href = data.redirect_to;
           })
-          .error(() => {
+          .catch(() => {
             mergeConflictsStore.setSubmitState(false);
             new Flash('Failed to save merge conflicts resolutions. Please try again!');
           });
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index acfc62fe5cb..3e97a8c758d 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -1,7 +1,8 @@
 /* eslint-disable no-new, class-methods-use-this */
 
 import Cookies from 'js-cookie';
-import Flash from './flash';
+import axios from './lib/utils/axios_utils';
+import flash from './flash';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import initChangesDropdown from './init_changes_dropdown';
 import bp from './breakpoints';
@@ -244,15 +245,22 @@ export default class MergeRequestTabs {
     if (this.commitsLoaded) {
       return;
     }
-    this.ajaxGet({
-      url: `${source}.json`,
-      success: (data) => {
+
+    this.toggleLoading(true);
+
+    axios.get(`${source}.json`)
+      .then(({ data }) => {
         document.querySelector('div#commits').innerHTML = data.html;
         localTimeAgo($('.js-timeago', 'div#commits'));
         this.commitsLoaded = true;
         this.scrollToElement('#commits');
-      },
-    });
+
+        this.toggleLoading(false);
+      })
+      .catch(() => {
+        this.toggleLoading(false);
+        flash('An error occurred while fetching this tab.');
+      });
   }
 
   mountPipelinesView() {
@@ -283,9 +291,10 @@ export default class MergeRequestTabs {
     // some pages like MergeRequestsController#new has query parameters on that anchor
     const urlPathname = parseUrlPathname(source);
 
-    this.ajaxGet({
-      url: `${urlPathname}.json${location.search}`,
-      success: (data) => {
+    this.toggleLoading(true);
+
+    axios.get(`${urlPathname}.json${location.search}`)
+      .then(({ data }) => {
         const $container = $('#diffs');
         $container.html(data.html);
 
@@ -335,8 +344,13 @@ export default class MergeRequestTabs {
           // (discussion and diff tabs) and `:target` only applies to the first
           anchor.addClass('target');
         }
-      },
-    });
+
+        this.toggleLoading(false);
+      })
+      .catch(() => {
+        this.toggleLoading(false);
+        flash('An error occurred while fetching this tab.');
+      });
   }
 
   // Show or hide the loading spinner
@@ -346,17 +360,6 @@ export default class MergeRequestTabs {
     $('.mr-loading-status .loading').toggle(status);
   }
 
-  ajaxGet(options) {
-    const defaults = {
-      beforeSend: () => this.toggleLoading(true),
-      error: () => new Flash('An error occurred while fetching this tab.', 'alert'),
-      complete: () => this.toggleLoading(false),
-      dataType: 'json',
-      type: 'GET',
-    };
-    $.ajax($.extend({}, defaults, options));
-  }
-
   diffViewType() {
     return $('.inline-parallel-buttons a.active').data('view-type');
   }
diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js
index dd6c6b854bc..b1d74250dfd 100644
--- a/app/assets/javascripts/milestone.js
+++ b/app/assets/javascripts/milestone.js
@@ -1,4 +1,5 @@
-import Flash from './flash';
+import axios from './lib/utils/axios_utils';
+import flash from './flash';
 
 export default class Milestone {
   constructor() {
@@ -33,15 +34,12 @@ export default class Milestone {
     const tabElId = $target.attr('href');
 
     if (endpoint && !$target.hasClass('is-loaded')) {
-      $.ajax({
-        url: endpoint,
-        dataType: 'JSON',
-      })
-      .fail(() => new Flash('Error loading milestone tab'))
-      .done((data) => {
-        $(tabElId).html(data.html);
-        $target.addClass('is-loaded');
-      });
+      axios.get(endpoint)
+        .then(({ data }) => {
+          $(tabElId).html(data.html);
+          $target.addClass('is-loaded');
+        })
+        .catch(() => flash('Error loading milestone tab'));
     }
   }
 }
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index 0e854295fe3..6581be606eb 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -2,6 +2,7 @@
 /* global Issuable */
 /* global ListMilestone */
 import _ from 'underscore';
+import axios from './lib/utils/axios_utils';
 import { timeFor } from './lib/utils/datetime_utility';
 
 export default class MilestoneSelect {
@@ -52,48 +53,47 @@ export default class MilestoneSelect {
       }
       return $dropdown.glDropdown({
         showMenuAbove: showMenuAbove,
-        data: (term, callback) => $.ajax({
-          url: milestonesUrl
-        }).done((data) => {
-          const extraOptions = [];
-          if (showAny) {
-            extraOptions.push({
-              id: 0,
-              name: '',
-              title: 'Any Milestone'
-            });
-          }
-          if (showNo) {
-            extraOptions.push({
-              id: -1,
-              name: 'No Milestone',
-              title: 'No Milestone'
-            });
-          }
-          if (showUpcoming) {
-            extraOptions.push({
-              id: -2,
-              name: '#upcoming',
-              title: 'Upcoming'
-            });
-          }
-          if (showStarted) {
-            extraOptions.push({
-              id: -3,
-              name: '#started',
-              title: 'Started'
-            });
-          }
-          if (extraOptions.length) {
-            extraOptions.push('divider');
-          }
+        data: (term, callback) => axios.get(milestonesUrl)
+          .then(({ data }) => {
+            const extraOptions = [];
+            if (showAny) {
+              extraOptions.push({
+                id: 0,
+                name: '',
+                title: 'Any Milestone'
+              });
+            }
+            if (showNo) {
+              extraOptions.push({
+                id: -1,
+                name: 'No Milestone',
+                title: 'No Milestone'
+              });
+            }
+            if (showUpcoming) {
+              extraOptions.push({
+                id: -2,
+                name: '#upcoming',
+                title: 'Upcoming'
+              });
+            }
+            if (showStarted) {
+              extraOptions.push({
+                id: -3,
+                name: '#started',
+                title: 'Started'
+              });
+            }
+            if (extraOptions.length) {
+              extraOptions.push('divider');
+            }
 
-          callback(extraOptions.concat(data));
-          if (showMenuAbove) {
-            $dropdown.data('glDropdown').positionMenuAbove();
-          }
-          $(`[data-milestone-id="${selectedMilestone}"] > a`).addClass('is-active');
-        }),
+            callback(extraOptions.concat(data));
+            if (showMenuAbove) {
+              $dropdown.data('glDropdown').positionMenuAbove();
+            }
+            $(`[data-milestone-id="${selectedMilestone}"] > a`).addClass('is-active');
+          }),
         renderRow: milestone => `
           <li data-milestone-id="${milestone.name}">
             <a href='#' class='dropdown-menu-milestone-link'>
@@ -200,26 +200,23 @@ export default class MilestoneSelect {
             data[abilityName].milestone_id = selected != null ? selected : null;
             $loading.removeClass('hidden').fadeIn();
             $dropdown.trigger('loading.gl.dropdown');
-            return $.ajax({
-              type: 'PUT',
-              url: issueUpdateURL,
-              data: data
-            }).done((data) => {
-              $dropdown.trigger('loaded.gl.dropdown');
-              $loading.fadeOut();
-              $selectBox.hide();
-              $value.css('display', '');
-              if (data.milestone != null) {
-                data.milestone.full_path = this.currentProject.full_path;
-                data.milestone.remaining = timeFor(data.milestone.due_date);
-                data.milestone.name = data.milestone.title;
-                $value.html(milestoneLinkTemplate(data.milestone));
-                return $sidebarCollapsedValue.find('span').html(collapsedSidebarLabelTemplate(data.milestone));
-              } else {
-                $value.html(milestoneLinkNoneTemplate);
-                return $sidebarCollapsedValue.find('span').text('No');
-              }
-            });
+            return axios.put(issueUpdateURL, data)
+              .then(({ data }) => {
+                $dropdown.trigger('loaded.gl.dropdown');
+                $loading.fadeOut();
+                $selectBox.hide();
+                $value.css('display', '');
+                if (data.milestone != null) {
+                  data.milestone.full_path = this.currentProject.full_path;
+                  data.milestone.remaining = timeFor(data.milestone.due_date);
+                  data.milestone.name = data.milestone.title;
+                  $value.html(milestoneLinkTemplate(data.milestone));
+                  return $sidebarCollapsedValue.find('span').html(collapsedSidebarLabelTemplate(data.milestone));
+                } else {
+                  $value.html(milestoneLinkNoneTemplate);
+                  return $sidebarCollapsedValue.find('span').text('No');
+                }
+              });
           }
         }
       });
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index bcb342f407f..29e211537c7 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -18,13 +18,14 @@ import 'vendor/jquery.atwho';
 import AjaxCache from '~/lib/utils/ajax_cache';
 import axios from './lib/utils/axios_utils';
 import { getLocationHash } from './lib/utils/url_utility';
+import axios from './lib/utils/axios_utils';
 import Flash from './flash';
 import CommentTypeToggle from './comment_type_toggle';
 import GLForm from './gl_form';
 import loadAwardsHandler from './awards_handler';
 import Autosave from './autosave';
 import TaskList from './task_list';
-import { ajaxPost, isInViewport, getPagePath, scrollToElement, isMetaKey } from './lib/utils/common_utils';
+import { isInViewport, getPagePath, scrollToElement, isMetaKey } from './lib/utils/common_utils';
 import imageDiffHelper from './image_diff/helpers/index';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 
@@ -1399,7 +1400,7 @@ export default class Notes {
    * 2) Identify comment type; a) Main thread b) Discussion thread c) Discussion resolve
    * 3) Build temporary placeholder element (using `createPlaceholderNote`)
    * 4) Show placeholder note on UI
-   * 5) Perform network request to submit the note using `ajaxPost`
+   * 5) Perform network request to submit the note using `axios.post`
    *    a) If request is successfully completed
    *        1. Remove placeholder element
    *        2. Show submitted Note element
@@ -1481,8 +1482,10 @@ export default class Notes {
 
     /* eslint-disable promise/catch-or-return */
     // Make request to submit comment on server
-    ajaxPost(formAction, formData)
-      .then((note) => {
+    axios.post(formAction, formData)
+      .then((res) => {
+        const note = res.data;
+
         // Submission successful! remove placeholder
         $notesContainer.find(`#${noteUniqueId}`).remove();
 
@@ -1555,7 +1558,7 @@ export default class Notes {
         }
 
         $form.trigger('ajax:success', [note]);
-      }).fail(() => {
+      }).catch(() => {
         // Submission failed, remove placeholder note and show Flash error message
         $notesContainer.find(`#${noteUniqueId}`).remove();
 
@@ -1594,7 +1597,7 @@ export default class Notes {
    *
    * 1) Get Form metadata
    * 2) Update note element with new content
-   * 3) Perform network request to submit the updated note using `ajaxPost`
+   * 3) Perform network request to submit the updated note using `axios.post`
    *    a) If request is successfully completed
    *        1. Show submitted Note element
    *    b) If request failed
@@ -1625,12 +1628,12 @@ export default class Notes {
 
     /* eslint-disable promise/catch-or-return */
     // Make request to update comment on server
-    ajaxPost(formAction, formData)
-      .then((note) => {
+    axios.post(formAction, formData)
+      .then(({ data }) => {
         // Submission successful! render final note element
-        this.updateNote(note, $editingNote);
+        this.updateNote(data, $editingNote);
       })
-      .fail(() => {
+      .catch(() => {
         // Submission failed, revert back to original note
         $noteBodyText.html(_.escape(cachedNoteBodyText));
         $editingNote.removeClass('being-posted fade-in');