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

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');

app/assets/javascripts/milestone.js

@@ -78,7 +78,6 @@
       } else {
         $(element).find('.assignee-icon').empty();
       }
-      return $(element).effect('highlight');
     };
     function Milestone() {

app/assets/javascripts/new_branch_form.js

-/* 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;
+          }
+        }
       });
     };

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();
       });
     }
   };

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

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;

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

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

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

changelogs/unreleased/remove-jquery-ui-plugins.yml

+---
+title: Removed jQuery UI highlight & autocomplete
+merge_request:
+author:

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

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

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)
-          within('.ui-autocomplete') do
-            expect(page).to have_selector('li', text: 'fix')
+          click_button project.default_branch
+          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