Commit 6a0b21ca authored by Jacob Schatz's avatar Jacob Schatz

Merge branch 'issue-search-token-position-ee' into 'master'

Port of issue-search-token-position to ee

See merge request !1090
parents 3d1c7fa0 efd18211
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
this.config = { this.config = {
droplabFilter: { droplabFilter: {
template: 'hint', template: 'hint',
filterFunction: gl.DropdownUtils.filterHint, filterFunction: gl.DropdownUtils.filterHint.bind(null, input),
}, },
}; };
} }
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
loadingTemplate: this.loadingTemplate, loadingTemplate: this.loadingTemplate,
}, },
droplabFilter: { droplabFilter: {
filterFunction: gl.DropdownUtils.filterWithSymbol.bind(null, this.symbol), filterFunction: gl.DropdownUtils.filterWithSymbol.bind(null, this.symbol, input),
}, },
}; };
} }
......
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
} }
getSearchInput() { getSearchInput() {
const query = this.input.value.trim(); const query = gl.DropdownUtils.getSearchInput(this.input);
const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query); const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query);
return lastToken.value || ''; return lastToken.value || '';
......
...@@ -20,17 +20,15 @@ ...@@ -20,17 +20,15 @@
return escapedText; return escapedText;
} }
static filterWithSymbol(filterSymbol, item, query) { static filterWithSymbol(filterSymbol, input, item) {
const updatedItem = item; const updatedItem = item;
const query = gl.DropdownUtils.getSearchInput(input);
const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(query); const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(query);
if (lastToken !== searchToken) { if (lastToken !== searchToken) {
const title = updatedItem.title.toLowerCase(); const title = updatedItem.title.toLowerCase();
let value = lastToken.value.toLowerCase(); let value = lastToken.value.toLowerCase();
value = value.replace(/"(.*?)"/g, str => str.slice(1).slice(0, -1));
if ((value[0] === '"' || value[0] === '\'') && title.indexOf(' ') !== -1) {
value = value.slice(1);
}
// Eg. filterSymbol = ~ for labels // Eg. filterSymbol = ~ for labels
const matchWithoutSymbol = lastToken.symbol === filterSymbol && title.indexOf(value) !== -1; const matchWithoutSymbol = lastToken.symbol === filterSymbol && title.indexOf(value) !== -1;
...@@ -44,8 +42,9 @@ ...@@ -44,8 +42,9 @@
return updatedItem; return updatedItem;
} }
static filterHint(item, query) { static filterHint(input, item) {
const updatedItem = item; const updatedItem = item;
const query = gl.DropdownUtils.getSearchInput(input);
let { lastToken } = gl.FilteredSearchTokenizer.processTokens(query); let { lastToken } = gl.FilteredSearchTokenizer.processTokens(query);
lastToken = lastToken.key || lastToken || ''; lastToken = lastToken.key || lastToken || '';
...@@ -72,6 +71,48 @@ ...@@ -72,6 +71,48 @@
// Return boolean based on whether it was set // Return boolean based on whether it was set
return dataValue !== null; return dataValue !== null;
} }
static getSearchInput(filteredSearchInput) {
const inputValue = filteredSearchInput.value;
const { right } = gl.DropdownUtils.getInputSelectionPosition(filteredSearchInput);
return inputValue.slice(0, right);
}
static getInputSelectionPosition(input) {
const selectionStart = input.selectionStart;
let inputValue = input.value;
// Replace all spaces inside quote marks with underscores
// This helps with matching the beginning & end of a token:key
inputValue = inputValue.replace(/"(.*?)"/g, str => str.replace(/\s/g, '_'));
// Get the right position for the word selected
// Regex matches first space
let right = inputValue.slice(selectionStart).search(/\s/);
if (right >= 0) {
right += selectionStart;
} else if (right < 0) {
right = inputValue.length;
}
// Get the left position for the word selected
// Regex matches last non-whitespace character
let left = inputValue.slice(0, right).search(/\S+$/);
if (selectionStart === 0) {
left = 0;
} else if (selectionStart === inputValue.length && left < 0) {
left = inputValue.length;
} else if (left < 0) {
left = selectionStart;
}
return {
left,
right,
};
}
} }
window.gl = window.gl || {}; window.gl = window.gl || {};
......
...@@ -62,28 +62,25 @@ ...@@ -62,28 +62,25 @@
static addWordToInput(tokenName, tokenValue = '') { static addWordToInput(tokenName, tokenValue = '') {
const input = document.querySelector('.filtered-search'); const input = document.querySelector('.filtered-search');
const inputValue = input.value;
const word = `${tokenName}:${tokenValue}`; const word = `${tokenName}:${tokenValue}`;
const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(input.value); // Get the string to replace
const lastSearchToken = searchToken.split(' ').last(); const selectionStart = input.selectionStart;
const lastInputCharacter = input.value[input.value.length - 1]; const { left, right } = gl.DropdownUtils.getInputSelectionPosition(input);
const lastInputTrimmedCharacter = input.value.trim()[input.value.trim().length - 1];
input.value = `${inputValue.substr(0, left)}${word}${inputValue.substr(right)}`;
// Remove the typed tokenName gl.FilteredSearchDropdownManager.updateInputCaretPosition(selectionStart, input);
if (word.indexOf(lastSearchToken) === 0 && searchToken !== '') { }
// Remove spaces after the colon
if (lastInputCharacter === ' ' && lastInputTrimmedCharacter === ':') { static updateInputCaretPosition(selectionStart, input) {
input.value = input.value.trim(); // Reset the position
} // Sometimes can end up at end of input
input.setSelectionRange(selectionStart, selectionStart);
input.value = input.value.slice(0, -1 * lastSearchToken.length);
} else if (lastInputCharacter !== ' ' || (lastToken && lastToken.value[lastToken.value.length - 1] === ' ')) { const { right } = gl.DropdownUtils.getInputSelectionPosition(input);
// Remove the existing tokenValue
const lastTokenString = `${lastToken.key}:${lastToken.symbol}${lastToken.value}`;
input.value = input.value.slice(0, -1 * lastTokenString.length);
}
input.value += word; input.setSelectionRange(right, right);
} }
updateCurrentDropdownOffset() { updateCurrentDropdownOffset() {
...@@ -95,9 +92,10 @@ ...@@ -95,9 +92,10 @@
this.font = window.getComputedStyle(this.filteredSearchInput).font; this.font = window.getComputedStyle(this.filteredSearchInput).font;
} }
const input = this.filteredSearchInput;
const inputText = input.value.slice(0, input.selectionStart);
const filterIconPadding = 27; const filterIconPadding = 27;
const offset = gl.text const offset = gl.text.getTextWidth(inputText, this.font) + filterIconPadding;
.getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding;
this.mapping[key].reference.setOffset(offset); this.mapping[key].reference.setOffset(offset);
} }
...@@ -153,9 +151,9 @@ ...@@ -153,9 +151,9 @@
setDropdown() { setDropdown() {
const { lastToken, searchToken } = this.tokenizer const { lastToken, searchToken } = this.tokenizer
.processTokens(this.filteredSearchInput.value); .processTokens(gl.DropdownUtils.getSearchInput(this.filteredSearchInput));
if (this.filteredSearchInput.value.split('').last() === ' ') { if (this.currentDropdown) {
this.updateCurrentDropdownOffset(); this.updateCurrentDropdownOffset();
} }
......
...@@ -30,11 +30,14 @@ ...@@ -30,11 +30,14 @@
this.checkForEnterWrapper = this.checkForEnter.bind(this); this.checkForEnterWrapper = this.checkForEnter.bind(this);
this.clearSearchWrapper = this.clearSearch.bind(this); this.clearSearchWrapper = this.clearSearch.bind(this);
this.checkForBackspaceWrapper = this.checkForBackspace.bind(this); this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
this.tokenChange = this.tokenChange.bind(this);
this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper); this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper);
this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper); this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper);
this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper); this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper);
this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper); this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper);
this.filteredSearchInput.addEventListener('click', this.tokenChange);
this.filteredSearchInput.addEventListener('keyup', this.tokenChange);
this.clearSearchButton.addEventListener('click', this.clearSearchWrapper); this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
} }
...@@ -43,6 +46,8 @@ ...@@ -43,6 +46,8 @@
this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper); this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper);
this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper); this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper);
this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper); this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper);
this.filteredSearchInput.removeEventListener('click', this.tokenChange);
this.filteredSearchInput.removeEventListener('keyup', this.tokenChange);
this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper); this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
} }
...@@ -85,6 +90,7 @@ ...@@ -85,6 +90,7 @@
loadSearchParamsFromURL() { loadSearchParamsFromURL() {
const params = gl.utils.getUrlParamsArray(); const params = gl.utils.getUrlParamsArray();
const usernameParams = this.getUsernameParams();
const inputValues = []; const inputValues = [];
params.forEach((p) => { params.forEach((p) => {
...@@ -115,6 +121,16 @@ ...@@ -115,6 +121,16 @@
} }
inputValues.push(`${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`); inputValues.push(`${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`);
} else if (!match && keyParam === 'assignee_id') {
const id = parseInt(value, 10);
if (usernameParams[id]) {
inputValues.push(`assignee:@${usernameParams[id]}`);
}
} else if (!match && keyParam === 'author_id') {
const id = parseInt(value, 10);
if (usernameParams[id]) {
inputValues.push(`author:@${usernameParams[id]}`);
}
} else if (!match && keyParam === 'search') { } else if (!match && keyParam === 'search') {
inputValues.push(sanitizedValue); inputValues.push(sanitizedValue);
} }
...@@ -164,6 +180,27 @@ ...@@ -164,6 +180,27 @@
Turbolinks.visit(`?scope=all&utf8=✓&${paths.join('&')}`); Turbolinks.visit(`?scope=all&utf8=✓&${paths.join('&')}`);
} }
getUsernameParams() {
const usernamesById = {};
try {
const attribute = this.filteredSearchInput.getAttribute('data-username-params');
JSON.parse(attribute).forEach((user) => {
usernamesById[user.id] = user.username;
});
} catch (e) {
// do nothing
}
return usernamesById;
}
tokenChange() {
const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
const currentDropdownRef = dropdown.reference;
this.setDropdownWrapper();
currentDropdownRef.dispatchInputEvent();
}
} }
window.gl = window.gl || {}; window.gl = window.gl || {};
......
...@@ -19,9 +19,12 @@ describe 'Filter issues', js: true, feature: true do ...@@ -19,9 +19,12 @@ describe 'Filter issues', js: true, feature: true do
let!(:closed_issue) { create(:issue, title: 'bug that is closed', project: project, state: :closed) } let!(:closed_issue) { create(:issue, title: 'bug that is closed', project: project, state: :closed) }
let(:filtered_search) { find('.filtered-search') } let(:filtered_search) { find('.filtered-search') }
def input_filtered_search(search_term) def input_filtered_search(search_term, submit: true)
filtered_search.set(search_term) filtered_search.set(search_term)
filtered_search.send_keys(:enter)
if submit
filtered_search.send_keys(:enter)
end
end end
def expect_filtered_search_input(input) def expect_filtered_search_input(input)
...@@ -43,6 +46,10 @@ describe 'Filter issues', js: true, feature: true do ...@@ -43,6 +46,10 @@ describe 'Filter issues', js: true, feature: true do
end end
end end
def select_search_at_index(pos)
evaluate_script("el = document.querySelector('.filtered-search'); el.focus(); el.setSelectionRange(#{pos}, #{pos});")
end
before do before do
project.team << [user, :master] project.team << [user, :master]
project.team << [user2, :master] project.team << [user2, :master]
...@@ -522,6 +529,44 @@ describe 'Filter issues', js: true, feature: true do ...@@ -522,6 +529,44 @@ describe 'Filter issues', js: true, feature: true do
end end
end end
describe 'overwrites selected filter' do
it 'changes author' do
input_filtered_search("author:@#{user.username}", submit: false)
select_search_at_index(3)
page.within '#js-dropdown-author' do
click_button user2.username
end
expect(filtered_search.value).to eq("author:@#{user2.username}")
end
it 'changes label' do
input_filtered_search("author:@#{user.username} label:~#{bug_label.title}", submit: false)
select_search_at_index(27)
page.within '#js-dropdown-label' do
click_button label.name
end
expect(filtered_search.value).to eq("author:@#{user.username} label:~#{label.name}")
end
it 'changes label correctly space is in previous label' do
input_filtered_search("label:~\"#{multiple_words_label.title}\"", submit: false)
select_search_at_index(0)
page.within '#js-dropdown-label' do
click_button label.name
end
expect(filtered_search.value).to eq("label:~#{label.name}")
end
end
describe 'filter issues by text' do describe 'filter issues by text' do
context 'only text' do context 'only text' do
it 'filters issues by searched text' do it 'filters issues by searched text' do
......
...@@ -31,41 +31,68 @@ ...@@ -31,41 +31,68 @@
}); });
describe('filterWithSymbol', () => { describe('filterWithSymbol', () => {
let input;
const item = { const item = {
title: '@root', title: '@root',
}; };
beforeEach(() => {
setFixtures(`
<input type="text" id="test" />
`);
input = document.getElementById('test');
});
it('should filter without symbol', () => { it('should filter without symbol', () => {
const updatedItem = gl.DropdownUtils.filterWithSymbol('@', item, ':roo'); input.value = ':roo';
const updatedItem = gl.DropdownUtils.filterWithSymbol('@', input, item);
expect(updatedItem.droplab_hidden).toBe(false); expect(updatedItem.droplab_hidden).toBe(false);
}); });
it('should filter with symbol', () => { it('should filter with symbol', () => {
const updatedItem = gl.DropdownUtils.filterWithSymbol('@', item, ':@roo'); input.value = '@roo';
const updatedItem = gl.DropdownUtils.filterWithSymbol('@', input, item);
expect(updatedItem.droplab_hidden).toBe(false); expect(updatedItem.droplab_hidden).toBe(false);
}); });
it('should filter with colon', () => { it('should filter with colon', () => {
const updatedItem = gl.DropdownUtils.filterWithSymbol('@', item, ':'); input.value = 'roo';
const updatedItem = gl.DropdownUtils.filterWithSymbol('@', input, item);
expect(updatedItem.droplab_hidden).toBe(false); expect(updatedItem.droplab_hidden).toBe(false);
}); });
}); });
describe('filterHint', () => { describe('filterHint', () => {
let input;
beforeEach(() => {
setFixtures(`
<input type="text" id="test" />
`);
input = document.getElementById('test');
});
it('should filter', () => { it('should filter', () => {
let updatedItem = gl.DropdownUtils.filterHint({ input.value = 'l';
let updatedItem = gl.DropdownUtils.filterHint(input, {
hint: 'label', hint: 'label',
}, 'l'); });
expect(updatedItem.droplab_hidden).toBe(false); expect(updatedItem.droplab_hidden).toBe(false);
updatedItem = gl.DropdownUtils.filterHint({ input.value = 'o';
updatedItem = gl.DropdownUtils.filterHint(input, {
hint: 'label', hint: 'label',
}, 'o'); }, 'o');
expect(updatedItem.droplab_hidden).toBe(true); expect(updatedItem.droplab_hidden).toBe(true);
}); });
it('should return droplab_hidden false when item has no hint', () => { it('should return droplab_hidden false when item has no hint', () => {
const updatedItem = gl.DropdownUtils.filterHint({}, ''); const updatedItem = gl.DropdownUtils.filterHint(input, {}, '');
expect(updatedItem.droplab_hidden).toBe(false); expect(updatedItem.droplab_hidden).toBe(false);
}); });
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment