Simplify agent flow chart node side container positioning

kshmidt-digma · kshmidt-digma · commit 5a4924b255c0 · 2025-06-25T10:37:18.000+02:00
diff --git a/src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/index.tsx b/src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/index.tsx
@@ -1,6 +1,6 @@
 import { Position } from "@xyflow/react";
 import { PlusIcon } from "../../../../common/icons/16px/PlusIcon";
-import { MCPServersSideContainer } from "../MCPServersSideContainer";
+import { MCPServersContainer } from "../MCPServersSideContainer";
 import { MCPServersToolbar } from "../MCPServersToolbar";
 import * as s from "./styles";
 import type { AgentFlowChartNodeToolbarProps } from "./types";
@@ -15,15 +15,15 @@ export const AgentFlowChartNodeToolbar = ({
   showPlusButton
 }: AgentFlowChartNodeToolbarProps) => {
   const handleAddMCPServer = () => {
-    onAddMCPServer(position);
+    onAddMCPServer();
   };
 
   const handleEditMCPServer = (server: string) => {
-    onEditMCPServer(server, position);
+    onEditMCPServer(server);
   };
 
   const handleDeleteMCPServer = (server: string) => {
-    onDeleteMCPServer(server, position);
+    onDeleteMCPServer(server);
   };
 
   const toolbarItems = [
@@ -55,11 +55,9 @@ export const AgentFlowChartNodeToolbar = ({
   return (
     <>
       {isEditMode ? (
-        [Position.Top, Position.Bottom].includes(position) && (
-          <s.NodeToolbarContainer>{sortedToolbarItems}</s.NodeToolbarContainer>
-        )
+        <s.NodeToolbarContainer>{sortedToolbarItems}</s.NodeToolbarContainer>
       ) : (
-        <MCPServersSideContainer servers={servers} />
+        <MCPServersContainer servers={servers} />
       )}
     </>
   );
diff --git a/src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/types.ts b/src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/types.ts
@@ -5,8 +5,8 @@ export interface AgentFlowChartNodeToolbarProps {
   isEditMode?: boolean;
   position: Position;
   servers: ExtendedAgentMCPServer[];
-  onAddMCPServer: (position: Position) => void;
-  onEditMCPServer: (server: string, position: Position) => void;
-  onDeleteMCPServer: (server: string, position: Position) => void;
+  onAddMCPServer: () => void;
+  onEditMCPServer: (server: string) => void;
+  onDeleteMCPServer: (server: string) => void;
   showPlusButton?: boolean;
 }
diff --git a/src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersContainer/index.tsx b/src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersContainer/index.tsx
@@ -2,13 +2,11 @@ import { useViewport } from "@xyflow/react";
 import { Tooltip } from "../../../../common/v3/Tooltip";
 import { MCPServerIcon } from "../MCPServerIcon";
 import * as s from "./styles";
-import type { MCPServersSideContainerProps } from "./types";
+import type { MCPServersContainerProps } from "./types";
 
 const DEFAULT_ICON_SIZE = 27; // in pixels
 
-export const MCPServersSideContainer = ({
-  servers
-}: MCPServersSideContainerProps) => {
+export const MCPServersContainer = ({ servers }: MCPServersContainerProps) => {
   const viewport = useViewport();
   const zoomLevel = viewport.zoom;
 
diff --git a/src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersContainer/styles.ts b/src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersContainer/styles.ts
diff --git a/src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersContainer/types.ts b/src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersContainer/types.ts
@@ -1,6 +1,6 @@
 import type { ExtendedAgentMCPServer } from "../types";
 
-export interface MCPServersSideContainerProps {
+export interface MCPServersContainerProps {
   servers: ExtendedAgentMCPServer[];
 }
 
diff --git a/src/components/Agentic/IncidentDetails/AgentFlowChart/index.tsx b/src/components/Agentic/IncidentDetails/AgentFlowChart/index.tsx
@@ -1,6 +1,5 @@
 import { Position, type Edge } from "@xyflow/react";
 import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
-import { groupBy } from "../../../../utils/groupBy";
 import { FlowChart } from "../../common/FlowChart";
 import type {
   FlowChartNode,
@@ -23,54 +22,43 @@ const getFlowChartNodeData = ({
   isInteractive?: boolean;
   isSelected?: boolean;
   isEditMode?: boolean;
-  onAddMCPServer?: (agentName: string, position: Position) => void;
-  onEditMCPServer?: (
-    agentName: string,
-    server: string,
-    position: Position
-  ) => void;
-  onDeleteMCPServer?: (
-    agentName: string,
-    server: string,
-    position: Position
-  ) => void;
+  onAddMCPServer?: (agentName: string) => void;
+  onEditMCPServer?: (agentName: string, server: string) => void;
+  onDeleteMCPServer?: (agentName: string, server: string) => void;
 }): Partial<FlowChartNodeData> => {
-  const handleAddMCPServer = (position: Position) => () => {
+  const handleAddMCPServer = () => {
     sendUserActionTrackingEvent(
       trackingEvents.AGENT_FLOW_CHART_NODE_ADD_MCP_SERVER_BUTTON_CLICKED,
       {
-        agentName: agent?.name,
-        position
+        agentName: agent?.name
       }
     );
 
     if (!agent) {
       return;
     }
 
-    onAddMCPServer?.(agent.name, position);
+    onAddMCPServer?.(agent.name);
   };
 
-  const handleEditMCPServer = (position: Position) => (server: string) => {
+  const handleEditMCPServer = (server: string) => {
     if (!agent) {
       return;
     }
 
-    onEditMCPServer?.(agent.name, server, position);
+    onEditMCPServer?.(agent.name, server);
   };
 
-  const handleDeleteMCPServer = (position: Position) => (server: string) => {
+  const handleDeleteMCPServer = (server: string) => {
     if (!agent) {
       return;
     }
 
-    onDeleteMCPServer?.(agent.name, server, position);
+    onDeleteMCPServer?.(agent.name, server);
   };
 
-  const serverGroups = groupBy(
-    agent?.mcp_servers ?? [],
-    (server) => server.position ?? Position.Top
-  );
+  const sideContainerPosition =
+    agent?.name === "code_resolver" ? Position.Bottom : Position.Top;
 
   return agent
     ? {
@@ -79,32 +67,24 @@ const getFlowChartNodeData = ({
         isRunning: agent.running,
         isInteractive,
         isDisabled: agent.status === "inactive",
-        sideContainers: Object.values(Position).map((position) => ({
-          isVisible: Boolean(
-            serverGroups[position]?.length > 0 ||
-              (isEditMode && [Position.Top, Position.Bottom].includes(position))
-          ),
-          position,
-          element: (
-            <AgentFlowChartNodeToolbar
-              isEditMode={isEditMode}
-              position={position}
-              servers={serverGroups[position] ?? []}
-              onAddMCPServer={handleAddMCPServer(position)}
-              onEditMCPServer={handleEditMCPServer(position)}
-              onDeleteMCPServer={handleDeleteMCPServer(position)}
-              showPlusButton={
-                isEditMode &&
-                (["watchman", "triager"].includes(agent.name) ||
-                  (agent.name === "code_resolver" &&
-                    position === Position.Bottom) ||
-                  (agent.name === "infra_resolver" &&
-                    position === Position.Top))
-              }
-            />
-          ),
-          isKebabMenuVisible: isEditMode
-        }))
+        sideContainers: [
+          {
+            isVisible: Boolean(agent.mcp_servers.length > 0 || isEditMode),
+            position: sideContainerPosition,
+            element: (
+              <AgentFlowChartNodeToolbar
+                isEditMode={isEditMode}
+                position={sideContainerPosition}
+                servers={agent.mcp_servers}
+                onAddMCPServer={handleAddMCPServer}
+                onEditMCPServer={handleEditMCPServer}
+                onDeleteMCPServer={handleDeleteMCPServer}
+                showPlusButton={isEditMode}
+              />
+            )
+          }
+        ],
+        isKebabMenuVisible: isEditMode
       }
     : {};
 };
@@ -131,11 +111,7 @@ export const AgentFlowChart = ({
     ...agents.map((agent) => ({
       ...agent,
       mcp_servers: agent.mcp_servers.map((server) => ({
-        ...server,
-        position:
-          agent.name === "code_resolver" && !isEditMode
-            ? Position.Bottom
-            : server.position
+        ...server
       }))
     })),
     {
diff --git a/src/components/Agentic/IncidentDetails/AgentFlowChart/types.ts b/src/components/Agentic/IncidentDetails/AgentFlowChart/types.ts
@@ -1,4 +1,3 @@
-import type { Position } from "@xyflow/react";
 import type { Agent, AgentMCPServer } from "../../../../redux/services/types";
 
 export interface AgentFlowChartProps {
@@ -7,21 +6,12 @@ export interface AgentFlowChartProps {
   selectedAgentId: string | null;
   className?: string;
   isEditMode?: boolean;
-  onAddMCPServer?: (agentId: string, position: Position) => void;
-  onEditMCPServer?: (
-    agentId: string,
-    server: string,
-    position: Position
-  ) => void;
-  onDeleteMCPServer?: (
-    agentId: string,
-    server: string,
-    position: Position
-  ) => void;
+  onAddMCPServer?: (agentId: string) => void;
+  onEditMCPServer?: (agentId: string, server: string) => void;
+  onDeleteMCPServer?: (agentId: string, server: string) => void;
 }
 
 export interface ExtendedAgentMCPServer extends AgentMCPServer {
-  position?: Position;
   isEditable?: boolean;
 }
 
diff --git a/src/components/Agentic/IncidentTemplate/index.tsx b/src/components/Agentic/IncidentTemplate/index.tsx
@@ -1,4 +1,3 @@
-import { Position } from "@xyflow/react";
 import { useEffect, useState } from "react";
 import {
   useDeleteIncidentAgentMCPServerMutation,
@@ -149,9 +148,7 @@ export const IncidentTemplate = () => {
               name: x.name,
               display_name: x.name,
               active: true,
-              isEditable: x.editable,
-              position:
-                agent.name === "code_resolver" ? Position.Bottom : Position.Top
+              isEditable: x.editable
             }))
           };
         })
diff --git a/src/components/Agentic/Sidebar/index.tsx b/src/components/Agentic/Sidebar/index.tsx
@@ -60,12 +60,12 @@ export const Sidebar = () => {
     dispatch(setIsCreateIncidentChatOpen(true));
   };
 
-  // const handleDirectivesButtonClick = () => {
-  //   sendUserActionTrackingEvent(
-  //     trackingEvents.SIDEBAR_DIRECTIVES_BUTTON_CLICKED
-  //   );
-  //   void navigate("/incidents/directives");
-  // };
+  const handleDirectivesButtonClick = () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.SIDEBAR_DIRECTIVES_BUTTON_CLICKED
+    );
+    void navigate("/incidents/directives");
+  };
 
   const handleTemplateButtonClick = () => {
     sendUserActionTrackingEvent(trackingEvents.SIDEBAR_TEMPLATE_BUTTON_CLICKED);
@@ -118,8 +118,8 @@ export const Sidebar = () => {
   const userInitial = (user?.email[0] ?? "").toLocaleUpperCase();
   const isTemplateButtonHighlighted =
     location.pathname === "/incidents/template";
-  // const isDirectivesButtonHighlighted =
-  // location.pathname === "/incidents/directives";
+  const isDirectivesButtonHighlighted =
+    location.pathname === "/incidents/directives";
 
   return (
     <s.Container>
@@ -151,11 +151,11 @@ export const Sidebar = () => {
           ))}
         </s.IncidentsList>
       </s.IncidentsListContainer>
-      {/* <s.LinkButton
+      <s.LinkButton
         buttonType={isDirectivesButtonHighlighted ? "primary" : "secondary"}
         label={"Directives"}
         onClick={handleDirectivesButtonClick}
-      /> */}
+      />
       <s.LinkButton
         buttonType={isTemplateButtonHighlighted ? "primary" : "secondary"}
         label={"Template"}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import type { ExtendedAgentMCPServer } from "../types";`
`2`	`2`
`3`		`-export interface MCPServersSideContainerProps {`
	`3`	`+export interface MCPServersContainerProps {`
`4`	`4`	`servers: ExtendedAgentMCPServer[];`
`5`	`5`	`}`
`6`	`6`