1 files changed, 63 insertions, 15 deletions

diff --git a/app/assets/javascripts/groups_select.js b/app/assets/javascripts/groups_select.js
index e5dfa30edab..10363c16bae 100644
--- a/app/assets/javascripts/groups_select.js
+++ b/app/assets/javascripts/groups_select.js
@@ -6,23 +6,60 @@ var slice = [].slice;
 window.GroupsSelect = (function() {
   function GroupsSelect() {
     $('.ajax-groups-select').each((function(_this) {
+      const self = _this;
+
       return function(i, select) {
         var all_available, skip_groups;
-        all_available = $(select).data('all-available');
-        skip_groups = $(select).data('skip-groups') || [];
-        return $(select).select2({
+        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'),
+          multiple: $select.hasClass('multiselect'),
           minimumInputLength: 0,
-          query: function(query) {
-            var options = { all_available: all_available, skip_groups: skip_groups };
-            return Api.groups(query.term, options, function(groups) {
-              var data;
-              data = {
-                results: groups
+          ajax: {
+            url: Api.buildUrl(Api.groupsPath),
+            dataType: 'json',
+            quietMillis: 250,
+            transport: function (params) {
+              $.ajax(params).then((data, status, xhr) => {
+                const results = data || [];
+
+                const headers = gl.utils.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 {
+                results,
+                page,
+                more,
               };
-              return query.callback(data);
-            });
+            },
           },
           initSelection: function(element, callback) {
             var id;
@@ -34,19 +71,23 @@ window.GroupsSelect = (function() {
           formatResult: function() {
             var args;
             args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-            return _this.formatResult.apply(_this, args);
+            return self.formatResult.apply(self, args);
           },
           formatSelection: function() {
             var args;
             args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-            return _this.formatSelection.apply(_this, args);
+            return self.formatSelection.apply(self, args);
           },
-          dropdownCssClass: "ajax-groups-dropdown",
+          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));
   }
@@ -65,5 +106,12 @@ window.GroupsSelect = (function() {
     return group.full_name;
   };
 
+  GroupsSelect.prototype.forceOverflow = function (e) {
+    const itemHeight = this.dropdown.querySelector('.select2-result:first-child').clientHeight;
+    this.dropdown.style.height = `${Math.floor(this.dropdown.scrollHeight - (itemHeight * 0.9))}px`;
+  };
+
+  GroupsSelect.PER_PAGE = 20;
+
   return GroupsSelect;
 })();