Skip to content
Snippets Groups Projects

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

Compare and Show latest version
6 files
+ 89
28
Compare changes
  • Side-by-side
  • Inline
Files
6
@@ -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,22 +221,31 @@ export default class CreateMergeRequestDropdown {
this.newBranchMessage.classList.remove('gl-field-success-message');
}
onClickSetFocusOnBranchNameInput() {
this.newBranchNameInput.focus();
}
onChangeNewBranchNameInput(e) {
if (this.isCheckingBranchExistence) {
return;
}
// `ENTER` key submits the data.
if (e.keyCode === 13 && this.inputsAreValid) {
return this.createMergeRequestButton.click();
this.createMergeRequestButton.click();
return;
}
// `ESC` key closes the dropdown.
if (e.keyCode === 27) {
return this.dropdownToggle.click();
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();
@@ -206,17 +254,16 @@ export default class CreateMergeRequestDropdown {
this.delay = setTimeout(() => {
if (this.checkBranchExists()) {
this.inputsAreValid = false;
this.disable();
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() {
@@ -227,8 +274,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) {
Loading