Merge branch 'thenable-ajax-api-calls' into 'master'

Thenable ajax api calls

See merge request !13427

app/assets/javascripts/api.js

@@ -96,18 +96,17 @@ const Api = {
       .done(projects => callback(projects));
   },
 
-  commitMultiple(id, data, callback) {
+  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', id);
-    return $.ajax({
+    return this.wrapAjaxCall({
       url,
       type: 'POST',
       contentType: 'application/json; charset=utf-8',
       data: JSON.stringify(data),
       dataType: 'json',
-    })
-      .done(commitData => callback(commitData))
-      .fail(message => callback(message.responseJSON));
+    });
   },
 
   // Return text for a specific license

app/assets/javascripts/repo/components/repo_commit_section.vue

@@ -42,7 +42,9 @@ export default {
         actions,
       };
       Store.submitCommitsLoading = true;
-      Service.commitFiles(payload, this.resetCommitState);
+      Service.commitFiles(payload)
+        .then(this.resetCommitState)
+        .catch(() => Flash('An error occured while committing your changes'));
     },
 
     resetCommitState() {

app/assets/javascripts/repo/services/repo_service.js

@@ -65,15 +65,17 @@ const RepoService = {
     return urlArray.join('/');
   },
 
-  commitFiles(payload, cb) {
-    Api.commitMultiple(Store.projectId, payload, (data) => {
-      if (data.short_id && data.stats) {
-        Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
-      } else {
-        Flash(data.message);
-      }
-      cb();
-    });
+  commitFiles(payload) {
+    return Api.commitMultiple(Store.projectId, payload)
+      .then(this.commitFlash);
+  },
+
+  commitFlash(data) {
+    if (data.short_id && data.stats) {
+      window.Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
+    } else {
+      window.Flash(data.message);
+    }
   },
 };
 

spec/javascripts/repo/components/repo_commit_section_spec.js

 import Vue from 'vue';
 import repoCommitSection from '~/repo/components/repo_commit_section.vue';
 import RepoStore from '~/repo/stores/repo_store';
-import Api from '~/api';
+import RepoService from '~/repo/services/repo_service';
 
 describe('RepoCommitSection', () => {
   const branch = 'master';
@@ -111,7 +111,7 @@ describe('RepoCommitSection', () => {
       expect(submitCommit.disabled).toBeFalsy();
 
       spyOn(vm, 'makeCommit').and.callThrough();
-      spyOn(Api, 'commitMultiple');
+      spyOn(RepoService, 'commitFiles').and.callFake(() => Promise.resolve());
 
       submitCommit.click();
 
@@ -119,10 +119,9 @@ describe('RepoCommitSection', () => {
         expect(vm.makeCommit).toHaveBeenCalled();
         expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeTruthy();
 
-        const args = Api.commitMultiple.calls.allArgs()[0];
-        const { commit_message, actions, branch: payloadBranch } = args[1];
+        const args = RepoService.commitFiles.calls.allArgs()[0];
+        const { commit_message, actions, branch: payloadBranch } = args[0];
 
-        expect(args[0]).toBe(projectId);
         expect(commit_message).toBe(commitMessage);
         expect(actions.length).toEqual(2);
         expect(payloadBranch).toEqual(branch);

spec/javascripts/repo/services/repo_service_spec.js

 import axios from 'axios';
 import RepoService from '~/repo/services/repo_service';
+import RepoStore from '~/repo/stores/repo_store';
+import Api from '~/api';
 
 describe('RepoService', () => {
   it('has default json format param', () => {
@@ -118,4 +120,52 @@ describe('RepoService', () => {
       }).catch(done.fail);
     });
   });
+
+  describe('commitFiles', () => {
+    it('calls commitMultiple and .then commitFlash', (done) => {
+      const projectId = 'projectId';
+      const payload = {};
+      RepoStore.projectId = projectId;
+
+      spyOn(Api, 'commitMultiple').and.returnValue(Promise.resolve());
+      spyOn(RepoService, 'commitFlash');
+
+      const apiPromise = RepoService.commitFiles(payload);
+
+      expect(Api.commitMultiple).toHaveBeenCalledWith(projectId, payload);
+
+      apiPromise.then(() => {
+        expect(RepoService.commitFlash).toHaveBeenCalled();
+        done();
+      }).catch(done.fail);
+    });
+  });
+
+  describe('commitFlash', () => {
+    it('calls Flash with data.message', () => {
+      const data = {
+        message: 'message',
+      };
+      spyOn(window, 'Flash');
+
+      RepoService.commitFlash(data);
+
+      expect(window.Flash).toHaveBeenCalledWith(data.message);
+    });
+
+    it('calls Flash with success string if short_id and stats', () => {
+      const data = {
+        short_id: 'short_id',
+        stats: {
+          additions: '4',
+          deletions: '5',
+        },
+      };
+      spyOn(window, 'Flash');
+
+      RepoService.commitFlash(data);
+
+      expect(window.Flash).toHaveBeenCalledWith(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
+    });
+  });
 });