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

@@ -12,11 +12,13 @@ const CREATE_BRANCH = 'create-branch';
 export default class CreateMergeRequestDropdown {
   constructor(wrapperEl) {
     this.wrapperEl = wrapperEl;
-    this.branchNameInput = this.wrapperEl.querySelector('#branch-name');
+    this.availableButton = this.wrapperEl.querySelector('.available');
     this.createMergeRequestButton = this.wrapperEl.querySelector('.js-create-merge-request');
-    this.dropdownToggle = this.wrapperEl.querySelector('.js-dropdown-toggle');
     this.dropdownList = this.wrapperEl.querySelector('.dropdown-menu');
-    this.availableButton = this.wrapperEl.querySelector('.available');
+    this.dropdownToggle = this.wrapperEl.querySelector('.js-dropdown-toggle');
+    this.newBranchMessage = this.wrapperEl.querySelector('#new-branch-message');
+    this.newBranchNameInput = this.wrapperEl.querySelector('#new-branch-name');
+    this.refInput = this.wrapperEl.querySelector('#ref');
     this.unavailableButton = this.wrapperEl.querySelector('.unavailable');
     this.unavailableButtonArrow = this.unavailableButton.querySelector('.fa');
     this.unavailableButtonText = this.unavailableButton.querySelector('.text');
@@ -29,6 +31,7 @@ export default class CreateMergeRequestDropdown {
     this.mergeRequestCreated = false;
     this.isCreatingBranch = false;
     this.branchCreated = false;
+    this.delay = null;
 
     this.init();
   }
@@ -109,9 +112,7 @@ export default class CreateMergeRequestDropdown {
   }
 
   checkBranchExists() {
-    // Send an ajax call
-    // return $.ajax({ });
-    return true;
+    return false;
   }
 
   initDroplab() {
@@ -138,7 +139,8 @@ export default class CreateMergeRequestDropdown {
     this.createMergeRequestButton
       .addEventListener('click', this.onClickCreateMergeRequestButton.bind(this));
 
-    this.branchNameInput.addEventListener('keypress', this.onChangeBranchNameInput.bind(this));
+    this.newBranchNameInput.addEventListener('keyup', this.onChangeNewBranchNameInput.bind(this));
+    this.refInput.addEventListener('keyup', this.onChangeRefInput.bind(this));
   }
 
   isBusy() {
@@ -148,9 +150,70 @@ export default class CreateMergeRequestDropdown {
       this.branchCreated;
   }
 
-  onChangeBranchNameInput(e) {
-    // 1. Change URL
-    // 2. Check branch existence by this.checkBranchExists();
+  showCheckBranchExistsMessage() {
+    this.removeGlFieldErrorClasses();
+    this.newBranchMessage.classList.add('gl-field-hint');
+    this.newBranchMessage.textContent = 'Checking branch name availability...';
+    this.newBranchMessage.classList.remove('hide');
+  }
+
+  showNewBranchTakenMessage() {
+    this.removeGlFieldErrorClasses();
+    this.newBranchNameInput.classList.add('gl-field-error-outline');
+    this.newBranchMessage.classList.add('gl-field-error-message');
+    this.newBranchMessage.textContent = 'Branch name is already taken';
+    this.newBranchMessage.classList.remove('hide');
+  }
+
+  showNewBranchAvailableMessage() {
+    this.removeGlFieldErrorClasses();
+    this.newBranchNameInput.classList.add('gl-field-success-outline');
+    this.newBranchMessage.classList.add('gl-field-success-message');
+    this.newBranchMessage.textContent = 'Branch name is available';
+    this.newBranchMessage.classList.remove('hide');
+  }
+
+  removeGlFieldErrorClasses() {
+    this.newBranchNameInput.classList.remove('gl-field-error-outline');
+    this.newBranchNameInput.classList.remove('gl-field-success-outline');
+    this.newBranchMessage.classList.remove('gl-field-hint');
+    this.newBranchMessage.classList.remove('gl-field-error-message');
+    this.newBranchMessage.classList.remove('gl-field-success-message');
+  }
+
+  onChangeNewBranchNameInput() {
+    // 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();
+
+    clearTimeout(this.delay);
+    this.delay = setTimeout(() => {
+      if (this.checkBranchExists()) {
+        this.showNewBranchTakenMessage();
+      } else {
+        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);
+  }
+
+  onChangeRefInput() {
+    // If the input is empty, use the original branch name generated by the backend.
+    if (!this.refInput.value) {
+      this.createBranchPath = this.wrapperEl.dataset.createBranchPath;
+      this.createMrPath = this.wrapperEl.dataset.createMrPath;
+      return;
+    }
+
+    this.createBranchPath = this.createBranchPath.replace(/(ref=)(.+?)$/, "$1" + this.refInput.value);
+    this.createMrPath = this.createMrPath.replace(/(ref=)(.+?)$/, "$1" + this.refInput.value);
   }
 
   onClickCreateMergeRequestButton(e) {