Commit f1f0722f authored by Simon Knox's avatar Simon Knox Committed by Jose Ivan Vargas

add approvers count to heading. change select2 style to match droplab

fix test and lint
parent 0a63d613
......@@ -25,7 +25,22 @@ export default class ApproversSelect {
},
formatResult: ApproversSelect.formatResult,
formatSelection: ApproversSelect.formatSelection,
dropdownCssClass: 'ajax-groups-dropdown',
dropdownCss() {
const $input = $('.js-select-user-and-group .select2-input');
const offset = $input.offset();
const inputRight = offset.left + $input.outerWidth();
const $dropdown = $('.select2-drop-active');
let left = offset.left;
if ($dropdown.outerWidth() > $input.outerWidth()) {
left = `${inputRight - $dropdown.width()}px`;
}
return {
left,
right: 'auto',
width: 'auto',
};
},
})
.on('change', this.handleSelectChange);
}
......@@ -105,11 +120,13 @@ export default class ApproversSelect {
return `
<div class="user-result">
<div class="user-image">
<img class="avatar s24" src="${avatar}">
<img class="avatar s40" src="${avatar}">
</div>
<div class="user-info">
<div class="user-name">${name}</div>
<div class="user-username">@${username}</div>
</div>
</div>
`;
}
......@@ -174,6 +191,6 @@ export default class ApproversSelect {
}
static updateApproverList(html) {
$('.approver-list').html($(html).find('.approver-list').html());
$('.js-current-approvers').html($(html).find('.js-current-approvers').html());
}
}
......@@ -43,6 +43,7 @@ import BindInOut from './behaviors/bind_in_out';
import GroupName from './group_name';
import GroupsList from './groups_list';
import ProjectsList from './projects_list';
import ApproversSelect from './approvers_select';
import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
import BlobForkSuggestion from './blob/blob_fork_suggestion';
......@@ -431,6 +432,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
case 'edit':
shortcut_handler = new ShortcutsNavigation();
new ProjectNew();
new ApproversSelect();
break;
case 'new':
new ProjectNew();
......
/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-unused-vars, one-var, no-underscore-dangle, prefer-template, no-else-return, prefer-arrow-callback, max-len */
/* global Api */
import ApproversSelect from './approvers_select';
(function() {
this.ProjectNew = (function() {
......@@ -22,8 +19,6 @@ import ApproversSelect from './approvers_select';
this.toggleSettings();
this.addEvents();
this.toggleRepoVisibility();
this.approversSelect = new ApproversSelect();
}
ProjectNew.prototype.bindEvents = function() {
......
......@@ -388,7 +388,7 @@ import Vue from 'vue';
} else {
avatar = gon.default_avatar_url;
}
return "<div class='user-result " + (!user.username ? 'no-username' : void 0) + "'> <div class='user-image'><img class='avatar s24' src='" + avatar + "'></div> <div class='user-name'>" + user.name + "</div> <div class='user-username'>" + (user.username || "") + "</div> </div>";
return "<div class='user-result " + (!user.username ? 'no-username' : void 0) + "'> <div class='user-image'><img class='avatar s40' src='" + avatar + "'></div> <div><div class='user-name'>" + user.name + "</div> <div class='user-username'>" + (user.username || "") + "</div> </div> </div>";
};
UsersSelect.prototype.formatSelection = function(user) {
......
......@@ -47,9 +47,10 @@
}
.select2-drop {
box-shadow: $select2-drop-shadow1 0 0 1px 0, $select2-drop-shadow2 0 2px 18px 0;
border-radius: $border-radius-default;
border: none;
background-color: $white-light;
border: 1px solid $dropdown-border-color;
border-radius: $border-radius-base;
box-shadow: 0 2px 4px $dropdown-shadow-color;
min-width: 175px;
}
......@@ -63,7 +64,7 @@
}
.select2-highlighted {
background: $gl-link-color !important;
background: $dropdown-hover-color !important;
}
.select2-results li.select2-result-with-children > .select2-result-label {
......@@ -124,8 +125,8 @@
&.select2-container-active .select2-choices,
&.select2-dropdown-open .select2-choices {
border-color: $border-white-normal;
box-shadow: $gl-btn-active-gradient;
border-color: $dropdown-input-focus-border;
box-shadow: 0 0 4px $search-input-focus-shadow-color;
}
}
......@@ -237,6 +238,7 @@
.user-result {
min-height: 24px;
display: flex;
.user-image {
float: left;
......
......@@ -48,7 +48,7 @@
.load-wrapper {
position: absolute;
background: rgba(33, 33, 33, 0.2);
background: $black-transparent;
width: 100%;
height: 100%;
display: flex;
......
......@@ -64,11 +64,18 @@
.help-block
Add an approver or group suggestion for each merge request
.panel.panel-default.prepend-top-10
.panel.panel-default.prepend-top-10.js-current-approvers
.panel-heading
Approvers
%span.badge
-# TODO: badge with project.approver_group_ids.count + project.approver_ids.count
- ids = []
- project.approvers.each do |user|
- ids << user.user_id
- project.approver_groups.each do |group|
- group.users.each do |user|
- unless ids.include?(user.id)
- ids << user.id
= ids.count
%ul.well-list.approver-list
.load-wrapper.hidden
= icon('spinner spin', class: 'approver-list-loader')
......
......@@ -5,7 +5,7 @@ describe 'Project settings > [EE] Merge Requests', feature: true, js: true do
include WaitForAjax
let(:user) { create(:user) }
let(:project) { create(:empty_project) }
let(:project) { create(:empty_project, approvals_before_merge: 1) }
let(:group) { create(:group) }
let(:approver) { create(:user) }
......@@ -19,17 +19,17 @@ describe 'Project settings > [EE] Merge Requests', feature: true, js: true do
scenario 'adds approver group' do
visit edit_project_path(project)
find('#s2id_project_approver_group_ids .select2-input').click
find('#s2id_approver_user_and_group_ids .select2-input').click
wait_for_ajax
expect(find('.select2-results')).to have_content(group.name)
find('.select2-results').click
find('.select2-results .group-result').click
click_button 'Save changes'
expect(page).to have_css('.approver-list li.approver-group', count: 1)
expect(page).to have_css('.js-current-approvers li.approver-group', count: 1)
end
context 'with an approver group' do
......@@ -40,13 +40,13 @@ describe 'Project settings > [EE] Merge Requests', feature: true, js: true do
scenario 'removes approver group' do
visit edit_project_path(project)
expect(find('.approver-list')).to have_content(group.name)
expect(find('.js-current-approvers')).to have_content(group.name)
within('.approver-list') do
within('.js-current-approvers') do
click_on "Remove"
end
expect(find('.approver-list')).not_to have_content(group.name)
expect(find('.js-current-approvers')).not_to have_content(group.name)
end
end
end
import ApproversSelect from '~/approvers_select';
require('~/project_new');
describe('ApproversSelect', function () {
const projectSettingsTemplate = 'projects/edit.html.raw';
......@@ -7,7 +7,7 @@ describe('ApproversSelect', function () {
beforeEach(() => {
loadFixtures(projectSettingsTemplate);
this.$requireApprovalsToggle = $('.js-require-approvals-toggle');
this.project = new ApproversSelect();
this.project = new window.ProjectNew();
});
it('shows approver settings if enabled', () => {
......@@ -15,7 +15,7 @@ describe('ApproversSelect', function () {
expect($('.nested-settings').hasClass('hidden')).toBe(true);
this.$requireApprovalsToggle.click();
expect($('.nested-settings').hasClass('hidden')).toBe(false);
expect($('.js-current-approvers').hasClass('hidden')).toBe(false);
});
it('hides approver settings if disabled', () => {
......
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