Commit 5bb43bb9 authored by Fatih Acet's avatar Fatih Acet

Merge branch 'members-dropdowns' into 'master'

Updated members dropdowns

## What does this MR do?

EE has different dropdowns to allow for group LDAP members to be overridden, this ports the dropdown changes over to reduce conflicts.

## Screenshots (if relevant)

![Screen_Shot_2016-12-07_at_15.28.20](/uploads/6cb6def34015b024dc878aa3b99be4a0/Screen_Shot_2016-12-07_at_15.28.20.png)

See merge request !7974
parents b546fd7b fcf332a4
...@@ -650,6 +650,11 @@ ...@@ -650,6 +650,11 @@
} else if(value) { } else if(value) {
field = this.dropdown.parent().find("input[name='" + fieldName + "'][value='" + value.toString().replace(/'/g, '\\\'') + "']"); field = this.dropdown.parent().find("input[name='" + fieldName + "'][value='" + value.toString().replace(/'/g, '\\\'') + "']");
} }
if (this.options.isSelectable && !this.options.isSelectable(selectedObject, el)) {
return;
}
if (el.hasClass(ACTIVE_CLASS)) { if (el.hasClass(ACTIVE_CLASS)) {
el.removeClass(ACTIVE_CLASS); el.removeClass(ACTIVE_CLASS);
if (field && field.length) { if (field && field.length) {
......
/* eslint-disable */ /* eslint-disable class-methods-use-this */
((w) => { (() => {
w.gl = w.gl || {}; window.gl = window.gl || {};
class Members { class Members {
constructor() { constructor() {
this.addListeners(); this.addListeners();
this.initGLDropdown();
} }
addListeners() { addListeners() {
$('.project_member, .group_member').off('ajax:success').on('ajax:success', this.removeRow); $('.project_member, .group_member').off('ajax:success').on('ajax:success', this.removeRow);
$('.js-member-update-control').off('change').on('change', this.formSubmit); $('.js-member-update-control').off('change').on('change', this.formSubmit.bind(this));
$('.js-edit-member-form').off('ajax:success').on('ajax:success', this.formSuccess); $('.js-edit-member-form').off('ajax:success').on('ajax:success', this.formSuccess.bind(this));
gl.utils.disableButtonIfEmptyField('#user_ids', 'input[name=commit]', 'change'); gl.utils.disableButtonIfEmptyField('#user_ids', 'input[name=commit]', 'change');
} }
initGLDropdown() {
$('.js-member-permissions-dropdown').each((i, btn) => {
const $btn = $(btn);
$btn.glDropdown({
selectable: true,
isSelectable(selected, $el) {
return !$el.hasClass('is-active');
},
fieldName: $btn.data('field-name'),
id(selected, $el) {
return $el.data('id');
},
toggleLabel(selected, $el) {
return $el.text();
},
clicked: (selected, $link) => {
this.formSubmit(null, $link);
},
});
});
}
removeRow(e) { removeRow(e) {
const $target = $(e.target); const $target = $(e.target);
if ($target.hasClass('btn-remove')) { if ($target.hasClass('btn-remove')) {
$target.closest('.member') $target.closest('.member')
.fadeOut(function () { .fadeOut(function fadeOutMemberRow() {
$(this).remove(); $(this).remove();
}); });
} }
} }
formSubmit() { formSubmit(e, $el = null) {
$(this).closest('form').trigger("submit.rails").end().disable(); const $this = e ? $(e.currentTarget) : $el;
const { $toggle, $dateInput } = this.getMemberListItems($this);
$this.closest('form').trigger('submit.rails');
$toggle.disable();
$dateInput.disable();
} }
formSuccess() { formSuccess(e) {
$(this).find('.js-member-update-control').enable(); const { $toggle, $dateInput } = this.getMemberListItems($(e.currentTarget).closest('.member'));
$toggle.enable();
$dateInput.enable();
}
getMemberListItems($el) {
const $memberListItem = $el.is('.member') ? $el : $(`#${$el.data('el-id')}`);
return {
$memberListItem,
$toggle: $memberListItem.find('.dropdown-menu-toggle'),
$dateInput: $memberListItem.find('.js-access-expiration-date'),
};
} }
} }
gl.Members = Members; gl.Members = Members;
})(window); })();
...@@ -42,6 +42,11 @@ ...@@ -42,6 +42,11 @@
border-radius: $border-radius-base; border-radius: $border-radius-base;
white-space: nowrap; white-space: nowrap;
&[disabled] {
background-color: $input-bg-disabled;
cursor: not-allowed;
}
&.no-outline { &.no-outline {
outline: 0; outline: 0;
} }
......
...@@ -54,6 +54,10 @@ ...@@ -54,6 +54,10 @@
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
width: 50%; width: 50%;
} }
.dropdown-menu-toggle {
width: 100%;
}
} }
.member-access-text { .member-access-text {
......
:plain :plain
var $listItem = $('#{escape_javascript(render('shared/members/member', member: @group_member))}'); var $listItem = $('#{escape_javascript(render('shared/members/member', member: @group_member))}');
$("##{dom_id(@group_member)} .list-item-name").replaceWith($listItem.find('.list-item-name')); $("##{dom_id(@group_member)} .list-item-name").replaceWith($listItem.find('.list-item-name'));
gl.utils.localTimeAgo($('.js-timeago'), $("##{dom_id(@group_member)}"));
:plain :plain
var $listItem = $('#{escape_javascript(render('shared/members/group', group_link: @group_link))}'); var $listItem = $('#{escape_javascript(render('shared/members/group', group_link: @group_link))}');
$("#group_member_#{@group_link.id} .list-item-name").replaceWith($listItem.find('.list-item-name')); $("#group_member_#{@group_link.id} .list-item-name").replaceWith($listItem.find('.list-item-name'));
gl.utils.localTimeAgo($('.js-timeago'), $("#group_member_#{@group_link.id}"));
:plain :plain
var $listItem = $('#{escape_javascript(render('shared/members/member', member: @project_member))}'); var $listItem = $('#{escape_javascript(render('shared/members/member', member: @project_member))}');
$("##{dom_id(@project_member)} .list-item-name").replaceWith($listItem.find('.list-item-name')); $("##{dom_id(@project_member)} .list-item-name").replaceWith($listItem.find('.list-item-name'));
gl.utils.localTimeAgo($('.js-timeago'), $("##{dom_id(@project_member)}"));
- group_link = local_assigns[:group_link] - group_link = local_assigns[:group_link]
- group = group_link.group - group = group_link.group
- can_admin_member = can?(current_user, :admin_project_member, @project) - can_admin_member = can?(current_user, :admin_project_member, @project)
%li.member.group_member{ id: "group_member_#{group_link.id}" } - dom_id = "group_member_#{group_link.id}"
%li.member.group_member{ id: dom_id }
%span{ class: "list-item-name" } %span{ class: "list-item-name" }
= image_tag group_icon(group), class: "avatar s40", alt: '' = image_tag group_icon(group), class: "avatar s40", alt: ''
%strong %strong
...@@ -14,7 +15,23 @@ ...@@ -14,7 +15,23 @@
Expires in #{distance_of_time_in_words_to_now(group_link.expires_at)} Expires in #{distance_of_time_in_words_to_now(group_link.expires_at)}
.controls.member-controls .controls.member-controls
= form_tag namespace_project_group_link_path(@project.namespace, @project, group_link), method: :put, remote: true, class: 'form-horizontal js-edit-member-form' do = form_tag namespace_project_group_link_path(@project.namespace, @project, group_link), method: :put, remote: true, class: 'form-horizontal js-edit-member-form' do
= select_tag 'group_link[group_access]', options_for_select(ProjectGroupLink.access_options, group_link.group_access), class: 'form-control member-form-control append-right-5 js-member-update-control', id: "member_access_level_#{group.id}", disabled: !can_admin_member = hidden_field_tag "group_link[group_access]", group_link.group_access
.member-form-control.dropdown.append-right-5
%button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
disabled: !can_admin_member,
data: { toggle: "dropdown", field_name: "group_link[group_access]" } }
%span.dropdown-toggle-text
= group_link.human_access
= icon("chevron-down")
.dropdown-menu.dropdown-select.dropdown-menu-align-right.dropdown-menu-selectable
= dropdown_title("Change permissions")
.dropdown-content
%ul
- Gitlab::Access.options.each do |role, role_id|
%li
= link_to role, "javascript:void(0)",
class: ("is-active" if group_link.group_access == role_id),
data: { id: role_id, el_id: dom_id }
.prepend-left-5.clearable-input.member-form-control .prepend-left-5.clearable-input.member-form-control
= text_field_tag 'group_link[expires_at]', group_link.expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: 'Expiration date', id: "member_expires_at_#{group.id}", disabled: !can_admin_member = text_field_tag 'group_link[expires_at]', group_link.expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: 'Expiration date', id: "member_expires_at_#{group.id}", disabled: !can_admin_member
%i.clear-icon.js-clear-input %i.clear-icon.js-clear-input
......
...@@ -48,9 +48,25 @@ ...@@ -48,9 +48,25 @@
- if show_controls && (member.respond_to?(:group) && @group) || (member.respond_to?(:project) && @project) - if show_controls && (member.respond_to?(:group) && @group) || (member.respond_to?(:project) && @project)
- if user != current_user - if user != current_user
= form_for member, remote: true, html: { class: 'form-horizontal js-edit-member-form' } do |f| = form_for member, remote: true, html: { class: 'form-horizontal js-edit-member-form' } do |f|
= f.select :access_level, options_for_select(member.class.access_level_roles, member.access_level), {}, class: 'form-control member-form-control append-right-5 js-member-update-control', id: "member_access_level_#{member.id}", disabled: !can_admin_member = f.hidden_field :access_level
.member-form-control.dropdown.append-right-5
%button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
disabled: !can_admin_member,
data: { toggle: "dropdown", field_name: "#{f.object_name}[access_level]" } }
%span.dropdown-toggle-text
= member.human_access
= icon("chevron-down")
.dropdown-menu.dropdown-select.dropdown-menu-align-right.dropdown-menu-selectable
= dropdown_title("Change permissions")
.dropdown-content
%ul
- Gitlab::Access.options.each do |role, role_id|
%li
= link_to role, "javascript:void(0)",
class: ("is-active" if member.access_level == role_id),
data: { id: role_id, el_id: dom_id(member) }
.prepend-left-5.clearable-input.member-form-control .prepend-left-5.clearable-input.member-form-control
= f.text_field :expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: 'Expiration date', id: "member_expires_at_#{member.id}", disabled: !can_admin_member = f.text_field :expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: 'Expiration date', id: "member_expires_at_#{member.id}", disabled: !can_admin_member, data: { el_id: dom_id(member) }
%i.clear-icon.js-clear-input %i.clear-icon.js-clear-input
- else - else
%span.member-access-text= member.human_access %span.member-access-text= member.human_access
......
---
title: Updated members dropdowns
merge_request:
author:
...@@ -117,7 +117,12 @@ class Spinach::Features::GroupMembers < Spinach::FeatureSteps ...@@ -117,7 +117,12 @@ class Spinach::Features::GroupMembers < Spinach::FeatureSteps
member = mary_jane_member member = mary_jane_member
page.within "#group_member_#{member.id}" do page.within "#group_member_#{member.id}" do
select 'Developer', from: "member_access_level_#{member.id}" click_button member.human_access
page.within '.dropdown-menu' do
click_link 'Developer'
end
wait_for_ajax wait_for_ajax
end end
end end
......
...@@ -65,7 +65,11 @@ class Spinach::Features::ProjectTeamManagement < Spinach::FeatureSteps ...@@ -65,7 +65,11 @@ class Spinach::Features::ProjectTeamManagement < Spinach::FeatureSteps
user = User.find_by(name: 'Dmitriy') user = User.find_by(name: 'Dmitriy')
project_member = project.project_members.find_by(user_id: user.id) project_member = project.project_members.find_by(user_id: user.id)
page.within "#project_member_#{project_member.id}" do page.within "#project_member_#{project_member.id}" do
select "Reporter", from: "member_access_level_#{project_member.id}" click_button project_member.human_access
page.within '.dropdown-menu' do
click_link 'Reporter'
end
end end
end end
...@@ -144,7 +148,7 @@ class Spinach::Features::ProjectTeamManagement < Spinach::FeatureSteps ...@@ -144,7 +148,7 @@ class Spinach::Features::ProjectTeamManagement < Spinach::FeatureSteps
step 'I should see "Opensource" group user listing' do step 'I should see "Opensource" group user listing' do
page.within '.project-members-groups' do page.within '.project-members-groups' do
expect(page).to have_content('OpenSource') expect(page).to have_content('OpenSource')
expect(find('select').value).to eq('40') expect(first('.group_member')).to have_content('Master')
end end
end end
end end
...@@ -16,12 +16,17 @@ feature 'Projects > Members > Anonymous user sees members', feature: true, js: t ...@@ -16,12 +16,17 @@ feature 'Projects > Members > Anonymous user sees members', feature: true, js: t
end end
it 'updates group access level' do it 'updates group access level' do
select 'Guest', from: "member_access_level_#{group.id}" click_button @group_link.human_access
page.within '.dropdown-menu' do
click_link 'Guest'
end
wait_for_ajax wait_for_ajax
visit namespace_project_project_members_path(project.namespace, project) visit namespace_project_project_members_path(project.namespace, project)
expect(page).to have_select("member_access_level_#{group.id}", selected: 'Guest') expect(first('.group_member')).to have_content('Guest')
end end
it 'updates expiry date' do it 'updates expiry date' do
......
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