Fix custom MCP icons

Author: kshmidt-digma

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

@@ -13,7 +13,13 @@ export const MCPServerIcon = ({
   server
 }: MCPServerIconProps) => {
   if (server.icon) {
-    return <s.CustomImage $size={size} src={server.icon.url} />;
+    return (
+      <s.CustomImage
+        $size={size}
+        src={server.icon.url}
+        $isActive={server.active}
+      />
+    );
   }
 
   if (server.isEditable) {

src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServerIcon/styles.ts

@@ -5,4 +5,5 @@ export const CustomImage = styled.img<CustomImageProps>`
   width: ${({ $size }) => $size}px;
   height: ${({ $size }) => $size}px;
   object-fit: contain;
+  opacity: ${({ $isActive }) => ($isActive ? 1 : 0.14)};
 `;

src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServerIcon/types.ts

@@ -7,4 +7,5 @@ export interface MCPServerIconProps {
 
 export interface CustomImageProps {
   $size: number;
+  $isActive?: boolean;
 }

src/components/Agentic/IncidentTemplate/MCPServerDialog/ToolsStep/index.tsx

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { useEffect, useState, type ChangeEvent } from "react";
+import { useState, type ChangeEvent } from "react";
 import { useDropzone } from "react-dropzone";
 import { useFormDataRequest } from "../../../../../hooks/useFormDataRequest";
 import type { MCPServerIcon } from "../../../../../redux/services/types";
@@ -184,7 +184,8 @@ export const ToolsStep = ({
   );
   const areAllSelected = tools.every((x) => selectedTools.includes(x));
 
-  const isSaveButtonEnabled = selectedTools.length > 0 && !isLoading;
+  const isSaveButtonEnabled =
+    selectedTools.length > 0 && !isLoading && !isSending;
 
   const handleRemoveFile = () => {
     if (isSending) {
@@ -195,15 +196,6 @@ export const ToolsStep = ({
     setDropzoneError(undefined);
   };
 
-  useEffect(() => {
-    if (icon?.id) {
-      setFileToUpload(null);
-      setIconId(icon.id);
-    } else {
-      setIconId(null);
-    }
-  }, [icon?.id]);
-
   const formattedFileSize = fileDetails
     ? fileDetails.size >= MAX_ICON_FILE_SIZE
       ? `${roundTo(fileDetails.size / 1024 / 1024, 0)} MB`

src/components/Agentic/IncidentTemplate/index.tsx

@@ -92,7 +92,9 @@ export const IncidentTemplate = () => {
   };
 
   const handleEditMCPServer = (agentId: string, serverName: string) => {
-    const serverId = mcpServers?.mcps.find((x) => x.name === serverName)?.uid;
+    const serverId = mcpServers?.mcps.find(
+      (x) => x.name === serverName && x.agents.includes(agentId)
+    )?.uid;
 
     if (!serverId) {
       return;
@@ -102,8 +104,10 @@ export const IncidentTemplate = () => {
     setMCPServerIdToUpdate(serverId);
   };
 
-  const handleDeleteMCPServer = (_: string, serverName: string) => {
-    const serverId = mcpServers?.mcps.find((x) => x.name === serverName)?.uid;
+  const handleDeleteMCPServer = (agentId: string, serverName: string) => {
+    const serverId = mcpServers?.mcps.find(
+      (x) => x.name === serverName && x.agents.includes(agentId)
+    )?.uid;
 
     if (!serverId) {
       return;

src/components/Agentic/Sidebar/styles.ts

@@ -51,17 +51,19 @@ export const IncidentsListContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
-  padding: 24px;
+  padding: 24px 0;
   border-radius: 8px;
   border: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary};
   background: ${({ theme }) => theme.colors.v3.surface.primary};
   flex-grow: 1;
+  overflow: auto;
 `;
 
 export const IncidentsListHeader = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 0 24px;
 `;
 
 export const IncidentsListTitle = styled.div`
@@ -74,7 +76,8 @@ export const IncidentsList = styled.ul`
   flex-direction: column;
   gap: 4px;
   margin: 0;
-  padding: 0;
+  padding: 0 24px;
+  overflow: auto;
 `;
 
 export const IncidentItem = styled.li<IncidentItemProps>`