Support custom MCP server icons

Author: kshmidt-digma

openapi-config.ts

@@ -35,10 +35,13 @@ const config: ConfigFile = {
   })),
   filterEndpoints: [
     /About/,
+    /Agentic/,
+    /AI/,
     /Assets/,
     /Authentication/,
     /CodeAnalytics/,
     /Dashboard/,
+    /Diagnostic/,
     /Environments/,
     /Errors/,
     /Graphs/,

package-lock.json

@@ -136,6 +136,7 @@
     "react": "^18.2.0",
     "react-cool-dimensions": "^3.0.1",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.3.8",
     "react-error-boundary": "^5.0.0",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.48.2",

package.json

@@ -3,21 +3,24 @@ import { MCPLogoIcon } from "../../../../common/icons/24px/MCPLogoIcon";
 import { KubernetesLogoIcon } from "../../../../common/icons/25px/KubernetesLogoIcon";
 import { PostgresLogoIcon } from "../../../../common/icons/25px/PostgresLogoIcon";
 import { GitHubLogoIcon } from "../../../../common/icons/28px/GitHubLogoIcon";
+import * as s from "./styles";
 import type { MCPServerIconProps } from "./types";
 
 export const DEFAULT_SIZE = 12; // in pixels
 
 export const MCPServerIcon = ({
-  type,
-  isCustom,
-  isActive,
-  size = DEFAULT_SIZE
+  size = DEFAULT_SIZE,
+  server
 }: MCPServerIconProps) => {
-  if (isCustom) {
+  if (server.icon) {
+    return <s.CustomImage $size={size} src={server.icon.url} />;
+  }
+
+  if (server.isEditable) {
     return <MCPLogoIcon size={size} color={"currentColor"} />;
   }
 
-  switch (type) {
+  switch (server.name) {
     case "github":
       return <GitHubLogoIcon size={size} color={"currentColor"} />;
     case "postgres":
@@ -29,7 +32,7 @@ export const MCPServerIcon = ({
         <DigmaLogoThemeableIcon
           size={size}
           color={"currentColor"}
-          themeKind={isActive ? "light" : "dark"}
+          themeKind={server.active ? "light" : "dark"}
         />
       );
     default:

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

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import type { CustomImageProps } from "./types";
+
+export const CustomImage = styled.img<CustomImageProps>`
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
+  object-fit: contain;
+`;

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

@@ -1,6 +1,10 @@
+import type { ExtendedAgentMCPServer } from "../types";
+
 export interface MCPServerIconProps {
-  type: string;
-  isActive?: boolean;
-  isCustom?: boolean;
+  server: ExtendedAgentMCPServer;
   size?: number;
 }
+
+export interface CustomImageProps {
+  $size: number;
+}

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

@@ -20,9 +20,7 @@ export const MCPServersContainer = ({ servers }: MCPServersContainerProps) => {
         <Tooltip title={x.display_name} key={`${x.name}__${i}`}>
           <s.MCPServerBlock $isActive={x.active} $zoomLevel={viewport.zoom}>
             <MCPServerIcon
-              type={x.name}
-              isActive={x.active}
-              isCustom={x.isEditable}
+              server={x}
               size={DEFAULT_ICON_SIZE * viewport.zoom}
             />
           </s.MCPServerBlock>

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

@@ -99,12 +99,7 @@ export const MCPServersToolbar = ({
           <div>
             <Tooltip title={x.display_name}>
               <s.MCPServerIconContainer $isEditable={x.isEditable}>
-                <MCPServerIcon
-                  type={x.name}
-                  isActive={x.active}
-                  size={17}
-                  isCustom={x.isEditable}
-                />
+                <MCPServerIcon server={x} size={17} />
               </s.MCPServerIconContainer>
             </Tooltip>
           </div>

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

@@ -22,7 +22,7 @@ export const MCPServerIconContainer = styled.div<MCPServerIconContainerProps>`
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: ${({ $isEditable }) => ($isEditable ? "pointer" : "default")};
+  cursor: ${({ $isEditable }) => ($isEditable ? "pointer" : "auto")};
 `;
 
 export const KebabMenuButton = styled.button`