From a75c5a528c314c024aac12b317a9c8d290968835 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Tue, 15 Jul 2025 11:15:54 +0200 Subject: [PATCH 1/3] Open second step of MCP dialog on edit click --- .../AgentFlowChartNodeToolbar/index.tsx | 8 +++---- .../AgentFlowChartNodeToolbar/types.ts | 2 +- .../MCPServersToolbar/index.tsx | 12 +++++----- .../AgentFlowChart/MCPServersToolbar/types.ts | 2 +- .../IncidentDetails/AgentFlowChart/index.tsx | 20 ++++++++--------- .../IncidentDetails/AgentFlowChart/types.ts | 2 +- .../MCPServerDialog/index.tsx | 22 +++++++++---------- .../Agentic/IncidentTemplate/index.tsx | 4 ++-- 8 files changed, 36 insertions(+), 36 deletions(-) diff --git a/src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/index.tsx b/src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/index.tsx index 700b8a8b..20d2afc9 100644 --- a/src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/index.tsx +++ b/src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/index.tsx @@ -10,7 +10,7 @@ export const AgentFlowChartNodeToolbar = ({ position, isEditMode, onAddMCPServer, - onSetMCPServer, + onEditMCPServer, onDeleteMCPServer, showPlusButton }: AgentFlowChartNodeToolbarProps) => { @@ -18,8 +18,8 @@ export const AgentFlowChartNodeToolbar = ({ onAddMCPServer(); }; - const handleSetMCPServer = (server: string) => { - onSetMCPServer(server); + const handleEditMCPServer = (server: string) => { + onEditMCPServer(server); }; const handleDeleteMCPServer = (server: string) => { @@ -32,7 +32,7 @@ export const AgentFlowChartNodeToolbar = ({ ] diff --git a/src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/types.ts b/src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/types.ts index 3384fd38..267c4dd3 100644 --- a/src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/types.ts +++ b/src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/types.ts @@ -6,7 +6,7 @@ export interface AgentFlowChartNodeToolbarProps { position: Position; servers: ExtendedAgentMCPServer[]; onAddMCPServer: () => void; - onSetMCPServer: (server: string) => void; + onEditMCPServer: (server: string) => void; onDeleteMCPServer: (server: string) => void; showPlusButton?: boolean; } diff --git a/src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersToolbar/index.tsx b/src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersToolbar/index.tsx index 825225da..bd5f1f56 100644 --- a/src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersToolbar/index.tsx +++ b/src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersToolbar/index.tsx @@ -15,7 +15,7 @@ import type { MCPServersToolbarProps } from "./types"; export const MCPServersToolbar = ({ servers, - onSetMCPServer, + onEditMCPServer, onDeleteMCPServer }: MCPServersToolbarProps) => { const [isKebabMenuOpen, setIsKebabMenuOpen] = useState(false); @@ -48,9 +48,9 @@ export const MCPServersToolbar = ({ ); switch (id) { - case "set": { + case "edit": { if (selectedMCPServer) { - onSetMCPServer(selectedMCPServer); + onEditMCPServer(selectedMCPServer); } break; } @@ -67,10 +67,10 @@ export const MCPServersToolbar = ({ const kebabMenuItems: MenuItem[] = [ { - id: "set", + id: "edit", icon: , - label: "Set", - onClick: () => handleKebabMenuItemClick("set") + label: "Edit", + onClick: () => handleKebabMenuItemClick("edit") }, { id: "delete", diff --git a/src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersToolbar/types.ts b/src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersToolbar/types.ts index 1d456040..cdbe0e81 100644 --- a/src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersToolbar/types.ts +++ b/src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersToolbar/types.ts @@ -2,7 +2,7 @@ import type { ExtendedAgentMCPServer } from "../types"; export interface MCPServersToolbarProps { servers: ExtendedAgentMCPServer[]; - onSetMCPServer: (server: string) => void; + onEditMCPServer: (server: string) => void; onDeleteMCPServer: (server: string) => void; } diff --git a/src/components/Agentic/IncidentDetails/AgentFlowChart/index.tsx b/src/components/Agentic/IncidentDetails/AgentFlowChart/index.tsx index 526cd63b..96db408b 100644 --- a/src/components/Agentic/IncidentDetails/AgentFlowChart/index.tsx +++ b/src/components/Agentic/IncidentDetails/AgentFlowChart/index.tsx @@ -15,7 +15,7 @@ const getFlowChartNodeData = ({ isInteractive, isEditMode, onAddMCPServer, - onSetMCPServer, + onEditMCPServer, onDeleteMCPServer }: { agent?: ExtendedAgent; @@ -23,7 +23,7 @@ const getFlowChartNodeData = ({ isSelected?: boolean; isEditMode?: boolean; onAddMCPServer?: (agentName: string) => void; - onSetMCPServer?: (agentName: string, server: string) => void; + onEditMCPServer?: (agentName: string, server: string) => void; onDeleteMCPServer?: (agentName: string, server: string) => void; }): Partial => { const handleAddMCPServer = () => { @@ -41,12 +41,12 @@ const getFlowChartNodeData = ({ onAddMCPServer?.(agent.name); }; - const handleSetMCPServer = (server: string) => { + const handleEditMCPServer = (server: string) => { if (!agent) { return; } - onSetMCPServer?.(agent.name, server); + onEditMCPServer?.(agent.name, server); }; const handleDeleteMCPServer = (server: string) => { @@ -78,7 +78,7 @@ const getFlowChartNodeData = ({ position={sideContainerPosition} servers={agent.mcp_servers} onAddMCPServer={handleAddMCPServer} - onSetMCPServer={handleSetMCPServer} + onEditMCPServer={handleEditMCPServer} onDeleteMCPServer={handleDeleteMCPServer} showPlusButton={isEditMode} /> @@ -97,7 +97,7 @@ export const AgentFlowChart = ({ className, isEditMode, onAddMCPServer, - onSetMCPServer, + onEditMCPServer, onDeleteMCPServer }: AgentFlowChartProps) => { const extendedAgents: ExtendedAgent[] = [ @@ -177,7 +177,7 @@ export const AgentFlowChart = ({ "skipped", isEditMode, onAddMCPServer, - onSetMCPServer, + onEditMCPServer, onDeleteMCPServer }) } @@ -194,7 +194,7 @@ export const AgentFlowChart = ({ "skipped", isEditMode, onAddMCPServer, - onSetMCPServer, + onEditMCPServer, onDeleteMCPServer }) } @@ -211,7 +211,7 @@ export const AgentFlowChart = ({ "skipped", isEditMode, onAddMCPServer, - onSetMCPServer, + onEditMCPServer, onDeleteMCPServer }) } @@ -228,7 +228,7 @@ export const AgentFlowChart = ({ "skipped", isEditMode, onAddMCPServer, - onSetMCPServer, + onEditMCPServer, onDeleteMCPServer }) } diff --git a/src/components/Agentic/IncidentDetails/AgentFlowChart/types.ts b/src/components/Agentic/IncidentDetails/AgentFlowChart/types.ts index 69886eec..316bac05 100644 --- a/src/components/Agentic/IncidentDetails/AgentFlowChart/types.ts +++ b/src/components/Agentic/IncidentDetails/AgentFlowChart/types.ts @@ -7,7 +7,7 @@ export interface AgentFlowChartProps { className?: string; isEditMode?: boolean; onAddMCPServer?: (agentId: string) => void; - onSetMCPServer?: (agentId: string, server: string) => void; + onEditMCPServer?: (agentId: string, server: string) => void; onDeleteMCPServer?: (agentId: string, server: string) => void; } diff --git a/src/components/Agentic/IncidentTemplate/MCPServerDialog/index.tsx b/src/components/Agentic/IncidentTemplate/MCPServerDialog/index.tsx index e4da05c7..484e458a 100644 --- a/src/components/Agentic/IncidentTemplate/MCPServerDialog/index.tsx +++ b/src/components/Agentic/IncidentTemplate/MCPServerDialog/index.tsx @@ -5,7 +5,6 @@ import { useTestIncidentAgentMCPServerMutation, useUpdateIncidentAgentMCPServerMutation } from "../../../../redux/services/digma"; -import type { AddMCPServerPayload } from "../../../../redux/services/types"; import { isObject } from "../../../../typeGuards/isObject"; import { isString } from "../../../../typeGuards/isString"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; @@ -35,7 +34,7 @@ export const MCPServerDialog = ({ onClose, onComplete }: MCPServerDialogProps) => { - const [currentStep, setCurrentStep] = useState(0); + const [currentStep, setCurrentStep] = useState(serverData?.uid ? 1 : 0); const [connectionSettings, setConnectionSettings] = useState(""); const [testServerError, setTestServerError] = useState(); const [addServerError, setAddServerError] = useState(); @@ -78,16 +77,14 @@ export const MCPServerDialog = ({ const handleToolsStepSave = (tools: string[], instructions: string) => { setAddServerError(undefined); - const payload: AddMCPServerPayload = { - agent: agentId, - config_json: connectionSettings, - selected_tools: tools, - instructions_prompt: instructions - }; - if (!serverData?.uid) { // Add new MCP server - void addMCPServer(payload) + void addMCPServer({ + agent: agentId, + config_json: connectionSettings, + selected_tools: tools, + instructions_prompt: instructions + }) .unwrap() .then(() => { onComplete(); @@ -101,7 +98,10 @@ export const MCPServerDialog = ({ // Update existing MCP server void updateMCPServer({ id: serverData.uid, - data: payload + data: { + selected_tools: tools, + instructions_prompt: instructions + } }) .unwrap() .then(() => { diff --git a/src/components/Agentic/IncidentTemplate/index.tsx b/src/components/Agentic/IncidentTemplate/index.tsx index c095d8b4..a196a2cb 100644 --- a/src/components/Agentic/IncidentTemplate/index.tsx +++ b/src/components/Agentic/IncidentTemplate/index.tsx @@ -91,7 +91,7 @@ export const IncidentTemplate = () => { setAgentIdToUpdate(agentId); }; - const handleSetMCPServer = (agentId: string, serverName: string) => { + const handleEditMCPServer = (agentId: string, serverName: string) => { const serverId = mcpServers?.mcps.find((x) => x.name === serverName)?.uid; if (!serverId) { @@ -184,7 +184,7 @@ export const IncidentTemplate = () => { selectedAgentId={agentId} isEditMode={true} onAddMCPServer={handleAddMCPServer} - onSetMCPServer={handleSetMCPServer} + onEditMCPServer={handleEditMCPServer} onDeleteMCPServer={handleDeleteMCPServer} /> {agentIdToUpdate && ( From bdc037f5f466927a54a52afef1868405d17445c3 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Tue, 15 Jul 2025 13:18:03 +0200 Subject: [PATCH 2/3] Fix types --- src/redux/services/types.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/redux/services/types.ts b/src/redux/services/types.ts index 43b0d0d8..4a8283f0 100644 --- a/src/redux/services/types.ts +++ b/src/redux/services/types.ts @@ -1289,7 +1289,10 @@ export interface AddMCPServerPayload { export interface UpdateMCPServerPayload { id: string; - data: AddMCPServerPayload; + data: { + selected_tools: string[]; + instructions_prompt: string; + }; } export interface DeleteMCPServerPayload { From 6e3996f0fe8f42c10bebd89215e0cff127435b94 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Tue, 15 Jul 2025 14:02:35 +0200 Subject: [PATCH 3/3] Fix tools --- .../Agentic/IncidentTemplate/MCPServerDialog/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Agentic/IncidentTemplate/MCPServerDialog/index.tsx b/src/components/Agentic/IncidentTemplate/MCPServerDialog/index.tsx index 484e458a..303f6d33 100644 --- a/src/components/Agentic/IncidentTemplate/MCPServerDialog/index.tsx +++ b/src/components/Agentic/IncidentTemplate/MCPServerDialog/index.tsx @@ -120,8 +120,8 @@ export const MCPServerDialog = ({ }; const tools = useMemo( - () => testMCPServerResult.data?.tools ?? [], - [testMCPServerResult.data] + () => serverData?.all_tools ?? [], + [serverData?.all_tools] ); const steps = [