Commit 7e5e6823 authored by Phil Hughes's avatar Phil Hughes

Merge branch '38869-groups-select' into 'master'

Remove groups_select from global namespace & simplifies the code

See merge request gitlab-org/gitlab-ce!15008
parents a1aa4f00 fed51d1e
...@@ -13,7 +13,7 @@ import GroupLabelSubscription from './group_label_subscription'; ...@@ -13,7 +13,7 @@ import GroupLabelSubscription from './group_label_subscription';
/* global LineHighlighter */ /* global LineHighlighter */
import BuildArtifacts from './build_artifacts'; import BuildArtifacts from './build_artifacts';
import CILintEditor from './ci_lint_editor'; import CILintEditor from './ci_lint_editor';
/* global GroupsSelect */ import groupsSelect from './groups_select';
/* global Search */ /* global Search */
/* global Admin */ /* global Admin */
/* global NamespaceSelects */ /* global NamespaceSelects */
...@@ -414,7 +414,7 @@ import Diff from './diff'; ...@@ -414,7 +414,7 @@ import Diff from './diff';
break; break;
case 'projects:project_members:index': case 'projects:project_members:index':
memberExpirationDate('.js-access-expiration-date-groups'); memberExpirationDate('.js-access-expiration-date-groups');
new GroupsSelect(); groupsSelect();
memberExpirationDate(); memberExpirationDate();
new Members(); new Members();
new UsersSelect(); new UsersSelect();
......
/* eslint-disable func-names, space-before-function-paren, no-var, wrap-iife, one-var,
camelcase, one-var-declaration-per-line, quotes, object-shorthand,
prefer-arrow-callback, comma-dangle, consistent-return, yoda,
prefer-rest-params, prefer-spread, no-unused-vars, prefer-template,
promise/catch-or-return */
import Api from './api'; import Api from './api';
import { normalizeCRLFHeaders } from './lib/utils/common_utils'; import { normalizeCRLFHeaders } from './lib/utils/common_utils';
var slice = [].slice; export default function groupsSelect() {
// Needs to be accessible in rspec
window.GROUP_SELECT_PER_PAGE = 20;
$('.ajax-groups-select').each(function setAjaxGroupsSelect2() {
const $select = $(this);
const allAvailable = $select.data('all-available');
const skipGroups = $select.data('skip-groups') || [];
$select.select2({
placeholder: 'Search for a group',
multiple: $select.hasClass('multiselect'),
minimumInputLength: 0,
ajax: {
url: Api.buildUrl(Api.groupsPath),
dataType: 'json',
quietMillis: 250,
transport(params) {
return $.ajax(params)
.then((data, status, xhr) => {
const results = data || [];
window.GroupsSelect = (function() { const headers = normalizeCRLFHeaders(xhr.getAllResponseHeaders());
function GroupsSelect() { const currentPage = parseInt(headers['X-PAGE'], 10) || 0;
$('.ajax-groups-select').each((function(_this) { const totalPages = parseInt(headers['X-TOTAL-PAGES'], 10) || 0;
const self = _this; const more = currentPage < totalPages;
return function(i, select) {
var all_available, skip_groups;
const $select = $(select);
all_available = $select.data('all-available');
skip_groups = $select.data('skip-groups') || [];
$select.select2({
placeholder: "Search for a group",
multiple: $select.hasClass('multiselect'),
minimumInputLength: 0,
ajax: {
url: Api.buildUrl(Api.groupsPath),
dataType: 'json',
quietMillis: 250,
transport: function (params) {
$.ajax(params).then((data, status, xhr) => {
const results = data || [];
const headers = normalizeCRLFHeaders(xhr.getAllResponseHeaders());
const currentPage = parseInt(headers['X-PAGE'], 10) || 0;
const totalPages = parseInt(headers['X-TOTAL-PAGES'], 10) || 0;
const more = currentPage < totalPages;
return {
results,
pagination: {
more,
},
};
}).then(params.success).fail(params.error);
},
data: function (search, page) {
return {
search,
page,
per_page: GroupsSelect.PER_PAGE,
all_available,
};
},
results: function (data, page) {
if (data.length) return { results: [] };
const groups = data.length ? data : data.results || [];
const more = data.pagination ? data.pagination.more : false;
const results = groups.filter(group => skip_groups.indexOf(group.id) === -1);
return { return {
results, results,
page, pagination: {
more, more,
},
}; };
}, })
}, .then(params.success)
initSelection: function(element, callback) { .fail(params.error);
var id; },
id = $(element).val(); data(search, page) {
if (id !== "") { return {
return Api.group(id, callback); search,
} page,
}, per_page: window.GROUP_SELECT_PER_PAGE,
formatResult: function() { all_available: allAvailable,
var args; };
args = 1 <= arguments.length ? slice.call(arguments, 0) : []; },
return self.formatResult.apply(self, args); results(data, page) {
}, if (data.length) return { results: [] };
formatSelection: function() {
var args;
args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
return self.formatSelection.apply(self, args);
},
dropdownCssClass: "ajax-groups-dropdown select2-infinite",
// we do not want to escape markup since we are displaying html in results
escapeMarkup: function(m) {
return m;
}
});
self.dropdown = document.querySelector('.select2-infinite .select2-results');
$select.on('select2-loaded', self.forceOverflow.bind(self));
};
})(this));
}
GroupsSelect.prototype.formatResult = function(group) {
var avatar;
if (group.avatar_url) {
avatar = group.avatar_url;
} else {
avatar = gon.default_avatar_url;
}
return "<div class='group-result'> <div class='group-name'>" + group.full_name + "</div> <div class='group-path'>" + group.full_path + "</div> </div>";
};
GroupsSelect.prototype.formatSelection = function(group) {
return group.full_name;
};
GroupsSelect.prototype.forceOverflow = function (e) { const groups = data.length ? data : data.results || [];
this.dropdown.style.height = `${Math.floor(this.dropdown.scrollHeight)}px`; const more = data.pagination ? data.pagination.more : false;
}; const results = groups.filter(group => skipGroups.indexOf(group.id) === -1);
GroupsSelect.PER_PAGE = 20; return {
results,
page,
more,
};
},
},
// eslint-disable-next-line consistent-return
initSelection(element, callback) {
const id = $(element).val();
if (id !== '') {
return Api.group(id, callback);
}
},
formatResult(object) {
return `<div class='group-result'> <div class='group-name'>${object.full_name}</div> <div class='group-path'>${object.full_path}</div> </div>`;
},
formatSelection(object) {
return object.full_name;
},
dropdownCssClass: 'ajax-groups-dropdown select2-infinite',
// we do not want to escape markup since we are displaying html in results
escapeMarkup(m) {
return m;
},
});
return GroupsSelect; $select.on('select2-loaded', () => {
})(); const dropdown = document.querySelector('.select2-infinite .select2-results');
dropdown.style.height = `${Math.floor(dropdown.scrollHeight)}px`;
});
});
}
...@@ -55,7 +55,6 @@ import './gl_dropdown'; ...@@ -55,7 +55,6 @@ import './gl_dropdown';
import './gl_field_error'; import './gl_field_error';
import './gl_field_errors'; import './gl_field_errors';
import './gl_form'; import './gl_form';
import './groups_select';
import './header'; import './header';
import './importer_status'; import './importer_status';
import './issuable_index'; import './issuable_index';
......
...@@ -149,7 +149,7 @@ feature 'Project > Members > Share with Group', :js do ...@@ -149,7 +149,7 @@ feature 'Project > Members > Share with Group', :js do
create(:group).add_owner(master) create(:group).add_owner(master)
visit project_settings_members_path(project) visit project_settings_members_path(project)
execute_script 'GroupsSelect.PER_PAGE = 1;' execute_script 'GROUP_SELECT_PER_PAGE = 1;'
open_select2 '#link_group_id' open_select2 '#link_group_id'
end end
......
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