Upgrade jquery 4.0.0

app/javascript/application.js

@@ -1,39 +1,38 @@
-/* global window */
-import './jQueryGlobalizer.js'
-import '@hotwired/turbo-rails'
-import 'bootstrap'
-import 'bootstrap-select'
-import './sweet-alert-confirm.js'
-import './controllers'
-import 'trix'
-import '@rails/actiontext'
-import './datatable.js'
-Turbo.session.drive = false
+import "./jquery.js";
+import "@hotwired/turbo-rails";
+import "bootstrap";
+import "bootstrap-select";
+import "./sweet-alert-confirm.js";
+import "./controllers";
+import "trix";
+import "@rails/actiontext";
+import "./datatable.js";
+Turbo.session.drive = false;
 
-require('datatables.net-dt')(null, window.jQuery) // First parameter is the global object. Defaults to window if null
-require('select2')(window.jQuery)
-require('@rails/ujs').start()
-require('@rails/activestorage').start()
-require('bootstrap-datepicker')
-require('./src/add_to_calendar_button')
-require('./src/case_contact')
-require('./src/case_emancipation')
-require('./src/casa_case')
-require('./src/new_casa_case')
-require('./src/dashboard')
-require('./src/emancipations')
-require('./src/import')
-require('./src/password_confirmation')
-require('./src/read_more')
-require('./src/reimbursements')
-require('./src/reports')
-require('./src/require_communication_preference')
-require('./src/select')
-require('./src/tooltip')
-require('./src/time_zone')
-require('./src/session_timeout_poller.js')
-require('./src/display_app_metric.js')
-require('./src/casa_org')
-require('./src/sms_reactivation_toggle')
-require('./src/validated_form')
-require('./src/learning_hours')
+require("datatables.net-dt")(null, window.jQuery); // First parameter is the global object. Defaults to window if null
+require("select2")(window.jQuery);
+require("@rails/ujs").start();
+require("@rails/activestorage").start();
+require("bootstrap-datepicker");
+require("./src/add_to_calendar_button");
+require("./src/case_contact");
+require("./src/case_emancipation");
+require("./src/casa_case");
+require("./src/new_casa_case");
+require("./src/dashboard");
+require("./src/emancipations");
+require("./src/import");
+require("./src/password_confirmation");
+require("./src/read_more");
+require("./src/reimbursements");
+require("./src/reports");
+require("./src/require_communication_preference");
+require("./src/select");
+require("./src/tooltip");
+require("./src/time_zone");
+require("./src/session_timeout_poller.js");
+require("./src/display_app_metric.js");
+require("./src/casa_org");
+require("./src/sms_reactivation_toggle");
+require("./src/validated_form");
+require("./src/learning_hours");

app/javascript/datatable.js

@@ -1,5 +1,3 @@
-/* global $ */
-
 export function initializeDataTable (selector) {
   if ($(selector).length > 0) {
     $(selector).DataTable({ searching: true, order: [[0, 'asc']] })

app/javascript/jquery.js

@@ -0,0 +1,7 @@
+import jquery from "jquery";
+window.jQuery = jquery;
+window.$ = jquery;
+
+$(function () {
+  console.log("Hey!");
+});

app/javascript/src/add_to_calendar_button.js

@@ -1,5 +1,3 @@
-/* global $ */
-
 import 'add-to-calendar-button'
 
 function createCalendarEvents () {

app/javascript/src/all_casa_admin/tables.js

@@ -1,5 +1,3 @@
-/* global $ */
-
 import { initializeDataTable } from '../../datatable'
 
 $(() => {

app/javascript/src/casa_case.js

@@ -2,7 +2,6 @@
 /* global FormData */
 /* global DOMParser */
 /* global spinner */
-/* global $ */
 
 import Swal from 'sweetalert2'
 
@@ -149,23 +148,6 @@ function clearSelectErrors () {
   errorEl.classList.add('d-none')
 }
 
-function handleModalClose () {
-  const selectEl = document.querySelector('#case-selection')
-
-  if (!selectEl) return
-
-  clearSelectErrors()
-  // this line taken from docs https://select2.org/programmatic-control/add-select-clear-items
-  $('#case-selection').val(null).trigger('change')
-}
-
-// re-initialized for setting modal as dropdownParent
-function handleDropdownSelection () {
-  if ($('#case-selection').hasClass('select2')) {
-    $('#case-selection').select2()
-  }
-}
-
 $(() => { // JQuery's callback for the DOM loading
   $('button.copy-court-button').on('click', copyOrdersFromCaseWithConfirmation)
 
@@ -182,12 +164,6 @@ $(() => { // JQuery's callback for the DOM loading
       disableBtn($('button.copy-court-button')[0])
     }
   })
-  // modal id is defined in _generate_docx.html.erb so would like to be able to implement modal close logic in that file
-  // but not sure how to
-  $('#generate-docx-report-modal').on('hidden.bs.modal', () => handleModalClose())
-
-  $('#generate-docx-report-modal').on('shown.bs.modal', () => handleDropdownSelection())
-
   $('#btnGenerateReport').on('click', handleGenerateReport)
 
   if (/\/casa_cases\/.*\?.*success=true/.test(window.location.href)) {

app/javascript/src/case_contact.js

@@ -1,58 +1,51 @@
-/* global window */
-/* global $ */
+import Swal from "sweetalert2";
 
-import Swal from 'sweetalert2'
-function convertDateToSystemTimeZone (date) {
-  return new Date((typeof date === 'string' ? new Date(date) : date))
+function convertDateToSystemTimeZone(date) {
+  return new Date(typeof date === "string" ? new Date(date) : date);
 }
 
-async function displayFollowupAlert () {
-  const { value: text, isConfirmed } = await fireSwalFollowupAlert()
+async function displayFollowupAlert() {
+  const { value: text, isConfirmed } = await fireSwalFollowupAlert();
 
-  if (!isConfirmed) return
+  if (!isConfirmed) return;
 
-  const params = text ? { note: text } : {}
-  const caseContactId = this.id.replace('followup-button-', '')
+  const params = text ? { note: text } : {};
+  const caseContactId = this.id.replace("followup-button-", "");
 
-  $.post(
-    `/case_contacts/${caseContactId}/followups`,
-    params,
-    () => window.location.reload()
-  )
+  $.post(`/case_contacts/${caseContactId}/followups`, params, () => window.location.reload());
 }
 
-async function fireSwalFollowupAlert () {
-  const inputLabel = 'Optional: Add a note about what followup is needed.'
+async function fireSwalFollowupAlert() {
+  const inputLabel = "Optional: Add a note about what followup is needed.";
 
   return await Swal.fire({
-    input: 'textarea',
+    input: "textarea",
     title: inputLabel,
-    inputPlaceholder: 'Type your note here...',
-    inputAttributes: { 'aria-label': 'Type your note here' },
+    inputPlaceholder: "Type your note here...",
+    inputAttributes: { "aria-label": "Type your note here" },
 
     showCancelButton: true,
     showCloseButton: true,
 
-    confirmButtonText: 'Confirm',
-    confirmButtonColor: '#dc3545',
+    confirmButtonText: "Confirm",
+    confirmButtonColor: "#dc3545",
 
     customClass: {
-      inputLabel: 'mx-5'
-    }
-  })
+      inputLabel: "mx-5",
+    },
+  });
 }
 
-$(document).on('turbo:load', function () {
-  $('.filter-form').on('change', '.filter-input', function () {
-    $(this).closest('form').submit()
-  })
-})
+$(document).on("turbo:load", function () {
+  $(".filter-form").on("change", ".filter-input", function () {
+    $(this).closest("form").submit();
+  });
+});
 
-$(() => { // JQuery's callback for the DOM loading
-  $('[data-toggle="tooltip"]').tooltip()
-  $('.followup-button').on('click', displayFollowupAlert)
-})
+$(() => {
+  // JQuery's callback for the DOM loading
+  $('[data-toggle="tooltip"]').tooltip();
+  $(".followup-button").on("click", displayFollowupAlert);
+});
 
-export {
-  convertDateToSystemTimeZone
-}
+export { convertDateToSystemTimeZone };

app/javascript/src/case_emancipation.js

@@ -1,5 +1,4 @@
 /* eslint-env jquery */
-/* global $ */
 
 const { Notifier } = require('./notifier')
 const TypeChecker = require('./type_checker')

app/javascript/src/dashboard.js

@@ -1,5 +1,4 @@
 /* global alert */
-/* global $ */
 const { Notifier } = require('./notifier')
 let pageNotifier
 

app/javascript/src/emancipations.js

@@ -1,5 +1,3 @@
-/* global $ */
-
 $(() => { // JQuery's callback for the DOM loading
   $('table#all-case-emancipations').DataTable({
     autoWidth: false,

app/javascript/src/import.js

@@ -4,7 +4,6 @@
 /* global localStorage */
 /* global File */
 /* global DataTransfer */
-/* global $ */
 
 function dataURItoBlob (dataURI) {
   // convert base64 to raw binary data held in a string

app/javascript/src/notifier.js

@@ -1,4 +1,3 @@
-/* global $ */
 import { escape } from 'lodash'
 
 const TypeChecker = require('./type_checker.js')

app/javascript/src/password_confirmation.js

@@ -1,5 +1,4 @@
 /* eslint-env jquery */
-/* global $ */
 
 import Swal from 'sweetalert2'
 import { disableBtn, enableBtn } from './casa_case'

app/javascript/src/reimbursements.js

@@ -1,5 +1,3 @@
-/* global $ */
-
 $(() => { // JQuery's callback for the DOM loading
   const { groupBy, map, mapValues } = require('lodash')
 

app/javascript/src/select.js

@@ -1,11 +1,12 @@
-/* global $ */
-
-$(() => { // JQuery's callback for the DOM loading
-  $('.select2').select2(
-    {
-      theme: 'bootstrap-5',
-      width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
-      placeholder: $(this).data('placeholder')
-    }
-  )
-})
+$(() => {
+  // JQuery's callback for the DOM loading
+  $(".select2").select2({
+    theme: "bootstrap-5",
+    width: $(this).data("width")
+      ? $(this).data("width")
+      : $(this).hasClass("w-100")
+      ? "100%"
+      : "style",
+    placeholder: $(this).data("placeholder"),
+  });
+});

app/javascript/src/tooltip.js

@@ -1,5 +1,3 @@
-/* global $ */
-
 $(() => { // JQuery's callback for the DOM loading
   $('[data-toggle="tooltip"]').tooltip()
 })

app/javascript/src/validated_form.js

@@ -1,4 +1,3 @@
-/* global $ */
 const { Notifier } = require('./notifier')
 const TypeChecker = require('./type_checker')
 
@@ -253,7 +252,6 @@ $(() => { // JQuery's callback for the DOM loading
   if ($('#case_contact_miles_driven').length) {
     safeInstantiateComponent('non driving contact medium warning', () => {
       const contactMediumWithMilesDrivenWarning = new NonDrivingContactMediumWarning(validatedFormCollection.find('.contact-medium.form-group input:not([type=hidden]), #case_contact_miles_driven'), pageNotifier)
-      console.log(contactMediumWithMilesDrivenWarning)
       validatableFormSectionComponents.push(contactMediumWithMilesDrivenWarning)
     })
   }

package.json

@@ -26,12 +26,11 @@
     "bootstrap": "5.3.6",
     "bootstrap-datepicker": "^1.10.1",
     "bootstrap-scss": "^5.3.8",
-    "bootstrap-select": "^1.13.18",
     "chart.js": "^4.5.1",
     "chartjs-adapter-luxon": "^1.3.1",
     "datatables.net-dt": "^1.13.11",
     "esbuild": "^0.27.2",
-    "jquery": "^3.7.1",
+    "jquery": "^4.0.0",
     "js-cookie": "^3.0.5",
     "jstz": "^2.1.1",
     "lodash": "^4.17.21",