Removed jQuery UI highlight & autocompleteremove-jquery-ui-plugins

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

6 files changed, 31 insertions, 23 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;