Switch to @rails/ujs package

Remove jquery-ujs and use rails-ujs instead

app/assets/javascripts/commons/index.js

 import './polyfills';
-import './jquery';
 import './bootstrap';
 import './vue';
 import '../lib/utils/axios_utils';

app/assets/javascripts/commons/jquery.js

-import 'jquery';
-
-// common jQuery plugins
-import 'jquery-ujs';

app/assets/javascripts/confirm_danger_modal.js

 import $ from 'jquery';
+import { Rails } from '~/lib/utils/rails_ujs';
 import { rstrip } from './lib/utils/common_utils';
 
 function openConfirmDangerModal($form, $modal, text) {
@@ -21,9 +22,16 @@ function openConfirmDangerModal($form, $modal, text) {
       $submit.disable();
     }
   });
+
   $('.js-confirm-danger-submit', $modal)
     .off('click')
-    .on('click', () => $form.submit());
+    .on('click', () => {
+      if ($form.data('remote')) {
+        Rails.fire($form[0], 'submit');
+      } else {
+        $form.submit();
+      }
+    });
 }
 
 function getModal($btn) {

app/assets/javascripts/lib/utils/csrf.js

-import $ from 'jquery';
-
 /*
 This module provides easy access to the CSRF token and caches
 it for re-use. It also exposes some values commonly used in relation
@@ -20,7 +18,6 @@ If you need to compose a headers object, use the spread operator:
 see also http://guides.rubyonrails.org/security.html#cross-site-request-forgery-csrf
 and https://github.com/rails/jquery-rails/blob/v4.3.1/vendor/assets/javascripts/jquery_ujs.js#L59-L62
  */
-
 const csrf = {
   init() {
     const tokenEl = document.querySelector('meta[name=csrf-token]');
@@ -52,9 +49,4 @@ const csrf = {
 
 csrf.init();
 
-// use our cached token for any $.rails-generated AJAX requests
-if ($.rails) {
-  $.rails.csrfToken = () => csrf.token;
-}
-
 export default csrf;

app/assets/javascripts/lib/utils/rails_ujs.js

+import Rails from '@rails/ujs';
+import csrf from './csrf';
+
+export const initRails = () => {
+  // eslint-disable-next-line no-underscore-dangle
+  if (!window._rails_loaded) {
+    Rails.start();
+  }
+};
+
+// use our cached token for any Rails-generated AJAX requests
+Rails.csrfToken = () => csrf.token;
+
+export { Rails };

app/assets/javascripts/main.js

@@ -11,6 +11,7 @@ import './behaviors';
 // lib/utils
 import applyGitLabUIConfig from '@gitlab/ui/dist/config';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
+import { initRails } from '~/lib/utils/rails_ujs';
 import {
   handleLocationHash,
   addSelectOnFocusBehaviour,
@@ -169,6 +170,8 @@ function deferredInitialisation() {
 
   // Adding a helper class to activate animations only after all is rendered
   setTimeout(() => $body.addClass('page-initialised'), 1000);
+
+  initRails();
 }
 
 document.addEventListener('DOMContentLoaded', () => {

app/assets/javascripts/members.js

 import $ from 'jquery';
+import { Rails } from '~/lib/utils/rails_ujs';
 import { disableButtonIfEmptyField } from '~/lib/utils/common_utils';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
@@ -54,8 +55,9 @@ export default class Members {
   formSubmit(e, $el = null) {
     const $this = e ? $(e.currentTarget) : $el;
     const { $toggle, $dateInput } = this.getMemberListItems($this);
+    const formEl = $this.closest('form').get(0);
 
-    $this.closest('form').trigger('submit.rails');
+    Rails.fire(formEl, 'submit');
 
     $toggle.disable();
     $dateInput.disable();

app/assets/javascripts/notifications_dropdown.js

 import $ from 'jquery';
+import { Rails } from '~/lib/utils/rails_ujs';
 import { deprecatedCreateFlash as Flash } from './flash';
 import { __ } from '~/locale';
 
@@ -21,10 +22,12 @@ export default function notificationsDropdown() {
       form.find('.js-notifications-icon').toggleClass('hidden');
     }
     form.find('#notification_setting_level').val(notificationLevel);
-    form.submit();
+    Rails.fire(form[0], 'submit');
   });
 
-  $(document).on('ajax:success', '.notification-form', (e, data) => {
+  $(document).on('ajax:success', '.notification-form', e => {
+    const data = e.detail[0];
+
     if (data.saved) {
       $(e.currentTarget)
         .closest('.js-notification-dropdown')

app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue

@@ -26,11 +26,14 @@ export default {
   methods: {
     listenForQuickActions() {
       $(document).on('ajax:success', '.gfm-form', this.quickActionListened);
+
       eventHub.$on('timeTrackingUpdated', data => {
-        this.quickActionListened(null, data);
+        this.quickActionListened({ detail: [data] });
       });
     },
-    quickActionListened(e, data) {
+    quickActionListened(e) {
+      const data = e.detail[0];
+
       const subscribedCommands = ['spend_time', 'time_estimate'];
       let changedCommands;
       if (data !== undefined) {

package.json

@@ -46,6 +46,7 @@
     "@gitlab/ui": "21.4.2",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.3-1",
+    "@rails/ujs": "^6.0.3-2",
     "@sentry/browser": "^5.22.3",
     "@sourcegraph/code-host-integration": "0.0.50",
     "@toast-ui/editor": "^2.4.0",
@@ -99,7 +100,6 @@
     "jed": "^1.1.1",
     "jest-transform-graphql": "^2.1.0",
     "jquery": "^3.5.0",
-    "jquery-ujs": "1.2.2",
     "jquery.caret": "^0.3.1",
     "jquery.waitforimages": "^2.2.0",
     "js-cookie": "^2.2.1",

spec/frontend/test_setup.js

 import Vue from 'vue';
+import 'jquery';
+
 import * as jqueryMatchers from 'custom-jquery-matchers';
 import { config as testUtilsConfig } from '@vue/test-utils';
 import Translate from '~/vue_shared/translate';
@@ -9,7 +11,6 @@ import customMatchers from './matchers';
 
 import './helpers/dom_shims';
 import './helpers/jquery';
-import '~/commons/jquery';
 import '~/commons/bootstrap';
 
 process.on('unhandledRejection', global.promiseRejectionHandler);

yarn.lock

@@ -1076,6 +1076,11 @@
   resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-6.0.3-1.tgz#9b9eb8858a6507162911007d355d9a206e1c5caa"
   integrity sha512-szFhWD+V5TAxVNVIG16klgq+ypqA5k5AecLarTTrXgOG8cawVbQdOAwLbCmzkwiQ60rGSxAFoC1u2LrzxSK2Aw==
 
+"@rails/ujs@^6.0.3-2":
+  version "6.0.3-2"
+  resolved "https://registry.yarnpkg.com/@rails/ujs/-/ujs-6.0.3-2.tgz#e14c1f29086858215ce7ccd9ad6d8888c458b4a3"
+  integrity sha512-WcpIEftNCfGDEgk6KerOugiet75Mir5q/HT1yt3dDhpBI91BaZ15lfSQIsZwMw2nyeDz9A9QBz8dAFAd4gXIzg==
+
 "@sentry/browser@^5.22.3":
   version "5.22.3"
   resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.22.3.tgz#7a64bd1cf01bf393741a3e4bf35f82aa927f5b4e"
@@ -7068,13 +7073,6 @@ jmespath@0.15.0:
   resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.15.0.tgz#a3f222a9aae9f966f5d27c796510e28091764217"
   integrity sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc=
 
-jquery-ujs@1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/jquery-ujs/-/jquery-ujs-1.2.2.tgz#6a8ef1020e6b6dda385b90a4bddc128c21c56397"
-  integrity sha1-ao7xAg5rbdo4W5CkvdwSjCHFY5c=
-  dependencies:
-    jquery ">=1.8.0"
-
 jquery.caret@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/jquery.caret/-/jquery.caret-0.3.1.tgz#9c093318faf327eff322e826ca9f3241368bc7b8"
@@ -7085,7 +7083,7 @@ jquery.waitforimages@^2.2.0:
   resolved "https://registry.yarnpkg.com/jquery.waitforimages/-/jquery.waitforimages-2.2.0.tgz#63f23131055a1b060dc913e6d874bcc9b9e6b16b"
   integrity sha1-Y/IxMQVaGwYNyRPm2HS8ybnmsWs=
 
-"jquery@>= 1.9.1", jquery@>=1.8.0, jquery@^3.5.0:
+"jquery@>= 1.9.1", jquery@^3.5.0:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.1.tgz#d7b4d08e1bfdb86ad2f1a3d039ea17304717abb5"
   integrity sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==