Refs dropdown is now loaded async

app/assets/javascripts/gl_dropdown.js.coffee

@@ -58,7 +58,7 @@ class GitLabDropdownFilter
   filter: (search_text) ->
     data = @options.data()
-    if data?
+    if data? and not @options.filterByText
       results = data
       if search_text isnt ''
@@ -102,10 +102,11 @@ class GitLabDropdownFilter
           $el = $(@)
           matches = fuzzaldrinPlus.match($el.text().trim(), search_text)
-          if matches.length
-            $el.show()
-          else
-            $el.hide()
+          if $el.is(':not(.dropdown-header)')
+            if matches.length
+              $el.show()
+            else
+              $el.hide()
       else
         elements.show()
@@ -191,6 +192,7 @@ class GitLabDropdown
     if @options.filterable
       @filter = new GitLabDropdownFilter @filterInput,
         filterInputBlur: @filterInputBlur
+        filterByText: @options.filterByText
         remote: @options.filterRemote
         query: @options.data
         keys: searchFields

app/assets/javascripts/project.js.coffee

@@ -19,6 +19,7 @@ class @Project
       $('.clone').text(url)
     # Ref switcher
+    @initRefSwitcher()
     $('.project-refs-select').on 'change', ->
       $(@).parents('form').submit()
@@ -50,3 +51,37 @@ class @Project
   changeProject: (url) ->
     window.location = url
+
+  initRefSwitcher: ->
+    $('.js-project-refs-dropdown').each ->
+      $dropdown = $(@)
+      selected = $dropdown.data('selected')
+
+      $dropdown.glDropdown(
+        data: (term, callback) ->
+          $.ajax(
+            url: $dropdown.data('refs-url')
+          ).done (refs) ->
+            callback(refs)
+        selectable: true
+        filterable: true
+        filterByText: true
+        fieldName: 'ref'
+        renderRow: (ref) ->
+          if ref.header?
+            "<li class='dropdown-header'>#{ref.header}</li>"
+          else
+            isActiveClass = if ref is selected then 'is-active' else ''
+
+            "<li>
+              <a href='#' data-ref='#{ref}' class='#{isActiveClass}'>
+                #{ref}
+              </a>
+            </li>"
+        id: (obj, $el) ->
+          $el.data('ref')
+        toggleLabel: (obj, $el) ->
+          $el.text().trim()
+        clicked: (e) ->
+          $dropdown.closest('form').submit()
+      )

app/assets/stylesheets/framework/selects.scss

@@ -165,11 +165,6 @@
   background-size: 16px 16px !important;
 }
-/** Branch/tag selector **/
-.project-refs-form .select2-container {
-  width: 160px !important;
-}
-
 .select2-results .select2-no-results,
 .select2-results .select2-searching,
 .select2-results .select2-ajax-error,

app/assets/stylesheets/pages/projects.scss

@@ -616,3 +616,9 @@ pre.light-well {
     color: $gl-text-green;
   }
 }
+
+.project-refs-form {
+  .dropdown-menu {
+    width: 300px;
+  }
+}

app/controllers/projects_controller.rb

@@ -251,6 +251,22 @@ class ProjectsController < Projects::ApplicationController
     }
   end
+  def refs
+    repository = @project.repository
+
+    options = {
+      'Branches' => repository.branch_names,
+      'Tags' => VersionSorter.rsort(repository.tag_names)
+    }
+
+    # If reference is commit id - we should add it to branch/tag selectbox
+    if @ref && !options.flatten.include?(@ref) && @ref =~ /\A[0-9a-zA-Z]{6,52}\z/
+      options << {'Commits' => @ref}
+    end
+
+    render json: options.to_json
+  end
+
   private
   def determine_layout

app/views/shared/_ref_switcher.html.haml

 = form_tag switch_namespace_project_refs_path(@project.namespace, @project), method: :get, class: "project-refs-form" do
-  = select_tag "ref", grouped_options_refs, class: "project-refs-select select2 select2-sm"
   = hidden_field_tag :destination, destination
   - if defined?(path)
     = hidden_field_tag :path, path
   - @options && @options.each do |key, value|
     = hidden_field_tag key, value, id: nil
+  .dropdown
+    = dropdown_toggle @ref || @project.default_branch, { toggle: "dropdown", selected: @ref || @project.default_branch, refs_url: refs_namespace_project_path(@project.namespace, @project) }, { toggle_class: "js-project-refs-dropdown" }
+    .dropdown-menu.dropdown-menu-selectable
+      = dropdown_title "Switch branch/tag"
+      = dropdown_filter "Search branches and tags"
+      = dropdown_content
+      = dropdown_loading
+    -# = select_tag "ref", grouped_options_refs, class: "project-refs-select select2 select2-sm"

config/routes.rb

@@ -479,6 +479,7 @@ Rails.application.routes.draw do
         get :download_export
         get :autocomplete_sources
         get :activity
+        get :refs
       end
       scope module: :projects do