Converted API.js to axios

app/assets/javascripts/api.js

-import $ from 'jquery';
 import axios from './lib/utils/axios_utils';
 
 const Api = {
@@ -23,38 +22,32 @@ 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 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 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
@@ -70,12 +63,10 @@ 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 single project
@@ -97,41 +88,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 +124,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 +163,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 +185,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/ide/stores/actions.js

@@ -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/javascripts/api_spec.js

+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import Api from '~/api';
 
 describe('Api', () => {
@@ -7,20 +9,17 @@ describe('Api', () => {
     api_version: dummyApiVersion,
     relative_url_root: dummyUrlRoot,
   };
-  const dummyResponse = 'hello from outer space!';
-  const sendDummyResponse = () => {
-    const deferred = $.Deferred();
-    deferred.resolve(dummyResponse);
-    return deferred.promise();
-  };
   let originalGon;
+  let mock;
 
   beforeEach(() => {
+    mock = new MockAdapter(axios);
     originalGon = window.gon;
     window.gon = Object.assign({}, dummyGon);
   });
 
   afterEach(() => {
+    mock.restore();
     window.gon = originalGon;
   });
 
@@ -39,14 +38,12 @@ describe('Api', () => {
     it('fetches a group', (done) => {
       const groupId = '123456';
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/groups/${groupId}.json`;
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.dataType).toEqual('json');
-        return sendDummyResponse();
+      mock.onGet(expectedUrl).reply(200, {
+        name: 'test',
       });
 
       Api.group(groupId, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response.name).toBe('test');
         done();
       });
     });
@@ -57,19 +54,13 @@ describe('Api', () => {
       const query = 'dummy query';
       const options = { unused: 'option' };
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/groups.json`;
-      const expectedData = Object.assign({
-        search: query,
-        per_page: 20,
-      }, options);
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.dataType).toEqual('json');
-        expect(request.data).toEqual(expectedData);
-        return sendDummyResponse();
-      });
+      mock.onGet(expectedUrl).reply(200, [{
+        name: 'test',
+      }]);
 
       Api.groups(query, options, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response.length).toBe(1);
+        expect(response[0].name).toBe('test');
         done();
       });
     });
@@ -79,19 +70,13 @@ describe('Api', () => {
     it('fetches namespaces', (done) => {
       const query = 'dummy query';
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/namespaces.json`;
-      const expectedData = {
-        search: query,
-        per_page: 20,
-      };
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.dataType).toEqual('json');
-        expect(request.data).toEqual(expectedData);
-        return sendDummyResponse();
-      });
+      mock.onGet(expectedUrl).reply(200, [{
+        name: 'test',
+      }]);
 
       Api.namespaces(query, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response.length).toBe(1);
+        expect(response[0].name).toBe('test');
         done();
       });
     });
@@ -103,21 +88,13 @@ describe('Api', () => {
       const options = { unused: 'option' };
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/projects.json`;
       window.gon.current_user_id = 1;
-      const expectedData = Object.assign({
-        search: query,
-        per_page: 20,
-        membership: true,
-        simple: true,
-      }, options);
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.dataType).toEqual('json');
-        expect(request.data).toEqual(expectedData);
-        return sendDummyResponse();
-      });
+      mock.onGet(expectedUrl).reply(200, [{
+        name: 'test',
+      }]);
 
       Api.projects(query, options, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response.length).toBe(1);
+        expect(response[0].name).toBe('test');
         done();
       });
     });
@@ -126,20 +103,13 @@ describe('Api', () => {
       const query = 'dummy query';
       const options = { unused: 'option' };
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/projects.json`;
-      const expectedData = Object.assign({
-        search: query,
-        per_page: 20,
-        simple: true,
-      }, options);
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.dataType).toEqual('json');
-        expect(request.data).toEqual(expectedData);
-        return sendDummyResponse();
-      });
+      mock.onGet(expectedUrl).reply(200, [{
+        name: 'test',
+      }]);
 
       Api.projects(query, options, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response.length).toBe(1);
+        expect(response[0].name).toBe('test');
         done();
       });
     });
@@ -154,16 +124,16 @@ describe('Api', () => {
       const expectedData = {
         label: labelData,
       };
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.dataType).toEqual('json');
-        expect(request.type).toEqual('POST');
-        expect(request.data).toEqual(expectedData);
-        return sendDummyResponse();
+      mock.onPost(expectedUrl).reply((config) => {
+        expect(config.data).toBe(JSON.stringify(expectedData));
+
+        return [200, {
+          name: 'test',
+        }];
       });
 
       Api.newLabel(namespace, project, labelData, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response.name).toBe('test');
         done();
       });
     });
@@ -174,19 +144,13 @@ describe('Api', () => {
       const groupId = '123456';
       const query = 'dummy query';
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/groups/${groupId}/projects.json`;
-      const expectedData = {
-        search: query,
-        per_page: 20,
-      };
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.dataType).toEqual('json');
-        expect(request.data).toEqual(expectedData);
-        return sendDummyResponse();
-      });
+      mock.onGet(expectedUrl).reply(200, [{
+        name: 'test',
+      }]);
 
       Api.groupProjects(groupId, query, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response.length).toBe(1);
+        expect(response[0].name).toBe('test');
         done();
       });
     });
@@ -197,14 +161,10 @@ describe('Api', () => {
       const licenseKey = "driver's license";
       const data = { unused: 'option' };
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/templates/licenses/${licenseKey}`;
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.data).toEqual(data);
-        return sendDummyResponse();
-      });
+      mock.onGet(expectedUrl).reply(200, 'test');
 
       Api.licenseText(licenseKey, data, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response).toBe('test');
         done();
       });
     });
@@ -214,13 +174,10 @@ describe('Api', () => {
     it('fetches a gitignore text', (done) => {
       const gitignoreKey = 'ignore git';
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/templates/gitignores/${gitignoreKey}`;
-      spyOn(jQuery, 'get').and.callFake((url, callback) => {
-        expect(url).toEqual(expectedUrl);
-        callback(dummyResponse);
-      });
+      mock.onGet(expectedUrl).reply(200, 'test');
 
       Api.gitignoreText(gitignoreKey, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response).toBe('test');
         done();
       });
     });
@@ -230,13 +187,10 @@ describe('Api', () => {
     it('fetches a .gitlab-ci.yml', (done) => {
       const gitlabCiYmlKey = 'Y CI ML';
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/templates/gitlab_ci_ymls/${gitlabCiYmlKey}`;
-      spyOn(jQuery, 'get').and.callFake((url, callback) => {
-        expect(url).toEqual(expectedUrl);
-        callback(dummyResponse);
-      });
+      mock.onGet(expectedUrl).reply(200, 'test');
 
       Api.gitlabCiYml(gitlabCiYmlKey, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response).toBe('test');
         done();
       });
     });
@@ -246,13 +200,10 @@ describe('Api', () => {
     it('fetches a Dockerfile', (done) => {
       const dockerfileYmlKey = 'a giant whale';
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/templates/dockerfiles/${dockerfileYmlKey}`;
-      spyOn(jQuery, 'get').and.callFake((url, callback) => {
-        expect(url).toEqual(expectedUrl);
-        callback(dummyResponse);
-      });
+      mock.onGet(expectedUrl).reply(200, 'test');
 
       Api.dockerfileYml(dockerfileYmlKey, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response).toBe('test');
         done();
       });
     });
@@ -265,14 +216,10 @@ describe('Api', () => {
       const templateKey = ' template #%?.key ';
       const templateType = 'template type';
       const expectedUrl = `${dummyUrlRoot}/${namespace}/${project}/templates/${templateType}/${encodeURIComponent(templateKey)}`;
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        return sendDummyResponse();
-      });
+      mock.onGet(expectedUrl).reply(200, 'test');
 
       Api.issueTemplate(namespace, project, templateKey, templateType, (error, response) => {
-        expect(error).toBe(null);
-        expect(response).toBe(dummyResponse);
+        expect(response).toBe('test');
         done();
       });
     });
@@ -283,20 +230,14 @@ describe('Api', () => {
       const query = 'dummy query';
       const options = { unused: 'option' };
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/users.json`;
-      const expectedData = Object.assign({
-        search: query,
-        per_page: 20,
-      }, options);
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.dataType).toEqual('json');
-        expect(request.data).toEqual(expectedData);
-        return sendDummyResponse();
-      });
+      mock.onGet(expectedUrl).reply(200, [{
+        name: 'test',
+      }]);
 
       Api.users(query, options)
-        .then((response) => {
-          expect(response).toBe(dummyResponse);
+        .then(({ data }) => {
+          expect(data.length).toBe(1);
+          expect(data[0].name).toBe('test');
         })
         .then(done)
         .catch(done.fail);