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

@@ -122,10 +122,6 @@ export default class CreateMergeRequestDropdown {
     });
   }
 
-  checkBranchExists(ref) {
-    return this.getRef(ref, 'branch') === ref
-  }
-
   getRefs() {
     return $.ajax({
       method: 'GET',
@@ -270,6 +266,8 @@ export default class CreateMergeRequestDropdown {
   }
 
   onChangeBranchInput(event) {
+    const branch = this.branchInput.value;
+
     if (this.isGettingRefs) return;
 
     // `ENTER` key submits the data.
@@ -285,30 +283,32 @@ export default class CreateMergeRequestDropdown {
     }
 
     // If the input is empty, use the original branch name generated by the backend.
-    if (!this.branchInput.value) {
+    if (!branch) {
       this.createBranchPath = this.wrapperEl.dataset.createBranchPath;
       this.createMrPath = this.wrapperEl.dataset.createMrPath;
+      this.inputsAreValid = true;
+      this.enable();
+      this.showNewBranchAvailableMessage();
+      return;
     }
 
-    this.showCheckBranchExistsMessage();
-
-    if (this.checkBranchExists(this.branchInput.value)) {
+    if (this.getRef(branch, 'branch') === branch) {
       this.inputsAreValid = false;
       this.disableCreateAction();
       this.showNewBranchTakenMessage();
-      this.createBranchPath = this.createBranchPath.replace(/(branch_name=)(.+?)(?=&issue)/, `$1${this.branchInput.value}`);
-      this.createMrPath = this.createMrPath.replace(/(branch_name=)(.+?)(?=&ref)/, `$1${this.branchInput.value}`);
     } else {
       this.inputsAreValid = true;
       this.enable();
       this.showNewBranchAvailableMessage();
+      this.createBranchPath = this.createBranchPath.replace(/(branch_name=)(.+?)(?=&issue)/, `$1${branch}`);
+      this.createMrPath = this.createMrPath.replace(/(branch_name=)(.+?)(?=&ref)/, `$1${branch}`);
     }
   }
 
   onChangeRefInput(event) {
-    if (this.isCheckingRefExistence) {
-      return;
-    }
+    const ref = this.refInput.value;
+
+    if (this.isGettingRefs) return;
 
     // `ENTER` key submits the data.
     if (event.keyCode === 13 && this.inputsAreValid) {
@@ -330,22 +330,27 @@ export default class CreateMergeRequestDropdown {
     //   this.createMrPath = this.wrapperEl.dataset.createMrPath;
     // }
 
-    this.showCheckRefExistsMessage();
-
-    clearTimeout(this.refDelay);
-    this.refDelay = setTimeout(() => {
-      if (this.checkRefExists()) {
-        this.inputsAreValid = false;
-        this.disableCreateAction();
-        this.showRefNotAvailableMessage();
-        this.createBranchPath = this.createBranchPath.replace(/(ref=)(.+?)$/, `$1${this.refInput.value}`);
-        this.createMrPath = this.createMrPath.replace(/(ref=)(.+?)$/, `$1${this.refInput.value}`);
-      } else {
-        this.inputsAreValid = true;
-        this.enable();
-        this.showRefAvailableMessage();
-      }
-    }, 600);
+    // If the input is empty, use the original ref name generated by the backend.
+    if (!ref) {
+      this.createBranchPath = this.wrapperEl.dataset.createBranchPath;
+      this.createMrPath = this.wrapperEl.dataset.createMrPath;
+      this.inputsAreValid = true;
+      this.enable();
+      this.showRefAvailableMessage();
+      return;
+    }
+
+    if (this.getRef(ref, 'all') === ref) {
+      this.inputsAreValid = true;
+      this.enable();
+      this.showRefAvailableMessage();
+      this.createBranchPath = this.createBranchPath.replace(/(ref=)(.+?)$/, `$1${ref}`);
+      this.createMrPath = this.createMrPath.replace(/(ref=)(.+?)$/, `$1${ref}`);
+    } else {
+      this.inputsAreValid = false;
+      this.disableCreateAction();
+      this.showRefNotAvailableMessage();
+    }
   }
 
   onClickCreateMergeRequestButton(e) {