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

More conversions of $.ajax to axios

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

app/assets/javascripts/compare.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, quotes, no-var, object-shorthand, consistent-return, no-unused-vars, comma-dangle, vars-on-top, prefer-template, max-len */
 import { localTimeAgo } from './lib/utils/datetime_utility';
+import axios from './lib/utils/axios_utils';
 
 export default class Compare {
   constructor(opts) {
@@ -41,17 +42,14 @@ export default class Compare {
   }
 
   getTargetProject() {
-    return $.ajax({
-      url: this.opts.targetProjectUrl,
-      data: {
-        target_project_id: $("input[name='merge_request[target_project_id]']").val()
-      },
-      beforeSend: function() {
-        return $('.mr_target_commit').empty();
+    $('.mr_target_commit').empty();
+
+    return axios.get(this.opts.targetProjectUrl, {
+      params: {
+        target_project_id: $("input[name='merge_request[target_project_id]']").val(),
       },
-      success: function(html) {
-        return $('.js-target-branch-dropdown .dropdown-content').html(html);
-      }
+    }).then(({ data }) => {
+      $('.js-target-branch-dropdown .dropdown-content').html(data);
     });
   }
 
@@ -68,22 +66,19 @@ export default class Compare {
     });
   }
 
-  static sendAjax(url, loading, target, data) {
-    var $target;
-    $target = $(target);
-    return $.ajax({
-      url: url,
-      data: data,
-      beforeSend: function() {
-        loading.show();
-        return $target.empty();
-      },
-      success: function(html) {
-        loading.hide();
-        $target.html(html);
-        var className = '.' + $target[0].className.replace(' ', '.');
-        localTimeAgo($('.js-timeago', className));
-      }
+  static sendAjax(url, loading, target, params) {
+    const $target = $(target);
+
+    loading.show();
+    $target.empty();
+
+    return axios.get(url, {
+      params,
+    }).then(({ data }) => {
+      loading.hide();
+      $target.html(data);
+      const className = '.' + $target[0].className.replace(' ', '.');
+      localTimeAgo($('.js-timeago', className));
     });
   }
 }

app/assets/javascripts/compare_autocomplete.js

 /* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, object-shorthand, comma-dangle, prefer-arrow-callback, no-else-return, newline-per-chained-call, wrap-iife, max-len */
+import { __ } from './locale';
+import axios from './lib/utils/axios_utils';
+import flash from './flash';
 
 export default function initCompareAutocomplete() {
   $('.js-compare-dropdown').each(function() {
@@ -10,15 +13,14 @@ export default function initCompareAutocomplete() {
     const $filterInput = $('input[type="search"]', $dropdownContainer);
     $dropdown.glDropdown({
       data: function(term, callback) {
-        return $.ajax({
-          url: $dropdown.data('refs-url'),
-          data: {
+        axios.get($dropdown.data('refsUrl'), {
+          params: {
             ref: $dropdown.data('ref'),
             search: term,
-          }
-        }).done(function(refs) {
-          return callback(refs);
-        });
+          },
+        }).then(({ data }) => {
+          callback(data);
+        }).catch(() => flash(__('Error fetching refs')));
       },
       selectable: true,
       filterable: true,

app/assets/javascripts/create_merge_request_dropdown.js

 /* eslint-disable no-new */
 import _ from 'underscore';
+import axios from './lib/utils/axios_utils';
 import Flash from './flash';
 import DropLab from './droplab/drop_lab';
 import ISetter from './droplab/plugins/input_setter';
@@ -74,60 +75,52 @@ export default class CreateMergeRequestDropdown {
   }
 
   checkAbilityToCreateBranch() {
-    return $.ajax({
-      type: 'GET',
-      dataType: 'json',
-      url: this.canCreatePath,
-      beforeSend: () => this.setUnavailableButtonState(),
-    })
-    .done((data) => {
-      this.setUnavailableButtonState(false);
-
-      if (data.can_create_branch) {
-        this.available();
-        this.enable();
-
-        if (!this.droplabInitialized) {
-          this.droplabInitialized = true;
-          this.initDroplab();
-          this.bindEvents();
+    this.setUnavailableButtonState();
+
+    axios.get(this.canCreatePath)
+      .then(({ data }) => {
+        this.setUnavailableButtonState(false);
+
+        if (data.can_create_branch) {
+          this.available();
+          this.enable();
+
+          if (!this.droplabInitialized) {
+            this.droplabInitialized = true;
+            this.initDroplab();
+            this.bindEvents();
+          }
+        } else if (data.has_related_branch) {
+          this.hide();
         }
-      } else if (data.has_related_branch) {
-        this.hide();
-      }
-    }).fail(() => {
-      this.unavailable();
-      this.disable();
-      new Flash('Failed to check if a new branch can be created.');
-    });
+      })
+      .catch(() => {
+        this.unavailable();
+        this.disable();
+        Flash('Failed to check if a new branch can be created.');
+      });
   }
 
   createBranch() {
-    return $.ajax({
-      method: 'POST',
-      dataType: 'json',
-      url: this.createBranchPath,
-      beforeSend: () => (this.isCreatingBranch = true),
-    })
-    .done((data) => {
-      this.branchCreated = true;
-      window.location.href = data.url;
-    })
-    .fail(() => new Flash('Failed to create a branch for this issue. Please try again.'));
+    this.isCreatingBranch = true;
+
+    return axios.post(this.createBranchPath)
+      .then(({ data }) => {
+        this.branchCreated = true;
+        window.location.href = data.url;
+      })
+      .catch(() => Flash('Failed to create a branch for this issue. Please try again.'));
   }
 
   createMergeRequest() {
-    return $.ajax({
-      method: 'POST',
-      dataType: 'json',
-      url: this.createMrPath,
-      beforeSend: () => (this.isCreatingMergeRequest = true),
-    })
-    .done((data) => {
-      this.mergeRequestCreated = true;
-      window.location.href = data.url;
-    })
-    .fail(() => new Flash('Failed to create Merge Request. Please try again.'));
+    this.isCreatingMergeRequest = true;
+
+    return axios.post(this.createMrPath)
+      .then(({ data }) => {
+        this.mergeRequestCreated = true;
+        window.location.href = data.url;
+      })
+      .catch(() => Flash('Failed to create Merge Request. Please try again.'));
   }
 
   disable() {
@@ -200,39 +193,33 @@ export default class CreateMergeRequestDropdown {
   getRef(ref, target = 'all') {
     if (!ref) return false;
 
-    return $.ajax({
-      method: 'GET',
-      dataType: 'json',
-      url: this.refsPath + ref,
-      beforeSend: () => {
-        this.isGettingRef = true;
-      },
-    })
-    .always(() => {
-      this.isGettingRef = false;
-    })
-    .done((data) => {
-      const branches = data[Object.keys(data)[0]];
-      const tags = data[Object.keys(data)[1]];
-      let result;
+    return axios.get(this.refsPath + ref)
+      .then(({ data }) => {
+        const branches = data[Object.keys(data)[0]];
+        const tags = data[Object.keys(data)[1]];
+        let result;
+
+        if (target === 'branch') {
+          result = CreateMergeRequestDropdown.findByValue(branches, ref);
+        } else {
+          result = CreateMergeRequestDropdown.findByValue(branches, ref, true) ||
+            CreateMergeRequestDropdown.findByValue(tags, ref, true);
+          this.suggestedRef = result;
+        }
 
-      if (target === 'branch') {
-        result = CreateMergeRequestDropdown.findByValue(branches, ref);
-      } else {
-        result = CreateMergeRequestDropdown.findByValue(branches, ref, true) ||
-          CreateMergeRequestDropdown.findByValue(tags, ref, true);
-        this.suggestedRef = result;
-      }
+        this.isGettingRef = false;
 
-      return this.updateInputState(target, ref, result);
-    })
-    .fail(() => {
-      this.unavailable();
-      this.disable();
-      new Flash('Failed to get ref.');
+        return this.updateInputState(target, ref, result);
+      })
+      .catch(() => {
+        this.unavailable();
+        this.disable();
+        new Flash('Failed to get ref.');
 
-      return false;
-    });
+        this.isGettingRef = false;
+
+        return false;
+      });
   }
 
   getTargetData(target) {
@@ -332,12 +319,12 @@ export default class CreateMergeRequestDropdown {
       xhr = this.createBranch();
     }
 
-    xhr.fail(() => {
+    xhr.catch(() => {
       this.isCreatingMergeRequest = false;
       this.isCreatingBranch = false;
-    });
 
-    xhr.always(() => this.enable());
+      this.enable();
+    });
 
     this.disable();
   }

app/assets/javascripts/dropzone_input.js

@@ -2,6 +2,7 @@ import Dropzone from 'dropzone';
 import _ from 'underscore';
 import './preview_markdown';
 import csrf from './lib/utils/csrf';
+import axios from './lib/utils/axios_utils';
 
 Dropzone.autoDiscover = false;
 
@@ -235,25 +236,21 @@ export default function dropzoneInput(form) {
   uploadFile = (item, filename) => {
     const formData = new FormData();
     formData.append('file', item, filename);
-    return $.ajax({
-      url: uploadsPath,
-      type: 'POST',
-      data: formData,
-      dataType: 'json',
-      processData: false,
-      contentType: false,
-      headers: csrf.headers,
-      beforeSend: () => {
-        showSpinner();
-        return closeAlertMessage();
-      },
-      success: (e, text, response) => {
-        const md = response.responseJSON.link.markdown;
+
+    showSpinner();
+    closeAlertMessage();
+
+    axios.post(uploadsPath, formData)
+      .then(({ data }) => {
+        const md = data.link.markdown;
+
         insertToTextArea(filename, md);
-      },
-      error: response => showError(response.responseJSON.message),
-      complete: () => closeSpinner(),
-    });
+        closeSpinner();
+      })
+      .catch((e) => {
+        showError(e.response.data.message);
+        closeSpinner();
+      });
   };
 
   updateAttachingMessage = (files, messageContainer) => {

app/assets/javascripts/due_date_select.js

 /* global dateFormat */
 
 import Pikaday from 'pikaday';
+import axios from './lib/utils/axios_utils';
 import { parsePikadayDate, pikadayToString } from './lib/utils/datefix';
 
 class DueDateSelect {
@@ -125,37 +126,30 @@ class DueDateSelect {
   }
 
   submitSelectedDate(isDropdown) {
-    return $.ajax({
-      type: 'PUT',
-      url: this.issueUpdateURL,
-      data: this.datePayload,
-      dataType: 'json',
-      beforeSend: () => {
-        const selectedDateValue = this.datePayload[this.abilityName].due_date;
-        const displayedDateStyle = this.displayedDate !== 'No due date' ? 'bold' : 'no-value';
+    const selectedDateValue = this.datePayload[this.abilityName].due_date;
+    const displayedDateStyle = this.displayedDate !== 'No due date' ? 'bold' : 'no-value';
 
-        this.$loading.removeClass('hidden').fadeIn();
+    this.$loading.removeClass('hidden').fadeIn();
 
-        if (isDropdown) {
-          this.$dropdown.trigger('loading.gl.dropdown');
-          this.$selectbox.hide();
-        }
+    if (isDropdown) {
+      this.$dropdown.trigger('loading.gl.dropdown');
+      this.$selectbox.hide();
+    }
 
-        this.$value.css('display', '');
-        this.$valueContent.html(`<span class='${displayedDateStyle}'>${this.displayedDate}</span>`);
-        this.$sidebarValue.html(this.displayedDate);
+    this.$value.css('display', '');
+    this.$valueContent.html(`<span class='${displayedDateStyle}'>${this.displayedDate}</span>`);
+    this.$sidebarValue.html(this.displayedDate);
 
-        return selectedDateValue.length ?
-          $('.js-remove-due-date-holder').removeClass('hidden') :
-          $('.js-remove-due-date-holder').addClass('hidden');
-      },
-    }).done(() => {
-      if (isDropdown) {
-        this.$dropdown.trigger('loaded.gl.dropdown');
-        this.$dropdown.dropdown('toggle');
-      }
-      return this.$loading.fadeOut();
-    });
+    $('.js-remove-due-date-holder').toggleClass('hidden', selectedDateValue.length);
+
+    return axios.put(this.issueUpdateURL, this.datePayload)
+      .then(() => {
+        if (isDropdown) {
+          this.$dropdown.trigger('loaded.gl.dropdown');
+          this.$dropdown.dropdown('toggle');
+        }
+        return this.$loading.fadeOut();
+      });
   }
 }
 

app/assets/javascripts/filterable_list.js

 import _ from 'underscore';
+import axios from './lib/utils/axios_utils';
 
 /**
  * Makes search request for content when user types a value in the search input.
@@ -54,32 +55,26 @@ export default class FilterableList {
     this.listFilterElement.removeEventListener('input', this.debounceFilter);
   }
 
-  filterResults(queryData) {
+  filterResults(params) {
     if (this.isBusy) {
       return false;
     }
 
     $(this.listHolderElement).fadeTo(250, 0.5);
 
-    return $.ajax({
-      url: this.getFilterEndpoint(),
-      data: queryData,
-      type: 'GET',
-      dataType: 'json',
-      context: this,
-      complete: this.onFilterComplete,
-      beforeSend: () => {
-        this.isBusy = true;
-      },
-      success: (response, textStatus, xhr) => {
-        this.onFilterSuccess(response, xhr, queryData);
-      },
-    });
+    this.isBusy = true;
+
+    return axios.get(this.getFilterEndpoint(), {
+      params,
+    }).then((res) => {
+      this.onFilterSuccess(res, params);
+      this.onFilterComplete();
+    }).catch(() => this.onFilterComplete());
   }
 
-  onFilterSuccess(response, xhr, queryData) {
-    if (response.html) {
-      this.listHolderElement.innerHTML = response.html;
+  onFilterSuccess(response, queryData) {
+    if (response.data.html) {
+      this.listHolderElement.innerHTML = response.data.html;
     }
 
     // Change url so if user reload a page - search results are saved

app/assets/javascripts/groups/groups_filterable_list.js

 import FilterableList from '~/filterable_list';
 import eventHub from './event_hub';
-import { getParameterByName } from '../lib/utils/common_utils';
+import { normalizeHeaders, getParameterByName } from '../lib/utils/common_utils';
 
 export default class GroupFilterableList extends FilterableList {
   constructor({ form, filter, holder, filterEndpoint, pagePath, dropdownSel, filterInputField }) {
@@ -94,23 +94,14 @@ export default class GroupFilterableList extends FilterableList {
     this.form.querySelector(`[name="${this.filterInputField}"]`).value = '';
   }
 
-  onFilterSuccess(data, xhr, queryData) {
+  onFilterSuccess(res, queryData) {
     const currentPath = this.getPagePath(queryData);
 
-    const paginationData = {
-      'X-Per-Page': xhr.getResponseHeader('X-Per-Page'),
-      'X-Page': xhr.getResponseHeader('X-Page'),
-      'X-Total': xhr.getResponseHeader('X-Total'),
-      'X-Total-Pages': xhr.getResponseHeader('X-Total-Pages'),
-      'X-Next-Page': xhr.getResponseHeader('X-Next-Page'),
-      'X-Prev-Page': xhr.getResponseHeader('X-Prev-Page'),
-    };
-
     window.history.replaceState({
       page: currentPath,
     }, document.title, currentPath);
 
-    eventHub.$emit('updateGroups', data, Object.prototype.hasOwnProperty.call(queryData, this.filterInputField));
-    eventHub.$emit('updatePagination', paginationData);
+    eventHub.$emit('updateGroups', res.data, Object.prototype.hasOwnProperty.call(queryData, this.filterInputField));
+    eventHub.$emit('updatePagination', normalizeHeaders(res.headers));
   }
 }