Fixes #37382 - Update to jQuery 3

app/assets/javascripts/application.js

@@ -38,7 +38,7 @@ function onContentLoad() {
   if ($('input[focus_on_load=true]').length > 0) {
     $('input[focus_on_load]')
       .first()
-      .focus();
+      .trigger("focus");
   }
 
   // highlight tabs with errors
@@ -84,11 +84,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('blur', '.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) {
@@ -98,7 +153,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'),
@@ -301,7 +356,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'),
@@ -423,18 +478,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: '' },
+      });
     });
 }
 
@@ -455,3 +526,14 @@ 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);
+};

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

@@ -1,13 +1,11 @@
 //= require parameter_override
 
-$(document).ready(function() {
+$(document).on('ContentLoad', function() {
   var searchParams = new URLSearchParams(window.location.search);
   if(searchParams.has('hostgroup_id')) {
     var param = searchParams.get('hostgroup_id');
     $('#host_hostgroup_id').val(param).trigger('change');
   }
-});
-$(document).on('ContentLoad', function() {
   onHostEditLoad();
 });
 $(document)
@@ -145,11 +143,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 +327,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();
+$(document).on('ContentLoad', function() {
+  $('#host_name').trigger("select");
+  $('#host_name').trigger("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,5 +1,5 @@
 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'

test/integration/compute_profile_js_test.rb

@@ -38,10 +38,10 @@ class ComputeProfileJSTest < IntegrationTestWithJavascript
     click_link("amazon123 (eu-west-1-EC2)")
 
     assert page.has_selector?('.pf-c-page__main-breadcrumb .active', :text => compute_profiles(:one).name), "#{compute_profiles(:one).name} was expected in the breadcrumb active, but was not found"
-    selected_profile = find("#s2id_compute_attribute_compute_profile_id .select2-chosen").text
+    selected_profile = select2_chosen_selector('compute_attribute_compute_profile_id').text
     assert_equal compute_profiles(:one).name, selected_profile
 
-    selected_compute = find("#s2id_compute_attribute_compute_resource_id .select2-chosen").text
+    selected_compute = select2_chosen_selector('compute_attribute_compute_resource_id').text
     assert_equal "amazon123 (eu-west-1-EC2)", selected_compute
 
     click_button('Submit')
@@ -54,7 +54,7 @@ class ComputeProfileJSTest < IntegrationTestWithJavascript
     fill_in('compute_profile_name', :with => 'test')
     click_on("Submit")
     assert click_link(compute_resources(:ovirt).to_s)
-    selected_profile = find("#s2id_compute_attribute_compute_profile_id .select2-chosen").text
+    selected_profile = select2_chosen_selector('compute_attribute_compute_profile_id').text
     assert select2('hwp_small', :from => 'compute_attribute_vm_attrs_template')
     wait_for_ajax
     assert click_button("Submit")

test/integration/host_js_test.rb

@@ -292,7 +292,8 @@ class HostJSTest < IntegrationTestWithJavascript
       wait_for_ajax
       click_on_inherit('compute_resource')
       select2(overridden_hostgroup.name, :from => 'host_hostgroup_id')
-      assert page.find('#s2id_host_compute_resource_id .select2-chosen').has_text? overridden_hostgroup.compute_resource.name
+      wait_for_ajax
+      assert page.find(select2_selector('host_compute_resource_id'), visible: false, wait: 10).ancestor('.select2-container').has_text? overridden_hostgroup.compute_resource.name
     end
 
     test 'choosing a hostgroup with compute resource works' do
@@ -712,8 +713,7 @@ class HostJSTest < IntegrationTestWithJavascript
   private
 
   def subnet_and_domain_are_selected(modal, domain)
-    modal.assert_selector("#interfaceModal #s2id_host_interfaces_attributes_0_domain_id .select2-chosen",
-      text: domain.name)
+    assert select2_chosen_selector('host_interfaces_attributes_0_domain_id').has_text? domain.name
     modal.assert_selector('#interfaceModal #host_interfaces_attributes_0_subnet_id option',
       visible: false,
       count: domain.subnets.count + 1) # plus one empty