mcp-card.tsx

Overview

mcp-card.tsx defines a React functional component named McpCard which visually represents a single MCP (Multi-Component Package) server data entity in a card format. This card displays essential information about the MCP server, such as its name, the count of cached tools associated with it, and the last update date. The component also integrates user interaction elements including a dropdown menu for more actions and a checkbox to select the card, supporting bulk operations.

The card is designed to be reusable within a list or grid of MCP servers, providing easy access to editing and selection features while presenting key data in a concise and user-friendly manner.

Detailed Explanation

Imports and Dependencies

UI components:
- Card, CardContent from @/components/ui/card
- Checkbox from @/components/ui/checkbox
- MoreButton from @/components/more-button
- McpDropdown from ./mcp-dropdown
Utility:
- formatDate for formatting dates
- isPlainObject from lodash to check object types
React:
- useMemo hook for memoizing computations
Types:
- IMcpServer interface describing the MCP server data structure
- Types from hooks UseBulkOperateMCPReturnType and UseEditMcpReturnType for bulk selection and edit modal functionality

Type: `DatasetCardProps`

export type DatasetCardProps = {
  data: IMcpServer;
} & Pick<UseBulkOperateMCPReturnType, 'handleSelectChange' | 'selectedList'> &
  Pick<UseEditMcpReturnType, 'showEditModal'>;

Purpose: Defines the props accepted by McpCard.
Properties:
- data: An object adhering to IMcpServer interface containing all MCP server details.
- selectedList: Array of selected MCP server IDs, used for checkbox state.
- handleSelectChange: Function to handle selection toggling (checkbox).
- showEditModal: Function to trigger the display of an edit modal for the MCP server.

Component: `McpCard`

export function McpCard({
  data,
  selectedList,
  handleSelectChange,
  showEditModal,
}: DatasetCardProps) {
  // ...
}

Parameters

data: IMcpServer - The MCP server data object.
selectedList: string[] - List of selected MCP server IDs.
handleSelectChange: (id: string, checked: boolean) => void - Callback to update selection.
showEditModal: (id: string) => void - Callback to open the edit modal.

Return Value

React JSX element representing the MCP server card.

Detailed Behavior

Tool Count Calculation
```
const toolLength = useMemo(() => {
  const tools = data.variables?.tools;
  if (isPlainObject(tools)) {
    return Object.keys(tools || {}).length;
  }
  return 0;
}, [data.variables?.tools]);
```
- Uses React's useMemo to efficiently compute the number of cached tools.
- Checks if tools is a plain object and counts its keys.
- Returns 0 if no tools are found or if data is not in the expected format.

Checkbox Change Handler

const onCheckedChange = (checked: boolean) => {
  if (typeof checked === 'boolean') {
    handleSelectChange(data.id, checked);
  }
};

Handles the checkbox toggle event.
Calls handleSelectChange with the MCP server ID and the new checked state.

Rendering
- A Card component wraps the entire MCP server representation.
- Displays the MCP server's name in a heading with truncation for long names.
- Includes a McpDropdown component with a MoreButton as its trigger for additional actions.
- A Checkbox allows selection of the MCP server, respecting the selectedList.
- Displays the number of cached tools and the formatted update date.

Usage Example

import { McpCard } from './mcp-card';
import { useBulkOperateMCP } from './use-bulk-operate-mcp';
import { useEditMcp } from './use-edit-mcp';

function MCPList({ mcpServers }) {
  const { selectedList, handleSelectChange } = useBulkOperateMCP();
  const { showEditModal } = useEditMcp();

  return mcpServers.map(mcp => (
    <McpCard
      key={mcp.id}
      data={mcp}
      selectedList={selectedList}
      handleSelectChange={handleSelectChange}
      showEditModal={showEditModal}
    />
  ));
}

Important Implementation Details

Memoization: The tool count is memoized with useMemo to optimize performance and avoid unnecessary recalculations on re-renders.
Type Safety: Props leverage TypeScript's utility types such as Pick to enforce only necessary properties from bulk operation and edit hooks.
Event Propagation Control: The checkbox's onClick event calls e.stopPropagation() to prevent the click event from bubbling up, which could trigger unwanted card-level click handlers.
UI Responsiveness: The card width is fixed (w-64), and text elements use truncation (truncate and line-clamp-1) to maintain layout integrity with variable-length text.

Interaction With Other Parts of the System

IMcpServer Interface: The data prop uses this interface to ensure consistent MCP server data structure across the app.
Bulk Operations: Integrates with useBulkOperateMCP hook to support selecting multiple cards for batch actions.
Editing MCP Server: Connects with useEditMcp hook to enable opening an edit modal when requested.
Dropdown Menu: Uses McpDropdown and MoreButton components to provide contextual actions for each card.
Date Formatting: Utilizes a shared utility formatDate to present update timestamps in user-friendly format.

Visual Diagram

The following Mermaid component diagram illustrates the structure and interactions of the McpCard component and its dependencies:

componentDiagram
    component McpCard {
        +props: DatasetCardProps
        +render()
    }
    component Card
    component CardContent
    component Checkbox
    component McpDropdown
    component MoreButton
    component formatDate

    McpCard --> Card
    Card --> CardContent
    CardContent --> McpDropdown
    McpDropdown --> MoreButton
    CardContent --> Checkbox
    McpCard ..> formatDate : uses

Summary

mcp-card.tsx provides a clean, interactive card component for displaying MCP server information with built-in support for selection and editing workflows. It leverages composition of smaller UI components and utility functions to maintain modularity and clarity, making it a crucial UI building block within the MCP server management interface.