Resolve "Customize branch name when using create branch in an issue"

What does this MR do?

This MR adds an ability to type a custom branch name in the Create merge request dropdown placed in an issue.

TODO

• Add backend specs
• Add frontend specs

Why was this MR needed?

It improves UX of branch management.

Screenshots (if relevant)

To be added.

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• API support added
• Tests added for this feature/bug
• Review
  • Has been reviewed by UX
  • Has been reviewed by Frontend
  • Has been reviewed by Backend
  • Has been reviewed by Database
• Conform by the merge request performance guides
• Conform by the style guides
• Squashed related commits together

What are the relevant issue numbers?

Closes #21143 (closed)

app/assets/javascripts/create_merge_request_dropdown.js

@@ -23,15 +23,18 @@ export default class CreateMergeRequestDropdown {
     this.unavailableButtonArrow = this.unavailableButton.querySelector('.fa');
     this.unavailableButtonText = this.unavailableButton.querySelector('.text');
 
-    this.createBranchPath = this.wrapperEl.dataset.createBranchPath;
+    this.checkBranchExistencePath = this.wrapperEl.dataset.checkBranchExistencePath;
     this.canCreatePath = this.wrapperEl.dataset.canCreatePath;
+    this.createBranchPath = this.wrapperEl.dataset.createBranchPath;
     this.createMrPath = this.wrapperEl.dataset.createMrPath;
     this.droplabInitialized = false;
     this.isCreatingMergeRequest = false;
+    this.isCheckingBranchExistence = false;
     this.inputsAreValid = true;
     this.mergeRequestCreated = false;
     this.isCreatingBranch = false;
     this.branchCreated = false;
+    this.branchTaken = true;
     this.delay = null;
 
     this.init();
@@ -67,6 +70,11 @@ export default class CreateMergeRequestDropdown {
     this.dropdownToggle.setAttribute('disabled', 'disabled');
   }
 
+  disableCreateAction() {
+    this.createMergeRequestButton.classList.add('disabled');
+    this.createMergeRequestButton.setAttribute('disabled', 'disabled');
+  }
+
   hide() {
     this.wrapperEl.classList.add('hide');
   }
@@ -113,7 +121,37 @@ export default class CreateMergeRequestDropdown {
   }
 
   checkBranchExists() {
-    return false;
+    if (this.newBranchNameInput.value) {
+      this.checkBranchExistencePath = this.checkBranchExistencePath.replace(/(\/branches\/)(.*?)$/, `$1${this.newBranchNameInput.value}`);
+    } else {
+      this.checkBranchExistencePath = this.wrapperEl.dataset.checkBranchExistencePath;
+    }
+
+    $.ajax({
+      async: false,
+      method: 'HEAD',
+      url: this.checkBranchExistencePath,
+      global: false,
+      beforeSend: () => {
+        this.showCheckBranchExistsMessage();
+        this.isCheckingBranchExistence = true;
+      },
+    })
+    .always(() => {
+      this.isCheckingBranchExistence = false;
+    })
+    .success((jqXHR, textStatus, xhr) => {
+      if (xhr.status === 200 || xhr.status === 204) {
+        this.branchTaken = true;
+      }
+    })
+    .fail((xhr) => {
+      if (xhr.status === 404) {
+        this.branchTaken = false;
+      }
+    });
+
+    return this.branchTaken;
   }
 
   initDroplab() {
@@ -139,7 +177,7 @@ export default class CreateMergeRequestDropdown {
   bindEvents() {
     this.createMergeRequestButton
       .addEventListener('click', this.onClickCreateMergeRequestButton.bind(this));
-
+    this.dropdownToggle.addEventListener('click', this.onClickSetFocusOnBranchNameInput.bind(this));
     this.newBranchNameInput.addEventListener('keyup', this.onChangeNewBranchNameInput.bind(this));
     this.refInput.addEventListener('keyup', this.onChangeRefInput.bind(this));
   }
@@ -148,7 +186,8 @@ export default class CreateMergeRequestDropdown {
     return this.isCreatingMergeRequest ||
       this.mergeRequestCreated ||
       this.isCreatingBranch ||
-      this.branchCreated;
+      this.branchCreated ||
+      this.isCheckingBranchExistence;
   }
 
   showCheckBranchExistsMessage() {
@@ -182,16 +221,33 @@ export default class CreateMergeRequestDropdown {
     this.newBranchMessage.classList.remove('gl-field-success-message');
   }
 
+  onClickSetFocusOnBranchNameInput() {
+    this.newBranchNameInput.focus();
+  }
+
   onChangeNewBranchNameInput(e) {
+    this.newBranchNameInput.value = $.trim(this.newBranchNameInput.value)
+
+    if (this.isCheckingBranchExistence) {
+      return;
+    }
+
+    // `ENTER` key submits the data.
     if (e.keyCode === 13 && this.inputsAreValid) {
       this.createMergeRequestButton.click();
+      return;
+    }
+
+    // `ESC` key closes the dropdown.
+    if (e.keyCode === 27) {
+      this.dropdownToggle.click();
+      return;
     }
 
     // If the input is empty, use the original branch name generated by the backend.
     if (!this.newBranchNameInput.value) {
       this.createBranchPath = this.wrapperEl.dataset.createBranchPath;
       this.createMrPath = this.wrapperEl.dataset.createMrPath;
-      return;
     }
 
     this.showCheckBranchExistsMessage();
@@ -200,15 +256,16 @@ export default class CreateMergeRequestDropdown {
     this.delay = setTimeout(() => {
       if (this.checkBranchExists()) {
         this.inputsAreValid = false;
+        this.disableCreateAction();
         this.showNewBranchTakenMessage();
+        this.createBranchPath = this.createBranchPath.replace(/(branch_name=)(.+?)(?=&issue)/, `$1${this.newBranchNameInput.value}`);
+        this.createMrPath = this.createMrPath.replace(/(branch_name=)(.+?)(?=&ref)/, `$1${this.newBranchNameInput.value}`);
       } else {
         this.inputsAreValid = true;
+        this.enable();
         this.showNewBranchAvailableMessage();
       }
-    }, 400);
-
-    this.createBranchPath = this.createBranchPath.replace(/(branch_name=)(.+?)(?=&issue)/, "$1" + this.newBranchNameInput.value);
-    this.createMrPath = this.createMrPath.replace(/(branch_name=)(.+?)(?=&ref)/, "$1" + this.newBranchNameInput.value);
+    }, 600);
   }
 
   onChangeRefInput() {
@@ -219,8 +276,8 @@ export default class CreateMergeRequestDropdown {
       return;
     }
 
-    this.createBranchPath = this.createBranchPath.replace(/(ref=)(.+?)$/, "$1" + this.refInput.value);
-    this.createMrPath = this.createMrPath.replace(/(ref=)(.+?)$/, "$1" + this.refInput.value);
+    this.createBranchPath = this.createBranchPath.replace(/(ref=)(.+?)$/, `$1${this.refInput.value}`);
+    this.createMrPath = this.createMrPath.replace(/(ref=)(.+?)$/, `$1${this.refInput.value}`);
   }
 
   onClickCreateMergeRequestButton(e) {