Skip to content
Snippets Groups Projects

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

2 files
+ 59
63
Compare changes
  • Side-by-side
  • Inline
Files
2
@@ -17,7 +17,7 @@ export default class CreateMergeRequestDropdown {
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.branchInput = this.wrapperEl.querySelector('#new-branch-name');
this.refInput = this.wrapperEl.querySelector('#ref');
this.refMessage = this.wrapperEl.querySelector('#ref-message');
this.unavailableButton = this.wrapperEl.querySelector('.unavailable');
@@ -25,21 +25,19 @@ export default class CreateMergeRequestDropdown {
this.unavailableButtonText = this.unavailableButton.querySelector('.text');
this.branchCreated = false;
this.branchDelay = null;
this.branchTaken = true;
this.canCreatePath = this.wrapperEl.dataset.canCreatePath;
this.checkBranchExistencePath = this.wrapperEl.dataset.checkBranchExistencePath;
this.checkRefExistencePath = this.wrapperEl.dataset.checkRefExistencePath;
this.createBranchPath = this.wrapperEl.dataset.createBranchPath;
this.createMrPath = this.wrapperEl.dataset.createMrPath;
this.droplabInitialized = false;
this.getRefsPath = this.wrapperEl.dataset.getRefsPath;
this.isCreatingBranch = false;
this.isCreatingMergeRequest = false;
this.isCheckingBranchExistence = false;
this.isCheckingRefExistence = false;
this.isGettingRefs = false;
this.inputsAreValid = true;
this.isCreatingBranch = false;
this.mergeRequestCreated = false;
this.refDelay = null;
this.delay = null;
this.refs = {};
this.init();
}
@@ -124,9 +122,41 @@ export default class CreateMergeRequestDropdown {
});
}
getRefs() {
return $.ajax({
method: 'GET',
dataType: 'json',
url: this.checkRefExistencePath,
beforeSend: () => {
this.isGettingRefs = true;
},
})
.always(() => {
this.isGettingRefs = false;
})
.done((data) => {
this.refs = data;
})
.fail((xhr) => {
this.unavailable();
this.disable();
new Flash('Failed to get refs.');
});
}
getRef(ref, type = 'all') {
const target = new RegExp('^' + $.trim(ref).replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'));
if (type === 'branch') {
return this.refs.Branches.find(value => target.test(value));
} else {
return this.refs.Branches.find(value => target.test(value)) || this.refs.Tags.find(value => target.test(value));
}
}
checkBranchExists() {
if (this.newBranchNameInput.value) {
this.checkBranchExistencePath = this.checkBranchExistencePath.replace(/(\/branches\/)(.*?)$/, `$1${this.newBranchNameInput.value}`);
if (this.branchInput.value) {
this.checkBranchExistencePath = this.checkBranchExistencePath.replace(/(\/branches\/)(.*?)$/, `$1${this.branchInput.value}`);
} else {
this.checkBranchExistencePath = this.wrapperEl.dataset.checkBranchExistencePath;
}
@@ -158,37 +188,6 @@ export default class CreateMergeRequestDropdown {
return this.branchTaken;
}
checkRefExists() {
// if (this.newBranchNameInput.value) {
// this.checkBranchExistencePath = this.checkBranchExistencePath.replace(/(\/branches\/)(.*?)$/, `$1${this.newBranchNameInput.value}`);
// } else {
// this.checkBranchExistencePath = this.wrapperEl.dataset.checkBranchExistencePath;
// }
$.ajax({
method: 'GET',
dataType: 'json',
url: `${this.checkRefExistencePath}${this.refInput.value}`,
beforeSend: () => {
// this.showCheckBranchExistsMessage();
this.isCheckingRefExistence = true;
},
})
.always(() => {
this.isCheckingRefExistence = false;
})
.done((data) => {
console.log(data);
})
.fail((xhr) => {
this.unavailable();
this.disable();
new Flash('Failed to check if a source is available.');
});
return this.branchTaken;
}
initDroplab() {
this.droplab = new DropLab();
@@ -210,10 +209,10 @@ export default class CreateMergeRequestDropdown {
}
bindEvents() {
this.createMergeRequestButton
.addEventListener('click', this.onClickCreateMergeRequestButton.bind(this));
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.dropdownToggle.addEventListener('click', this.onClickGetRefs.bind(this));
this.branchInput.addEventListener('keyup', this.onChangeBranchInput.bind(this));
this.refInput.addEventListener('keyup', this.onChangeRefInput.bind(this));
}
@@ -222,8 +221,7 @@ export default class CreateMergeRequestDropdown {
this.mergeRequestCreated ||
this.isCreatingBranch ||
this.branchCreated ||
this.isCheckingBranchExistence ||
this.isCheckingRefExistence;
this.isGettingRefs;
}
showCheckBranchExistsMessage() {
@@ -235,7 +233,7 @@ export default class CreateMergeRequestDropdown {
showNewBranchTakenMessage() {
this.removeGlFieldErrorClasses('branch');
this.newBranchNameInput.classList.add('gl-field-error-outline');
this.branchInput.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');
@@ -243,7 +241,7 @@ export default class CreateMergeRequestDropdown {
showNewBranchAvailableMessage() {
this.removeGlFieldErrorClasses('branch');
this.newBranchNameInput.classList.add('gl-field-success-outline');
this.branchInput.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');
@@ -277,7 +275,7 @@ export default class CreateMergeRequestDropdown {
let message = null;
if (target === 'branch') {
input = this.newBranchNameInput;
input = this.branchInput;
message = this.newBranchMessage;
} else {
input = this.refInput;
@@ -292,15 +290,15 @@ export default class CreateMergeRequestDropdown {
}
onClickSetFocusOnBranchNameInput() {
this.newBranchNameInput.focus();
this.branchInput.focus();
}
onChangeNewBranchNameInput(event) {
this.newBranchNameInput.value = $.trim(this.newBranchNameInput.value)
onClickGetRefs() {
this.getRefs();
}
if (this.isCheckingBranchExistence) {
return;
}
onChangeBranchInput(event) {
if (this.isGettingRefs) return;
// `ENTER` key submits the data.
if (event.keyCode === 13 && this.inputsAreValid) {
@@ -315,7 +313,7 @@ export default class CreateMergeRequestDropdown {
}
// If the input is empty, use the original branch name generated by the backend.
if (!this.newBranchNameInput.value) {
if (!this.branchInput.value) {
this.createBranchPath = this.wrapperEl.dataset.createBranchPath;
this.createMrPath = this.wrapperEl.dataset.createMrPath;
}
@@ -328,8 +326,8 @@ export default class CreateMergeRequestDropdown {
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}`);
this.createBranchPath = this.createBranchPath.replace(/(branch_name=)(.+?)(?=&issue)/, `$1${this.branchInput.value}`);
this.createMrPath = this.createMrPath.replace(/(branch_name=)(.+?)(?=&ref)/, `$1${this.branchInput.value}`);
} else {
this.inputsAreValid = true;
this.enable();
@@ -339,7 +337,7 @@ export default class CreateMergeRequestDropdown {
}
onChangeRefInput(event) {
this.refInput.value = $.trim(this.refInput.value)
console.log(this.getRef(this.refInput.value));
if (this.isCheckingRefExistence) {
return;
Loading