Commit 8e8ab2f3 authored by Tim Zallmann's avatar Tim Zallmann

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
parents 5c147b6b 3a023c5e
...@@ -16,7 +16,7 @@ import CILintEditor from './ci_lint_editor'; ...@@ -16,7 +16,7 @@ import CILintEditor from './ci_lint_editor';
import groupsSelect from './groups_select'; import groupsSelect from './groups_select';
/* global Search */ /* global Search */
/* global Admin */ /* global Admin */
/* global NamespaceSelects */ import NamespaceSelect from './namespace_select';
/* global NewCommitForm */ /* global NewCommitForm */
/* global NewBranchForm */ /* global NewBranchForm */
/* global Project */ /* global Project */
...@@ -575,7 +575,8 @@ import Diff from './diff'; ...@@ -575,7 +575,8 @@ import Diff from './diff';
new UsersSelect(); new UsersSelect();
break; break;
case 'projects': case 'projects':
new NamespaceSelects(); document.querySelectorAll('.js-namespace-select')
.forEach(dropdown => new NamespaceSelect({ dropdown }));
break; break;
case 'labels': case 'labels':
switch (path[2]) { switch (path[2]) {
......
/* 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 Api from './api';
import './lib/utils/url_utility';
(function() { export default class NamespaceSelect {
window.NamespaceSelect = (function() { constructor(opts) {
function NamespaceSelect(opts) { const isFilter = opts.dropdown.dataset.isFilter === 'true';
this.onSelectItem = this.onSelectItem.bind(this); const fieldName = opts.dropdown.dataset.fieldName || 'namespace_id';
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;
}
},
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; $(opts.dropdown).glDropdown({
})(); filterable: true,
selectable: true,
window.NamespaceSelects = (function() { filterRemote: true,
function NamespaceSelects(opts) { search: {
var ref; fields: ['path']
if (opts == null) { },
opts = {}; fieldName: fieldName,
} toggleLabel: function(selected) {
this.$dropdowns = (ref = opts.$dropdowns) != null ? ref : $('.js-namespace-select'); if (selected.id == null) {
this.$dropdowns.each(function(i, dropdown) { return selected.text;
var $dropdown; } else {
$dropdown = $(dropdown); return selected.kind + ": " + selected.full_path;
return new window.NamespaceSelect({ }
dropdown: $dropdown },
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');
}
return dataCallback(namespaces);
}); });
}); },
} text: function(namespace) {
if (namespace.id == null) {
return NamespaceSelects; return namespace.text;
})(); } else {
}).call(window); 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 @@ ...@@ -14,7 +14,7 @@
= hidden_field_tag :namespace_id, params[:namespace_id] = hidden_field_tag :namespace_id, params[:namespace_id]
- namespace = Namespace.find(params[:namespace_id]) - namespace = Namespace.find(params[:namespace_id])
- toggle_text = "#{namespace.kind}: #{namespace.full_path}" - 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-menu.dropdown-select.dropdown-menu-align-right
= dropdown_title('Namespaces') = dropdown_title('Namespaces')
= dropdown_filter("Search for Namespace") = dropdown_filter("Search for Namespace")
......
...@@ -115,7 +115,7 @@ ...@@ -115,7 +115,7 @@
= f.label :new_namespace_id, "Namespace", class: 'control-label' = f.label :new_namespace_id, "Namespace", class: 'control-label'
.col-sm-10 .col-sm-10
.dropdown .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-menu.dropdown-select
= dropdown_title('Namespaces') = dropdown_title('Namespaces')
= dropdown_filter("Search for Namespace") = dropdown_filter("Search for Namespace")
......
---
title: Make NamespaceSelect change URL when filtering
merge_request: 14888
author:
type: fixed
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}`);
});
});
});
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