import React, { useEffect, useCallback, useRef } from 'react';
import { createPortal } from 'react-dom';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
const messages = defineMessages({
confirmHeader: {
id: 'Warning: Potential broken links',
defaultMessage: 'Warning: Potential broken links',
},
loading: {
id: 'link-integrity: loading references',
defaultMessage: 'Checking references...',
},
confirmAction: {
id: 'link-integrity: Change state anyway',
defaultMessage: 'Change state anyway',
},
cancel: {
id: 'Cancel',
defaultMessage: 'Cancel',
},
navigate_to_this_item: {
id: 'Navigate to this item',
defaultMessage: 'Navigate to this item',
},
});
/**
* Derive breach data synchronously from linkintegrityInfo.
* No useEffect + useState — computed during render so it is always
* in sync with the loading flag in the same render cycle.
*/
function computeBreaches(linkintegrityInfo) {
if (!linkintegrityInfo) {
return { brokenReferences: 0, breaches: [] };
}
const all = linkintegrityInfo.flatMap((result) =>
result.breaches.map((source) => ({ source, target: result })),
);
const sourceByUid = new Map();
const bySource = new Map();
for (const entry of all) {
sourceByUid.set(entry.source.uid, entry.source);
if (!bySource.has(entry.source.uid)) {
bySource.set(entry.source.uid, new Set());
}
bySource.get(entry.source.uid).add(entry.target);
}
return {
brokenReferences: bySource.size,
breaches: Array.from(bySource, ([uid, targets]) => ({
source: sourceByUid.get(uid),
targets: Array.from(targets),
})),
};
}
/**
* Plain HTML overlay dialog — no semantic-ui-react, no Portal,
* no Confirm, no Modal. Just a fixed-position div with inline styles.
*/
const WorkflowLinkIntegrityModal = (props) => {
const { open, onCancel, onOk } = props;
const intl = useIntl();
const linkintegrityInfo = useSelector((state) => state.linkIntegrity?.result);
const loading = useSelector((state) => state.linkIntegrity?.loading);
const { brokenReferences, breaches } = computeBreaches(linkintegrityInfo);
// Keep visible while loading OR while breaches exist.
// Because brokenReferences is derived synchronously, it is always
// consistent with `loading` in the same render.
const show = open && (loading || brokenReferences > 0);
// Create a dedicated mount container attached to document.body so the
// modal renders outside the toolbar dropdown's stacking context.
// Initialized synchronously (not in useEffect) so it is available on
// the first render — important for tests and to avoid a flicker.
const containerRef = useRef(
(() => {
const el = document.createElement('div');
document.body.appendChild(el);
return el;
})(),
);
useEffect(() => {
const container = containerRef.current;
return () => {
if (container && container.parentNode) {
container.parentNode.removeChild(container);
}
};
}, []);
// Close on Escape key
const handleKeyDown = useCallback(
(e) => {
if (e.key === 'Escape') {
e.preventDefault();
e.stopPropagation();
onCancel();
}
},
[onCancel],
);
// Prevent the Toolbar's global `document mousedown` handler from closing
// the toolbar menu while our modal is open. The Toolbar listens on
// `document` for `mousedown` and calls `closeMenu()` if the click is
// outside the toolbar pusher. By adding a capture-phase listener on our
// portal root, we intercept the event before it bubbles to `document`.
const handleMousedown = useCallback((e) => {
e.stopPropagation();
}, []);
useEffect(() => {
if (show) {
const container = containerRef.current;
document.addEventListener('keydown', handleKeyDown);
// capture=true: fires before any bubbling listeners on ancestors
container.addEventListener('mousedown', handleMousedown, true);
return () => {
document.removeEventListener('keydown', handleKeyDown);
container.removeEventListener('mousedown', handleMousedown, true);
};
}
}, [show, handleKeyDown, handleMousedown]);
if (!show) return null;
return createPortal(
<>
{
// Only cancel when clicking the backdrop itself, not children
if (e.target === e.currentTarget) {
onCancel();
}
}}
onKeyDown={(e) => {
if (e.key === 'Escape') {
e.preventDefault();
e.stopPropagation();
onCancel();
}
}}
data-testid="li-modal-backdrop"
>