Merge branch 'ref-switcher-perf' into 'master'

Improved ref switcher dropdown performance

Closes #18202

See merge request !7239

app/assets/javascripts/project.js

@@ -58,6 +58,11 @@
     };
 
     Project.prototype.initRefSwitcher = function() {
+      var refListItem = document.createElement('li'),
+          refLink = document.createElement('a');
+
+      refLink.href = '#';
+
       return $('.js-project-refs-dropdown').each(function() {
         var $dropdown, selected;
         $dropdown = $(this);
@@ -67,7 +72,8 @@
             return $.ajax({
               url: $dropdown.data('refs-url'),
               data: {
-                ref: $dropdown.data('ref')
+                ref: $dropdown.data('ref'),
+                search: term
               },
               dataType: "json"
             }).done(function(refs) {
@@ -76,16 +82,29 @@
           },
           selectable: true,
           filterable: true,
+          filterRemote: true,
           filterByText: true,
           fieldName: $dropdown.data('field-name'),
           renderRow: function(ref) {
-            var link;
+            var li = refListItem.cloneNode(false);
+
             if (ref.header != null) {
-              return $('<li />').addClass('dropdown-header').text(ref.header);
+              li.className = 'dropdown-header';
+              li.textContent = ref.header;
             } else {
-              link = $('<a />').attr('href', '#').addClass(ref === selected ? 'is-active' : '').text(ref).attr('data-ref', ref);
-              return $('<li />').append(link);
+              var link = refLink.cloneNode(false);
+
+              if (ref === selected) {
+                link.className = 'is-active';
+              }
+
+              link.textContent = ref;
+              link.dataset.ref = ref;
+
+              li.appendChild(link);
             }
+
+            return li;
           },
           id: function(obj, $el) {
             return $el.attr('data-ref');

app/assets/javascripts/protected_branches/protected_branch_dropdown.js.es6

@@ -49,7 +49,7 @@ class ProtectedBranchDropdown {
   onClickCreateWildcard() {
     // Refresh the dropdown's data, which ends up calling `getProtectedBranches`
     this.$dropdown.data('glDropdown').remote.execute();
-    this.$dropdown.data('glDropdown').selectRowAtIndex(0);
+    this.$dropdown.data('glDropdown').selectRowAtIndex();
   }
 
   getProtectedBranches(term, callback) {

app/controllers/projects_controller.rb

@@ -231,12 +231,16 @@ class ProjectsController < Projects::ApplicationController
   end
 
   def refs
+    branches = BranchesFinder.new(@repository, params).execute.map(&:name)
+
     options = {
-      'Branches' => @repository.branch_names,
+      'Branches' => branches.take(100),
     }
 
     unless @repository.tag_count.zero?
-      options['Tags'] = VersionSorter.rsort(@repository.tag_names)
+      tags = TagsFinder.new(@repository, params).execute.map(&:name)
+
+      options['Tags'] = tags.take(100)
     end
 
     # If reference is commit id - we should add it to branch/tag selectbox

spec/features/projects/ref_switcher_spec.rb

@@ -17,14 +17,15 @@ feature 'Ref switcher', feature: true, js: true do
 
     page.within '.project-refs-form' do
       input = find('input[type="search"]')
-      input.set 'expand'
+      input.set 'binary'
+      wait_for_ajax
 
       input.native.send_keys :down
       input.native.send_keys :down
       input.native.send_keys :enter
     end
 
-    expect(page).to have_title 'expand-collapse-files'
+    expect(page).to have_title 'binary-encoding'
   end
 
   it "user selects ref with special characters" do