From 24671a728e684414ab1ba52e38968cab6edc6c01 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Mon, 7 Jul 2025 18:06:57 +0200 Subject: [PATCH] Do not show JSON on Edit MCP server Add Open in IDE button for errors --- .../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 | 4 +-- .../Agentic/IncidentTemplate/index.tsx | 4 +-- .../FlowStack/index.tsx | 19 +++++++++++++- .../FlowStack/types.ts | 1 + .../ErrorDetailsCardContent/index.tsx | 2 +- src/components/Errors/NewErrorCard/index.tsx | 25 +++++++++++++++++++ src/components/Errors/tracking.ts | 3 +++ src/redux/services/types.ts | 1 - 14 files changed, 74 insertions(+), 31 deletions(-) diff --git a/src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/index.tsx b/src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/index.tsx index 20d2afc90..700b8a8b0 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, - onEditMCPServer, + onSetMCPServer, onDeleteMCPServer, showPlusButton }: AgentFlowChartNodeToolbarProps) => { @@ -18,8 +18,8 @@ export const AgentFlowChartNodeToolbar = ({ onAddMCPServer(); }; - const handleEditMCPServer = (server: string) => { - onEditMCPServer(server); + const handleSetMCPServer = (server: string) => { + onSetMCPServer(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 267c4dd31..3384fd38a 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; - 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 index bd5f1f56c..825225da6 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, - 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: , - 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 index cdbe0e81b..1d4560407 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[]; - 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 index 96db408be..526cd63b1 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, - onEditMCPServer, + onSetMCPServer, onDeleteMCPServer }: { agent?: ExtendedAgent; @@ -23,7 +23,7 @@ const getFlowChartNodeData = ({ 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 => { 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 index 316bac055..69886eecc 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; - 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 index ba82f5bc0..136bca8ce 100644 --- 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(); const [addServerError, setAddServerError] = useState(); diff --git a/src/components/Agentic/IncidentTemplate/index.tsx b/src/components/Agentic/IncidentTemplate/index.tsx index d0b939304..dc8c19c9e 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 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} /> { +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)} /> + {platform === "Web" && ( + + + + )} diff --git a/src/components/Errors/ErrorDetails/ErrorDetailsCardContent/FlowStack/types.ts b/src/components/Errors/ErrorDetails/ErrorDetailsCardContent/FlowStack/types.ts index f18ed3a51..ff038f506 100644 --- 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 index 1f421ee19..5ca076a99 100644 --- a/src/components/Errors/ErrorDetails/ErrorDetailsCardContent/index.tsx +++ b/src/components/Errors/ErrorDetails/ErrorDetailsCardContent/index.tsx @@ -119,7 +119,7 @@ export const ErrorDetailsCardContent = ({ {flows.length > 0 && ( - + )} diff --git a/src/components/Errors/NewErrorCard/index.tsx b/src/components/Errors/NewErrorCard/index.tsx index 4ae3ec6cf..6461ca896 100644 --- 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" + ? [ + + ] : []) ]; diff --git a/src/components/Errors/tracking.ts b/src/components/Errors/tracking.ts index 6eeb960fe..2614c3415 100644 --- 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 index 88c55ef05..6e5a55c84 100644 --- 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[];