index.tsx

Overview

This file defines a React component ExeSQLForm that renders a form interface for configuring and executing SQL statements in a flow-based application. It leverages React Hook Form for form state management and validation, integrates UI components from an internal design system, and supports internationalization.

The form includes fields for SQL input and database connection parameters (such as DB type, username, host, port, etc.), and provides a "Test" button to submit and validate the SQL execution configuration. The file also defines a subcomponent ExeSQLFormWidgets responsible for rendering the database connection fields.

Key features:

• Form validation with Zod schema integration.

• Dynamic form field rendering using react-hook-form.

• Internationalization support via react-i18next and a custom translation hook.

• Custom UI components for inputs, selects, and buttons.

• Output display reflecting the current form data structure.

• Memoization for performance optimization.

Components and Functions

ExeSQLFormWidgets

A presentational component rendering the database connection related form fields and the submit button.

Props

Usage

<ExeSQLFormWidgets loading={isLoading} />

Description

• Uses useFormContext() to access the parent form's context.

• Renders form fields:

  • db_type (select dropdown with search)

  • database (text input)

  • username (text input)

  • host (text input)

  • port (number input)

  • password (password input)

  • max_records (number input)

• Each field is wrapped in FormField, FormItem, FormLabel, FormControl, and FormMessage components for structured layout and validation messaging.

• The "Test" button triggers form submission and shows a loading spinner when loading is true.

ExeSQLForm

The main exported component that represents the SQL execution form.

Props

Usage

<ExeSQLForm node={currentNode} />

Description

• Initializes form state using useForm with validation via the FormSchema (Zod schema).

• Uses useFormValues to compute default values based on the node's existing data.

• Uses useSubmitForm hook to get the onSubmit handler and loading state.

• Watches form changes via useWatchFormChange to update external state when form data changes.

• Renders:

  • A FormWrapper wrapping the entire form submission handler.

  • A RAGFlowFormItem containing a PromptEditor for entering the SQL statement.

  • The ExeSQLFormWidgets for database connection configuration.

  • An Output component displaying the form outputs, processed via buildOutputList.

• Memoized with React.memo to avoid unnecessary re-renders unless props change.

Important Implementation Details

• Form Validation: Uses zodResolver to integrate Zod schema validation with React Hook Form. The schema is imported from ./use-submit-form.

• Form Context Sharing: ExeSQLFormWidgets consumes form context from ExeSQLForm using useFormContext(), enabling modular form field components.

• Internationalization: Utilizes useTranslate('flow') and useTranslation() for localized labels and tooltips.

• Output Processing: The outputs are preprocessed using buildOutputList utility based on initial values imported from constants.

• Loading State: The submit button displays loading animation during form submission to provide user feedback.

• Custom UI Components: Uses an internal UI library (@/components/ui/...) for consistent styling and behavior.

Interaction with Other Parts of the System

• Hooks:

  • useFormValues provides default values from the node's existing data.

  • useWatchFormChange observes form changes and updates node state accordingly.

  • useSubmitForm handles form submission logic, including API calls or side effects.

• UI Components: Relies on reusable UI components for input controls, select dropdowns, buttons, and form layout.

• Constants & Options: Uses initialExeSqlValues for default form data and ExeSQLOptions for database type select options.

• Output Display: The Output component visualizes the configured outputs, reflecting how the SQL execution results will be handled downstream.

• Translations: Integrates with the application's i18n framework for multi-language support.

Code Structure Diagram

The following Mermaid component diagram illustrates the relationship between the main components and hooks in this file:

componentDiagram
    component ExeSQLForm {
      +node: INextOperatorForm
      +renders FormWrapper
      +uses useForm
      +uses useSubmitForm
      +uses useFormValues
      +uses useWatchFormChange
      +renders RAGFlowFormItem -> PromptEditor
      +renders ExeSQLFormWidgets
      +renders Output
    }
    component ExeSQLFormWidgets {
      +loading: boolean
      +uses useFormContext
      +renders multiple FormField components
      +includes ButtonLoading
    }
    component useSubmitForm
    component useFormValues
    component useWatchFormChange
    component FormWrapper
    component Output
    component PromptEditor

    ExeSQLForm --> useSubmitForm
    ExeSQLForm --> useFormValues
    ExeSQLForm --> useWatchFormChange
    ExeSQLForm --> FormWrapper
    ExeSQLForm --> RAGFlowFormItem
    RAGFlowFormItem --> PromptEditor
    ExeSQLForm --> ExeSQLFormWidgets
    ExeSQLForm --> Output
    ExeSQLFormWidgets --> useFormContext
    ExeSQLFormWidgets --> ButtonLoading

Example Usage

import ExeSQLForm from './index';

function FlowNodeEditor({ currentNode }) {
  return (
    <div>
      <h2>Configure SQL Execution</h2>
      <ExeSQLForm node={currentNode} />
    </div>
  );
}

Summary

This file provides a well-structured, validated, and localized React form component for configuring SQL execution nodes within a flow. It cleanly separates UI concerns via modular components and custom hooks, integrates with a design system and internationalization, and manages complex form state and validation efficiently. The form supports real-time form value watching and output visualization, making it a core UI component in a larger flow-based automation or orchestration system.