Skip to content
Snippets Groups Projects

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

Compare and Show latest version
3 files
+ 79
26
Compare changes
  • Side-by-side
  • Inline
Files
3
@@ -13,10 +13,12 @@ export default class CreateMergeRequestDropdown {
@@ -13,10 +13,12 @@ export default class CreateMergeRequestDropdown {
constructor(wrapperEl) {
constructor(wrapperEl) {
this.wrapperEl = wrapperEl;
this.wrapperEl = wrapperEl;
this.availableButton = this.wrapperEl.querySelector('.available');
this.availableButton = this.wrapperEl.querySelector('.available');
this.branchNameInput = this.wrapperEl.querySelector('#branch-name');
this.createMergeRequestButton = this.wrapperEl.querySelector('.js-create-merge-request');
this.createMergeRequestButton = this.wrapperEl.querySelector('.js-create-merge-request');
this.dropdownList = this.wrapperEl.querySelector('.dropdown-menu');
this.dropdownList = this.wrapperEl.querySelector('.dropdown-menu');
this.dropdownToggle = this.wrapperEl.querySelector('.js-dropdown-toggle');
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.unavailableButton = this.wrapperEl.querySelector('.unavailable');
this.unavailableButtonArrow = this.unavailableButton.querySelector('.fa');
this.unavailableButtonArrow = this.unavailableButton.querySelector('.fa');
this.unavailableButtonText = this.unavailableButton.querySelector('.text');
this.unavailableButtonText = this.unavailableButton.querySelector('.text');
@@ -29,6 +31,7 @@ export default class CreateMergeRequestDropdown {
@@ -29,6 +31,7 @@ export default class CreateMergeRequestDropdown {
this.mergeRequestCreated = false;
this.mergeRequestCreated = false;
this.isCreatingBranch = false;
this.isCreatingBranch = false;
this.branchCreated = false;
this.branchCreated = false;
 
this.delay = null;
this.init();
this.init();
}
}
@@ -109,9 +112,7 @@ export default class CreateMergeRequestDropdown {
@@ -109,9 +112,7 @@ export default class CreateMergeRequestDropdown {
}
}
checkBranchExists() {
checkBranchExists() {
// Send an ajax call
return false;
// return $.ajax({ });
return true;
}
}
initDroplab() {
initDroplab() {
@@ -138,7 +139,8 @@ export default class CreateMergeRequestDropdown {
@@ -138,7 +139,8 @@ export default class CreateMergeRequestDropdown {
this.createMergeRequestButton
this.createMergeRequestButton
.addEventListener('click', this.onClickCreateMergeRequestButton.bind(this));
.addEventListener('click', this.onClickCreateMergeRequestButton.bind(this));
this.branchNameInput.addEventListener('keyup', this.onChangeBranchNameInput.bind(this));
this.newBranchNameInput.addEventListener('keyup', this.onChangeNewBranchNameInput.bind(this));
 
this.refInput.addEventListener('keyup', this.onChangeRefInput.bind(this));
}
}
isBusy() {
isBusy() {
@@ -148,17 +150,70 @@ export default class CreateMergeRequestDropdown {
@@ -148,17 +150,70 @@ export default class CreateMergeRequestDropdown {
this.branchCreated;
this.branchCreated;
}
}
onChangeBranchNameInput(e) {
showCheckBranchExistsMessage() {
// 1. Change URL
this.removeGlFieldErrorClasses();
// 2. Check branch existence by this.checkBranchExists();
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');
 
}
// Change the URL for a branch creation.
removeGlFieldErrorClasses() {
this.createBranchPath = this.wrapperEl.dataset.createBranchPath.
this.newBranchNameInput.classList.remove('gl-field-error-outline');
replace(/(branch_name)(.+?)(?=&issue)/, "$1=" + this.branchNameInput.value);
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;
 
}
// Change the URL for a merge request creation.
this.createBranchPath = this.createBranchPath.replace(/(ref=)(.+?)$/, "$1" + this.refInput.value);
this.createMrPath = this.wrapperEl.dataset.createMrPath.
this.createMrPath = this.createMrPath.replace(/(ref=)(.+?)$/, "$1" + this.refInput.value);
replace(/(branch_name)(.+?)(?=&ref)/, "$1=" + this.branchNameInput.value);
}
}
onClickCreateMergeRequestButton(e) {
onClickCreateMergeRequestButton(e) {
Loading