Fixes #37382 - Update to jQuery 3

app/assets/javascripts/application.js

@@ -5,6 +5,7 @@
 //= require hidden_values
 //= require select_on_click
 //= require lookup_keys
+//= require js.cookie
 
 $(function() {
   if(window.allJsLoaded){
@@ -38,7 +39,7 @@ function onContentLoad() {
   if ($('input[focus_on_load=true]').length > 0) {
     $('input[focus_on_load]')
       .first()
-      .focus();
+      .on('focus');
   }
 
   // highlight tabs with errors
@@ -81,7 +82,7 @@ function onContentLoad() {
 
   tfm.i18n.intl.ready.then(function() {
     var tz = jstz.determine();
-    $.cookie('timezone', tz.name(), {
+    Cookies.set('timezone', tz.name(), {
       path: '/',
       secure: location.protocol === 'https:',
     });
@@ -92,11 +93,66 @@ function onContentLoad() {
 
   $('input.remove_form_templates')
     .closest('form')
-    .submit(function(event) {
+    .on('submit', function(event) {
       $(this)
         .find('.form_template')
         .remove();
     });
+
+  const autoUpdateSelect2Titles = function() {
+    const targetNodes = document.querySelectorAll(
+      '.select2-selection__rendered'
+    );
+
+    const config = { attributes: true, attributeFilter: ['title'] };
+
+    const callback = function(mutationsList, observer) {
+      for (let mutation of mutationsList) {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.attributeName === 'title'
+        ) {
+          mutation.target.setAttribute(
+            'data-original-title',
+            mutation.target.getAttribute('title')
+          );
+        }
+      }
+    };
+
+    targetNodes.forEach(targetNode => {
+      const observer = new MutationObserver(callback);
+      observer.observe(targetNode, config);
+    });
+  };
+
+  const hideSelect2ClearTooltip = function() {
+    $(document).on('focusout', '.select2-selection__clear', function() {
+      $('.tooltip').tooltip('hide');
+    });
+
+    const targetNode = document.querySelector('body');
+    const config = { attributes: false, childList: true, subtree: true };
+    const callback = function(mutationsList) {
+      for (let mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+          const node = Array.from(mutation.removedNodes).find(
+            node =>
+              node.classList &&
+              node.classList.contains('select2-selection__clear')
+          );
+          if (node) {
+            $('.tooltip').tooltip('hide');
+          }
+        }
+      }
+    };
+    const observer = new MutationObserver(callback);
+    observer.observe(targetNode, config);
+  };
+
+  hideSelect2ClearTooltip();
+  autoUpdateSelect2Titles();
 }
 
 function preserve_selected_options(elem) {
@@ -106,7 +162,7 @@ function preserve_selected_options(elem) {
 }
 
 function password_caps_lock_hint() {
-  $('[type=password]').keypress(function(e) {
+  $('[type=password]').trigger('keypress', function(e) {
     var $addon = $(this)
         .parent()
         .children('.input-addon'),
@@ -169,12 +225,12 @@ function add_fields(target, association, content, direction) {
 }
 
 $(document).ready(function() {
-  $('#check_all_roles').click(function(e) {
+  $('#check_all_roles').on('click', function(e) {
     e.preventDefault();
     $('.role_checkbox').prop('checked', true);
   });
 
-  $('#uncheck_all_roles').click(function(e) {
+  $('#uncheck_all_roles').on('click', function(e) {
     e.preventDefault();
     $('.role_checkbox').prop('checked', false);
   });
@@ -331,7 +387,7 @@ function ignore_subnet(item) {
 
 // shows provisioning templates in a new window
 $(function() {
-  $('[data-provisioning-template=true]').click(function() {
+  $('[data-provisioning-template=true]').on('click', function() {
     window.open(this.href, [
       (width = '300'),
       (height = '400'),
@@ -486,18 +542,34 @@ function disableButtonToggle(item, explicit) {
     $(formControl).val('');
   }
 
-  $(item).blur();
+  $(item).trigger('blur');
 }
 
-function activate_select2(container, allowClear) {
-  allowClear = typeof allowClear !== 'undefined' ? allowClear : true;
+function activate_select2(container, allowClear ) {
+  const htmlElemnt = document.getElementsByTagName('html')[0];
+  const langAttr = htmlElemnt.getAttribute('lang') || 'en';
   $(container)
     .find('select:not(.without_select2)')
     .not('.form_template select')
     .not('#interfaceForms select')
-    .select2({
-      allowClear: allowClear,
-      formatNoMatches: __('No matches found'),
+    .each(function() {
+      const placeholder = $(this).data('placeholder');
+      let selectAllowClear = allowClear
+      if (typeof selectAllowClear === 'undefined') {
+       if ($(this).hasClass('include_blank')) {
+          selectAllowClear = true;
+        } else {
+          selectAllowClear = false;
+        }
+      }
+      $(this).select2({
+        debug: true,
+        language: langAttr,
+        width: '100%',
+        allowClear: selectAllowClear,
+        formatNoMatches: __('No matches found'),
+        placeholder: selectAllowClear? placeholder || '' : { id: '-1', text: '' },
+      });
     });
 }
 
@@ -518,3 +590,18 @@ function clearError(field) {
     .children('.error-message');
   error_block.remove();
 }
+
+// jQuery deprecated functions
+// used by gridster and bootstrap
+$.fn.isFunction = function(func) {
+  return typeof func === 'function';
+};
+$.fn.isArray = Array.isArray;
+$.fn.trim = String.prototype.trim;
+$.fn.bind = function(event, func) {
+  return this.on(event, func);
+};
+// used by puppet plugin
+$.fn.size = function() {
+  return this.length;
+};

app/assets/javascripts/hidden_values.js

@@ -3,7 +3,7 @@ function turn_textarea_switch() {
 }
 
 function hidden_value_control() {
-  $('.toggle-hidden-value a').click(function(event) {
+  $('.toggle-hidden-value a').on('click', function(event) {
     event.preventDefault();
     var link = $(event.currentTarget);
     link

app/assets/javascripts/host_edit.js

@@ -145,11 +145,11 @@ function update_capabilities(capabilities) {
   var build = capabilities.indexOf('build') > -1;
   if (build) {
     $('#manage_network_build').show();
-    $('#host_provision_method_build').click();
+    $('#host_provision_method_build').trigger('click');
     build_provision_method_selected();
   } else if (capabilities.length > 0) {
     $('#manage_network_build').hide();
-    $('#host_provision_method_' + capabilities[0]).click();
+    $('#host_provision_method_' + capabilities[0]).trigger('click');
     if (capabilities[0].toLowerCase() === 'image') {
       image_provision_method_selected();
     }
@@ -329,7 +329,7 @@ function update_form(element, options) {
       if (host_compute_resource_id.exists()) {
         // to handle case if def process_taxonomy changed compute_resource_id to nil
         if (!host_compute_resource_id.val()) {
-          host_compute_resource_id.change();
+          host_compute_resource_id.trigger('change');
         } else {
           // in case the compute resource was selected, we still want to check for
           // free ip if applicable

app/assets/javascripts/host_edit_interfaces.js

@@ -1,6 +1,6 @@
 $(document).ready(function() {
-  $('#host_name').select();
-  $('#host_name').focus();
+  $('#host_name').on("select");;
+  $('#host_name').on("focus");;
 });
 
 function remove_interface(interface_id) {
@@ -107,12 +107,12 @@ function get_interface_row(interface_id) {
     interface_row.attr('id', 'interface' + interface_id);
     interface_row.data('interface-id', interface_id);
 
-    interface_row.find('.showModal').click(function() {
+    interface_row.find('.showModal').on('click', function() {
       edit_interface(interface_id);
       return false;
     });
 
-    interface_row.find('.removeInterface').click(function() {
+    interface_row.find('.removeInterface').on('click', function() {
       remove_interface(interface_id);
       return false;
     });

app/assets/javascripts/hosts.js

@@ -2,7 +2,7 @@ $(document).on('ContentLoad', function() {
   tfm.tools.setTab();
 
   var dialog = $('#review_before_build');
-  $('#build-review').click(function() {
+  $('#build-review').on('click', function() {
     dialog.find('.modal-body #build_status').html('');
     $('.loading').addClass('visible');
     $.ajax({
@@ -26,7 +26,7 @@ $(document).on('ContentLoad', function() {
   });
 
   dialog.on('click', '#recheck_review', function() {
-    $('#build-review').click();
+    $('#build-review').trigger('click');
   });
 
   var action_buttons = $('.btn-toolbar a')

app/assets/javascripts/jquery.multi-select.js

@@ -27,28 +27,28 @@ function multiSelectToolTips(){
     var msid = '#ms-'+item.id;
     // it an <li> items match multiple tooltips, then only the first tooltip will show
     if (!(mismatches == null || mismatches == 'undefined')) {
-      var missing_ids = $.parseJSON(mismatches);
+      var missing_ids = JSON.parse(mismatches);
       $.each(missing_ids, function(index,missing_id){
         opt_id = sanitize(missing_id+'');
         $(msid).find('li#'+opt_id+'-selectable').addClass('delete').tooltip({container: 'body', title: __("Select this since it belongs to a host"), placement: "left"});
       })
     }
     if (!(useds == null || descendants == 'useds')) {
-      var used_ids = $.parseJSON(useds);
+      var used_ids = JSON.parse(useds);
       $.each(used_ids, function(index,used_id){
         opt_id = sanitize(used_id+'');
         $(msid).find('li#'+opt_id+'-selection').addClass('used_by_hosts').tooltip({container: 'body', title: __("This is used by a host"), placement: "right"});
       })
     }
     if (!(inheriteds == null || inheriteds == 'undefined')) {
-      var inherited_ids = $.parseJSON(inheriteds);
+      var inherited_ids = JSON.parse(inheriteds);
       $.each(inherited_ids, function(index,inherited_id){
         opt_id = sanitize(inherited_id+'');
         $(msid).find('li#'+opt_id+'-selection').addClass('inherited').tooltip({container: 'body', title: __("This is inherited from parent"), placement: "right"});
       })
     }
     if (!(descendants == null || descendants == 'undefined')) {
-      var descendant_ids = $.parseJSON(descendants);
+      var descendant_ids = JSON.parse(descendants);
       $.each(descendant_ids, function(index,descendant_id){
         opt_id = sanitize(descendant_id+'');
         $(msid).find('li#'+opt_id+'-selection').addClass('descendants').tooltip({container: 'body', title: __("Parent is already selected"), placement: "right"});
@@ -77,7 +77,7 @@ $(document).on('click', '.ms-select-all', function () {
     $(this).tooltip('hide')
       .closest('.form-group')
       .find('.ms-selectable .ms-list :visible')
-      .click();
+      .trigger('click');
     return false;
 });
 

app/assets/javascripts/lookup_keys.js

@@ -28,7 +28,7 @@ function select_first_tab() {
     pills
       .find('a:visible')
       .first()
-      .click();
+      .trigger('click');
   }
 }
 
@@ -39,7 +39,7 @@ function remove_node(item) {
       .attr('href')
   )
     .children('.btn-danger')
-    .click();
+    .trigger('click');
 }
 
 function fix_template_context(content, context) {

app/assets/javascripts/parameter_override.js

@@ -8,7 +8,7 @@ function override_param(item) {
   var v = param_value.val();
 
   var addParameterButton = $('#parameters').find('.btn-primary');
-  addParameterButton.click();
+  addParameterButton.trigger('click');
   var directionOfAddedItems = addParameterButton.attr('direction');
   var new_param = $('#parameters').find('.fields');
   if(directionOfAddedItems === 'append'){
@@ -26,6 +26,6 @@ function override_param(item) {
       hiddenValueCheckBox = new_param.find('.set_hidden_value');
     hiddenValueCheckBox.prop('checked', true);
     hiddenValueCheckBox.val('1');
-    alink.click();
+    alink.trigger('click');
   }
 }

app/helpers/form_helper.rb

@@ -119,6 +119,9 @@ def select_f(f, attr, array, id, method, select_options = {}, html_options = {})
       # that was defined in the struct.
       blank_option.instance_eval('undef to_s', __FILE__, __LINE__) if method.to_s == 'to_s' || id.to_s == 'to_s'
       array.insert(0, blank_option)
+      html_options['data-placeholder'] = blank_value || html_options['placeholder']
+    elsif html_options[:placeholder]
+      html_options['data-placeholder'] = html_options.delete(:placeholder)
     end
 
     select_options[:disabled] = '' if select_options[:disabled] == include_blank
@@ -127,7 +130,9 @@ def select_f(f, attr, array, id, method, select_options = {}, html_options = {})
     html_options[:size] = 'col-md-10' if html_options[:multiple]
     field(f, attr, html_options) do
       addClass html_options, "form-control"
-
+      if include_blank.is_a?(TrueClass)
+        addClass html_options, "include_blank"
+      end
       collection_select = f.collection_select(attr, array, id, method, select_options, html_options)
 
       if disable_button

bundler.d/assets.rb

@@ -1,11 +1,12 @@
 group :assets do
-  gem 'jquery-ui-rails', '~> 6.0'
+  gem 'jquery-ui-rails', '~> 7.0'
   gem 'patternfly-sass', '~> 3.59.4'
   gem 'gettext_i18n_rails_js', '~> 1.4'
   gem 'po_to_json', '~> 1.1'
   gem 'execjs', '>= 1.4.0', '< 3.0'
   gem 'terser', '~> 1.1'
   gem 'sass-rails', '~> 6.0'
+  gem 'js_cookie_rails', '~> 2.2'
   # this one is a dependecy for x-editable-rails
   gem 'coffee-rails', '~> 5.0.0'
 end

package.json

@@ -26,6 +26,7 @@
     "intl": "~1.2.5",
     "jed": "^1.1.1",
     "os-browserify": "^0.3.0",
+    "js-cookie": "^3.0.5",
     "react-intl": "^2.8.0"
   },
   "devDependencies": {