Merge branch 'ph-ajax-to-axios' into 'master'

Converted $.ajax calls in some JS files to axios

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

app/assets/javascripts/api.js

-import $ from 'jquery';
+import _ from 'underscore';
 import axios from './lib/utils/axios_utils';
 
 const Api = {
   groupsPath: '/api/:version/groups.json',
-  groupPath: '/api/:version/groups/:id.json',
+  groupPath: '/api/:version/groups/:id',
   namespacesPath: '/api/:version/namespaces.json',
   groupProjectsPath: '/api/:version/groups/:id/projects.json',
   projectsPath: '/api/:version/projects.json',
@@ -23,42 +23,44 @@ const Api = {
   group(groupId, callback) {
     const url = Api.buildUrl(Api.groupPath)
       .replace(':id', groupId);
-    return $.ajax({
-      url,
-      dataType: 'json',
-    })
-      .done(group => callback(group));
+    return axios.get(url)
+      .then(({ data }) => {
+        callback(data);
+
+        return data;
+      });
   },
 
   // Return groups list. Filtered by query
   groups(query, options, callback) {
     const url = Api.buildUrl(Api.groupsPath);
-    return $.ajax({
-      url,
-      data: Object.assign({
+    return axios.get(url, {
+      params: Object.assign({
         search: query,
         per_page: 20,
       }, options),
-      dataType: 'json',
     })
-      .done(groups => callback(groups));
+      .then(({ data }) => {
+        callback(data);
+
+        return data;
+      });
   },
 
   // Return namespaces list. Filtered by query
   namespaces(query, callback) {
     const url = Api.buildUrl(Api.namespacesPath);
-    return $.ajax({
-      url,
-      data: {
+    return axios.get(url, {
+      params: {
         search: query,
         per_page: 20,
       },
-      dataType: 'json',
-    }).done(namespaces => callback(namespaces));
+    })
+      .then(({ data }) => callback(data));
   },
 
   // Return projects list. Filtered by query
-  projects(query, options, callback) {
+  projects(query, options, callback = _.noop) {
     const url = Api.buildUrl(Api.projectsPath);
     const defaults = {
       search: query,
@@ -70,12 +72,14 @@ const Api = {
       defaults.membership = true;
     }
 
-    return $.ajax({
-      url,
-      data: Object.assign(defaults, options),
-      dataType: 'json',
+    return axios.get(url, {
+      params: Object.assign(defaults, options),
     })
-      .done(projects => callback(projects));
+      .then(({ data }) => {
+        callback(data);
+
+        return data;
+      });
   },
 
   // Return single project
@@ -97,41 +101,34 @@ const Api = {
       url = Api.buildUrl(Api.groupLabelsPath).replace(':namespace_path', namespacePath);
     }
 
-    return $.ajax({
-      url,
-      type: 'POST',
-      data: { label: data },
-      dataType: 'json',
+    return axios.post(url, {
+      label: data,
     })
-      .done(label => callback(label))
-      .fail(message => callback(message.responseJSON));
+      .then(res => callback(res.data))
+      .catch(e => callback(e.response.data));
   },
 
   // Return group projects list. Filtered by query
   groupProjects(groupId, query, callback) {
     const url = Api.buildUrl(Api.groupProjectsPath)
       .replace(':id', groupId);
-    return $.ajax({
-      url,
-      data: {
+    return axios.get(url, {
+      params: {
         search: query,
         per_page: 20,
       },
-      dataType: 'json',
     })
-      .done(projects => callback(projects));
+      .then(({ data }) => callback(data));
   },
 
   commitMultiple(id, data) {
     // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
     const url = Api.buildUrl(Api.commitPath)
       .replace(':id', encodeURIComponent(id));
-    return this.wrapAjaxCall({
-      url,
-      type: 'POST',
-      contentType: 'application/json; charset=utf-8',
-      data: JSON.stringify(data),
-      dataType: 'json',
+    return axios.post(url, JSON.stringify(data), {
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+      },
     });
   },
 
@@ -140,40 +137,37 @@ const Api = {
       .replace(':id', encodeURIComponent(id))
       .replace(':branch', branch);
 
-    return this.wrapAjaxCall({
-      url,
-      type: 'GET',
-      contentType: 'application/json; charset=utf-8',
-      dataType: 'json',
-    });
+    return axios.get(url);
   },
 
   // Return text for a specific license
   licenseText(key, data, callback) {
     const url = Api.buildUrl(Api.licensePath)
       .replace(':key', key);
-    return $.ajax({
-      url,
-      data,
+    return axios.get(url, {
+      params: data,
     })
-      .done(license => callback(license));
+      .then(res => callback(res.data));
   },
 
   gitignoreText(key, callback) {
     const url = Api.buildUrl(Api.gitignorePath)
       .replace(':key', key);
-    return $.get(url, gitignore => callback(gitignore));
+    return axios.get(url)
+      .then(({ data }) => callback(data));
   },
 
   gitlabCiYml(key, callback) {
     const url = Api.buildUrl(Api.gitlabCiYmlPath)
       .replace(':key', key);
-    return $.get(url, file => callback(file));
+    return axios.get(url)
+      .then(({ data }) => callback(data));
   },
 
   dockerfileYml(key, callback) {
     const url = Api.buildUrl(Api.dockerfilePath).replace(':key', key);
-    $.get(url, callback);
+    return axios.get(url)
+      .then(({ data }) => callback(data));
   },
 
   issueTemplate(namespacePath, projectPath, key, type, callback) {
@@ -182,23 +176,18 @@ const Api = {
       .replace(':type', type)
       .replace(':project_path', projectPath)
       .replace(':namespace_path', namespacePath);
-    $.ajax({
-      url,
-      dataType: 'json',
-    })
-      .done(file => callback(null, file))
-      .fail(callback);
+    return axios.get(url)
+      .then(({ data }) => callback(null, data))
+      .catch(callback);
   },
 
   users(query, options) {
     const url = Api.buildUrl(this.usersPath);
-    return Api.wrapAjaxCall({
-      url,
-      data: Object.assign({
+    return axios.get(url, {
+      params: Object.assign({
         search: query,
         per_page: 20,
       }, options),
-      dataType: 'json',
     });
   },
 
@@ -209,21 +198,6 @@ const Api = {
     }
     return urlRoot + url.replace(':version', gon.api_version);
   },
-
-  wrapAjaxCall(options) {
-    return new Promise((resolve, reject) => {
-      // jQuery 2 is not Promises/A+ compatible (missing catch)
-      $.ajax(options) // eslint-disable-line promise/catch-or-return
-      .then(data => resolve(data),
-        (jqXHR, textStatus, errorThrown) => {
-          const error = new Error(`${options.url}: ${errorThrown}`);
-          error.textStatus = textStatus;
-          if (jqXHR && jqXHR.responseJSON) error.responseJSON = jqXHR.responseJSON;
-          reject(error);
-        },
-      );
-    });
-  },
 };
 
 export default Api;

app/assets/javascripts/blob/viewer/index.js

 import Flash from '../../flash';
 import { handleLocationHash } from '../../lib/utils/common_utils';
+import axios from '../../lib/utils/axios_utils';
 
 export default class BlobViewer {
   constructor() {
@@ -127,25 +128,18 @@ export default class BlobViewer {
     const viewer = viewerParam;
     const url = viewer.getAttribute('data-url');
 
-    return new Promise((resolve, reject) => {
-      if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
-        resolve(viewer);
-        return;
-      }
+    if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
+      return Promise.resolve(viewer);
+    }
 
-      viewer.setAttribute('data-loading', 'true');
+    viewer.setAttribute('data-loading', 'true');
 
-      $.ajax({
-        url,
-        dataType: 'JSON',
-      })
-      .fail(reject)
-      .done((data) => {
+    return axios.get(url)
+      .then(({ data }) => {
         viewer.innerHTML = data.html;
         viewer.setAttribute('data-loaded', 'true');
 
-        resolve(viewer);
+        return viewer;
       });
-    });
   }
 }

app/assets/javascripts/commits.js

@@ -5,6 +5,7 @@
 import { pluralize } from './lib/utils/text_utility';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 import Pager from './pager';
+import axios from './lib/utils/axios_utils';
 
 export default (function () {
   const CommitsList = {};
@@ -43,29 +44,30 @@ export default (function () {
   CommitsList.filterResults = function () {
     const form = $('.commits-search-form');
     const search = CommitsList.searchField.val();
-    if (search === CommitsList.lastSearch) return;
+    if (search === CommitsList.lastSearch) return Promise.resolve();
     const commitsUrl = form.attr('action') + '?' + form.serialize();
     CommitsList.content.fadeTo('fast', 0.5);
-    return $.ajax({
-      type: 'GET',
-      url: form.attr('action'),
-      data: form.serialize(),
-      complete: function () {
-        return CommitsList.content.fadeTo('fast', 1.0);
-      },
-      success: function (data) {
+    const params = form.serializeArray().reduce((acc, obj) => Object.assign(acc, {
+      [obj.name]: obj.value,
+    }), {});
+
+    return axios.get(form.attr('action'), {
+      params,
+    })
+      .then(({ data }) => {
         CommitsList.lastSearch = search;
         CommitsList.content.html(data.html);
-        return history.replaceState({
-          page: commitsUrl,
+        CommitsList.content.fadeTo('fast', 1.0);
+
         // Change url so if user reload a page - search results are saved
+        history.replaceState({
+          page: commitsUrl,
         }, document.title, commitsUrl);
-      },
-      error: function () {
+      })
+      .catch(() => {
+        CommitsList.content.fadeTo('fast', 1.0);
         CommitsList.lastSearch = null;
-      },
-      dataType: 'json',
-    });
+      });
   };
 
   // Prepare loaded data.

app/assets/javascripts/ide/stores/actions.js

@@ -71,7 +71,7 @@ export const setResizingStatus = ({ commit }, resizing) => {
 export const checkCommitStatus = ({ state }) =>
   service
     .getBranchData(state.currentProjectId, state.currentBranchId)
-    .then((data) => {
+    .then(({ data }) => {
       const { id } = data.commit;
       const selectedBranch =
         state.projects[state.currentProjectId].branches[state.currentBranchId];
@@ -90,7 +90,7 @@ export const commitChanges = (
 ) =>
   service
     .commit(state.currentProjectId, payload)
-    .then((data) => {
+    .then(({ data }) => {
       const { branch } = payload;
       if (!data.short_id) {
         flash(data.message, 'alert', document, null, false, true);
@@ -147,8 +147,8 @@ export const commitChanges = (
     })
     .catch((err) => {
       let errMsg = 'Error committing changes. Please try again.';
-      if (err.responseJSON && err.responseJSON.message) {
-        errMsg += ` (${stripHtml(err.responseJSON.message)})`;
+      if (err.response.data && err.response.data.message) {
+        errMsg += ` (${stripHtml(err.response.data.message)})`;
       }
       flash(errMsg, 'alert', document, null, false, true);
       window.dispatchEvent(new Event('resize'));

app/assets/javascripts/ide/stores/actions/branch.js

@@ -10,7 +10,7 @@ export const getBranchData = (
         !state.projects[`${projectId}`].branches[branchId])
         || force) {
     service.getBranchData(`${projectId}`, branchId)
-      .then((data) => {
+      .then(({ data }) => {
         const { id } = data.commit;
         commit(types.SET_BRANCH, { projectPath: `${projectId}`, branchName: branchId, branch: data });
         commit(types.SET_BRANCH_WORKING_REFERENCE, { projectId, branchId, reference: id });

app/assets/javascripts/lib/utils/users_cache.js

@@ -8,16 +8,16 @@ class UsersCache extends Cache {
     }
 
     return Api.users('', { username })
-      .then((users) => {
-        if (!users.length) {
+      .then(({ data }) => {
+        if (!data.length) {
           throw new Error(`User "${username}" could not be found!`);
         }
 
-        if (users.length > 1) {
+        if (data.length > 1) {
           throw new Error(`Expected username "${username}" to be unique!`);
         }
 
-        const user = users[0];
+        const user = data[0];
         this.internalStorage[username] = user;
         return user;
       });

spec/features/projects/members/share_with_group_spec.rb

@@ -122,7 +122,7 @@ feature 'Project > Members > Share with Group', :js do
       select2 group.id, from: '#link_group_id'
 
       fill_in 'expires_at_groups', with: (Time.now + 4.5.days).strftime('%Y-%m-%d')
-      page.find('body').click
+      click_on 'share-with-group-tab'
       find('.btn-create').click
     end
 

spec/javascripts/blob/viewer/index_spec.js

 /* eslint-disable no-new */
+import MockAdapter from 'axios-mock-adapter';
 import BlobViewer from '~/blob/viewer/index';
+import axios from '~/lib/utils/axios_utils';
 
 describe('Blob viewer', () => {
   let blob;
+  let mock;
+
   preloadFixtures('snippets/show.html.raw');
 
   beforeEach(() => {
+    mock = new MockAdapter(axios);
+
     loadFixtures('snippets/show.html.raw');
     $('#modal-upload-blob').remove();
 
     blob = new BlobViewer();
 
-    spyOn($, 'ajax').and.callFake(() => {
-      const d = $.Deferred();
-
-      d.resolve({
-        html: '<div>testing</div>',
-      });
+    mock.onGet('http://test.host/snippets/1.json?viewer=rich').reply(200, {
+      html: '<div>testing</div>',
+    });
 
-      return d.promise();
+    mock.onGet('http://test.host/snippets/1.json?viewer=simple').reply(200, {
+      html: '<div>testing</div>',
     });
+
+    spyOn(axios, 'get').and.callThrough();
   });
 
   afterEach(() => {
+    mock.restore();
     location.hash = '';
   });
 
@@ -30,7 +37,6 @@ describe('Blob viewer', () => {
     document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
     setTimeout(() => {
-      expect($.ajax).toHaveBeenCalled();
       expect(
         document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
           .classList.contains('hidden'),
@@ -46,7 +52,6 @@ describe('Blob viewer', () => {
     new BlobViewer();
 
     setTimeout(() => {
-      expect($.ajax).toHaveBeenCalled();
       expect(
         document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
           .classList.contains('hidden'),
@@ -64,12 +69,8 @@ describe('Blob viewer', () => {
     });
 
     asyncClick()
+      .then(() => asyncClick())
       .then(() => {
-        expect($.ajax).toHaveBeenCalled();
-        return asyncClick();
-      })
-      .then(() => {
-        expect($.ajax.calls.count()).toBe(1);
         expect(
           document.querySelector('.blob-viewer[data-type="simple"]').getAttribute('data-loaded'),
         ).toBe('true');
@@ -122,7 +123,6 @@ describe('Blob viewer', () => {
       document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
       setTimeout(() => {
-        expect($.ajax).toHaveBeenCalled();
         expect(
           copyButton.classList.contains('disabled'),
         ).toBeFalsy();
@@ -135,8 +135,6 @@ describe('Blob viewer', () => {
       document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
       setTimeout(() => {
-        expect($.ajax).toHaveBeenCalled();
-
         expect(
           copyButton.getAttribute('data-original-title'),
         ).toBe('Copy source to clipboard');
@@ -171,14 +169,14 @@ describe('Blob viewer', () => {
     it('sends AJAX request when switching to simple view', () => {
       blob.switchToViewer('simple');
 
-      expect($.ajax).toHaveBeenCalled();
+      expect(axios.get).toHaveBeenCalled();
     });
 
     it('does not send AJAX request when switching to rich view', () => {
       blob.switchToViewer('simple');
       blob.switchToViewer('rich');
 
-      expect($.ajax.calls.count()).toBe(1);
+      expect(axios.get.calls.count()).toBe(1);
     });
   });
 });

spec/javascripts/commits_spec.js

 import 'vendor/jquery.endless-scroll';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import CommitsList from '~/commits';
 
 describe('Commits List', () => {
@@ -43,30 +45,47 @@ describe('Commits List', () => {
 
   describe('on entering input', () => {
     let ajaxSpy;
+    let mock;
 
     beforeEach(() => {
       CommitsList.init(25);
       CommitsList.searchField.val('');
 
       spyOn(history, 'replaceState').and.stub();
-      ajaxSpy = spyOn(jQuery, 'ajax').and.callFake((req) => {
-        req.success({
-          data: '<li>Result</li>',
-        });
+      mock = new MockAdapter(axios);
+
+      mock.onGet('/h5bp/html5-boilerplate/commits/master').reply(200, {
+        html: '<li>Result</li>',
       });
+
+      ajaxSpy = spyOn(axios, 'get').and.callThrough();
+    });
+
+    afterEach(() => {
+      mock.restore();
     });
 
-    it('should save the last search string', () => {
+    it('should save the last search string', (done) => {
       CommitsList.searchField.val('GitLab');
-      CommitsList.filterResults();
-      expect(ajaxSpy).toHaveBeenCalled();
-      expect(CommitsList.lastSearch).toEqual('GitLab');
+      CommitsList.filterResults()
+        .then(() => {
+          expect(ajaxSpy).toHaveBeenCalled();
+          expect(CommitsList.lastSearch).toEqual('GitLab');
+
+          done();
+        })
+        .catch(done.fail);
     });
 
-    it('should not make ajax call if the input does not change', () => {
-      CommitsList.filterResults();
-      expect(ajaxSpy).not.toHaveBeenCalled();
-      expect(CommitsList.lastSearch).toEqual('');
+    it('should not make ajax call if the input does not change', (done) => {
+      CommitsList.filterResults()
+        .then(() => {
+          expect(ajaxSpy).not.toHaveBeenCalled();
+          expect(CommitsList.lastSearch).toEqual('');
+
+          done();
+        })
+        .catch(done.fail);
     });
   });
 });

spec/javascripts/lib/utils/users_cache_spec.js

@@ -92,7 +92,9 @@ describe('UsersCache', () => {
       apiSpy = (query, options) => {
         expect(query).toBe('');
         expect(options).toEqual({ username: dummyUsername });
-        return Promise.resolve([dummyUser]);
+        return Promise.resolve({
+          data: [dummyUser],
+        });
       };
 
       UsersCache.retrieve(dummyUsername)

spec/javascripts/repo/components/new_dropdown/modal_spec.js

@@ -18,8 +18,10 @@ describe('new file modal component', () => {
     }));
 
     spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-      commit: {
-        id: '123branch',
+      data: {
+        commit: {
+          id: '123branch',
+        },
       },
     }));
 

spec/javascripts/repo/components/new_dropdown/upload_spec.js

@@ -17,8 +17,10 @@ describe('new dropdown upload', () => {
     }));
 
     spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-      commit: {
-        id: '123branch',
+      data: {
+        commit: {
+          id: '123branch',
+        },
       },
     }));
 

spec/javascripts/repo/components/repo_commit_section_spec.js

@@ -87,8 +87,10 @@ describe('RepoCommitSection', () => {
       changedFiles = JSON.parse(JSON.stringify(vm.$store.getters.changedFiles));
 
       spyOn(service, 'commit').and.returnValue(Promise.resolve({
-        short_id: '1',
-        stats: {},
+        data: {
+          short_id: '1',
+          stats: {},
+        },
       }));
     });
 

spec/javascripts/repo/stores/actions_spec.js

@@ -178,7 +178,9 @@ describe('Multi-file store actions', () => {
 
     it('calls service', (done) => {
       spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-        commit: { id: '123' },
+        data: {
+          commit: { id: '123' },
+        },
       }));
 
       store.dispatch('checkCommitStatus')
@@ -192,7 +194,9 @@ describe('Multi-file store actions', () => {
 
     it('returns true if current ref does not equal returned ID', (done) => {
       spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-        commit: { id: '123' },
+        data: {
+          commit: { id: '123' },
+        },
       }));
 
       store.dispatch('checkCommitStatus')
@@ -206,7 +210,9 @@ describe('Multi-file store actions', () => {
 
     it('returns false if current ref equals returned ID', (done) => {
       spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-        commit: { id: '1' },
+        data: {
+          commit: { id: '1' },
+        },
       }));
 
       store.dispatch('checkCommitStatus')
@@ -250,13 +256,15 @@ describe('Multi-file store actions', () => {
     describe('success', () => {
       beforeEach(() => {
         spyOn(service, 'commit').and.returnValue(Promise.resolve({
-          id: '123456',
-          short_id: '123',
-          message: 'test message',
-          committed_date: 'date',
-          stats: {
-            additions: '1',
-            deletions: '2',
+          data: {
+            id: '123456',
+            short_id: '123',
+            message: 'test message',
+            committed_date: 'date',
+            stats: {
+              additions: '1',
+              deletions: '2',
+            },
           },
         }));
       });
@@ -324,7 +332,9 @@ describe('Multi-file store actions', () => {
     describe('failed', () => {
       beforeEach(() => {
         spyOn(service, 'commit').and.returnValue(Promise.resolve({
-          message: 'failed message',
+          data: {
+            message: 'failed message',
+          },
         }));
       });