Merge branch 'axios-approvers' into 'master'

Replace $.ajax with axios in approvers select

See merge request gitlab-org/gitlab-ee!4476

ee/app/assets/javascripts/approvers_select.js

 import Api from '~/api';
+import { __ } from '~/locale';
+import Flash from '~/flash';
+import axios from '~/lib/utils/axios_utils';
 
 export default class ApproversSelect {
   constructor() {
@@ -147,7 +150,7 @@ export default class ApproversSelect {
   }
 
   static saveApprovers(fieldName) {
-    const $input = window.$(`[name="${fieldName}"]`);
+    const $input = $(`[name="${fieldName}"]`);
     const newValue = $input.val();
     const $loadWrapper = $('.load-wrapper');
     const $approverSelect = $('.js-select-user-and-group');
@@ -158,41 +161,42 @@ export default class ApproversSelect {
 
     const $form = $('.js-add-approvers').closest('form');
     $loadWrapper.removeClass('hidden');
-    window.$.ajax({
-      url: $form.attr('action'),
-      type: 'POST',
-      data: {
-        _method: 'PATCH',
-        [fieldName]: newValue,
-      },
-      success: ApproversSelect.updateApproverList,
-      complete() {
-        $input.val('');
-        $approverSelect.select2('val', '');
-        $loadWrapper.addClass('hidden');
-      },
-      error() {
-        window.Flash('Failed to add Approver', 'alert');
+
+    axios.post($form.attr('action'), `_method=PATCH&${[encodeURIComponent(fieldName)]}=${newValue}`, {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
       },
+    }).then(({ data }) => {
+      ApproversSelect.updateApproverList(data);
+      ApproversSelect.saveApproversComplete($input, $approverSelect, $loadWrapper);
+    }).catch(() => {
+      Flash(__('An error occurred while adding approver'));
+      ApproversSelect.saveApproversComplete($input, $approverSelect, $loadWrapper);
     });
   }
 
+  static saveApproversComplete($input, $approverSelect, $loadWrapper) {
+    $input.val('');
+    $approverSelect.select2('val', '');
+    $loadWrapper.addClass('hidden');
+  }
+
   static removeApprover(e) {
     e.preventDefault();
     const target = e.currentTarget;
     const $loadWrapper = $('.load-wrapper');
     $loadWrapper.removeClass('hidden');
-    $.ajax({
-      url: target.getAttribute('href'),
-      type: 'POST',
-      data: {
-        _method: 'DELETE',
-      },
-      success: ApproversSelect.updateApproverList,
-      complete: () => $loadWrapper.addClass('hidden'),
-      error() {
-        window.Flash('Failed to remove Approver', 'alert');
+
+    axios.post(target.getAttribute('href'), '_method=DELETE', {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
       },
+    }).then(({ data }) => {
+      ApproversSelect.updateApproverList(data);
+      $loadWrapper.addClass('hidden');
+    }).catch(() => {
+      Flash(__('An error occurred while removing approver'));
+      $loadWrapper.addClass('hidden');
     });
   }
 

spec/javascripts/approvers_select_spec.js

 import ApproversSelect from 'ee/approvers_select';
-import ClassSpecHelper from './helpers/class_spec_helper';
 
 describe('ApproversSelect', () => {
-  describe('saveApprovers', () => {
-    let complete;
-    const $input = jasmine.createSpyObj('$input', ['val']);
+  describe('saveApproversComplete', () => {
+    let $input;
+    let $approverSelect;
+    let $loadWrapper;
 
     beforeEach(() => {
-      spyOn(window, '$').and.returnValue($input);
-      spyOn(window.$, 'ajax').and.callFake((options) => {
-        complete = options.complete;
-      });
+      $input = {
+        val: jasmine.createSpy(),
+      };
 
-      $input.val.and.returnValue('newValue');
+      $approverSelect = {
+        select2: jasmine.createSpy(),
+      };
 
-      ApproversSelect.saveApprovers('fieldName');
-    });
+      $loadWrapper = {
+        addClass: jasmine.createSpy(),
+      };
 
-    ClassSpecHelper.itShouldBeAStaticMethod(ApproversSelect, 'saveApprovers');
+      ApproversSelect.saveApproversComplete($input, $approverSelect, $loadWrapper);
+    });
 
-    describe('when request completes', () => {
-      it('should empty the $input value', () => {
-        $input.val.calls.reset();
+    it('should empty the $input value', () => {
+      expect($input.val).toHaveBeenCalledWith('');
+    });
 
-        complete();
+    it('should empty the select2 value', () => {
+      expect($approverSelect.select2).toHaveBeenCalledWith('val', '');
+    });
 
-        expect($input.val).toHaveBeenCalledWith('');
-      });
+    it('should hide loadWrapper', () => {
+      expect($loadWrapper.addClass).toHaveBeenCalledWith('hidden');
     });
   });
 });