Converted EE protected tags & branches to axios

ee/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js

 /* eslint-disable no-underscore-dangle, class-methods-use-this */
 import _ from 'underscore';
+import axios from '~/lib/utils/axios_utils';
 import Flash from '~/flash';
 import { LEVEL_TYPES, LEVEL_ID_PROP, ACCESS_LEVEL_NONE } from './constants';
 
@@ -274,20 +275,13 @@ export default class ProtectedBranchAccessDropdown {
   }
 
   getData(query, callback) {
-    this.getUsers(query)
-      .done((usersResponse) => {
-        if (this.groups.length) {
-          callback(this.consolidateData(usersResponse, this.groups));
-        } else {
-          this.getGroups(query)
-            .done((groupsResponse) => {
-              // Cache groups to avoid multiple requests
-              this.groups = groupsResponse;
-              callback(this.consolidateData(usersResponse, groupsResponse));
-            })
-            .error(() => new Flash('Failed to load groups.'));
-        }
-      }).error(() => new Flash('Failed to load users.'));
+    Promise.all([
+      this.getUsers(query),
+      this.groupsData ? Promise.resolve(this.groupsData) : this.getGroups(),
+    ]).then(([usersResponse, groupsResponse]) => {
+      this.groupsData = groupsResponse;
+      callback(this.consolidateData(usersResponse.data, groupsResponse.data));
+    }).catch(() => Flash('Failed to load groups & users.'));
   }
 
   consolidateData(usersResponse, groupsResponse) {
@@ -375,10 +369,8 @@ export default class ProtectedBranchAccessDropdown {
   }
 
   getUsers(query) {
-    return $.ajax({
-      dataType: 'json',
-      url: this.buildUrl(gon.relative_url_root, this.usersPath),
-      data: {
+    return axios.get(this.buildUrl(gon.relative_url_root, this.usersPath), {
+      params: {
         search: query,
         per_page: 20,
         active: true,
@@ -389,10 +381,8 @@ export default class ProtectedBranchAccessDropdown {
   }
 
   getGroups() {
-    return $.ajax({
-      dataType: 'json',
-      url: this.buildUrl(gon.relative_url_root, this.groupsPath),
-      data: {
+    return axios.get(this.buildUrl(gon.relative_url_root, this.groupsPath), {
+      params: {
         project_id: gon.current_project_id,
       },
     });

ee/app/assets/javascripts/protected_branches/protected_branch_create.js

+import axios from '~/lib/utils/axios_utils';
 import AccessorUtilities from '~/lib/utils/accessor';
 import Flash from '~/flash';
 import CreateItemDropdown from '~/create_item_dropdown';
@@ -124,15 +125,11 @@ export default class ProtectedBranchCreate {
   onFormSubmit(e) {
     e.preventDefault();
 
-    $.ajax({
-      url: this.$form.attr('action'),
-      method: this.$form.attr('method'),
-      data: this.getFormData(),
-    })
-    .success(() => {
-      location.reload();
-    })
-    .fail(() => new Flash('Failed to protect the branch'));
+    axios[this.$form.attr('method')](this.$form.attr('action'), this.getFormData())
+      .then(() => {
+        location.reload();
+      })
+      .catch(() => Flash('Failed to protect the branch'));
   }
 
   savePreviousSelection(mergeSelection, pushSelection) {

ee/app/assets/javascripts/protected_branches/protected_branch_edit.js

 /* eslint-disable no-new */
 import _ from 'underscore';
+import axios from '~/lib/utils/axios_utils';
 import Flash from '~/flash';
 import { ACCESS_LEVELS, LEVEL_TYPES } from './constants';
 import ProtectedBranchAccessDropdown from './protected_branch_access_dropdown';
@@ -61,30 +62,23 @@ export default class ProtectedBranchEdit {
       return acc;
     }, {});
 
-    return $.ajax({
-      type: 'POST',
-      url: this.$wrap.data('url'),
-      dataType: 'json',
-      data: {
-        _method: 'PATCH',
-        protected_branch: formData,
-      },
-      success: (response) => {
-        this.hasChanges = false;
-
-        Object.keys(ACCESS_LEVELS).forEach((level) => {
-          const accessLevelName = ACCESS_LEVELS[level];
-
-          // The data coming from server will be the new persisted *state* for each dropdown
-          this.setSelectedItemsToDropdown(response[accessLevelName], `${accessLevelName}_dropdown`);
-        });
-      },
-      error() {
-        new Flash('Failed to update branch!', null, $('.js-protected-branches-list'));
-      },
-    }).always(() => {
+    axios.patch(this.$wrap.data('url'), {
+      protected_branch: formData,
+    }).then(({ data }) => {
+      this.hasChanges = false;
+
+      Object.keys(ACCESS_LEVELS).forEach((level) => {
+        const accessLevelName = ACCESS_LEVELS[level];
+
+        // The data coming from server will be the new persisted *state* for each dropdown
+        this.setSelectedItemsToDropdown(data[accessLevelName], `${accessLevelName}_dropdown`);
+      });
+      this.$allowedToMergeDropdown.enable();
+      this.$allowedToPushDropdown.enable();
+    }).catch(() => {
       this.$allowedToMergeDropdown.enable();
       this.$allowedToPushDropdown.enable();
+      Flash('Failed to update branch!', null, $('.js-protected-branches-list'));
     });
   }
 

ee/app/assets/javascripts/protected_tags/protected_tag_access_dropdown.js

 /* eslint-disable no-underscore-dangle, class-methods-use-this */
 import _ from 'underscore';
+import axios from '~/lib/utils/axios_utils';
 import Flash from '~/flash';
 import { LEVEL_TYPES, LEVEL_ID_PROP, ACCESS_LEVEL_NONE } from './constants';
 
@@ -270,21 +271,13 @@ export default class ProtectedTagAccessDropdown {
   }
 
   getData(query, callback) {
-    this.getUsers(query)
-      .done((usersResponse) => {
-        if (this.groups.length) {
-          callback(this.consolidateData(usersResponse, this.groups));
-        } else {
-          this.getGroups(query)
-            .done((groupsResponse) => {
-              // Cache groups to avoid multiple requests
-              this.groups = groupsResponse;
-              callback(this.consolidateData(usersResponse, groupsResponse));
-            })
-            .error(() => new Flash('Failed to load groups.'));
-        }
-      })
-      .error(() => new Flash('Failed to load users.'));
+    Promise.all([
+      this.getUsers(query),
+      this.groupsData ? Promise.resolve(this.groupsData) : this.getGroups(),
+    ]).then(([usersResponse, groupsResponse]) => {
+      this.groupsData = groupsResponse;
+      callback(this.consolidateData(usersResponse.data, groupsResponse.data));
+    }).catch(() => Flash('Failed to load groups & users.'));
   }
 
   consolidateData(usersResponse, groupsResponse) {
@@ -372,10 +365,8 @@ export default class ProtectedTagAccessDropdown {
   }
 
   getUsers(query) {
-    return $.ajax({
-      dataType: 'json',
-      url: this.buildUrl(gon.relative_url_root, this.usersPath),
-      data: {
+    return axios.get(this.buildUrl(gon.relative_url_root, this.usersPath), {
+      params: {
         search: query,
         per_page: 20,
         active: true,
@@ -386,10 +377,8 @@ export default class ProtectedTagAccessDropdown {
   }
 
   getGroups() {
-    return $.ajax({
-      dataType: 'json',
-      url: this.buildUrl(gon.relative_url_root, this.groupsPath),
-      data: {
+    return axios.get(this.buildUrl(gon.relative_url_root, this.groupsPath), {
+      params: {
         project_id: gon.current_project_id,
       },
     });

ee/app/assets/javascripts/protected_tags/protected_tag_create.js

+import axios from '~/lib/utils/axios_utils';
 import Flash from '~/flash';
 import CreateItemDropdown from '~/create_item_dropdown';
 import { ACCESS_LEVELS, LEVEL_TYPES } from './constants';
@@ -89,14 +90,9 @@ export default class ProtectedTagCreate {
   onFormSubmit(e) {
     e.preventDefault();
 
-    $.ajax({
-      url: this.$form.attr('action'),
-      method: this.$form.attr('method'),
-      data: this.getFormData(),
-    })
-    .success(() => {
-      location.reload();
-    })
-    .fail(() => new Flash('Failed to protect the tag'));
+    axios[this.$form.attr('method')](this.$form.attr('action'), this.getFormData())
+      .then(() => {
+        location.reload();
+      }).catch(() => Flash('Failed to protect the tag'));
   }
 }

ee/app/assets/javascripts/protected_tags/protected_tag_edit.js

 /* eslint-disable no-new */
 import _ from 'underscore';
+import axios from '~/lib/utils/axios_utils';
 import Flash from '~/flash';
 import { ACCESS_LEVELS, LEVEL_TYPES } from './constants';
 import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
@@ -49,30 +50,20 @@ export default class ProtectedTagEdit {
       return acc;
     }, {});
 
-    return $.ajax({
-      type: 'POST',
-      url: this.$wrap.data('url'),
-      dataType: 'json',
-      data: {
-        _method: 'PATCH',
-        protected_tag: formData,
-      },
-      success: (response) => {
-        this.hasChanges = false;
-
-        Object.keys(ACCESS_LEVELS).forEach((level) => {
-          const accessLevelName = ACCESS_LEVELS[level];
-
-          // The data coming from server will be the new persisted *state* for each dropdown
-          this.setSelectedItemsToDropdown(response[accessLevelName], `${accessLevelName}_dropdown`);
-        });
-      },
-      error() {
-        $.scrollTo(0);
-        new Flash('Failed to update tag!');
-      },
-    }).always(() => {
-      this.$allowedToCreateDropdownButton.enable();
+    axios.patch(this.$wrap.data('url'), {
+      protected_tag: formData,
+    }).then(({ data }) => {
+      this.hasChanges = false;
+
+      Object.keys(ACCESS_LEVELS).forEach((level) => {
+        const accessLevelName = ACCESS_LEVELS[level];
+
+        // The data coming from server will be the new persisted *state* for each dropdown
+        this.setSelectedItemsToDropdown(data[accessLevelName], `${accessLevelName}_dropdown`);
+      });
+    }).catch(() => {
+      $.scrollTo(0);
+      Flash('Failed to update tag!');
     });
   }