Replace jQuery 1 with jQuery 3 as global $

.eslintrc

@@ -140,5 +140,8 @@
     "*.config.js",
     "spec/javascripts/setupTests.ts",
     "spec/javascripts/__mocks__/"
-  ]
+  ],
+  "globals": {
+    "$": "readonly"
+  }
 }

app/assets/javascripts/provider/admin/cms/sidebar.js.coffee

@@ -8,7 +8,7 @@ class Sidebar
 
   constructor: (@selector) ->
 
-    @fire_ajax()
+    @fetch_sidebar()
 
     @filter = new SidebarFilter(this)
 
@@ -61,11 +61,11 @@ class Sidebar
     @expand_collapse_all_button().
       html(Sidebar.icon(if all_packed then 'plus-square' else 'minus-square'))
 
-  fire_ajax: ->
+  fetch_sidebar: ->
     @ajax.abort() if @ajax
     @ajax = $.ajax('/p/admin/cms/templates/sidebar.json')
-      .success (json) => @update(json)
-      .error (xhr, status, error) ->
+      .done (json) => @update(json)
+      .fail (xhr, status, error) ->
         console.error("#{xhr.status} #{error}")
         console.error(xhr.responseText)
 
@@ -480,7 +480,7 @@ class SidebarToggle
       ids.splice(i, 1) if i >= 0
       @el.trigger('toggle:unpack')
 
-    sets_are_equal = new Set(SidebarToggle.load()).difference(new Set(ids)).size == 0
+    sets_are_equal = new Set(SidebarToggle.load()).symmetricDifference(new Set(ids)).size == 0
     unless sets_are_equal
       SidebarToggle.save(ids)
 

app/assets/javascripts/provider/layout/iframe.js

@@ -1,2 +1,2 @@
-//= require jquery
+//= require jquery3
 //= require rails-ujs

app/assets/javascripts/provider/layout/provider.js

@@ -1,3 +1,3 @@
-//= require jquery
+//= require vendor/colorbox
+//= require jquery3
 //= require rails-ujs
-//= require vendor/jquery.colorbox-min.js

app/assets/javascripts/swagger-ui/extensions.coffee

@@ -22,7 +22,7 @@ class ThreeScaleAutoComplete
     $(document).on "focus","input[data-threescale-name]", (event)=>
       @currentField = $(event.currentTarget)
       type = @currentField.attr("data-threescale-name")
-      return false if $.trim(type) is ""
+      return false if type.trim() is ""
       @currentTip = if +ThreeScaleAutoComplete.DataStatus is 401 then $(".apidocs-param-tips.apidocs-signin-message") else $(".apidocs-param-tips."+type)
       pos = @getPosition()
       @currentTip.css({top:pos[0], left:pos[1]}).fadeIn("fast")

app/assets/javascripts/swagger-ui2/autocomplete.coffee

@@ -23,7 +23,7 @@ class ThreeScaleAutoComplete
     $(document).on "focus","input[data-threescale-name]", (event)=>
       @currentField = $(event.currentTarget)
       type = @currentField.attr("data-threescale-name")
-      return false if $.trim(type) is ""
+      return false if type.trim() is ""
       @currentTip = if +ThreeScaleAutoComplete.DataStatus is 401 then $(".apidocs-param-tips.apidocs-signin-message") else $(".apidocs-param-tips."+type)
       pos = @getPosition()
       @currentTip.css({top:pos[0], left:pos[1]}).fadeIn("fast")

app/assets/javascripts/vendor/colorbox.js

@@ -0,0 +1,27 @@
+/**
+ * Spoiler alert: if you're reading this, it's already too late. jQuery 1 is loaded.
+ *
+ * Colorbox 1.6.4 is incompatible with jQuery 3 (uses .live, .bind, $.isFunction, $.support). It
+ * must run on jQuery 1.12.4.
+ *
+ * This file loads jQuery 1.12.4 first, then colorbox (which attaches to it), then exports colorbox
+ * to the global scope as window.colorbox. After this file, provider.js loads jquery3 which
+ * overwrites the global $ and jQuery with jQuery 3.7.0.
+ *
+ * The loading order in provider.js is critical:
+ *   1. vendor/colorbox
+ *   2. jquery3
+ *   3. rails-ujs
+ *
+ * All colorbox calls must use window.colorbox, not $.colorbox.
+ *
+ * jQuery.colorbox is both a callable function and an object with methods (.close, .resize).
+ * .bind(jQuery) fixes the "this" context so colorbox works when called as window.colorbox().
+ * Object.assign copies .close, .resize, etc. onto the bound function because .bind() creates
+ * a bare function without the original's custom properties.
+ */
+
+//= require jquery
+//= require vendor/jquery.colorbox-min.js
+
+window.colorbox = Object.assign(jQuery.colorbox.bind(jQuery), jQuery.colorbox);

app/javascript/packs/bulk_operations.ts

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-const jquery1 = window.$
 
 document.addEventListener('DOMContentLoaded', () => {
   const dataSelectedTotal = 'data-selected-total-entries'
@@ -13,7 +12,7 @@ document.addEventListener('DOMContentLoaded', () => {
   function hrefFor (url: string) {
     // url address might already include some parameters
     const connector = url.includes('?') ? '&' : '?'
-    let href = url.concat(connector, jquery1('table tbody .select :checked').serialize())
+    let href = url.concat(connector, $('table tbody .select :checked').serialize())
 
     const selectTotalEntries = findSelectTotalEntries()
     if (selectTotalEntries?.hasAttribute(dataSelectedTotal)) {
@@ -69,7 +68,7 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   function updateBulkOperationsCard () {
-    const bulk = jquery1('#bulk-operations')
+    const bulk = $('#bulk-operations')
     const selected = selectedRows()
 
     if (selected > 0) {
@@ -97,7 +96,7 @@ document.addEventListener('DOMContentLoaded', () => {
       .forEach(dt => {
         dt.querySelector('button')!
           .addEventListener('click', () => {
-            jquery1.colorbox({
+            window.colorbox({
               title: dt.nextElementSibling!.textContent,
               href: hrefFor(dt.dataset.url!)
             })

app/javascript/packs/cms.ts

@@ -1,4 +1,3 @@
-import $ from 'jquery'
 import 'jquery-ui/ui/widgets/droppable'
 import 'jquery-ui/ui/widgets/draggable'
 import 'jquery-ui/ui/widgets/tabs'
@@ -8,21 +7,19 @@ import { toast } from 'utilities/toast'
 
 import type { EditorFromTextArea } from 'codemirror'
 
-const jQuery1 = window.$
-
 /**
  * Called every time a CMS section is selected in the sidebar, including first render.
  */
-jQuery1(document).on('cms-template:init', () => {
+$(document).on('cms-template:init', () => {
   advanceOptionsToggle()
   setUpSectionDrop()
   setUpEditorTabs()
   setUpPjax()
 
-  jQuery1('#cms_template_content_type, #cms_template_liquid_enabled').trigger('change')
+  $('#cms_template_content_type, #cms_template_liquid_enabled').trigger('change')
 })
 
-jQuery1(document).on('cms-sidebar:update', () => {
+$(document).on('cms-sidebar:update', () => {
   setUpSidebarDrag()
   setUpDropdownButtonOpen()
 })
@@ -34,7 +31,7 @@ document.addEventListener('DOMContentLoaded', () => {
   setUpDropdownButtonClose()
   setUpPreviewButton()
 
-  jQuery1('#tab-content').trigger('cms-template:init')
+  $('#tab-content').trigger('cms-template:init')
 })
 
 /**
@@ -58,7 +55,7 @@ function advanceOptionsToggle () {
   /* eslint-disable @typescript-eslint/no-non-null-assertion -- It's all there */
   const icon = fieldset.querySelector('legend i')!
   const list = fieldset.querySelector('ol')!
-  const cookie = jQuery1.cookie(cookieName)!
+  const cookie = $.cookie(cookieName)!
   const legend = fieldset.querySelector('legend')!
   /* eslint-enable @typescript-eslint/no-non-null-assertion */
 
@@ -80,7 +77,7 @@ function advanceOptionsToggle () {
     icon.classList.toggle('fa-caret-down')
 
     const isNowExpanded = icon.classList.contains('fa-caret-down')
-    jQuery1.cookie(cookieName, String(isNowExpanded), { expires: 30, path: cookiePath })
+    $.cookie(cookieName, String(isNowExpanded), { expires: 30, path: cookiePath })
   })
 }
 
@@ -182,7 +179,7 @@ function setUpEditorTabs () {
  * accordingly. Codemirror's own listener here: app/views/provider/admin/cms/_codemirror.html.erb
  */
 function setUpContentTypeLiquidEnabledListener () {
-  jQuery1(document).on('change', '#cms_template_content_type, #cms_template_liquid_enabled', () => {
+  $(document).on('change', '#cms_template_content_type, #cms_template_liquid_enabled', () => {
     const contentTypeInput = document.querySelector<HTMLInputElement>('#cms_template_content_type')
     const liquidEnabledInput = document.querySelector<HTMLInputElement>('#cms_template_liquid_enabled')
 
@@ -193,17 +190,17 @@ function setUpContentTypeLiquidEnabledListener () {
     const contentType = contentTypeInput.value
     const liquidEnabled = liquidEnabledInput.checked
 
-    const codemirror = jQuery1('#cms_template_draft').data('codemirror') as EditorFromTextArea
+    const codemirror = $('#cms_template_draft').data('codemirror') as EditorFromTextArea
 
-    jQuery1(codemirror).trigger('change', [contentType, liquidEnabled])
+    $(codemirror).trigger('change', [contentType, liquidEnabled])
   })
 
-  jQuery1(document).on('click', 'a[href^="#cms-set-content-type-"]', (event) => {
+  $(document).on('click', 'a[href^="#cms-set-content-type-"]', (event) => {
     event.stopImmediatePropagation()
     event.preventDefault()
 
     const { mimeType } = (event.target as HTMLAnchorElement).dataset as { mimeType: string }
-    const input = jQuery1('#cms_template_content_type')
+    const input = $('#cms_template_content_type')
 
     if (input.val() !== mimeType) {
       input.val(mimeType).trigger('change')
@@ -218,8 +215,8 @@ function setUpRevertButton () {
         event.stopImmediatePropagation()
         event.preventDefault()
 
-        const draft = jQuery1('#cms_template_draft').data('codemirror') as EditorFromTextArea
-        const published = jQuery1('#cms_template_published').data('codemirror') as EditorFromTextArea
+        const draft = $('#cms_template_draft').data('codemirror') as EditorFromTextArea
+        const published = $('#cms_template_published').data('codemirror') as EditorFromTextArea
 
         draft.setValue(published.getValue())
         toast('Reverted draft to a currently published version', 'success')
@@ -255,9 +252,10 @@ function setUpRemoveFromSectionAction () {
  * PJAX automatically extends window.$, that is 1.12.4 (JQueryStaticV1Plugins)
  */
 function setUpPjax () {
-  jQuery1(document).pjax('#cms-sidebar .cms-sidebar-listing a', '#tab-content', { timeout: 3000 })
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- Imported on top
+  $(document).pjax!('#cms-sidebar .cms-sidebar-listing a', '#tab-content', { timeout: 3000 })
 
-  jQuery1(document)
+  $(document)
     .on('pjax:send', () => {
       const spinner = document.createElement('img')
       spinner.src = '/assets/ajax-loader.gif'
@@ -268,7 +266,7 @@ function setUpPjax () {
       window.ThreeScale.hideSpinner()
     })
     .on('pjax:end', (event) => {
-      jQuery1(event.target).trigger('cms-template:init')
+      $(event.target).trigger('cms-template:init')
     })
 }
 

app/javascript/packs/cms_intro_tabs.ts

@@ -1,4 +1,3 @@
-import $ from 'jquery'
 import 'jquery-ui/ui/widgets/tabs'
 
 document.addEventListener('DOMContentLoaded', () => {

app/javascript/packs/fields_definitions.ts

@@ -1,4 +1,3 @@
-import $ from 'jquery'
 import 'jquery-ui/themes/base/core.css'
 import 'jquery-ui/themes/base/sortable.css'
 import 'jquery-ui/themes/base/theme.css'

app/javascript/packs/master_providers_plans_widget.ts

@@ -1,4 +1,3 @@
-import $ from 'jquery'
 
 import type { AJAXCompleteEvent } from 'Types/rails-ujs'
 
@@ -9,7 +8,7 @@ import type { AJAXCompleteEvent } from 'Types/rails-ujs'
 $(document).on('ajax:complete', 'form.colorbox[data-remote]', (event) => {
   const [xhr] = (event.originalEvent as AJAXCompleteEvent).detail
 
-  window.$.colorbox({
+  window.colorbox({
     open: true,
     html: xhr.responseText,
     maxWidth: '85%',

app/javascript/packs/provider.ts

@@ -5,8 +5,6 @@ import application from 'Common/application'
 import 'Common/ajaxEvents'
 import { setUpToasts } from 'utilities/toast'
 
-const jQuery1 = window.$
-
 document.addEventListener('DOMContentLoaded', () => {
   renderVerticalNav()
   renderQuickStarts()
@@ -19,9 +17,9 @@ document.addEventListener('DOMContentLoaded', () => {
    */
   document.querySelectorAll<HTMLFormElement>('form.autosubmit')
     .forEach(form => {
-      form.addEventListener('change', () => {
+      form.addEventListener('change', e => {
         if (form.dataset.remote) {
-          void window.Rails.handleRemote.call(form, jQuery1(form))
+          void window.Rails.handleRemote.call(form, e)
         } else {
           form.submit()
         }

app/javascript/packs/provider_stats.js

@@ -1,4 +1,3 @@
-import $ from 'jquery'
 
 import { statsUsage } from 'Stats/provider/stats_usage'
 import { statsDaysOfWeek } from 'Stats/provider/stats_days_of_week'
@@ -8,7 +7,6 @@ import { statsApplication } from 'Stats/provider/stats_application'
 import { statsResponseCodes } from 'Stats/provider/stats_response_codes'
 
 document.addEventListener('DOMContentLoaded', () => {
-  window.$ = $
   window.statsUsage = statsUsage
   window.statsDaysOfWeek = statsDaysOfWeek
   window.statsHoursOfDay = statsHoursOfDay

app/javascript/packs/stats.js

@@ -1,8 +1,7 @@
-// This is Developer Portal stats
-
-import $ from 'jquery'
+// Developer Portal stats. Loaded by lib/developer_portal/app/views/developer_portal/stats/_chart.html.liquid.
+// jQuery comes from the tenant's template (e.g. cdn_asset or essential_assets).
+// jQuery UI datepicker is bundled by webpack via Stats/lib/menu.js and attaches to the tenant's jQuery.
 
 import { statsApplication } from 'Stats/buyer/stats_application'
 
-window.$ = $
 window.Stats = { statsApplication }

app/javascript/src/Common/ajaxEvents.ts

@@ -13,8 +13,6 @@
  * Origin: app/assets/javascripts/ajax_events.js
  */
 
-import $ from 'jquery'
-
 import type { AJAXErrorEvent } from 'Types/rails-ujs'
 
 /**
@@ -44,7 +42,7 @@ $(document).on('ajax:error', 'form[data-remote]:not(.pf-c-form)', (event) => {
 
   // If EventTarget (modal's content) is replaced immediately, ajax:success and ajax:complete are not called and the spinner will stay
   setTimeout(() => {
-    window.$.colorbox({ html: xhr.responseText })
+    window.colorbox({ html: xhr.responseText })
   })
   event.stopPropagation()
 })

app/javascript/src/Common/application.ts

@@ -1,7 +1,3 @@
-import $ from 'jquery'
-
-const jQuery1 = window.$
-
 export default function (): void {
   // disable links with 'data-disabled' attribute and display alert instead
   // delegation on body fires before rails.js. FIXME: this is not a valid guard. If "data-disabled"
@@ -16,14 +12,15 @@ export default function (): void {
   // TODO: replace .fancybox with .colorbox
   // This link will load its content into a colorbox modal
   $(document).on('click', 'a.fancybox, a.colorbox', (e) => {
-    jQuery1(e.currentTarget as HTMLAnchorElement).colorbox({ open: true })
+    const { title, href } = e.currentTarget as HTMLAnchorElement
+    window.colorbox({ title, href })
     e.preventDefault()
   })
 
   // TODO: replace .fancybox with .colorbox
   // This is used in some modals with a "Cancel" button.
   $(document).on('click', '.fancybox-close', (e) => {
-    jQuery1.colorbox.close()
+    window.colorbox.close()
     e.preventDefault()
     e.stopPropagation()
   })

app/javascript/src/Common/components/BulkActionsDropdown.tsx

@@ -21,8 +21,6 @@ interface Props {
   isDisabled: boolean;
 }
 
-const jquery1 = window.$
-
 const BulkActionsDropdown: FunctionComponent<Props> = ({ actions, allSelected, isDisabled }) => {
   const [actionsDropdownOpen, setActionsDropdownOpen] = useState(false)
 
@@ -34,15 +32,15 @@ const BulkActionsDropdown: FunctionComponent<Props> = ({ actions, allSelected, i
       return url.concat(connector, 'selected_total_entries=true')
     } else {
       // TODO: can we generate this data without reading the DOM? Using selectedItems as a prop
-      return url.concat(connector, jquery1('table tbody .pf-c-table__check input:checked').serialize())
+      return url.concat(connector, $('table tbody .pf-c-table__check input:checked').serialize())
     }
   }
 
   const dropdownItems = actions.map(({ name, title, url }) => (
     <DropdownItem
       key={name}
       onClick={() => {
-        jquery1.colorbox({
+        window.colorbox({
           title,
           href: generateHrefForColorbox(url)
         })

app/javascript/src/Common/threescale.ts

@@ -1,4 +1,3 @@
-import $ from 'jquery'
 
 import { render } from 'Dashboard/chart'
 import { toast, hideToast } from 'utilities/toast'