Modals and Overlays
Relevant source files
The following files were used as context for generating this wiki page:
Modals and overlays in the Recoup Admin platform are utilized to provide focused, contextual views of specific data entities without navigating away from the primary page. These components typically handle detailed information displays, such as email previews or task run specifics, using semi-transparent backdrops and centered container layouts.
The architecture relies on React state management to control visibility and data injection, ensuring that the overlay remains decoupled from the underlying page logic while maintaining access to relevant identifiers for data fetching.
Pulse Email Modal System
The primary implementation of the modal pattern is the PulseEmailModal. This system is designed to intercept user interactions with task runs and display a detailed preview of emails sent during "send-pulse-task" executions.
Component Architecture
The modal is decomposed into a main container and two specialized sub-components to handle the header and body content separately.
| Component | Responsibility |
|---|---|
PulseEmailModal | Main wrapper handling the fixed inset backdrop, click-to-close logic, and data orchestration. |
PulseEmailModalHeader | Displays the email subject, recipients, and timestamp, or the Task Run ID if data is missing. |
PulseEmailModalBody | Manages loading states, error handling, and the rendering of HTML content via an iframe. |
Sources: components/AccountDetail/PulseEmailModal.tsx:18-49, components/AccountDetail/PulseEmailModalHeader.tsx:10-39, components/AccountDetail/PulseEmailModalBody.tsx:10-48
Logic and Data Flow
The modal is triggered from the AccountDetailPage when a user clicks on a row in the TaskRunsTable. The selectedRun state dictates which task run's data is passed to the modal.
Implementation Details
Overlay Styling and Interaction
The modal utilizes Tailwind CSS classes to create a standard overlay effect:
- Backdrop:
fixed inset-0 z-50 bg-black/50provides the dimming effect and ensures the modal sits atop all other UI elements. - Containment: The inner container uses
relative max-w-3xl max-h-[90vh]to ensure the modal is responsive and does not exceed the viewport height. - Event Handling: A click listener on the backdrop calls
onClose, while astopPropagation()call on the inner container prevents clicks inside the modal from closing it.
Sources: components/AccountDetail/PulseEmailModal.tsx:23-28
Email Content Rendering
The PulseEmailModalBody specifically handles the security and layout of email content:
- HTML Sanitization/Isolation: If the email contains HTML, it is rendered within an
iframeusing thesrcDocattribute andsandbox="allow-same-origin"to prevent style leakage or script execution within the main admin context. - Fallback: If no HTML is present, it defaults to a
whitespace-pre-wrapcontainer for plain text.
Sources: components/AccountDetail/PulseEmailModalBody.tsx:32-46
Modal State Management
The lifecycle of the modal is managed through a simple state toggle in the parent component.
Conclusion
Modals in this project, exemplified by the PulseEmailModal, serve as high-fidelity detail views. By separating the modal into a Header and Body, the system maintains a clean separation of concerns: the header manages metadata and dismissal, while the body manages the complex asynchronous state and secure rendering of third-party content.