Merge branch 'cs-async-branch-dropdown' into 'master'

Load branch dropdowns asynchronously for cherry pick and revert dialogs

## Why was this MR needed and what does it do?

Previously every commit page was loading every branch onto the page twice, once each for the Cherry Pick and Revert modal dialogs. Most of the time they're never used, so that's a bit of a waste.

This loads them asynchronously by modifying the existing ref switcher code to also work for the branch selectors. This is better for performance.

## Are there points in the code the reviewer needs to double check?

Make sure Cherry Picking and Reverting still work (from my tests they seem to be fine).

## What are the relevant issue numbers?

Fixes #20108.

## Screenshots (if relevant)

Before:

![Screen_Shot_2016-08-01_at_4.35.21_PM](/uploads/6b76ea656fd00df52ab56df5309976dc/Screen_Shot_2016-08-01_at_4.35.21_PM.png)

![Screen_Shot_2016-08-01_at_4.35.52_PM](/uploads/d2699a4bfc4ad1a4d414429e7c50e60f/Screen_Shot_2016-08-01_at_4.35.52_PM.png)

After:

![Screen_Shot_2016-08-01_at_4.32.49_PM](/uploads/5faa6494b10dd9ac5e8850763a0c4018/Screen_Shot_2016-08-01_at_4.32.49_PM.png)

![Screen_Shot_2016-08-01_at_4.32.56_PM](/uploads/87c490bb375244e7d72421fd55e13e3f/Screen_Shot_2016-08-01_at_4.32.56_PM.png)

![Screen_Shot_2016-08-01_at_4.33.02_PM](/uploads/59ae65c0afc39d8939a9f36431815854/Screen_Shot_2016-08-01_at_4.33.02_PM.png)

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [x] Added for this feature/bug
  - [x] All builds are passing
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

cc: @iamphill @jschatz1 

See merge request !5607

6 files changed, 23 insertions, 5 deletions

diff --git a/app/assets/javascripts/project.js b/app/assets/javascripts/project.js
index b97f6d22715..4e1de4dfb72 100644
--- a/app/assets/javascripts/project.js
+++ b/app/assets/javascripts/project.js
@@ -65,7 +65,8 @@
               url: $dropdown.data('refs-url'),
               data: {
                 ref: $dropdown.data('ref')
-              }
+              },
+              dataType: "json"
             }).done(function(refs) {
               return callback(refs);
             });
@@ -73,7 +74,7 @@
           selectable: true,
           filterable: true,
           filterByText: true,
-          fieldName: 'ref',
+          fieldName: $dropdown.data('field-name'),
           renderRow: function(ref) {
             var link;
             if (ref.header != null) {
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index f1635a53763..7d3a063d6c2 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -84,6 +84,15 @@
       width: 100%;
     }
   }
+
+  // Allows dynamic-width text in the dropdown toggle.
+  // Resizes to allow long text without overflowing the container.
+  &.dynamic {
+    width: auto;
+    min-width: 160px;
+    max-width: 100%;
+    padding-right: 25px;
+  }
 }
 
 .dropdown-menu,
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 26ad2870aa0..8374f30d0b2 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -1,6 +1,5 @@
 .modal-body {
   position: relative;
-  overflow-y: auto;
   padding: 15px;
 
   .form-actions {
diff --git a/app/controllers/projects/branches_controller.rb b/app/controllers/projects/branches_controller.rb
index 48fe81b0d74..2de8ada3e29 100644
--- a/app/controllers/projects/branches_controller.rb
+++ b/app/controllers/projects/branches_controller.rb
@@ -15,6 +15,13 @@ class Projects::BranchesController < Projects::ApplicationController
       diverging_commit_counts = repository.diverging_commit_counts(branch)
       [memo, diverging_commit_counts[:behind], diverging_commit_counts[:ahead]].max
     end
+
+    respond_to do |format|
+      format.html
+      format.json do
+        render json: @repository.branch_names
+      end
+    end
   end
 
   def recent
diff --git a/app/views/projects/commit/_change.html.haml b/app/views/projects/commit/_change.html.haml
index d9b800a4ded..e4cd55b9f7a 100644
--- a/app/views/projects/commit/_change.html.haml
+++ b/app/views/projects/commit/_change.html.haml
@@ -17,7 +17,9 @@
           .form-group.branch
             = label_tag 'target_branch', target_label, class: 'control-label'
             .col-sm-10
-              = select_tag "target_branch", project_branches, class: "select2 select2-sm js-target-branch"
+              = hidden_field_tag :target_branch, @project.default_branch, id: 'target_branch'
+              = dropdown_tag(@project.default_branch, options: { title: "Switch branch", filter: true, placeholder: "Search branches", toggle_class: 'js-project-refs-dropdown js-target-branch dynamic', dropdown_class: 'dropdown-menu-selectable', data: { field_name: "target_branch", selected: @project.default_branch, target_branch: @project.default_branch, refs_url: namespace_project_branches_path(@project.namespace, @project), submit_form_on_click: false }})
+
               - if can?(current_user, :push_code, @project)
                 .js-create-merge-request-container
                   .checkbox
diff --git a/app/views/shared/_ref_switcher.html.haml b/app/views/shared/_ref_switcher.html.haml
index ea7162d4d63..9a8252ab087 100644
--- a/app/views/shared/_ref_switcher.html.haml
+++ b/app/views/shared/_ref_switcher.html.haml
@@ -6,7 +6,7 @@
   - @options && @options.each do |key, value|
     = hidden_field_tag key, value, id: nil
   .dropdown
-    = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_namespace_project_path(@project.namespace, @project) }, { toggle_class: "js-project-refs-dropdown" }
+    = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_namespace_project_path(@project.namespace, @project), field_name: 'ref', submit_form_on_click: true }, { toggle_class: "js-project-refs-dropdown" }
     .dropdown-menu.dropdown-menu-selectable{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) }
       = dropdown_title "Switch branch/tag"
       = dropdown_filter "Search branches and tags"