Skip to content

G
gitlab-ce
Commit 87699616 authored by Winnie Hellmann's avatar Winnie Hellmann Committed by Clement Ho
Browse files
Options

Make search dropdowns consistent

parent 597b0517
Hide whitespace changes
Inline Side-by-side
Showing with 190 additions and 150 deletions
app/assets/javascripts/gl_dropdown.js
View file @ 87699616
...@@ -637,11 +637,15 @@ GitLabDropdown = (function() { ...@@ -637,11 +637,15 @@ GitLabDropdown = (function() {
value = this.options.id ? this.options.id(data) : data.id; value = this.options.id ? this.options.id(data) : data.id;
fieldName = this.options.fieldName; fieldName = this.options.fieldName;
if (value) { value = value.toString().replace(/'/g, '\\\''); } if (value) {
value = value.toString().replace(/'/g, '\\\'');
field = this.dropdown.parent().find("input[name='" + fieldName + "'][value='" + value + "']"); field = this.dropdown.parent().find(`input[name='${fieldName}'][value='${value}']`);
if (field.length) { if (field.length) {
selected = true; selected = true;
}
} else {
field = this.dropdown.parent().find(`input[name='${fieldName}']`);
selected = !field.length;
} }
} }
// Set URL // Set URL
......
app/assets/stylesheets/framework/dropdowns.scss
View file @ 87699616
...@@ -766,6 +766,7 @@ ...@@ -766,6 +766,7 @@
box-shadow: none; box-shadow: none;
padding: 8px 16px; padding: 8px 16px;
text-align: left; text-align: left;
white-space: normal;
width: 100%; width: 100%;
// make sure the text color is not overriden // make sure the text color is not overriden
......
app/assets/stylesheets/pages/search.scss
View file @ 87699616
...@@ -190,6 +190,8 @@ input[type="checkbox"]:hover { ...@@ -190,6 +190,8 @@ input[type="checkbox"]:hover {
} }
.search-holder { .search-holder {
@include new-style-dropdown;
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
......
spec/javascripts/gl_dropdown_spec.js
View file @ 87699616
...@@ -4,7 +4,10 @@ import '~/gl_dropdown'; ...@@ -4,7 +4,10 @@ import '~/gl_dropdown';
import '~/lib/utils/common_utils'; import '~/lib/utils/common_utils';
import '~/lib/utils/url_utility'; import '~/lib/utils/url_utility';
(() => { describe('glDropdown', function describeDropdown() {
preloadFixtures('static/gl_dropdown.html.raw');
loadJSONFixtures('projects.json');
const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link'; const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
const SEARCH_INPUT_SELECTOR = '.dropdown-input-field'; const SEARCH_INPUT_SELECTOR = '.dropdown-input-field';
const ITEM_SELECTOR = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`; const ITEM_SELECTOR = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`;
...@@ -39,187 +42,217 @@ import '~/lib/utils/url_utility'; ...@@ -39,187 +42,217 @@ import '~/lib/utils/url_utility';
remoteCallback = callback.bind({}, data); remoteCallback = callback.bind({}, data);
}; };
describe('Dropdown', function describeDropdown() { function initDropDown(hasRemote, isFilterable, extraOpts = {}) {
preloadFixtures('static/gl_dropdown.html.raw'); const options = Object.assign({
loadJSONFixtures('projects.json'); selectable: true,
filterable: isFilterable,
function initDropDown(hasRemote, isFilterable, extraOpts = {}) { data: hasRemote ? remoteMock.bind({}, this.projectsData) : this.projectsData,
const options = Object.assign({ search: {
selectable: true, fields: ['name']
filterable: isFilterable, },
data: hasRemote ? remoteMock.bind({}, this.projectsData) : this.projectsData, text: project => (project.name_with_namespace || project.name),
search: { id: project => project.id,
fields: ['name'] }, extraOpts);
}, this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown(options);
text: project => (project.name_with_namespace || project.name), }
id: project => project.id,
}, extraOpts); beforeEach(() => {
this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown(options); loadFixtures('static/gl_dropdown.html.raw');
} this.dropdownContainerElement = $('.dropdown.inline');
this.$dropdownMenuElement = $('.dropdown-menu', this.dropdownContainerElement);
this.projectsData = getJSONFixture('projects.json');
});
beforeEach(() => { afterEach(() => {
loadFixtures('static/gl_dropdown.html.raw'); $('body').unbind('keydown');
this.dropdownContainerElement = $('.dropdown.inline'); this.dropdownContainerElement.unbind('keyup');
this.$dropdownMenuElement = $('.dropdown-menu', this.dropdownContainerElement); });
this.projectsData = getJSONFixture('projects.json');
});
afterEach(() => { it('should open on click', () => {
$('body').unbind('keydown'); initDropDown.call(this, false);
this.dropdownContainerElement.unbind('keyup'); expect(this.dropdownContainerElement).not.toHaveClass('open');
}); this.dropdownButtonElement.click();
expect(this.dropdownContainerElement).toHaveClass('open');
});
it('should open on click', () => { it('escapes HTML as text', () => {
initDropDown.call(this, false); this.projectsData[0].name_with_namespace = '<script>alert("testing");</script>';
expect(this.dropdownContainerElement).not.toHaveClass('open');
this.dropdownButtonElement.click();
expect(this.dropdownContainerElement).toHaveClass('open');
});
it('escapes HTML as text', () => { initDropDown.call(this, false);
this.projectsData[0].name_with_namespace = '<script>alert("testing");</script>';
initDropDown.call(this, false); this.dropdownButtonElement.click();
this.dropdownButtonElement.click(); expect(
$('.dropdown-content li:first-child').text(),
).toBe('<script>alert("testing");</script>');
});
expect( it('should output HTML when highlighting', () => {
$('.dropdown-content li:first-child').text(), this.projectsData[0].name_with_namespace = 'testing';
).toBe('<script>alert("testing");</script>'); $('.dropdown-input .dropdown-input-field').val('test');
});
it('should output HTML when highlighting', () => { initDropDown.call(this, false, true, {
this.projectsData[0].name_with_namespace = 'testing'; highlight: true,
$('.dropdown-input .dropdown-input-field').val('test'); });
initDropDown.call(this, false, true, { this.dropdownButtonElement.click();
highlight: true,
});
this.dropdownButtonElement.click(); expect(
$('.dropdown-content li:first-child').text(),
).toBe('testing');
expect( expect(
$('.dropdown-content li:first-child').text(), $('.dropdown-content li:first-child a').html(),
).toBe('testing'); ).toBe('<b>t</b><b>e</b><b>s</b><b>t</b>ing');
});
expect( describe('that is open', () => {
$('.dropdown-content li:first-child a').html(), beforeEach(() => {
).toBe('<b>t</b><b>e</b><b>s</b><b>t</b>ing'); initDropDown.call(this, false, false);
this.dropdownButtonElement.click();
}); });
describe('that is open', () => { it('should select a following item on DOWN keypress', () => {
beforeEach(() => { expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(0);
initDropDown.call(this, false, false); const randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 1)) + 0);
this.dropdownButtonElement.click(); navigateWithKeys('down', randomIndex, () => {
expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(1);
expect($(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.$dropdownMenuElement)).toHaveClass('is-focused');
}); });
});
it('should select a following item on DOWN keypress', () => { it('should select a previous item on UP keypress', () => {
expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(0); expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(0);
const randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 1)) + 0); navigateWithKeys('down', (this.projectsData.length - 1), () => {
navigateWithKeys('down', randomIndex, () => { expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(1);
const randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 2)) + 0);
navigateWithKeys('up', randomIndex, () => {
expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(1); expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(1);
expect($(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.$dropdownMenuElement)).toHaveClass('is-focused'); expect($(`${ITEM_SELECTOR}:eq(${((this.projectsData.length - 2) - randomIndex)}) a`, this.$dropdownMenuElement)).toHaveClass('is-focused');
}); });
}); });
});
it('should select a previous item on UP keypress', () => { it('should click the selected item on ENTER keypress', () => {
expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(0); expect(this.dropdownContainerElement).toHaveClass('open');
navigateWithKeys('down', (this.projectsData.length - 1), () => { const randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0;
expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(1); navigateWithKeys('down', randomIndex, () => {
const randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 2)) + 0); spyOn(gl.utils, 'visitUrl').and.stub();
navigateWithKeys('up', randomIndex, () => { navigateWithKeys('enter', null, () => {
expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(1); expect(this.dropdownContainerElement).not.toHaveClass('open');
expect($(`${ITEM_SELECTOR}:eq(${((this.projectsData.length - 2) - randomIndex)}) a`, this.$dropdownMenuElement)).toHaveClass('is-focused'); const link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.$dropdownMenuElement);
}); expect(link).toHaveClass('is-active');
const linkedLocation = link.attr('href');
if (linkedLocation && linkedLocation !== '#') expect(gl.utils.visitUrl).toHaveBeenCalledWith(linkedLocation);
}); });
}); });
});
it('should click the selected item on ENTER keypress', () => { it('should close on ESC keypress', () => {
expect(this.dropdownContainerElement).toHaveClass('open'); expect(this.dropdownContainerElement).toHaveClass('open');
const randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0; this.dropdownContainerElement.trigger({
navigateWithKeys('down', randomIndex, () => { type: 'keyup',
spyOn(gl.utils, 'visitUrl').and.stub(); which: ARROW_KEYS.ESC,
navigateWithKeys('enter', null, () => { keyCode: ARROW_KEYS.ESC
expect(this.dropdownContainerElement).not.toHaveClass('open');
const link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.$dropdownMenuElement);
expect(link).toHaveClass('is-active');
const linkedLocation = link.attr('href');
if (linkedLocation && linkedLocation !== '#') expect(gl.utils.visitUrl).toHaveBeenCalledWith(linkedLocation);
});
});
}); });
expect(this.dropdownContainerElement).not.toHaveClass('open');
});
});
it('should close on ESC keypress', () => { describe('opened and waiting for a remote callback', () => {
expect(this.dropdownContainerElement).toHaveClass('open'); beforeEach(() => {
this.dropdownContainerElement.trigger({ initDropDown.call(this, true, true);
type: 'keyup', this.dropdownButtonElement.click();
which: ARROW_KEYS.ESC, });
keyCode: ARROW_KEYS.ESC
}); it('should show loading indicator while search results are being fetched by backend', () => {
expect(this.dropdownContainerElement).not.toHaveClass('open'); const dropdownMenu = document.querySelector('.dropdown-menu');
expect(dropdownMenu.className.indexOf('is-loading') !== -1).toEqual(true);
remoteCallback();
expect(dropdownMenu.className.indexOf('is-loading') !== -1).toEqual(false);
});
it('should not focus search input while remote task is not complete', () => {
expect($(document.activeElement)).not.toEqual($(SEARCH_INPUT_SELECTOR));
remoteCallback();
expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
});
it('should focus search input after remote task is complete', () => {
remoteCallback();
expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
});
it('should focus on input when opening for the second time after transition', () => {
remoteCallback();
this.dropdownContainerElement.trigger({
type: 'keyup',
which: ARROW_KEYS.ESC,
keyCode: ARROW_KEYS.ESC
}); });
this.dropdownButtonElement.click();
this.dropdownContainerElement.trigger('transitionend');
expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
}); });
});
describe('input focus with array data', () => {
it('should focus input when passing array data to drop down', () => {
initDropDown.call(this, false, true);
this.dropdownButtonElement.click();
this.dropdownContainerElement.trigger('transitionend');
expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
});
});
it('should still have input value on close and restore', () => {
const $searchInput = $(SEARCH_INPUT_SELECTOR);
initDropDown.call(this, false, true);
$searchInput
.trigger('focus')
.val('g')
.trigger('input');
expect($searchInput.val()).toEqual('g');
this.dropdownButtonElement.trigger('hidden.bs.dropdown');
$searchInput
.trigger('blur')
.trigger('focus');
expect($searchInput.val()).toEqual('g');
});
describe('renderItem', () => {
describe('without selected value', () => {
let dropdown;
describe('opened and waiting for a remote callback', () => {
beforeEach(() => { beforeEach(() => {
initDropDown.call(this, true, true); const dropdownOptions = {
this.dropdownButtonElement.click();
};
const $dropdownDiv = $('<div />');
$dropdownDiv.glDropdown(dropdownOptions);
dropdown = $dropdownDiv.data('glDropdown');
}); });
it('should show loading indicator while search results are being fetched by backend', () => { it('marks items without ID as active', () => {
const dropdownMenu = document.querySelector('.dropdown-menu'); const dummyData = { };
expect(dropdownMenu.className.indexOf('is-loading') !== -1).toEqual(true); const html = dropdown.renderItem(dummyData, null, null);
remoteCallback();
expect(dropdownMenu.className.indexOf('is-loading') !== -1).toEqual(false);
});
it('should not focus search input while remote task is not complete', () => { const link = html.querySelector('a');
expect($(document.activeElement)).not.toEqual($(SEARCH_INPUT_SELECTOR)); expect(link).toHaveClass('is-active');
remoteCallback();
expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
}); });
it('should focus search input after remote task is complete', () => { it('does not mark items with ID as active', () => {
remoteCallback(); const dummyData = {
expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR)); id: 'ea'
}); };
it('should focus on input when opening for the second time after transition', () => { const html = dropdown.renderItem(dummyData, null, null);
remoteCallback();
this.dropdownContainerElement.trigger({
type: 'keyup',
which: ARROW_KEYS.ESC,
keyCode: ARROW_KEYS.ESC
});
this.dropdownButtonElement.click();
this.dropdownContainerElement.trigger('transitionend');
expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
});
});
describe('input focus with array data', () => { const link = html.querySelector('a');
it('should focus input when passing array data to drop down', () => { expect(link).not.toHaveClass('is-active');
initDropDown.call(this, false, true);
this.dropdownButtonElement.click();
this.dropdownContainerElement.trigger('transitionend');
expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
}); });
}); });
it('should still have input value on close and restore', () => {
const $searchInput = $(SEARCH_INPUT_SELECTOR);
initDropDown.call(this, false, true);
$searchInput
.trigger('focus')
.val('g')
.trigger('input');
expect($searchInput.val()).toEqual('g');
this.dropdownButtonElement.trigger('hidden.bs.dropdown');
$searchInput
.trigger('blur')
.trigger('focus');
expect($searchInput.val()).toEqual('g');
});
}); });
})(); });
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7