Commit 7cdcb295 authored by Jacob Schatz's avatar Jacob Schatz

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
parents acbcbd4a bd888e13
...@@ -30,6 +30,8 @@ v 8.10.0 (unreleased) ...@@ -30,6 +30,8 @@ v 8.10.0 (unreleased)
- Add Spring EmojiOne updates. - Add Spring EmojiOne updates.
- Add syntax for multiline blockquote using `>>>` fence !3954 - Add syntax for multiline blockquote using `>>>` fence !3954
- Fix viewing notification settings when a project is pending deletion - 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) - 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 - The Markdown reference parsers now re-use query results to prevent running the same queries multiple times !5020
- Updated project header design - Updated project header design
......
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()
)
...@@ -137,6 +137,8 @@ class Dispatcher ...@@ -137,6 +137,8 @@ class Dispatcher
new Project() new Project()
new ProjectAvatar() new ProjectAvatar()
switch path[1] switch path[1]
when 'compare'
new CompareAutocomplete()
when 'edit' when 'edit'
shortcut_handler = new ShortcutsNavigation() shortcut_handler = new ShortcutsNavigation()
new ProjectNew() new ProjectNew()
......
...@@ -456,6 +456,8 @@ class GitLabDropdown ...@@ -456,6 +456,8 @@ class GitLabDropdown
rowClicked: (el) -> rowClicked: (el) ->
fieldName = @options.fieldName fieldName = @options.fieldName
isInput = $(@el).is('input')
if @renderedData if @renderedData
groupName = el.data('group') groupName = el.data('group')
if groupName if groupName
...@@ -466,9 +468,18 @@ class GitLabDropdown ...@@ -466,9 +468,18 @@ class GitLabDropdown
selectedObject = @renderedData[selectedIndex] selectedObject = @renderedData[selectedIndex]
value = if @options.id then @options.id(selectedObject, el) else selectedObject.id value = if @options.id then @options.id(selectedObject, el) else selectedObject.id
if isInput
field = $(@el)
else
field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']") field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
if el.hasClass(ACTIVE_CLASS) if el.hasClass(ACTIVE_CLASS)
el.removeClass(ACTIVE_CLASS) el.removeClass(ACTIVE_CLASS)
if isInput
field.val('')
else
field.remove() field.remove()
# Toggle the dropdown label # Toggle the dropdown label
...@@ -490,6 +501,8 @@ class GitLabDropdown ...@@ -490,6 +501,8 @@ class GitLabDropdown
else else
if not @options.multiSelect or el.hasClass('dropdown-clear-active') if not @options.multiSelect or el.hasClass('dropdown-clear-active')
@dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS @dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS
unless isInput
@dropdown.parent().find("input[name='#{fieldName}']").remove() @dropdown.parent().find("input[name='#{fieldName}']").remove()
if !value? if !value?
...@@ -505,7 +518,9 @@ class GitLabDropdown ...@@ -505,7 +518,9 @@ class GitLabDropdown
if !field.length and fieldName if !field.length and fieldName
@addInput(fieldName, value) @addInput(fieldName, value)
else else
field.val value field
.val value
.trigger 'change'
return selectedObject return selectedObject
......
...@@ -639,3 +639,9 @@ pre.light-well { ...@@ -639,3 +639,9 @@ pre.light-well {
width: 300px; width: 300px;
} }
} }
.compare-form-group {
.dropdown-menu {
width: 300px;
}
}
...@@ -2,15 +2,17 @@ ...@@ -2,15 +2,17 @@
.clearfix .clearfix
- if params[:to] && params[:from] - 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'} = 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 .input-group.inline-input-group
%span.input-group-addon from %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 .input-group.inline-input-group
%span.input-group-addon to %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"
&nbsp; &nbsp;
= button_tag "Compare", class: "btn btn-create commits-compare-btn" = button_tag "Compare", class: "btn btn-create commits-compare-btn"
- if @merge_request.present? - if @merge_request.present?
...@@ -19,11 +21,3 @@ ...@@ -19,11 +21,3 @@
= link_to create_mr_path, class: 'prepend-left-10 btn' do = link_to create_mr_path, class: 'prepend-left-10 btn' do
= icon("plus") = icon("plus")
Create Merge Request Create Merge Request
:javascript
var availableTags = #{@project.repository.ref_names.to_json};
$("#from, #to").autocomplete({
source: availableTags,
minLength: 1
});
.dropdown-menu.dropdown-menu-selectable
= dropdown_title "Select branch/tag"
= dropdown_content
= dropdown_loading
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
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment