import-mcp-form.tsx

Overview

import-mcp-form.tsx defines a React client component ImportMcpForm that renders a controlled form for importing .json files related to a platform identified as RAGFlow. This form leverages the react-hook-form library for form state management and zod for schema-based validation. The form primarily enables users to upload JSON files, validates the input, and submits the data back to a handler passed via props. It is designed to be embedded within a modal dialog, with hooks for closing the modal upon successful submission.

Component: ImportMcpForm

Description

ImportMcpForm is a React functional component that renders a form for importing MCP (presumably a domain-specific data format) JSON files. It uses form validation to ensure:

• A platform is selected (defaulting to RAGFlow).

• At least one file is uploaded, and these files must be instances of File.

The form submission triggers the onOk callback with the form data and closes the modal on success via the hideModal callback.

Props

interface IModalProps<T> {
  hideModal?: () => void;
  onOk?: (data: T) => Promise<boolean> | boolean;
}

• hideModal: Optional. Function to hide/close the modal containing the form.

• onOk: Optional. Async or sync function that receives the form data upon submission and returns a boolean indicating success.

Internal Types

• FormSchema (zod schema):

  z.object({
    platform: z.string().min(1).trim(),
    fileList: z.array(z.instanceof(File)),
  })
  

  • platform: string (required, trimmed, minimum length 1).

  • fileList: array of File objects (uploaded files).

Behavior and Workflow

1. Form Initialization

   • Uses useForm from react-hook-form with zodResolver to link the FormSchema validation.

   • Default platform value is set to Platform.RAGFlow.

2. File Upload

   • Uses a custom FileUploader UI component to manage file input.

   • Limits accepted file types to .json with MIME type application/json.

3. Form Submission

   • On submit, invokes onOk with the form data.

   • If onOk returns truthy (success), calls hideModal to close the modal.

4. Translations

   • Uses react-i18next to provide localized strings for labels and validation messages.

Return (Rendered JSX)

• Wraps the form in a <Form> component that integrates with react-hook-form.

• Form contains one field: fileList with a file uploader.

• The form has an id set from TagRenameId constant (likely used elsewhere for identification).

Usage Example

import { ImportMcpForm } from './import-mcp-form';

function ExampleModal() {
  const [isOpen, setIsOpen] = React.useState(true);

  async function handleOk(data: { platform: string; fileList: File[] }) {
    // Process imported files here
    console.log('Import data:', data);
    // Return true if successful, false otherwise
    return true;
  }

  return isOpen ? (
    <Modal>
      <ImportMcpForm
        onOk={handleOk}
        hideModal={() => setIsOpen(false)}
      />
    </Modal>
  ) : null;
}

Important Implementation Details

• Validation with Zod:

  • Enforces that the platform is a non-empty trimmed string.

  • Ensures uploaded files are valid File instances.

• FileUploader Component:

  • Custom component controlling file input UI and logic.

  • Restricts accepted files to JSON format via MIME type and extension filter.

• Form Integration:

  • Uses react-hook-form for performant and simple form state and validation management.

  • zodResolver synchronizes schema validation with form state.

• Internationalization:

  • Uses useTranslation hook from react-i18next to localize form labels and error messages.

• Modal Interaction:

  • The form expects to be used inside a modal.

  • Calls hideModal to close the modal after successful data submission.

Interaction with Other Parts of the Application

• FileUploader (imported from @/components/file-uploader):

  Manages file input UI and state for the form.

• UI Form Components (imported from @/components/ui/form):

  Custom form components (Form, FormControl, FormField, FormItem, FormLabel, FormMessage) to standardize form styling and accessibility.

• Constants (from @/constants/common and @/pages/add-knowledge/constant):

  • Platform.RAGFlow: Default platform value.

  • FileMimeType.Json: Accepted MIME type for files.

  • TagRenameId: Used as form identifier (possibly for UI testing or DOM targeting).

• Internationalization (via react-i18next):

  Provides translation support for form labels and validation messages.

• Modal System:

  The component receives props (hideModal, onOk) which are typically passed from a modal wrapper component managing display and lifecycle of dialogs.

Mermaid Diagram - Component Structure and Workflow

componentDiagram
    ImportMcpForm <|-- Form : uses
    ImportMcpForm <|-- useForm : manages form state
    ImportMcpForm --> zodResolver : validates with
    ImportMcpForm --> FileUploader : file input UI
    ImportMcpForm --> useTranslation : localization
    ImportMcpForm --> onOk : submits data
    ImportMcpForm --> hideModal : closes modal on success

    %% Description
    note right of ImportMcpForm
      - Initializes form with validation schema
      - Renders file upload field
      - Handles form submission asynchronously
      - Closes modal if submission succeeds
    end note

Summary

The import-mcp-form.tsx file implements a localized, schema-validated file import form as a React component. It integrates tightly with custom UI components and form management libraries to provide a robust, user-friendly interface for uploading JSON files associated with a particular platform (RAGFlow). The component is designed for modal usage, with clean separation of form logic and UI, making it reusable and easy to maintain within a larger application context.