use-import-mcp.ts

Overview

The use-import-mcp.ts file provides a custom React hook, useImportMcp, designed to facilitate the import of MCP (Multi-Cloud Platform) server configurations in JSON format. It handles file validation, JSON schema validation, and submission of the imported configuration data to the backend server. This hook also manages related UI modal visibility states and loading states during the import operation.

This file is primarily used in UI components requiring MCP server configuration import functionality, typically in administrative or configuration management parts of the application.

Detailed Explanation

Schemas

Two Zod schemas are defined to validate the structure of the MCP configuration JSON file:

ServerEntrySchema

Validates an individual MCP server entry:

McpConfigSchema

Validates the entire MCP configuration JSON structure:

• A record (dictionary) where keys are string identifiers, and values are validated against ServerEntrySchema.

• The root object must have a property mcpServers which is this record.

useImportMcp Hook

Provides all functionalities needed to import an MCP config JSON file, including UI modal controls, file validation, and server data import.

export const useImportMcp = () => {...}

Returns

An object with the following properties and methods:

onImportOk Function

This async callback handles the core import logic triggered upon file selection and confirmation.

Parameters

{ fileList: File[] }

• fileList: Array of File objects selected by the user (usually from an <input type="file" /> or drag-drop).

Workflow

1. File presence check: Ensures at least one file is selected.

2. File type validation: Checks if the file MIME type equals application/json (FileMimeType.Json).

   • If invalid, shows an error message: flow.jsonUploadTypeErrorMessage.

3. File content reading: Reads the file as text.

4. JSON parsing and schema validation:

   • Parses JSON string into an object.

   • Validates parsed object against McpConfigSchema.

   • On failure, shows error messages for incorrect format or content.

5. Empty check: Uses Lodash's isEmpty to ensure the parsed MCP config is not empty.

6. Import request:

   • Calls importMcpServer hook method to submit the MCP config to the server.

   • On successful response (ret.code === 0), closes the import modal.

7. Error handling:

   • Displays localized error messages on parse or validation failures.

Usage example

const { onImportOk, importVisible, showImportModal, hideImportModal, loading } = useImportMcp();

// Bind to a file input or Dropzone component
<FileUploader
  visible={importVisible}
  onOk={onImportOk}
  onCancel={hideImportModal}
  loading={loading}
/>

// Show modal when needed
showImportModal();

Implementation Details & Algorithms

• Schema Validation: Uses zod for runtime validation of JSON structure, ensuring that the imported configuration matches expected schema before processing.

• File Type Safety: Checks MIME type strictly against JSON MIME to prevent invalid file types.

• Robust Error Handling: Multiple try/catch blocks ensure graceful failure with user feedback on both JSON parsing errors and schema validation failures.

• Modal State Management: Uses a custom hook useSetModalState to encapsulate modal visibility state logic.

• Internationalization: Error messages use the react-i18next hook (useTranslation) for localization support.

• Async Operations: File reading and server import operations are asynchronous, preventing UI blocking.

Interaction with Other Parts of the System

• UI Components: This hook is designed to be used within React components that manage import modals/dialogs.

• Modal State Hook: Depends on useSetModalState for modal visibility control.

• Backend API: Calls importMcpServer from useImportMcpServer to send MCP config data to the backend.

• UI Messaging: Uses a centralized message component for showing success/error notifications.

• Constants: Uses FileMimeType from common constants to validate file types.

• Localization: Uses react-i18next for translating user-facing messages.

Mermaid Diagram

flowchart TD
    A[useImportMcp Hook] --> B{Modal State}
    A --> C[onImportOk(fileList)]
    C --> D{File Validation}
    D -->|Invalid type| E[Show Error: jsonUploadTypeErrorMessage]
    D -->|Valid type| F[Read file text]
    F --> G[Parse JSON]
    G --> H{Validate Schema: McpConfigSchema}
    H -->|Invalid| I[Show Error: Incorrect data format]
    H -->|Valid| J{Check Empty}
    J -->|Empty| K[Show Error: jsonUploadContentErrorMessage]
    J -->|Not Empty| L[Call importMcpServer(mcp)]
    L --> M{Response code}
    M -->|0 (Success)| N[hideImportModal()]
    M -->|Other| O[No action]
    
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style C fill:#bbf,stroke:#333,stroke-width:1px
    style D fill:#f96,stroke:#333,stroke-width:1px

Summary

The use-import-mcp.ts file encapsulates critical logic for importing MCP server configurations as JSON files, including validation, error handling, modal state management, and server communication. It provides an easy-to-use hook interface for React components to integrate MCP import functionality seamlessly within the application.