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

fix test and lint

app/assets/javascripts/approvers_select.js

@@ -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,10 +120,12 @@ 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 class="user-name">${name}</div>
-          <div class="user-username">@${username}</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());
   }
 }

app/assets/javascripts/dispatcher.js

@@ -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();

app/assets/javascripts/project_new.js

 /* 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() {

app/assets/javascripts/users_select.js

@@ -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) {

app/assets/stylesheets/framework/selects.scss

@@ -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;

app/assets/stylesheets/pages/projects.scss

@@ -48,7 +48,7 @@
 
   .load-wrapper {
     position: absolute;
-    background: rgba(33, 33, 33, 0.2);
+    background: $black-transparent;
     width: 100%;
     height: 100%;
     display: flex;

app/views/projects/ee/_merge_request_settings.html.haml

@@ -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')

spec/features/projects/settings/ee/merge_requests_settings_spec.rb

@@ -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

spec/javascripts/approvers_select_spec.js → spec/javascripts/project_new_spec.js

-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', () => {