diff options
author | Jacob Schatz <jschatz@gitlab.com> | 2016-07-15 05:27:21 +0300 |
---|---|---|
committer | Jacob Schatz <jschatz@gitlab.com> | 2016-07-15 05:27:21 +0300 |
commit | 7cdcb295c71ffec4b8b9c4c9e88d8fd922ec9772 (patch) | |
tree | 44189aacd2501f4cf195be754cf0dea2131af77d | |
parent | acbcbd4a5bb40358fb74dc11fa77abae000b85c9 (diff) | |
parent | bd888e135d5cd9d7e9ffb6c3a79fc2ce2f56770d (diff) |
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
-rw-r--r-- | CHANGELOG | 2 | ||||
-rw-r--r-- | app/assets/javascripts/compare_autocomplete.js.coffee | 41 | ||||
-rw-r--r-- | app/assets/javascripts/dispatcher.js.coffee | 2 | ||||
-rw-r--r-- | app/assets/javascripts/gl_dropdown.js.coffee | 23 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 6 | ||||
-rw-r--r-- | app/views/projects/compare/_form.html.haml | 18 | ||||
-rw-r--r-- | app/views/projects/compare/_ref_dropdown.html.haml | 4 | ||||
-rw-r--r-- | spec/features/compare_spec.rb | 42 |
8 files changed, 122 insertions, 16 deletions
diff --git a/CHANGELOG b/CHANGELOG index 6b24b2c5b32..615a9680901 100644 --- a/CHANGELOG +++ b/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 diff --git a/app/assets/javascripts/compare_autocomplete.js.coffee b/app/assets/javascripts/compare_autocomplete.js.coffee new file mode 100644 index 00000000000..7ad9fd97637 --- /dev/null +++ b/app/assets/javascripts/compare_autocomplete.js.coffee @@ -0,0 +1,41 @@ +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() + ) diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee index 74fd77cf7ab..afaa6407b05 100644 --- a/app/assets/javascripts/dispatcher.js.coffee +++ b/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() diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee index 1c65e833d47..1b0d0db8954 100644 --- a/app/assets/javascripts/gl_dropdown.js.coffee +++ b/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 diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 5be911dc562..4e6d732fb6d 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -639,3 +639,9 @@ pre.light-well { width: 300px; } } + +.compare-form-group { + .dropdown-menu { + width: 300px; + } +} diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml index dd590a4b8ec..af09b3418ea 100644 --- a/app/views/projects/compare/_form.html.haml +++ b/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 - }); diff --git a/app/views/projects/compare/_ref_dropdown.html.haml b/app/views/projects/compare/_ref_dropdown.html.haml new file mode 100644 index 00000000000..c604c6d0135 --- /dev/null +++ b/app/views/projects/compare/_ref_dropdown.html.haml @@ -0,0 +1,4 @@ +.dropdown-menu.dropdown-menu-selectable + = dropdown_title "Select branch/tag" + = dropdown_content + = dropdown_loading diff --git a/spec/features/compare_spec.rb b/spec/features/compare_spec.rb new file mode 100644 index 00000000000..c62556948e0 --- /dev/null +++ b/spec/features/compare_spec.rb @@ -0,0 +1,42 @@ +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 |