filter already-selected users and groups from the dropdown

app/assets/javascripts/project_new.js

@@ -35,11 +35,31 @@
         multiple: true,
         minimumInputLength: 0,
         query(query) {
-          const groupsApi = Api.groups(query.term, {}, function(groups) {
+          const existingGroupApprovers = [].map.call(
+            document.querySelectorAll('.js-approver-group'),
+            item => parseInt(item.getAttribute('data-id'), 10),
+          );
+          const selectedGroupApprovers = $('[name="project[approver_group_ids]"]').val()
+            .split(',')
+            .filter(val => val !== '');
+          const groupOptions = {
+            skip_groups: [...existingGroupApprovers, ...selectedGroupApprovers],
+          };
+          const groupsApi = Api.groups(query.term, groupOptions, function(groups) {
             return groups;
           });
 
-          const usersApi = Api.users(query.term, {}, function(groups) {
+          const existingApprovers = [].map.call(
+            document.querySelectorAll('.js-approver'),
+            item => parseInt(item.getAttribute('data-id'), 10),
+          );
+          const selectedApprovers = $('[name="project[approver_ids]"]').val()
+            .split(',')
+            .filter(id => id !== '');
+          const userOptions = {
+            skip_users: [...existingApprovers, ...selectedApprovers],
+          };
+          const usersApi = Api.users(query.term, userOptions, function(groups) {
             return groups;
           });
 

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

@@ -72,13 +72,13 @@
         .load-wrapper.hidden
           = icon('spinner spin', class: 'approver-list-loader')
         - project.approvers.each do |approver|
-          %li.approver.settings-flex-row
+          %li.approver.settings-flex-row.js-approver{ data: { id: approver.user_id } }
             = link_to approver.user.name, approver.user
             .pull-right
               %button{ href: namespace_project_approver_path(project.namespace, project, approver), data: { confirm: "Are you sure you want to remove approver #{approver.user.name}"}, class: "btn btn-remove js-approver-remove", title: 'Remove approver' }
                 = icon("trash")
         - project.approver_groups.each do |approver_group|
-          %li.approver-group.settings-flex-row
+          %li.approver-group.settings-flex-row.js-approver-group{ data: { id: approver_group.group.id } }
             .span
               %span.light
                 Group: