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

CHANGELOG

@@ -74,6 +74,7 @@ v 8.11.0 (unreleased)
   - Fix devise deprecation warnings.
   - Check for 2FA when using Git over HTTP and only allow PersonalAccessTokens as password in that case !5764
   - Update version_sorter and use new interface for faster tag sorting
+  - Load branches asynchronously in Cherry Pick and Revert dialogs.
   - Optimize checking if a user has read access to a list of issues !5370
   - Store all DB secrets in secrets.yml, under descriptive names !5274
   - Fix syntax highlighting in file editor

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) {

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,

app/assets/stylesheets/framework/modal.scss

 .modal-body {
   position: relative;
-  overflow-y: auto;
   padding: 15px;
 
   .form-actions {

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

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

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"

spec/features/projects/branches_spec.rb

@@ -20,7 +20,7 @@ describe 'Branches', feature: true do
 
   describe 'Find branches' do
     it 'shows filtered branches', js: true do
-      visit namespace_project_branches_path(project.namespace, project, project.id)
+      visit namespace_project_branches_path(project.namespace, project)
 
       fill_in 'branch-search', with: 'fix'
       find('#branch-search').native.send_keys(:enter)

spec/features/projects/commits/cherry_pick_spec.rb

 require 'spec_helper'
+include WaitForAjax
 
 describe 'Cherry-pick Commits' do
   let(:project) { create(:project) }
@@ -8,12 +9,11 @@ describe 'Cherry-pick Commits' do
   before do
     login_as :user
     project.team << [@user, :master]
-    visit namespace_project_commits_path(project.namespace, project, project.repository.root_ref, { limit: 5 })
+    visit namespace_project_commit_path(project.namespace, project, master_pickable_commit.id)
   end
 
   context "I cherry-pick a commit" do
     it do
-      visit namespace_project_commit_path(project.namespace, project, master_pickable_commit.id)
       find("a[href='#modal-cherry-pick-commit']").click
       expect(page).not_to have_content('v1.0.0') # Only branches, not tags
       page.within('#modal-cherry-pick-commit') do
@@ -26,7 +26,6 @@ describe 'Cherry-pick Commits' do
 
   context "I cherry-pick a merge commit" do
     it do
-      visit namespace_project_commit_path(project.namespace, project, master_pickable_merge.id)
       find("a[href='#modal-cherry-pick-commit']").click
       page.within('#modal-cherry-pick-commit') do
         uncheck 'create_merge_request'
@@ -38,7 +37,6 @@ describe 'Cherry-pick Commits' do
 
   context "I cherry-pick a commit that was previously cherry-picked" do
     it do
-      visit namespace_project_commit_path(project.namespace, project, master_pickable_commit.id)
       find("a[href='#modal-cherry-pick-commit']").click
       page.within('#modal-cherry-pick-commit') do
         uncheck 'create_merge_request'
@@ -56,7 +54,6 @@ describe 'Cherry-pick Commits' do
 
   context "I cherry-pick a commit in a new merge request" do
     it do
-      visit namespace_project_commit_path(project.namespace, project, master_pickable_commit.id)
       find("a[href='#modal-cherry-pick-commit']").click
       page.within('#modal-cherry-pick-commit') do
         click_button 'Cherry-pick'
@@ -64,4 +61,28 @@ describe 'Cherry-pick Commits' do
       expect(page).to have_content('The commit has been successfully cherry-picked. You can now submit a merge request to get this change into the original branch.')
     end
   end
+
+  context "I cherry-pick a commit from a different branch", js: true do
+    it do
+      find('.commit-action-buttons a.dropdown-toggle').click
+      find(:css, "a[href='#modal-cherry-pick-commit']").click
+
+      page.within('#modal-cherry-pick-commit') do
+        click_button 'master'
+      end
+
+      wait_for_ajax
+
+      page.within('#modal-cherry-pick-commit .dropdown-menu .dropdown-content') do
+        click_link 'feature'
+      end
+
+      page.within('#modal-cherry-pick-commit') do
+        uncheck 'create_merge_request'
+        click_button 'Cherry-pick'
+      end
+
+      expect(page).to have_content('The commit has been successfully cherry-picked.')
+    end
+  end
 end