Skip to content

[EMAIL-PREVIEW-4] PLU-386: Enable email previews in appropriate previous result data #1655

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ogp-weeloong wants to merge 2 commits into
base: claude/preview-button-menubar
Choose a base branch
from
Open

[EMAIL-PREVIEW-4] PLU-386: Enable email previews in appropriate previous result data #1655

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
595fdd9
feat: add 'email' to TDataOutMetadatumType and use it for Postman body
ogp-weeloong May 25, 2026
28e5cbd
feat: route 'email' dataOut variables through EmailPreviewModal
ogp-weeloong May 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/backend/src/apps/postman/actions/send-transactional-email/get-data-out-metadata.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ async function getDataOutMetadata(
body: {
label: 'Body',
order: 2,
type: 'html',
type: 'email',
displayedValue: 'Preview body',
},
recipient: {
Expand Down
4 changes: 3 additions & 1 deletion packages/frontend/src/components/EmailPreviewModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,12 +85,14 @@ interface EmailPreviewModalProps {
isOpen: boolean
onClose: () => void
html: string
title: string
}

export default function EmailPreviewModal({
isOpen,
onClose,
html,
title,
}: EmailPreviewModalProps) {
const [selectedClientId, setSelectedClientId] = useState<string>(
'outlook-windows-legacy',
Expand All @@ -117,7 +119,7 @@ export default function EmailPreviewModal({
<ModalOverlay />
<ModalContent maxH="85vh" overflow="hidden" borderRadius="lg">
<ModalHeader borderBottom="1px solid" borderColor="base.divider.medium">
<Flex direction="column">Preview your email</Flex>
<Flex direction="column">{title}</Flex>
<ModalCloseButton />
</ModalHeader>
<ModalBody p={4}>
Expand Down
2 changes: 1 addition & 1 deletion packages/frontend/src/components/RichTextEditor/PreviewButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function usePreviewer(previewType: TFieldPreviewType | undefined) {
(props: PreviewerProps): ReactNode => {
switch (previewType) {
case 'email':
return <LazyEmailPreviewModal {...props} />
return <LazyEmailPreviewModal {...props} title="Preview your email" />
}
return null
},
Expand Down
36 changes: 33 additions & 3 deletions packages/frontend/src/components/VariablesList/VariableItemWithModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useContext } from 'react'
import { lazy, Suspense, useCallback, useContext, useTransition } from 'react'
import { useDisclosure } from '@chakra-ui/react'

import { EditorContext } from '@/contexts/Editor'
Expand All @@ -9,6 +9,8 @@ import HtmlVariableModal from './HtmlVariableModal'
import TableVariableModal from './TableVariableModal'
import { VariableItem } from '.'

const LazyEmailPreviewModal = lazy(() => import('../EmailPreviewModal'))

interface VariableItemWithModalProps {
variable: Variable
onClick?: (variable: Variable) => void
Expand All @@ -35,7 +37,16 @@ export default function VariableItemWithModal(
const canOpenModal =
// we do not want to show a table preview if there are no rows
(variable.type === 'table' && variable.displayedValue !== '0 rows') ||
variable.type === 'html'
variable.type === 'html' ||
variable.type === 'email'

const preloadModal = useCallback(() => {
if (variable.type === 'email') {
import('../EmailPreviewModal')
}
}, [variable.type])

const [isPending, startTransition] = useTransition()

const handleClick = () => {
if (!onClick) {
Expand Down Expand Up @@ -87,6 +98,19 @@ export default function VariableItemWithModal(
onClose={onModalClose}
/>
)
case 'email':
return (
<Suspense fallback={null}>
{isModalOpen && (
<LazyEmailPreviewModal
isOpen={isModalOpen}
onClose={onModalClose}
html={(variable.value as string) ?? ''}
title="View email"

@kevinkim-ogp kevinkim-ogp Jun 8, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can consider getting the subject from the data out to display as the title?

/>
)}
</Suspense>
)
}
}

Expand All @@ -97,8 +121,14 @@ export default function VariableItemWithModal(
<VariableItem
key={`variable-${variable.name}`}
variable={variable}
onClick={canOpenModal ? onModalOpen : undefined}
onClick={
canOpenModal
? () => startTransition(() => onModalOpen())
: undefined
}
withViewButton={canOpenModal}
onViewButtonPreload={preloadModal}
isViewButtonLoading={isPending}
/>
{renderModal()}
</>
Expand Down
15 changes: 13 additions & 2 deletions packages/frontend/src/components/VariablesList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { POPOVER_MOTION_PROPS } from '@/theme/constants'

import VariableItemWithModal from './VariableItemWithModal'

const VARIABLES_WITH_MODALS = ['table', 'html']
const VARIABLES_WITH_MODALS = ['table', 'html', 'email']
const VARIABLE_ITEM_HEIGHT = 77
const SUGGESTION_VARIABLE_ITEM_HEIGHT = 61

Expand Down Expand Up @@ -92,11 +92,15 @@ export function VariableItem({
onClick,
isLast,
withViewButton,
onViewButtonPreload,
isViewButtonLoading,
}: {
variable: Variable
onClick?: (variable: Variable) => void
isLast?: boolean
withViewButton?: boolean
onViewButtonPreload?: () => void
isViewButtonLoading?: boolean
}): JSX.Element {
const shouldShowBottomBorder = !withViewButton && (onClick || isLast)

Expand Down Expand Up @@ -172,7 +176,14 @@ export function VariableItem({
</Flex>

{onClick && withViewButton && (
<Button variant="clear" onClick={() => onClick(variable)}>
<Button
variant="clear"
onClick={() => onClick(variable)}
onMouseEnter={onViewButtonPreload}
onFocus={onViewButtonPreload}
onPointerDown={onViewButtonPreload}
isLoading={isViewButtonLoading}
>
View
</Button>
)}
Expand Down
1 change: 1 addition & 0 deletions packages/frontend/src/helpers/variables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export const VISIBLE_VARIABLE_TYPES: TDataOutMetadatumType[] = [
'approval',
'ai_response',
'html',
'email',
]

export interface StepWithVariables {
Expand Down
1 change: 1 addition & 0 deletions packages/types/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export type TDataOutMetadatumType =
| 'approval'
| 'ai_response'
| 'html'
| 'email'

/**
* This should only be defined on _leaf_ nodes (i.e. **primitive array
Expand Down
Loading