edit-mcp-dialog.tsx

Overview

edit-mcp-dialog.tsx defines the EditMcpDialog React component, which provides a user interface dialog for adding or editing an MCP (Model Control Panel) server configuration. The dialog includes a form for MCP server details, testing capabilities for the server connection, and displays a collapsible list of MCP tools associated with the server.

This file primarily manages user input, validation, server testing, and saving MCP server configurations. It leverages form validation schemas, custom hooks for fetching and testing MCP servers, and UI components from the project’s design system.

Detailed Explanation

Main Exported Component: `EditMcpDialog`

function EditMcpDialog({
  hideModal,
  loading,
  onOk,
  id,
}: IModalProps<any> & { id: string }) { ... }

Purpose

Displays a modal dialog for creating or editing an MCP server.
Allows users to input MCP server details (name, type, URL, authorization token).
Provides a test button to validate the MCP server connection.
Shows a collapsible list of MCP tools retrieved from the server.
Handles saving the MCP configuration.

Props

Prop	Type	Description
`hideModal`	`() => void`	Callback to close the dialog.
`loading`	`boolean`	Indicates if the save operation is in progress.
`onOk`	`(values: any) => void`	Callback triggered on save with form values.
`id`	`string`	MCP server ID, if editing an existing server.

Internal State & Hooks

useTranslation() - for i18n translations.
useTestMcpServer() - hook to test MCP server connectivity.
useGetMcpServer(id) - hook to fetch MCP server details by ID.
useForm() - React Hook Form for form state and validation with a schema built by useBuildFormSchema.
Local state:
- isTriggeredBySaving - tracks if form submission was triggered by save button.
- collapseOpen - controls the tools list collapse state.
- fieldChanged - tracks if form fields have been changed.
useMemo and useEffect to derive and synchronize form and tools data.

Form Details

Uses EditMcpForm component to render inputs.
Form schema validated by zod resolver (useBuildFormSchema).
Default values set for new entries (DefaultValues constant).

Key Methods

handleTest: triggered by the test button; sets isTriggeredBySaving to false.
handleSave: triggered by save button; sets isTriggeredBySaving to true.
handleOk:
- If saving, calls onOk with formatted values (authorization token moved to headers).
- Otherwise, runs testMcpServer to validate the connection and updates fieldChanged accordingly.

Rendering

Uses Dialog and related components for modal layout.
Contains the EditMcpForm for input fields.
Displays a Collapse component that shows the list of MCP tools (McpToolCard components).
Provides buttons for testing and saving, with loading and disabled states.

Helper Function: `transferToolToArray`

function transferToolToArray(tools: IMCPToolObject): IMCPTool[] { ... }

Converts an object of MCP tools keyed by name into an array of tool objects including the name property.
Used to normalize tools data for display.

Parameters:

tools: An object where keys are tool names and values are tool details (IMCPToolObject).

Returns:

An array of IMCPTool objects, each containing tool details along with the name key.

Related Interfaces and Types

IModalProps<any>: generic modal props interface (from @/interfaces/common).
IMCPTool, IMCPToolObject: MCP tool data structures (from @/interfaces/database/mcp).
ServerType: Enum indicating MCP server type (e.g., SSE).
FormSchema: Zod schema for validating the MCP form data.

Usage Example

import { EditMcpDialog } from './edit-mcp-dialog';

function ParentComponent() {
  const [showDialog, setShowDialog] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleSave = async (values) => {
    setLoading(true);
    await apiSaveMcpServer(values);
    setLoading(false);
    setShowDialog(false);
  };

  return (
    <>
      <button onClick={() => setShowDialog(true)}>Edit MCP Server</button>
      {showDialog && (
        <EditMcpDialog
          id="existing-server-id"
          loading={loading}
          onOk={handleSave}
          hideModal={() => setShowDialog(false)}
        />
      )}
    </>
  );
}

Implementation Details and Algorithms

Form Validation: Uses a dynamically built Zod schema (useBuildFormSchema) integrated with React Hook Form for strong validation.
Server Testing: The test button triggers a call to useTestMcpServer hook to validate the server connection asynchronously.
Tool Data Management: Tool data is either pulled from the test server response or from stored MCP server data. The transferToolToArray utility converts tool objects to arrays for rendering.
Field Change Tracking: The form tracks if any fields have changed to disable save button when no changes exist.
Authorization Token Handling: Authorization token is stored in the form but moved into headers format on submission.

Interaction with Other Parts of the Application

Imports UI primitives (Dialog, Button, Collapse) from the app’s component library.
Uses hooks (useGetMcpServer, useTestMcpServer) to interact with backend APIs for MCP server data retrieval and testing.
Depends on EditMcpForm for rendering form inputs and validation.
Uses McpToolCard to display individual MCP tools inside the collapsible list.
Utilizes translation (useTranslation) for multilingual support.
Handles form state and validation using react-hook-form and zod.

Visual Diagram

The following Mermaid class diagram summarizes the structure and main methods/properties of the EditMcpDialog component and its helper function:

classDiagram
    class EditMcpDialog {
        +hideModal: () => void
        +loading: boolean
        +onOk(values: object): void
        +id: string
        -isTriggeredBySaving: boolean
        -collapseOpen: boolean
        -fieldChanged: boolean
        -form: UseFormReturn
        -tools: IMCPTool[]
        +handleTest(e: MouseEvent): void
        +handleSave(): void
        +handleOk(values: object): Promise<void>
    }

    class transferToolToArray {
        +tools: IMCPToolObject
        +return IMCPTool[]
    }

    EditMcpDialog ..> transferToolToArray : uses

Summary

edit-mcp-dialog.tsx is a React component file that provides a modal dialog UI to create or edit MCP servers.
It manages user input, validation, testing of server connection, and displaying associated MCP tools.
The dialog integrates tightly with backend hooks and UI components, offering a seamless user experience for MCP server management.
The file’s modular approach separates concerns: form rendering (EditMcpForm), tools display (McpToolCard), and server communication (useGetMcpServer, useTestMcpServer).

This component is critical for maintaining MCP server configurations within the application.

End of Documentation for edit-mcp-dialog.tsx