mcp-dropdown.tsx

Overview

mcp-dropdown.tsx defines a React functional component named McpDropdown that provides a dropdown menu UI for managing a specific MCP (presumably "Mission Control Point" or a similar domain-specific entity) identified by mcpId. This dropdown offers options to:

• Edit the MCP entity.

• Export the MCP data as JSON.

• Delete the MCP entity (with a confirmation dialog).

The component integrates with hooks for performing MCP deletion and export operations and uses localized strings for UI text. It leverages reusable dropdown UI components and iconography from third-party and in-house libraries.

Component: McpDropdown

Purpose

McpDropdown renders a dropdown menu attached to its child element(s). This menu allows users to perform edit, export, and delete actions on a single MCP entity identified by the mcpId prop.

Props

Usage Example

import { McpDropdown } from './mcp-dropdown';

function Example() {
  const showEditModal = (id: string) => () => {
    // Show modal logic here
    console.log('Edit MCP:', id);
  };

  return (
    <McpDropdown mcpId="abc123" showEditModal={showEditModal}>
      <button>Open MCP Actions</button>
    </McpDropdown>
  );
}

Detailed Description

• Dropdown Trigger: The dropdown menu is triggered by the children prop wrapped inside DropdownMenuTrigger with asChild to pass down the original element.

• Edit Action: Clicking the "Edit" menu item calls showEditModal(mcpId), which returns a function handling the click event to open the edit modal.

• Export Action: Clicking the "Export" menu item calls handleExportMcpJson([mcpId]) from the useExportMcp hook to export MCP data.

• Delete Action: The "Delete" menu item is wrapped inside a ConfirmDeleteDialog component requiring user confirmation before deletion. The actual deletion is performed by calling deleteMcpServer([mcpId]) from the useDeleteMcpServer hook.

Parameters and Return Values

• The component is a React function component and returns JSX elements representing the dropdown menu structure.

Important Implementation Details

• Hooks Used:

  • useDeleteMcpServer: Provides the deleteMcpServer function to delete MCP(s) from the server.

  • useExportMcp: Provides handleExportMcpJson to export MCP data.

  • useTranslation: For i18n text translations via t function.

• Event Handling:

  • The handleDelete function is memoized with useCallback to avoid unnecessary re-renders.

  • The delete menu item prevents event propagation and default to avoid triggering dropdown menu close prematurely.

• Icons: Uses PenLine for edit, Upload for export, and Trash2 for delete icons for visual clarity.

• Confirmation Dialog: The delete action is protected by ConfirmDeleteDialog to prevent accidental deletions.

Interaction with Other System Parts

• UI Components: Depends on shared UI components from the project (DropdownMenu, ConfirmDeleteDialog) providing consistent styling and behavior.

• Hooks:

  • useDeleteMcpServer and useExportMcp abstract MCP-specific server-side operations.

• Localization: Integrates with react-i18next for translating button labels, ensuring multilingual support.

• Parent Components: The showEditModal callback is expected to be provided by a parent or container component managing the MCP edit modal's visibility and state.

Visual Diagram

componentDiagram
    component McpDropdown {
        +props: { mcpId: string, showEditModal: func, children: ReactNode }
        +handleDelete: MouseEventHandler
        +render()
    }
    component DropdownMenu
    component DropdownMenuTrigger
    component DropdownMenuContent
    component DropdownMenuItem
    component DropdownMenuSeparator
    component ConfirmDeleteDialog
    component useDeleteMcpServer
    component useExportMcp
    component useTranslation

    McpDropdown --> DropdownMenu
    DropdownMenu --> DropdownMenuTrigger
    DropdownMenu --> DropdownMenuContent
    DropdownMenuContent --> DropdownMenuItem
    DropdownMenuContent --> DropdownMenuSeparator
    DropdownMenuContent --> ConfirmDeleteDialog
    McpDropdown --> useDeleteMcpServer : deleteMcpServer
    McpDropdown --> useExportMcp : handleExportMcpJson
    McpDropdown --> useTranslation : t()

Summary

mcp-dropdown.tsx provides a reusable dropdown menu component for MCP entities with edit, export, and delete capabilities. It leverages hooks for backend operations and integrates UI components and internationalization for consistent user experience. The component is designed to be flexible by accepting children as the dropdown trigger and delegating modal control to the parent via showEditModal.

This file is a key UI interaction point in managing MCP entities within the application, neatly encapsulating common actions and their associated workflows.