diff options
author | Phil Hughes <me@iamphill.com> | 2017-01-03 19:31:43 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-02-09 12:16:52 +0300 |
commit | cd5bee0d4438e4bb5158b721580cec8687e95e93 (patch) | |
tree | 16f3dcc1fb82f30cf1a0bde970e12259e2796cce | |
parent | 059d1ae4c847aa9018c89900b39c2782aa9b623e (diff) |
Removed jQuery UI highlight & autocomplete
In an effort to tackle #18437 this removes 2 of the jQuery UI plugins. Highlight & autocomplete, both used once in our code. Highlight was just removed easily, autocomplete was replaced with GL dropdown
-rw-r--r-- | app/assets/javascripts/application.js | 2 | ||||
-rw-r--r-- | app/assets/javascripts/milestone.js | 1 | ||||
-rw-r--r-- | app/assets/javascripts/new_branch_form.js | 30 | ||||
-rw-r--r-- | app/assets/javascripts/protected_branches/protected_branch_edit.js.es6 | 9 | ||||
-rw-r--r-- | app/assets/stylesheets/application.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/jquery.scss | 11 | ||||
-rw-r--r-- | app/views/profiles/personal_access_tokens/index.html.haml | 2 | ||||
-rw-r--r-- | app/views/projects/branches/new.html.haml | 8 | ||||
-rw-r--r-- | app/views/projects/pipelines/new.html.haml | 6 | ||||
-rw-r--r-- | changelogs/unreleased/remove-jquery-ui-plugins.yml | 4 | ||||
-rw-r--r-- | features/project/commits/branches.feature | 8 | ||||
-rw-r--r-- | features/steps/project/commits/branches.rb | 24 | ||||
-rw-r--r-- | spec/features/projects/pipelines/pipelines_spec.rb | 33 |
13 files changed, 76 insertions, 63 deletions
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 4ecbf195b64..6f04e8fad4e 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -9,9 +9,7 @@ function requireAll(context) { return context.keys().map(context); } window.$ = window.jQuery = require('jquery'); -require('jquery-ui/ui/autocomplete'); require('jquery-ui/ui/draggable'); -require('jquery-ui/ui/effect-highlight'); require('jquery-ui/ui/sortable'); require('jquery-ujs'); require('vendor/jquery.endless-scroll'); diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index 051cb9fe5c5..35b03c91c98 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -78,7 +78,6 @@ } else { $(element).find('.assignee-icon').empty(); } - return $(element).effect('highlight'); }; function Milestone() { diff --git a/app/assets/javascripts/new_branch_form.js b/app/assets/javascripts/new_branch_form.js index 7f763c13b50..7c508446859 100644 --- a/app/assets/javascripts/new_branch_form.js +++ b/app/assets/javascripts/new_branch_form.js @@ -1,4 +1,4 @@ -/* eslint-disable func-names, space-before-function-paren, no-var, one-var, prefer-rest-params, max-len, vars-on-top, wrap-iife, consistent-return, comma-dangle, one-var-declaration-per-line, quotes, no-return-assign, prefer-arrow-callback, prefer-template, no-shadow, no-else-return, max-len */ +/* eslint-disable func-names, space-before-function-paren, no-var, one-var, prefer-rest-params, max-len, vars-on-top, wrap-iife, consistent-return, comma-dangle, one-var-declaration-per-line, quotes, no-return-assign, prefer-arrow-callback, prefer-template, no-shadow, no-else-return, max-len, object-shorthand */ (function() { var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; }, indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i += 1) { if (i in this && this[i] === item) return i; } return -1; }; @@ -20,15 +20,35 @@ }; NewBranchForm.prototype.init = function() { - if (this.name.val().length > 0) { + if (this.name.length && this.name.val().length > 0) { return this.name.trigger('blur'); } }; NewBranchForm.prototype.setupAvailableRefs = function(availableRefs) { - return this.ref.autocomplete({ - source: availableRefs, - minLength: 1 + var $branchSelect = $('.js-branch-select'); + + $branchSelect.glDropdown({ + data: availableRefs, + filterable: true, + filterByText: true, + remote: false, + fieldName: $branchSelect.data('field-name'), + selectable: true, + isSelectable: function(branch, $el) { + return !$el.hasClass('is-active'); + }, + text: function(branch) { + return branch; + }, + id: function(branch) { + return branch; + }, + toggleLabel: function(branch) { + if (branch) { + return branch; + } + } }); }; diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6 index 149e511451e..6ef59e94384 100644 --- a/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6 +++ b/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6 @@ -36,6 +36,9 @@ // Do not update if one dropdown has not selected any option if (!($allowedToMergeInput.length && $allowedToPushInput.length)) return; + this.$allowedToMergeDropdown.disable(); + this.$allowedToPushDropdown.disable(); + $.ajax({ type: 'POST', url: this.$wrap.data('url'), @@ -53,13 +56,13 @@ }] } }, - success: () => { - this.$wrap.effect('highlight'); - }, error() { $.scrollTo(0); new Flash('Failed to update branch!'); } + }).always(() => { + this.$allowedToMergeDropdown.enable(); + this.$allowedToPushDropdown.enable(); }); } }; diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 1dcd1f8a6fc..83a8eeaafde 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -2,7 +2,6 @@ * This is a manifest file that'll automatically include all the stylesheets available in this directory * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at * the top of the compiled file, but it's generally better to create a new file per style scope. - *= require jquery-ui/autocomplete *= require jquery.atwho *= require select2 *= require_self diff --git a/app/assets/stylesheets/framework/jquery.scss b/app/assets/stylesheets/framework/jquery.scss index d335fedefe2..300ba4f2de6 100644 --- a/app/assets/stylesheets/framework/jquery.scss +++ b/app/assets/stylesheets/framework/jquery.scss @@ -2,17 +2,6 @@ font-family: $regular_font; font-size: $font-size-base; - &.ui-autocomplete { - border-color: $jq-ui-border; - padding: 0; - margin-top: 2px; - z-index: 1001; - - .ui-menu-item a { - padding: 4px 10px; - } - } - .ui-state-default { border: 1px solid $white-light; background: $white-light; diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml index 2c006e1712d..f76459761d6 100644 --- a/app/views/profiles/personal_access_tokens/index.html.haml +++ b/app/views/profiles/personal_access_tokens/index.html.haml @@ -101,5 +101,3 @@ $("#created-personal-access-token").click(function() { this.select(); }); - - $("#created-personal-access-token").effect('highlight', { color: '#ffff99' }, 2000); diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml index e63bdb38bd8..d3c3e40d518 100644 --- a/app/views/projects/branches/new.html.haml +++ b/app/views/projects/branches/new.html.haml @@ -12,12 +12,16 @@ .form-group = label_tag :branch_name, nil, class: 'control-label' .col-sm-10 - = text_field_tag :branch_name, params[:branch_name], required: true, tabindex: 1, autofocus: true, class: 'form-control js-branch-name' + = text_field_tag :branch_name, params[:branch_name], required: true, autofocus: true, class: 'form-control js-branch-name' .help-block.text-danger.js-branch-name-error .form-group = label_tag :ref, 'Create from', class: 'control-label' .col-sm-10 - = text_field_tag :ref, params[:ref] || @project.default_branch, required: true, tabindex: 2, class: 'form-control' + = hidden_field_tag :ref, params[:ref] || @project.default_branch + = dropdown_tag(params[:ref] || @project.default_branch, + options: { toggle_class: 'js-branch-select wide', + filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search branches", + data: { selected: params[:ref] || @project.default_branch, field_name: 'ref' } }) .help-block Existing branch name, tag, or commit SHA .form-actions = button_tag 'Create branch', class: 'btn btn-create', tabindex: 3 diff --git a/app/views/projects/pipelines/new.html.haml b/app/views/projects/pipelines/new.html.haml index 55202725b9e..14a270a3039 100644 --- a/app/views/projects/pipelines/new.html.haml +++ b/app/views/projects/pipelines/new.html.haml @@ -9,7 +9,11 @@ .form-group = f.label :ref, 'Create for', class: 'control-label' .col-sm-10 - = f.text_field :ref, required: true, tabindex: 2, class: 'form-control js-branch-name ui-autocomplete-input', autocomplete: :false, id: :ref + = hidden_field_tag 'pipeline[ref]', params[:ref] || @project.default_branch + = dropdown_tag(params[:ref] || @project.default_branch, + options: { toggle_class: 'js-branch-select wide', + filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search branches", + data: { selected: params[:ref] || @project.default_branch, field_name: 'pipeline[ref]' } }) .help-block Existing branch name, tag .form-actions = f.submit 'Create pipeline', class: 'btn btn-create', tabindex: 3 diff --git a/changelogs/unreleased/remove-jquery-ui-plugins.yml b/changelogs/unreleased/remove-jquery-ui-plugins.yml new file mode 100644 index 00000000000..c768f702ba2 --- /dev/null +++ b/changelogs/unreleased/remove-jquery-ui-plugins.yml @@ -0,0 +1,4 @@ +--- +title: Removed jQuery UI highlight & autocomplete +merge_request: +author: diff --git a/features/project/commits/branches.feature b/features/project/commits/branches.feature index 88fef674c0c..c57376aecff 100644 --- a/features/project/commits/branches.feature +++ b/features/project/commits/branches.feature @@ -13,6 +13,7 @@ Feature: Project Commits Branches Given I visit project protected branches page Then I should see "Shop" protected branches list + @javascript Scenario: I create a branch Given I visit project branches page And I click new branch link @@ -33,12 +34,7 @@ Feature: Project Commits Branches And I submit new branch form with invalid name Then I should see new an error that branch is invalid - Scenario: I create a branch with invalid reference - Given I visit project branches page - And I click new branch link - And I submit new branch form with invalid reference - Then I should see new an error that ref is invalid - + @javascript Scenario: I create a branch that already exists Given I visit project branches page And I click new branch link diff --git a/features/steps/project/commits/branches.rb b/features/steps/project/commits/branches.rb index 5f9b9e0445e..ccaf3237815 100644 --- a/features/steps/project/commits/branches.rb +++ b/features/steps/project/commits/branches.rb @@ -34,25 +34,19 @@ class Spinach::Features::ProjectCommitsBranches < Spinach::FeatureSteps step 'I submit new branch form' do fill_in 'branch_name', with: 'deploy_keys' - fill_in 'ref', with: 'master' + select_branch('master') click_button 'Create branch' end step 'I submit new branch form with invalid name' do fill_in 'branch_name', with: '1.0 stable' - fill_in 'ref', with: 'master' - click_button 'Create branch' - end - - step 'I submit new branch form with invalid reference' do - fill_in 'branch_name', with: 'foo' - fill_in 'ref', with: 'foo' + select_branch('master') click_button 'Create branch' end step 'I submit new branch form with branch that already exists' do fill_in 'branch_name', with: 'master' - fill_in 'ref', with: 'master' + select_branch('master') click_button 'Create branch' end @@ -65,10 +59,6 @@ class Spinach::Features::ProjectCommitsBranches < Spinach::FeatureSteps expect(page).to have_content "can't contain spaces" end - step 'I should see new an error that ref is invalid' do - expect(page).to have_content 'Invalid reference name' - end - step 'I should see new an error that branch already exists' do expect(page).to have_content 'Branch already exists' end @@ -88,4 +78,12 @@ class Spinach::Features::ProjectCommitsBranches < Spinach::FeatureSteps step "I should not see branch 'improve/awesome'" do expect(page.all(visible: true)).not_to have_content 'improve/awesome' end + + def select_branch(branch_name) + click_button 'master' + + page.within '#new-branch-form .dropdown-menu' do + click_link branch_name + end + end end diff --git a/spec/features/projects/pipelines/pipelines_spec.rb b/spec/features/projects/pipelines/pipelines_spec.rb index 6555b2fc6c1..f0282d8db68 100644 --- a/spec/features/projects/pipelines/pipelines_spec.rb +++ b/spec/features/projects/pipelines/pipelines_spec.rb @@ -286,8 +286,14 @@ describe 'Pipelines', :feature, :js do visit new_namespace_project_pipeline_path(project.namespace, project) end - context 'for valid commit' do - before { fill_in('pipeline[ref]', with: 'master') } + context 'for valid commit', js: true do + before do + click_button project.default_branch + + page.within '.dropdown-menu' do + click_link 'master' + end + end context 'with gitlab-ci.yml' do before { stub_ci_pipeline_to_return_yaml_file } @@ -304,15 +310,6 @@ describe 'Pipelines', :feature, :js do it { expect(page).to have_content('Missing .gitlab-ci.yml file') } end end - - context 'for invalid commit' do - before do - fill_in('pipeline[ref]', with: 'invalid-reference') - click_on 'Create pipeline' - end - - it { expect(page).to have_content('Reference not found') } - end end describe 'Create pipelines' do @@ -324,18 +321,22 @@ describe 'Pipelines', :feature, :js do describe 'new pipeline page' do it 'has field to add a new pipeline' do - expect(page).to have_field('pipeline[ref]') + expect(page).to have_selector('.js-branch-select') + expect(find('.js-branch-select')).to have_content project.default_branch expect(page).to have_content('Create for') end end describe 'find pipelines' do it 'shows filtered pipelines', js: true do - fill_in('pipeline[ref]', with: 'fix') - find('input#ref').native.send_keys(:keydown) + click_button project.default_branch - within('.ui-autocomplete') do - expect(page).to have_selector('li', text: 'fix') + page.within '.dropdown-menu' do + find('.dropdown-input-field').native.send_keys('fix') + + page.within '.dropdown-content' do + expect(page).to have_content('fix') + end end end end |