Converted create_merge_request_dropdown to axios

app/assets/javascripts/create_merge_request_dropdown.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-new */
 import _ from 'underscore';
+import axios from './lib/utils/axios_utils';
 import Flash from './flash';
 import DropLab from './droplab/drop_lab';
 import ISetter from './droplab/plugins/input_setter';
@@ -74,60 +75,52 @@ export default class CreateMergeRequestDropdown {
   }
 
   checkAbilityToCreateBranch() {
-    return $.ajax({
+    this.setUnavailableButtonState();
-      type: 'GET',
-      dataType: 'json',
-      url: this.canCreatePath,
-      beforeSend: () => this.setUnavailableButtonState(),
-    })
-    .done((data) => {
-      this.setUnavailableButtonState(false);
 
-      if (data.can_create_branch) {
+    axios.get(this.canCreatePath)
-        this.available();
+      .then(({ data }) => {
-        this.enable();
+        this.setUnavailableButtonState(false);
 
-        if (!this.droplabInitialized) {
+        if (data.can_create_branch) {
-          this.droplabInitialized = true;
+          this.available();
-          this.initDroplab();
+          this.enable();
-          this.bindEvents();
+
+          if (!this.droplabInitialized) {
+            this.droplabInitialized = true;
+            this.initDroplab();
+            this.bindEvents();
+          }
+        } else if (data.has_related_branch) {
+          this.hide();
         }
-      } else if (data.has_related_branch) {
+      })
-        this.hide();
+      .catch(() => {
-      }
+        this.unavailable();
-    }).fail(() => {
+        this.disable();
-      this.unavailable();
+        Flash('Failed to check if a new branch can be created.');
-      this.disable();
+      });
-      new Flash('Failed to check if a new branch can be created.');
-    });
   }
 
   createBranch() {
-    return $.ajax({
+    this.isCreatingBranch = true;
-      method: 'POST',
+
-      dataType: 'json',
+    return axios.post(this.createBranchPath)
-      url: this.createBranchPath,
+      .then(({ data }) => {
-      beforeSend: () => (this.isCreatingBranch = true),
+        this.branchCreated = true;
-    })
+        window.location.href = data.url;
-    .done((data) => {
+      })
-      this.branchCreated = true;
+      .catch(() => Flash('Failed to create a branch for this issue. Please try again.'));
-      window.location.href = data.url;
-    })
-    .fail(() => new Flash('Failed to create a branch for this issue. Please try again.'));
   }
 
   createMergeRequest() {
-    return $.ajax({
+    this.isCreatingMergeRequest = true;
-      method: 'POST',
+
-      dataType: 'json',
+    return axios.post(this.createMrPath)
-      url: this.createMrPath,
+      .then(({ data }) => {
-      beforeSend: () => (this.isCreatingMergeRequest = true),
+        this.mergeRequestCreated = true;
-    })
+        window.location.href = data.url;
-    .done((data) => {
+      })
-      this.mergeRequestCreated = true;
+      .catch(() => Flash('Failed to create Merge Request. Please try again.'));
-      window.location.href = data.url;
-    })
-    .fail(() => new Flash('Failed to create Merge Request. Please try again.'));
   }
 
   disable() {
@@ -200,39 +193,33 @@ export default class CreateMergeRequestDropdown {
   getRef(ref, target = 'all') {
     if (!ref) return false;
 
-    return $.ajax({
+    return axios.get(this.refsPath + ref)
-      method: 'GET',
+      .then(({ data }) => {
-      dataType: 'json',
+        const branches = data[Object.keys(data)[0]];
-      url: this.refsPath + ref,
+        const tags = data[Object.keys(data)[1]];
-      beforeSend: () => {
+        let result;
-        this.isGettingRef = true;
-      },
-    })
-    .always(() => {
-      this.isGettingRef = false;
-    })
-    .done((data) => {
-      const branches = data[Object.keys(data)[0]];
-      const tags = data[Object.keys(data)[1]];
-      let result;
 
-      if (target === 'branch') {
+        if (target === 'branch') {
-        result = CreateMergeRequestDropdown.findByValue(branches, ref);
+          result = CreateMergeRequestDropdown.findByValue(branches, ref);
-      } else {
+        } else {
-        result = CreateMergeRequestDropdown.findByValue(branches, ref, true) ||
+          result = CreateMergeRequestDropdown.findByValue(branches, ref, true) ||
-          CreateMergeRequestDropdown.findByValue(tags, ref, true);
+            CreateMergeRequestDropdown.findByValue(tags, ref, true);
-        this.suggestedRef = result;
+          this.suggestedRef = result;
-      }
+        }
 
-      return this.updateInputState(target, ref, result);
+        this.isGettingRef = false;
-    })
-    .fail(() => {
-      this.unavailable();
-      this.disable();
-      new Flash('Failed to get ref.');
 
-      return false;
+        return this.updateInputState(target, ref, result);
-    });
+      })
+      .catch(() => {
+        this.unavailable();
+        this.disable();
+        new Flash('Failed to get ref.');
+
+        this.isGettingRef = false;
+
+        return false;
+      });
   }
 
   getTargetData(target) {
@@ -332,12 +319,12 @@ export default class CreateMergeRequestDropdown {
       xhr = this.createBranch();
     }
 
-    xhr.fail(() => {
+    xhr.catch(() => {
       this.isCreatingMergeRequest = false;
       this.isCreatingBranch = false;
-    });
 
-    xhr.always(() => this.enable());
+      this.enable();
+    });
 
     this.disable();
   }