email-node.tsx

Overview

The email-node.tsx file defines a React functional component named EmailNode, which represents a node in a flow or workflow editor UI. This node visually encapsulates email configuration details and provides interactive handles for connecting this node with others in the workflow graph. It is designed to be used within a React flow-based system (using @xyflow/react), likely for creating or editing email-related automation or integration flows.

Key features include:

• Displaying core email settings (SMTP server, port, and sender email).

• An expandable section that reveals an example of the expected JSON input format for this email node.

• Handles on the left and right sides for connecting with other nodes.

• Visual highlighting when selected.

• Integration with styling and reusable subcomponents.

Detailed Explanation

Imports and Dependencies

• IEmailNode: Interface defining the data structure for the email node's props.

• @xyflow/react: Provides Handle, NodeProps, and Position components/types, essential for node connectivity in the flow editor.

• antd's Flex: For layout with vertical stacking and gap control.

• classNames: Utility to conditionally apply CSS classes.

• React's useState: State hook to manage UI toggling of details.

• LeftHandleStyle, RightHandleStyle: Inline styles for node connection handles.

• styles: CSS module for component styling.

• NodeHeader: A reusable component rendering the node's header, including title and label.

EmailNode Component

export function EmailNode({
  id,
  data,
  isConnectable = true,
  selected,
}: NodeProps<IEmailNode>) { ... }

Purpose

EmailNode renders a flow node displaying email configuration details with connection handles for integration into a flow graph. It supports toggling detailed information about the input JSON format needed for this node.

Parameters

• id: string
  Unique identifier of the node in the flow graph.

• data: IEmailNode
  Object containing the node's email configuration and metadata. Expected properties include:

  • name: string - Name of the email node.

  • label: string - Descriptive label.

  • form?: { smtp_server?: string; smtp_port?: number; email?: string } - Email configuration form data.

• isConnectable?: boolean (default: true)
  Indicates whether the node's handles can be connected to other nodes.

• selected?: boolean
  Indicates if the node is currently selected in the UI, affecting styling.

Internal State

• showDetails: boolean (via useState)
  Controls visibility of the expanded JSON input example section.

JSX Structure

1. Container <section>

   • Applies base styles.

   • Adds selectedNode style when the node is selected.

2. Handles

   • Left handle (id="c") positioned on the left side, styled with LeftHandleStyle.

   • Right handle (id="b") positioned on the right side, styled with RightHandleStyle.

   • Both handles use isConnectable to enable/disable connection.

3. NodeHeader

   • Displays the node's name and label, using the NodeHeader component.

4. Details Section

   • A clickable div showing SMTP server, port, and sender email.

   • Clicking toggles showDetails.

   • Displays an expand/collapse icon ('▶' or '▼').

5. Expanded JSON Example

   • When showDetails is true, shows a preformatted JSON snippet indicating the expected input format:

     {
       "to_email": "...",
       "cc_email": "...", 
       "subject": "...",
       "content": "..."
     }
     

Return Value

• Returns a React JSX element representing the email node UI.

Usage Example

import { EmailNode } from './email-node';
import { IEmailNode } from '@/interfaces/database/flow';

// Sample node data
const emailNodeData: IEmailNode = {
  name: "Send Welcome Email",
  label: "Email",
  form: {
    smtp_server: "smtp.example.com",
    smtp_port: 587,
    email: "[email protected]",
  },
};

// Render inside a flow
<EmailNode 
  id="node-1" 
  data={emailNodeData} 
  isConnectable={true} 
  selected={false} 
/>

Important Implementation Details

• Handles and Connectivity:
  The component uses two Handle elements from @xyflow/react positioned on the left and right sides. The left handle has an explicit id="c", and the right handle has id="b". These IDs likely correspond to specific connection points used by the flow system to link nodes.

• Toggleable Details:
  The email configuration section is interactive; clicking toggles showing a JSON example. This improves usability by letting users view or hide advanced details without clutter.

• Styling:
  The use of CSS modules (index.less imported as styles) ensures scoped and maintainable styling. Conditional classes apply selection highlights.

• Reusability:
  The NodeHeader component is abstracted, allowing consistent headers across different node types.

Interaction with Other System Components

• Flow Editor:
  This node component is intended for use within a flow/workflow editor UI, which manages nodes and edges. It relies on @xyflow/react for handles and node properties.

• NodeHeader Component:
  Imported from a sibling file, it provides consistent header UI and likely handles node title and label rendering.

• Style and Handle Icons:
  Styles and handle icon styles are imported locally, implying a shared style/theme system within the node components.

• Interfaces:
  The IEmailNode interface defines the expected shape of the node data, ensuring type safety and consistency.

Mermaid Component Diagram

componentDiagram
    component EmailNode {
        +id: string
        +data: IEmailNode
        +isConnectable: boolean
        +selected: boolean
        +showDetails: boolean (state)
        +render()
    }
    component Handle_Left {
        +id: "c"
        +type: "source"
        +position: Left
    }
    component Handle_Right {
        +id: "b"
        +type: "source"
        +position: Right
    }
    component NodeHeader {
        +id: string
        +name: string
        +label: string
        +render()
    }
    EmailNode --> Handle_Left : renders
    EmailNode --> Handle_Right : renders
    EmailNode --> NodeHeader : uses

Summary

The email-node.tsx file delivers a specialized React component representing an email configuration node in a flow editor UI. It showcases essential email sending parameters, offers a toggleable example of input data, and integrates with a node-based flow system through connection handles. The component emphasizes usability, modularity, and clean styling to fit seamlessly within a larger workflow application.