Skip to content
Snippets Groups Projects

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

Compare and Show latest version
7 files
+ 163
37
Compare changes
  • Side-by-side
  • Inline
Files
7
@@ -16,20 +16,26 @@ 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');
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();
}
@@ -64,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');
}
@@ -110,9 +121,37 @@ export default class CreateMergeRequestDropdown {
}
checkBranchExists() {
// Send an ajax call
// return $.ajax({ });
return true;
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() {
@@ -138,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));
}
@@ -147,20 +186,96 @@ export default class CreateMergeRequestDropdown {
return this.isCreatingMergeRequest ||
this.mergeRequestCreated ||
this.isCreatingBranch ||
this.branchCreated;
this.branchCreated ||
this.isCheckingBranchExistence;
}
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');
}
onChangeNewBranchNameInput() {
// 1. Change URL
// 2. Check branch existence by this.checkBranchExists();
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');
}
this.createBranchPath = this.createBranchPath.replace(/(branch_name=)(.+?)(?=&issue)/, "$1" + this.newBranchNameInput.value);
this.createMrPath = this.createMrPath.replace(/(branch_name=)(.+?)(?=&ref)/, "$1" + this.newBranchNameInput.value);
onClickSetFocusOnBranchNameInput() {
this.newBranchNameInput.focus();
}
onChangeNewBranchNameInput(e) {
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;
}
this.showCheckBranchExistsMessage();
clearTimeout(this.delay);
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();
}
}, 600);
}
onChangeRefInput() {
this.createBranchPath = this.createBranchPath.replace(/(ref=)(.+?)$/, "$1" + this.refInput.value);
this.createMrPath = this.createMrPath.replace(/(ref=)(.+?)$/, "$1" + this.refInput.value);
// 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) {
Loading