Do not show JSON on Edit MCP server (#1404)

kshmidt-digma · web-flow · commit bde95d34b719 · 2025-07-07T18:14:19.000+02:00
Add Open in IDE button for errors
diff --git a/src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/index.tsx b/src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/index.tsx
@@ -10,16 +10,16 @@ export const AgentFlowChartNodeToolbar = ({
   position,
   isEditMode,
   onAddMCPServer,
-  onEditMCPServer,
+  onSetMCPServer,
   onDeleteMCPServer,
   showPlusButton
 }: AgentFlowChartNodeToolbarProps) => {
   const handleAddMCPServer = () => {
     onAddMCPServer();
   };
 
-  const handleEditMCPServer = (server: string) => {
-    onEditMCPServer(server);
+  const handleSetMCPServer = (server: string) => {
+    onSetMCPServer(server);
   };
 
   const handleDeleteMCPServer = (server: string) => {
@@ -32,7 +32,7 @@ export const AgentFlowChartNodeToolbar = ({
           <MCPServersToolbar
             key={"mcp-servers-toolbar"}
             servers={servers}
-            onEditMCPServer={handleEditMCPServer}
+            onSetMCPServer={handleSetMCPServer}
             onDeleteMCPServer={handleDeleteMCPServer}
           />
         ]
diff --git 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;
-  onEditMCPServer: (server: string) => void;
+  onSetMCPServer: (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
@@ -15,7 +15,7 @@ import type { MCPServersToolbarProps } from "./types";
 
 export const MCPServersToolbar = ({
   servers,
-  onEditMCPServer,
+  onSetMCPServer,
   onDeleteMCPServer
 }: MCPServersToolbarProps) => {
   const [isKebabMenuOpen, setIsKebabMenuOpen] = useState(false);
@@ -48,9 +48,9 @@ export const MCPServersToolbar = ({
     );
 
     switch (id) {
-      case "edit": {
+      case "set": {
         if (selectedMCPServer) {
-          onEditMCPServer(selectedMCPServer);
+          onSetMCPServer(selectedMCPServer);
         }
         break;
       }
@@ -67,10 +67,10 @@ export const MCPServersToolbar = ({
 
   const kebabMenuItems: MenuItem[] = [
     {
-      id: "edit",
+      id: "set",
       icon: <WrenchIcon size={16} color={"currentColor"} />,
-      label: "Edit",
-      onClick: () => handleKebabMenuItemClick("edit")
+      label: "Set",
+      onClick: () => handleKebabMenuItemClick("set")
     },
     {
       id: "delete",
diff --git 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[];
-  onEditMCPServer: (server: string) => void;
+  onSetMCPServer: (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
@@ -15,15 +15,15 @@ const getFlowChartNodeData = ({
   isInteractive,
   isEditMode,
   onAddMCPServer,
-  onEditMCPServer,
+  onSetMCPServer,
   onDeleteMCPServer
 }: {
   agent?: ExtendedAgent;
   isInteractive?: boolean;
   isSelected?: boolean;
   isEditMode?: boolean;
   onAddMCPServer?: (agentName: string) => void;
-  onEditMCPServer?: (agentName: string, server: string) => void;
+  onSetMCPServer?: (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 handleEditMCPServer = (server: string) => {
+  const handleSetMCPServer = (server: string) => {
     if (!agent) {
       return;
     }
 
-    onEditMCPServer?.(agent.name, server);
+    onSetMCPServer?.(agent.name, server);
   };
 
   const handleDeleteMCPServer = (server: string) => {
@@ -78,7 +78,7 @@ const getFlowChartNodeData = ({
                 position={sideContainerPosition}
                 servers={agent.mcp_servers}
                 onAddMCPServer={handleAddMCPServer}
-                onEditMCPServer={handleEditMCPServer}
+                onSetMCPServer={handleSetMCPServer}
                 onDeleteMCPServer={handleDeleteMCPServer}
                 showPlusButton={isEditMode}
               />
@@ -97,7 +97,7 @@ export const AgentFlowChart = ({
   className,
   isEditMode,
   onAddMCPServer,
-  onEditMCPServer,
+  onSetMCPServer,
   onDeleteMCPServer
 }: AgentFlowChartProps) => {
   const extendedAgents: ExtendedAgent[] = [
@@ -177,7 +177,7 @@ export const AgentFlowChart = ({
             "skipped",
           isEditMode,
           onAddMCPServer,
-          onEditMCPServer,
+          onSetMCPServer,
           onDeleteMCPServer
         })
       }
@@ -194,7 +194,7 @@ export const AgentFlowChart = ({
             "skipped",
           isEditMode,
           onAddMCPServer,
-          onEditMCPServer,
+          onSetMCPServer,
           onDeleteMCPServer
         })
       }
@@ -211,7 +211,7 @@ export const AgentFlowChart = ({
             "skipped",
           isEditMode,
           onAddMCPServer,
-          onEditMCPServer,
+          onSetMCPServer,
           onDeleteMCPServer
         })
       }
@@ -228,7 +228,7 @@ export const AgentFlowChart = ({
             "skipped",
           isEditMode,
           onAddMCPServer,
-          onEditMCPServer,
+          onSetMCPServer,
           onDeleteMCPServer
         })
       }
diff --git 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;
-  onEditMCPServer?: (agentId: string, server: string) => void;
+  onSetMCPServer?: (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
@@ -36,9 +36,7 @@ export const MCPServerDialog = ({
   onComplete
 }: MCPServerDialogProps) => {
   const [currentStep, setCurrentStep] = useState(0);
-  const [connectionSettings, setConnectionSettings] = useState(
-    serverData?.config ?? ""
-  );
+  const [connectionSettings, setConnectionSettings] = useState("");
   const [testServerError, setTestServerError] = useState<string>();
   const [addServerError, setAddServerError] = useState<string>();
 
diff --git a/src/components/Agentic/IncidentTemplate/index.tsx b/src/components/Agentic/IncidentTemplate/index.tsx
@@ -91,7 +91,7 @@ export const IncidentTemplate = () => {
     setAgentIdToUpdate(agentId);
   };
 
-  const handleEditMCPServer = (agentId: string, serverName: string) => {
+  const handleSetMCPServer = (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}
-        onEditMCPServer={handleEditMCPServer}
+        onSetMCPServer={handleSetMCPServer}
         onDeleteMCPServer={handleDeleteMCPServer}
       />
       <s.StyledAgentPromptInput
diff --git a/src/components/Errors/ErrorDetails/ErrorDetailsCardContent/FlowStack/index.tsx b/src/components/Errors/ErrorDetails/ErrorDetailsCardContent/FlowStack/index.tsx
@@ -9,9 +9,12 @@ import { useStore } from "../../../../../store/useStore";
 import { isNull } from "../../../../../typeGuards/isNull";
 import { isString } from "../../../../../typeGuards/isString";
 import { openJaegerTraceInDefaultBrowser } from "../../../../../utils/actions/openJaegerTraceInDefaultBrowser";
+import { openURLInDefaultBrowser } from "../../../../../utils/actions/openURLInDefaultBrowser";
 import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
+import { getIdeLauncherLinkForError } from "../../../../../utils/getIdeLauncherLinkForError";
 import { openBrowserTabWithContent } from "../../../../../utils/openBrowserTabWithContent";
 import { TraceIcon } from "../../../../common/icons/16px/TraceIcon";
+import { CodeIcon } from "../../../../common/icons/CodeIcon";
 import { NewButton } from "../../../../common/v3/NewButton";
 import { ToggleSwitch } from "../../../../common/v3/ToggleSwitch";
 import { Tooltip } from "../../../../common/v3/Tooltip";
@@ -36,7 +39,7 @@ const filesURIsDataFetcherConfiguration: DataFetcherConfiguration = {
   refreshOnPayloadChange: true
 };
 
-export const FlowStack = ({ data }: FlowStackProps) => {
+export const FlowStack = ({ data, errorId }: FlowStackProps) => {
   const { errorDetailsWorkspaceItemsOnly: showWorkspaceOnly } =
     useErrorsSelector();
   const { setErrorDetailsWorkspaceItemsOnly } = useStore.getState();
@@ -121,6 +124,15 @@ export const FlowStack = ({ data }: FlowStackProps) => {
     }
   };
 
+  const handleIdeButtonClick = () => {
+    sendUserActionTrackingEvent(trackingEvents.OPEN_IN_IDE_BUTTON_CLICKED);
+    const errorIdeLauncherLink = getIdeLauncherLinkForError(errorId);
+
+    if (errorIdeLauncherLink) {
+      openURLInDefaultBrowser(errorIdeLauncherLink);
+    }
+  };
+
   const handleWorkspaceOnlyToggleSwitchChange = (value: boolean) => {
     sendUserActionTrackingEvent(trackingEvents.WORKSPACE_ONLY_TOGGLE_SWITCHED, {
       value
@@ -220,6 +232,11 @@ export const FlowStack = ({ data }: FlowStackProps) => {
               isDisabled={isNull(traceId)}
             />
           </Tooltip>
+          {platform === "Web" && (
+            <Tooltip title={"Open in IDE"}>
+              <NewButton icon={CodeIcon} onClick={handleIdeButtonClick} />
+            </Tooltip>
+          )}
         </s.FooterButtonsContainer>
       </s.Footer>
     </s.Container>
diff --git a/src/components/Errors/ErrorDetails/ErrorDetailsCardContent/FlowStack/types.ts b/src/components/Errors/ErrorDetails/ErrorDetailsCardContent/FlowStack/types.ts
@@ -2,6 +2,7 @@ import type { ErrorFlowInfo } from "../../../../../redux/services/types";
 
 export interface FlowProps {
   data: ErrorFlowInfo;
+  errorId: string;
 }
 
 export interface ShowOnlyWorkspaceErrorStackTraceItemsPayload {
diff --git a/src/components/Errors/ErrorDetails/ErrorDetailsCardContent/index.tsx b/src/components/Errors/ErrorDetails/ErrorDetailsCardContent/index.tsx
@@ -119,7 +119,7 @@ export const ErrorDetailsCardContent = ({
           </s.IconButton>
         </s.FlowPagination>
         {flows.length > 0 && (
-          <FlowStack data={currentFlow} key={currentFlowStack} />
+          <FlowStack errorId={id} data={currentFlow} key={currentFlowStack} />
         )}
       </s.FlowsContainer>
     </s.Container>
diff --git a/src/components/Errors/NewErrorCard/index.tsx b/src/components/Errors/NewErrorCard/index.tsx
@@ -2,16 +2,20 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { CSSTransition } from "react-transition-group";
 import { getFeatureFlagValue } from "../../../featureFlags";
 import { usePrevious } from "../../../hooks/usePrevious";
+import { platform } from "../../../platform";
 import { ViewMode } from "../../../store/errors/errorsSlice";
 import { useErrorsSelector } from "../../../store/errors/useErrorsSelector";
 import { useStore } from "../../../store/useStore";
 import { FeatureFlag } from "../../../types";
+import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
+import { getIdeLauncherLinkForError } from "../../../utils/getIdeLauncherLinkForError";
 import {
   AffectedEndpointsSelector,
   getEndpointKey
 } from "../../common/AffectedEndpointsSelector";
 import type { Option } from "../../common/AffectedEndpointsSelector/types";
+import { CodeIcon } from "../../common/icons/16px/CodeIcon";
 import { HistogramIcon } from "../../common/icons/16px/HistogramIcon";
 import { PinFillIcon } from "../../common/icons/16px/PinFillIcon";
 import { PinIcon } from "../../common/icons/16px/PinIcon";
@@ -180,6 +184,17 @@ export const NewErrorCard = ({
     setIsHistogramVisible(!isHistogramVisible);
   };
 
+  const handleIdeButtonClick = () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.ERROR_CARD_OPEN_IN_IDE_BUTTON_CLICKED
+    );
+    const errorIdeLauncherLink = getIdeLauncherLinkForError(id);
+
+    if (errorIdeLauncherLink) {
+      openURLInDefaultBrowser(errorIdeLauncherLink);
+    }
+  };
+
   const handlePinUnpinButtonClick = () => {
     const value = !data.pinnedAt;
     sendUserActionTrackingEvent(
@@ -246,6 +261,16 @@ export const NewErrorCard = ({
             onClick={handleHistogramButtonClick}
           />
         ]
+      : []),
+    ...(platform === "Web"
+      ? [
+          <NewIconButton
+            key={"ide"}
+            buttonType={"secondaryBorderless"}
+            icon={CodeIcon}
+            onClick={handleIdeButtonClick}
+          />
+        ]
       : [])
   ];
 
diff --git a/src/components/Errors/tracking.ts b/src/components/Errors/tracking.ts
@@ -9,6 +9,7 @@ export const trackingEvents = addPrefix(
     BACK_BUTTON_CLICKED: "back button clicked",
     FLOW_PAGINATION_BUTTON_CLICKED: "flow pagination button clicked",
     TRACE_BUTTON_CLICKED: "trace button clicked",
+    OPEN_IN_IDE_BUTTON_CLICKED: "open in ide button clicked",
     ERROR_STACK_TRACE_ITEM_CLICKED: "error stack trace item clicked",
     RAW_ERROR_STACK_TRACE_BUTTON_CLICKED:
       "raw error stack trace button clicked",
@@ -43,6 +44,8 @@ export const trackingEvents = addPrefix(
       "error card affected endpoint link clicked",
     ERROR_CARD_HISTOGRAM_BUTTON_CLICKED: "error card histogram button clicked",
     ERROR_CARD_PIN_UNPIN_BUTTON_CLICKED: "error card pin unpin button clicked",
+    ERROR_CARD_OPEN_IN_IDE_BUTTON_CLICKED:
+      "error card open in ide button clicked",
     ERROR_CARD_DISMISS_BUTTON_CLICKED: "error card dismiss button clicked",
     ERROR_CARD_PIN_UNDISMISS_BUTTON_CLICKED:
       "error card pin undismiss button clicked"
diff --git a/src/redux/services/types.ts b/src/redux/services/types.ts
@@ -1253,7 +1253,6 @@ export interface ExtendedGetDirectivesChatEventsResponse {
 export interface MCPServerData {
   uid: string;
   name: string;
-  config: string;
   agents: string[];
   editable: boolean;
   selected_tools: string[];

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ export interface AgentFlowChartNodeToolbarProps {`
`6`	`6`	`position: Position;`
`7`	`7`	`servers: ExtendedAgentMCPServer[];`
`8`	`8`	`onAddMCPServer: () => void;`
`9`		`- onEditMCPServer: (server: string) => void;`
	`9`	`+ onSetMCPServer: (server: string) => void;`
`10`	`10`	`onDeleteMCPServer: (server: string) => void;`
`11`	`11`	`showPlusButton?: boolean;`
`12`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import type { ExtendedAgentMCPServer } from "../types";`
`2`	`2`
`3`	`3`	`export interface MCPServersToolbarProps {`
`4`	`4`	`servers: ExtendedAgentMCPServer[];`
`5`		`- onEditMCPServer: (server: string) => void;`
	`5`	`+ onSetMCPServer: (server: string) => void;`
`6`	`6`	`onDeleteMCPServer: (server: string) => void;`
`7`	`7`	`}`
`8`	`8`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ export interface AgentFlowChartProps {`
`7`	`7`	`className?: string;`
`8`	`8`	`isEditMode?: boolean;`
`9`	`9`	`onAddMCPServer?: (agentId: string) => void;`
`10`		`- onEditMCPServer?: (agentId: string, server: string) => void;`
	`10`	`+ onSetMCPServer?: (agentId: string, server: string) => void;`
`11`	`11`	`onDeleteMCPServer?: (agentId: string, server: string) => void;`
`12`	`12`	`}`
`13`	`13`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ import type { ErrorFlowInfo } from "../../../../../redux/services/types";`
`2`	`2`
`3`	`3`	`export interface FlowProps {`
`4`	`4`	`data: ErrorFlowInfo;`
	`5`	`+ errorId: string;`
`5`	`6`	`}`
`6`	`7`
`7`	`8`	`export interface ShowOnlyWorkspaceErrorStackTraceItemsPayload {`