Merge branch 'winh-admin-projects-namespace-filter' into 'master'
Make NamespaceSelect change URL when filtering Closes #37277 See merge request gitlab-org/gitlab-ce!14888
This commit is contained in:
commit
8e8ab2f3eb
6 changed files with 128 additions and 85 deletions
|
@ -16,7 +16,7 @@ import CILintEditor from './ci_lint_editor';
|
|||
import groupsSelect from './groups_select';
|
||||
/* global Search */
|
||||
/* global Admin */
|
||||
/* global NamespaceSelects */
|
||||
import NamespaceSelect from './namespace_select';
|
||||
/* global NewCommitForm */
|
||||
/* global NewBranchForm */
|
||||
/* global Project */
|
||||
|
@ -575,7 +575,8 @@ import Diff from './diff';
|
|||
new UsersSelect();
|
||||
break;
|
||||
case 'projects':
|
||||
new NamespaceSelects();
|
||||
document.querySelectorAll('.js-namespace-select')
|
||||
.forEach(dropdown => new NamespaceSelect({ dropdown }));
|
||||
break;
|
||||
case 'labels':
|
||||
switch (path[2]) {
|
||||
|
|
|
@ -1,85 +1,57 @@
|
|||
/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, vars-on-top, one-var-declaration-per-line, comma-dangle, object-shorthand, no-else-return, prefer-template, quotes, prefer-arrow-callback, no-param-reassign, no-cond-assign, max-len */
|
||||
/* eslint-disable func-names, space-before-function-paren, no-var, comma-dangle, object-shorthand, no-else-return, prefer-template, quotes, prefer-arrow-callback, max-len */
|
||||
import Api from './api';
|
||||
import './lib/utils/url_utility';
|
||||
|
||||
(function() {
|
||||
window.NamespaceSelect = (function() {
|
||||
function NamespaceSelect(opts) {
|
||||
this.onSelectItem = this.onSelectItem.bind(this);
|
||||
var fieldName, showAny;
|
||||
this.dropdown = opts.dropdown;
|
||||
showAny = true;
|
||||
fieldName = 'namespace_id';
|
||||
if (this.dropdown.attr('data-field-name')) {
|
||||
fieldName = this.dropdown.data('fieldName');
|
||||
}
|
||||
if (this.dropdown.attr('data-show-any')) {
|
||||
showAny = this.dropdown.data('showAny');
|
||||
}
|
||||
this.dropdown.glDropdown({
|
||||
filterable: true,
|
||||
selectable: true,
|
||||
filterRemote: true,
|
||||
search: {
|
||||
fields: ['path']
|
||||
},
|
||||
fieldName: fieldName,
|
||||
toggleLabel: function(selected) {
|
||||
if (selected.id == null) {
|
||||
return selected.text;
|
||||
} else {
|
||||
return selected.kind + ": " + selected.full_path;
|
||||
export default class NamespaceSelect {
|
||||
constructor(opts) {
|
||||
const isFilter = opts.dropdown.dataset.isFilter === 'true';
|
||||
const fieldName = opts.dropdown.dataset.fieldName || 'namespace_id';
|
||||
|
||||
$(opts.dropdown).glDropdown({
|
||||
filterable: true,
|
||||
selectable: true,
|
||||
filterRemote: true,
|
||||
search: {
|
||||
fields: ['path']
|
||||
},
|
||||
fieldName: fieldName,
|
||||
toggleLabel: function(selected) {
|
||||
if (selected.id == null) {
|
||||
return selected.text;
|
||||
} else {
|
||||
return selected.kind + ": " + selected.full_path;
|
||||
}
|
||||
},
|
||||
data: function(term, dataCallback) {
|
||||
return Api.namespaces(term, function(namespaces) {
|
||||
if (isFilter) {
|
||||
const anyNamespace = {
|
||||
text: 'Any namespace',
|
||||
id: null
|
||||
};
|
||||
namespaces.unshift(anyNamespace);
|
||||
namespaces.splice(1, 0, 'divider');
|
||||
}
|
||||
},
|
||||
data: function(term, dataCallback) {
|
||||
return Api.namespaces(term, function(namespaces) {
|
||||
var anyNamespace;
|
||||
if (showAny) {
|
||||
anyNamespace = {
|
||||
text: 'Any namespace',
|
||||
id: null
|
||||
};
|
||||
namespaces.unshift(anyNamespace);
|
||||
namespaces.splice(1, 0, 'divider');
|
||||
}
|
||||
return dataCallback(namespaces);
|
||||
});
|
||||
},
|
||||
text: function(namespace) {
|
||||
if (namespace.id == null) {
|
||||
return namespace.text;
|
||||
} else {
|
||||
return namespace.kind + ": " + namespace.full_path;
|
||||
}
|
||||
},
|
||||
renderRow: this.renderRow,
|
||||
clicked: this.onSelectItem
|
||||
});
|
||||
}
|
||||
|
||||
NamespaceSelect.prototype.onSelectItem = function(options) {
|
||||
const { e } = options;
|
||||
return e.preventDefault();
|
||||
};
|
||||
|
||||
return NamespaceSelect;
|
||||
})();
|
||||
|
||||
window.NamespaceSelects = (function() {
|
||||
function NamespaceSelects(opts) {
|
||||
var ref;
|
||||
if (opts == null) {
|
||||
opts = {};
|
||||
}
|
||||
this.$dropdowns = (ref = opts.$dropdowns) != null ? ref : $('.js-namespace-select');
|
||||
this.$dropdowns.each(function(i, dropdown) {
|
||||
var $dropdown;
|
||||
$dropdown = $(dropdown);
|
||||
return new window.NamespaceSelect({
|
||||
dropdown: $dropdown
|
||||
return dataCallback(namespaces);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return NamespaceSelects;
|
||||
})();
|
||||
}).call(window);
|
||||
},
|
||||
text: function(namespace) {
|
||||
if (namespace.id == null) {
|
||||
return namespace.text;
|
||||
} else {
|
||||
return namespace.kind + ": " + namespace.full_path;
|
||||
}
|
||||
},
|
||||
renderRow: this.renderRow,
|
||||
clicked(options) {
|
||||
if (!isFilter) {
|
||||
const { e } = options;
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
url(namespace) {
|
||||
return gl.utils.mergeUrlParams({ [fieldName]: namespace.id }, window.location.href);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
= hidden_field_tag :namespace_id, params[:namespace_id]
|
||||
- namespace = Namespace.find(params[:namespace_id])
|
||||
- toggle_text = "#{namespace.kind}: #{namespace.full_path}"
|
||||
= dropdown_toggle(toggle_text, { toggle: 'dropdown' }, { toggle_class: 'js-namespace-select large' })
|
||||
= dropdown_toggle(toggle_text, { toggle: 'dropdown', is_filter: 'true' }, { toggle_class: 'js-namespace-select large' })
|
||||
.dropdown-menu.dropdown-select.dropdown-menu-align-right
|
||||
= dropdown_title('Namespaces')
|
||||
= dropdown_filter("Search for Namespace")
|
||||
|
|
|
@ -115,7 +115,7 @@
|
|||
= f.label :new_namespace_id, "Namespace", class: 'control-label'
|
||||
.col-sm-10
|
||||
.dropdown
|
||||
= dropdown_toggle('Search for Namespace', { toggle: 'dropdown', field_name: 'new_namespace_id', show_any: 'false' }, { toggle_class: 'js-namespace-select large' })
|
||||
= dropdown_toggle('Search for Namespace', { toggle: 'dropdown', field_name: 'new_namespace_id' }, { toggle_class: 'js-namespace-select large' })
|
||||
.dropdown-menu.dropdown-select
|
||||
= dropdown_title('Namespaces')
|
||||
= dropdown_filter("Search for Namespace")
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Make NamespaceSelect change URL when filtering
|
||||
merge_request: 14888
|
||||
author:
|
||||
type: fixed
|
65
spec/javascripts/namespace_select_spec.js
Normal file
65
spec/javascripts/namespace_select_spec.js
Normal file
|
@ -0,0 +1,65 @@
|
|||
import NamespaceSelect from '~/namespace_select';
|
||||
|
||||
describe('NamespaceSelect', () => {
|
||||
beforeEach(() => {
|
||||
spyOn($.fn, 'glDropdown');
|
||||
});
|
||||
|
||||
it('initializes glDropdown', () => {
|
||||
const dropdown = document.createElement('div');
|
||||
|
||||
// eslint-disable-next-line no-new
|
||||
new NamespaceSelect({ dropdown });
|
||||
|
||||
expect($.fn.glDropdown).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
describe('as input', () => {
|
||||
let glDropdownOptions;
|
||||
|
||||
beforeEach(() => {
|
||||
const dropdown = document.createElement('div');
|
||||
// eslint-disable-next-line no-new
|
||||
new NamespaceSelect({ dropdown });
|
||||
glDropdownOptions = $.fn.glDropdown.calls.argsFor(0)[0];
|
||||
});
|
||||
|
||||
it('prevents click events', () => {
|
||||
const dummyEvent = new Event('dummy');
|
||||
spyOn(dummyEvent, 'preventDefault');
|
||||
|
||||
glDropdownOptions.clicked({ e: dummyEvent });
|
||||
|
||||
expect(dummyEvent.preventDefault).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('as filter', () => {
|
||||
let glDropdownOptions;
|
||||
|
||||
beforeEach(() => {
|
||||
const dropdown = document.createElement('div');
|
||||
dropdown.dataset.isFilter = 'true';
|
||||
// eslint-disable-next-line no-new
|
||||
new NamespaceSelect({ dropdown });
|
||||
glDropdownOptions = $.fn.glDropdown.calls.argsFor(0)[0];
|
||||
});
|
||||
|
||||
it('does not prevent click events', () => {
|
||||
const dummyEvent = new Event('dummy');
|
||||
spyOn(dummyEvent, 'preventDefault');
|
||||
|
||||
glDropdownOptions.clicked({ e: dummyEvent });
|
||||
|
||||
expect(dummyEvent.preventDefault).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('sets URL of dropdown items', () => {
|
||||
const dummyNamespace = { id: 'eal' };
|
||||
|
||||
const itemUrl = glDropdownOptions.url(dummyNamespace);
|
||||
|
||||
expect(itemUrl).toContain(`namespace_id=${dummyNamespace.id}`);
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue