Replace Rails UJS library (#37031)
Some checks failed
Check i18n / check-i18n (push) Waiting to run
Chromatic / Run Chromatic (push) Waiting to run
CodeQL / Analyze (actions) (push) Waiting to run
CodeQL / Analyze (javascript) (push) Waiting to run
CodeQL / Analyze (ruby) (push) Waiting to run
Check formatting / lint (push) Waiting to run
CSS Linting / lint (push) Waiting to run
JavaScript Linting / lint (push) Waiting to run
Ruby Linting / lint (push) Waiting to run
JavaScript Testing / test (push) Waiting to run
Historical data migration test / test (14-alpine) (push) Waiting to run
Historical data migration test / test (15-alpine) (push) Waiting to run
Historical data migration test / test (16-alpine) (push) Waiting to run
Historical data migration test / test (17-alpine) (push) Waiting to run
Ruby Testing / build (production) (push) Waiting to run
Ruby Testing / build (test) (push) Waiting to run
Ruby Testing / test (.ruby-version) (push) Blocked by required conditions
Ruby Testing / test (3.2) (push) Blocked by required conditions
Ruby Testing / test (3.3) (push) Blocked by required conditions
Ruby Testing / ImageMagick tests (.ruby-version) (push) Blocked by required conditions
Ruby Testing / ImageMagick tests (3.2) (push) Blocked by required conditions
Ruby Testing / ImageMagick tests (3.3) (push) Blocked by required conditions
Ruby Testing / End to End testing (.ruby-version) (push) Blocked by required conditions
Ruby Testing / End to End testing (3.2) (push) Blocked by required conditions
Ruby Testing / End to End testing (3.3) (push) Blocked by required conditions
Ruby Testing / Elastic Search integration testing (.ruby-version, docker.elastic.co/elasticsearch/elasticsearch:7.17.13) (push) Blocked by required conditions
Ruby Testing / Elastic Search integration testing (.ruby-version, docker.elastic.co/elasticsearch/elasticsearch:8.10.2) (push) Blocked by required conditions
Ruby Testing / Elastic Search integration testing (.ruby-version, opensearchproject/opensearch:2) (push) Blocked by required conditions
Ruby Testing / Elastic Search integration testing (3.2, docker.elastic.co/elasticsearch/elasticsearch:7.17.13) (push) Blocked by required conditions
Ruby Testing / Elastic Search integration testing (3.3, docker.elastic.co/elasticsearch/elasticsearch:7.17.13) (push) Blocked by required conditions
Bundler Audit / security (push) Has been cancelled
Haml Linting / lint (push) Has been cancelled

This commit is contained in:
Echo
2025-11-27 14:10:55 +01:00
committed by GitHub
parent 0004ed4c80
commit 0d2e9522ff
4 changed files with 90 additions and 24 deletions

View File

@@ -1,9 +1,5 @@
import Rails from '@rails/ujs';
import { setupLinkListeners } from './utils/links';
export function start() {
try {
Rails.start();
} catch {
// If called twice
}
setupLinkListeners();
}

View File

@@ -0,0 +1,88 @@
import { on } from 'delegated-events';
export function setupLinkListeners() {
on('click', 'a[data-confirm]', handleConfirmLink);
// We don't want to target links with data-confirm here, as those are handled already.
on('click', 'a[data-method]:not([data-confirm])', handleMethodLink);
}
function handleConfirmLink(event: MouseEvent) {
const anchor = event.currentTarget;
if (!(anchor instanceof HTMLAnchorElement)) {
return;
}
const message = anchor.dataset.confirm;
if (!message || !window.confirm(message)) {
event.preventDefault();
return;
}
if (anchor.dataset.method) {
handleMethodLink(event);
}
}
function handleMethodLink(event: MouseEvent) {
const anchor = event.currentTarget;
if (!(anchor instanceof HTMLAnchorElement)) {
return;
}
const method = anchor.dataset.method?.toLowerCase();
if (!method) {
return;
}
event.preventDefault();
// Create and submit a form with the specified method.
const form = document.createElement('form');
form.method = 'post';
form.action = anchor.href;
// Add the hidden _method input to simulate other HTTP methods.
const methodInput = document.createElement('input');
methodInput.type = 'hidden';
methodInput.name = '_method';
methodInput.value = method;
form.appendChild(methodInput);
// Add CSRF token if available for same-origin requests.
const csrf = getCSRFToken();
if (csrf && !isCrossDomain(anchor.href)) {
const csrfInput = document.createElement('input');
csrfInput.type = 'hidden';
csrfInput.name = csrf.param;
csrfInput.value = csrf.token;
form.appendChild(csrfInput);
}
// The form needs to be in the document to be submitted.
form.style.display = 'none';
document.body.appendChild(form);
// We use requestSubmit to ensure any form submit handlers are properly invoked.
form.requestSubmit();
}
function getCSRFToken() {
const param = document.querySelector<HTMLMetaElement>(
'meta[name="csrf-param"]',
);
const token = document.querySelector<HTMLMetaElement>(
'meta[name="csrf-token"]',
);
if (param && token) {
return { param: param.content, token: token.content };
}
return null;
}
function isCrossDomain(href: string) {
const link = document.createElement('a');
link.href = href;
return (
link.protocol !== window.location.protocol ||
link.host !== window.location.host
);
}