email-node.tsx

Overview

The email-node.tsx file defines a React functional component for rendering an interactive "Email Node" UI element within a flowchart or workflow editor interface. This component visually represents an email action node, displaying email configuration information such as SMTP server details and sender address. It supports interactive connection points ("handles") for linking this node with others in the flow, and allows users to toggle the visibility of additional details including an example JSON input schema.

This file is designed to be used with the @xyflow/react library, which provides node and handle components for building flow-based editors, and integrates UI components from antd along with CSS modules for styling. The component is memoized with React's memo for performance optimization.

Component: `InnerEmailNode`

Description

InnerEmailNode is the main React functional component in this file. It renders the node UI for an email action in a flow editor. It shows basic SMTP configuration details, and when clicked, expands to show an example JSON input format that this node expects. The component supports selectable styling and connection handles on its left and right edges for linking nodes.

Props

InnerEmailNode receives props typed as NodeProps from @xyflow/react and a custom interface IEmailNode. The main props used are:

Prop	Type	Description	Default
`id`	`string`	Unique identifier for the node instance.	Required
`data`	`IEmailNode`	Data object containing node-specific information (name, label, form).	Required
`isConnectable`	`boolean`	Flag indicating if the node's handles should allow connections.	`true`
`selected`	`boolean`	Indicates if the node is currently selected in the UI.	`false`

Internal State

State	Type	Description
`showDetails`	`boolean`	Controls whether the detailed JSON input example is shown.

JSX Structure

Handles: Two components on the left and right sides for source connections.
NodeHeader: Displays the node's name and label.
Email Configuration Summary: Shows SMTP server, port, and sender email.
Details Toggle: Clicking the summary toggles display of the expected JSON input example.
Conditional JSON Example: Visible only when showDetails is true.

Usage Example

import { EmailNode } from './email-node';

const exampleNodeData = {
  name: "Send Email",
  label: "Email Action",
  form: {
    smtp_server: "smtp.example.com",
    smtp_port: 587,
    email: "[email protected]"
  }
};

<EmailNode
  id="node-123"
  data={exampleNodeData}
  isConnectable={true}
  selected={false}
/>

Return Value

The component returns a JSX element representing the styled email node UI.

Implementation Details

Uses React hooks (useState) for toggling detailed view.
Utilizes CSS modules for scoped styling (styles).
Uses classNames to conditionally apply styles (e.g., when selected).
The Handle components come from @xyflow/react to act as connection points.
The email configuration is shown in a compact form, expanding to reveal an example JSON schema on click.
Uses Flex from antd for vertical spacing and layout.
The component is memoized with React.memo as EmailNode to prevent unnecessary re-renders when props don’t change.

Exported Components

Export Name	Description
`InnerEmailNode`	The email node React component.
`EmailNode`	Memoized version of `InnerEmailNode` for performance.

Interaction with Other Parts of the System

Interfaces: Uses IEmailNode interface from the @/interfaces/database/flow path, which defines the data model for the node.
Flow System: Integrates with the @xyflow/react flow editor library by using Handle, NodeProps, and Position components/types.
Styling: Imports CSS module styles from ./index.less.
Node Header: Composes with a NodeHeader component which handles displaying the node’s title and label.
Handle Styles: Applies custom styles for connection handles imported from ./handle-icon.
Ant Design: Uses the Flex component from antd for layout.

This component would be used as part of a larger flowchart or workflow editor interface, where users create and connect nodes to define automated email actions.

Mermaid Diagram

classDiagram
    class InnerEmailNode {
        +id: string
        +data: IEmailNode
        +isConnectable: boolean
        +selected: boolean
        +showDetails: boolean (state)
        +() : JSX.Element
    }
    class EmailNode {
        +InnerEmailNode: React.MemoExoticComponent
    }
    InnerEmailNode <|-- EmailNode
    InnerEmailNode : +setShowDetails(boolean)
    InnerEmailNode : +Handle (left & right)
    InnerEmailNode : +NodeHeader(id, name, label)
    InnerEmailNode : +Flex (container for layout)

Summary

email-node.tsx provides a reusable, styled React component to visually represent an email action node in a flow editor interface. It efficiently handles user interaction to show/hide detailed configuration data and supports connections to other nodes through interactive handles. Memoization and modular design make it performant and easy to maintain or extend.