Merge pull request #1421 from digma-ai/fix/edit-mcp-server

Open second step of MCP dialog on edit click

Author: kshmidt-digma

src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/index.tsx

@@ -10,16 +10,16 @@ export const AgentFlowChartNodeToolbar = ({
   position,
   isEditMode,
   onAddMCPServer,
-  onSetMCPServer,
+  onEditMCPServer,
   onDeleteMCPServer,
   showPlusButton
 }: AgentFlowChartNodeToolbarProps) => {
   const handleAddMCPServer = () => {
     onAddMCPServer();
   };
 
-  const handleSetMCPServer = (server: string) => {
-    onSetMCPServer(server);
+  const handleEditMCPServer = (server: string) => {
+    onEditMCPServer(server);
   };
 
   const handleDeleteMCPServer = (server: string) => {
@@ -32,7 +32,7 @@ export const AgentFlowChartNodeToolbar = ({
           <MCPServersToolbar
             key={"mcp-servers-toolbar"}
             servers={servers}
-            onSetMCPServer={handleSetMCPServer}
+            onEditMCPServer={handleEditMCPServer}
             onDeleteMCPServer={handleDeleteMCPServer}
           />
         ]

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;
 }

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: <WrenchIcon size={16} color={"currentColor"} />,
-      label: "Set",
-      onClick: () => handleKebabMenuItemClick("set")
+      label: "Edit",
+      onClick: () => handleKebabMenuItemClick("edit")
     },
     {
       id: "delete",

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;
 }
 

src/components/Agentic/IncidentDetails/AgentFlowChart/index.tsx

@@ -15,15 +15,15 @@ const getFlowChartNodeData = ({
   isInteractive,
   isEditMode,
   onAddMCPServer,
-  onSetMCPServer,
+  onEditMCPServer,
   onDeleteMCPServer
 }: {
   agent?: ExtendedAgent;
   isInteractive?: boolean;
   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<FlowChartNodeData> => {
   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
         })
       }

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;
 }
 

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<string>();
   const [addServerError, setAddServerError] = useState<string>();
@@ -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(() => {
@@ -120,8 +120,8 @@ export const MCPServerDialog = ({
   };
 
   const tools = useMemo(
-    () => testMCPServerResult.data?.tools ?? [],
-    [testMCPServerResult.data]
+    () => serverData?.all_tools ?? [],
+    [serverData?.all_tools]
   );
 
   const steps = [

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 && (

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 {