diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPPermissionManagement.tsx b/ui/litellm-dashboard/src/components/mcp_tools/MCPPermissionManagement.tsx index 6742e0bd29..866fb22e60 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/MCPPermissionManagement.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/MCPPermissionManagement.tsx @@ -1,11 +1,12 @@ -import React, { useState } from "react" +import React, { useState, useEffect } from "react" import { Form, Select, Tooltip, Collapse } from "antd" import { InfoCircleOutlined } from "@ant-design/icons" - +import { MCPServer } from "./types" const { Panel } = Collapse interface MCPPermissionManagementProps { availableAccessGroups: string[] + mcpServer: MCPServer | null searchValue: string setSearchValue: (value: string) => void getAccessGroupOptions: () => Array<{ @@ -16,10 +17,24 @@ interface MCPPermissionManagementProps { const MCPPermissionManagement: React.FC = ({ availableAccessGroups, + mcpServer, searchValue, setSearchValue, getAccessGroupOptions, }) => { + const form = Form.useFormInstance() + + // Set initial values when mcpServer changes + useEffect(() => { + if (mcpServer) { + // Set extra_headers if they exist + if (mcpServer.extra_headers) { + form.setFieldValue('extra_headers', mcpServer.extra_headers) + } + + } + }, [mcpServer, form]) + return ( = ({ + {mcpServer?.extra_headers && mcpServer.extra_headers.length > 0 && ( + + {mcpServer.extra_headers.length} configured + + )} } name="extra_headers" > - - MCP Access Groups - - - - - } - name="mcp_access_groups" - getValueFromEvent={value => value} - > -