Skip to content
Snippets Groups Projects

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

Compare and Show latest version
3 files
+ 81
16
Compare changes
  • Side-by-side
  • Inline
Files
3
@@ -16,6 +16,7 @@ export default class CreateMergeRequestDropdown {
this.createMergeRequestButton = this.wrapperEl.querySelector('.js-create-merge-request');
this.dropdownList = this.wrapperEl.querySelector('.dropdown-menu');
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');
@@ -27,9 +28,11 @@ export default class CreateMergeRequestDropdown {
this.createMrPath = this.wrapperEl.dataset.createMrPath;
this.droplabInitialized = false;
this.isCreatingMergeRequest = false;
this.inputsAreValid = true;
this.mergeRequestCreated = false;
this.isCreatingBranch = false;
this.branchCreated = false;
this.delay = null;
this.init();
}
@@ -110,9 +113,7 @@ export default class CreateMergeRequestDropdown {
}
checkBranchExists() {
// Send an ajax call
// return $.ajax({ });
return true;
return false;
}
initDroplab() {
@@ -150,15 +151,82 @@ export default class CreateMergeRequestDropdown {
this.branchCreated;
}
onChangeNewBranchNameInput() {
// 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(e) {
// `ENTER` key submits the data.
if (e.keyCode === 13 && this.inputsAreValid) {
return this.createMergeRequestButton.click();
}
// `ESC` key closes the dropdown.
if (e.keyCode === 27) {
return this.dropdownToggle.click();
}
// 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.inputsAreValid = false;
this.disable();
this.showNewBranchTakenMessage();
} 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);
}
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);
}
Loading