Merge branch 'compare-dropdowns' into 'master'

Updated compare dropdowns

## What does this MR do?

Removes jQuery autocomplete from compare fields and replaces with GitLabs dropdowns.

## What are the relevant issue numbers?

Closes #18891 

## Screenshots (if relevant)

![Screen_Shot_2016-06-24_at_14.24.34](/uploads/f34370390183429f604fc48645390f2f/Screen_Shot_2016-06-24_at_14.24.34.png)

See merge request !4895

CHANGELOG

@@ -30,6 +30,8 @@ v 8.10.0 (unreleased)
   - Add Spring EmojiOne updates.
   - Add syntax for multiline blockquote using `>>>` fence !3954
   - Fix viewing notification settings when a project is pending deletion
+  - Updated compare dropdown menus to use GL dropdown
+  - Eager load award emoji on notes
   - Fix pagination when sorting by columns with lots of ties (like priority)
   - The Markdown reference parsers now re-use query results to prevent running the same queries multiple times !5020
   - Updated project header design

app/assets/javascripts/compare_autocomplete.js.coffee

+class @CompareAutocomplete
+  constructor: ->
+    @initDropdown()
+
+  initDropdown: ->
+    $('.js-compare-dropdown').each ->
+      $dropdown = $(@)
+      selected = $dropdown.data('selected')
+
+      $dropdown.glDropdown(
+        data: (term, callback) ->
+          $.ajax(
+            url: $dropdown.data('refs-url')
+            data:
+              ref: $dropdown.data('ref')
+          ).done (refs) ->
+            callback(refs)
+        selectable: true
+        filterable: true
+        filterByText: true
+        fieldName: $dropdown.attr('name')
+        filterInput: 'input[type="text"]'
+        renderRow: (ref) ->
+          if ref.header?
+            $('<li />')
+              .addClass('dropdown-header')
+              .text(ref.header)
+          else
+            link = $('<a />')
+              .attr('href', '#')
+              .addClass(if ref is selected then 'is-active' else '')
+              .text(ref)
+              .attr('data-ref', escape(ref))
+
+            $('<li />')
+              .append(link)
+        id: (obj, $el) ->
+          $el.attr('data-ref')
+        toggleLabel: (obj, $el) ->
+          $el.text().trim()
+      )

app/assets/javascripts/dispatcher.js.coffee

@@ -137,6 +137,8 @@ class Dispatcher
         new Project()
         new ProjectAvatar()
         switch path[1]
+          when 'compare'
+            new CompareAutocomplete()
           when 'edit'
             shortcut_handler = new ShortcutsNavigation()
             new ProjectNew()

app/assets/javascripts/gl_dropdown.js.coffee

@@ -456,6 +456,8 @@ class GitLabDropdown
 
   rowClicked: (el) ->
     fieldName = @options.fieldName
+    isInput = $(@el).is('input')
+
     if @renderedData
       groupName = el.data('group')
       if groupName
@@ -466,10 +468,19 @@ class GitLabDropdown
         selectedObject = @renderedData[selectedIndex]
 
     value = if @options.id then @options.id(selectedObject, el) else selectedObject.id
-    field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
+
+    if isInput
+      field = $(@el)
+    else
+      field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
+
     if el.hasClass(ACTIVE_CLASS)
       el.removeClass(ACTIVE_CLASS)
-      field.remove()
+
+      if isInput
+        field.val('')
+      else
+        field.remove()
 
       # Toggle the dropdown label
       if @options.toggleLabel
@@ -490,7 +501,9 @@ class GitLabDropdown
     else
       if not @options.multiSelect or el.hasClass('dropdown-clear-active')
         @dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS
-        @dropdown.parent().find("input[name='#{fieldName}']").remove()
+
+        unless isInput
+          @dropdown.parent().find("input[name='#{fieldName}']").remove()
 
       if !value?
         field.remove()
@@ -505,7 +518,9 @@ class GitLabDropdown
         if !field.length and fieldName
           @addInput(fieldName, value)
         else
-          field.val value
+          field
+            .val value
+            .trigger 'change'
 
       return selectedObject
 

app/assets/stylesheets/pages/projects.scss

@@ -639,3 +639,9 @@ pre.light-well {
     width: 300px;
   }
 }
+
+.compare-form-group {
+  .dropdown-menu {
+    width: 300px;
+  }
+}

app/views/projects/compare/_form.html.haml

@@ -2,15 +2,17 @@
   .clearfix
     - if params[:to] && params[:from]
       = link_to 'switch', {from: params[:to], to: params[:from]}, {class: 'commits-compare-switch has-tooltip', title: 'Switch base of comparison'}
-    .form-group
+    .form-group.dropdown.compare-form-group.js-compare-from-dropdown
       .input-group.inline-input-group
         %span.input-group-addon from
-        = text_field_tag :from, params[:from], class: "form-control", required: true
+        = text_field_tag :from, params[:from], class: "form-control js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from].presence }
+      = render "ref_dropdown"
     = "..."
-    .form-group
+    .form-group.dropdown.compare-form-group.js-compare-to-dropdown
       .input-group.inline-input-group
         %span.input-group-addon to
-        = text_field_tag :to, params[:to], class: "form-control", required: true
+        = text_field_tag :to, params[:to], class: "form-control js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to].presence }
+      = render "ref_dropdown"
      
     = button_tag "Compare", class: "btn btn-create commits-compare-btn"
     - if @merge_request.present?
@@ -19,11 +21,3 @@
       = link_to create_mr_path, class: 'prepend-left-10 btn' do
         = icon("plus")
         Create Merge Request
-
-:javascript
-  var availableTags = #{@project.repository.ref_names.to_json};
-
-  $("#from, #to").autocomplete({
-    source: availableTags,
-    minLength: 1
-  });

app/views/projects/compare/_ref_dropdown.html.haml

+.dropdown-menu.dropdown-menu-selectable
+  = dropdown_title "Select branch/tag"
+  = dropdown_content
+  = dropdown_loading

spec/features/compare_spec.rb

+require "spec_helper"
+
+describe "Compare", js: true do
+  let(:user)    { create(:user) }
+  let(:project) { create(:project) }
+
+  before do
+    project.team << [user, :master]
+    login_as user
+    visit namespace_project_compare_index_path(project.namespace, project, from: "master", to: "master")
+  end
+
+  describe "branches" do
+    it "should pre-populate fields" do
+      expect(page.find_field("from").value).to eq("master")
+    end
+
+    it "should compare branches" do
+      fill_in "from", with: "fea"
+      find("#from").click
+
+      click_link "feature"
+      expect(page.find_field("from").value).to eq("feature")
+
+      click_button "Compare"
+      expect(page).to have_content "Commits"
+    end
+  end
+
+  describe "tags" do
+    it "should compare tags" do
+      fill_in "from", with: "v1.0"
+      find("#from").click
+
+      click_link "v1.0.0"
+      expect(page.find_field("from").value).to eq("v1.0.0")
+
+      click_button "Compare"
+      expect(page).to have_content "Commits"
+    end
+  end
+end