diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/IdJagFormFields.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/IdJagFormFields.tsx new file mode 100644 index 00000000000..b43ef32c435 --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/IdJagFormFields.tsx @@ -0,0 +1,157 @@ +import React, { useState } from "react"; +import { Form, Input, Select, Tooltip } from "antd"; +import { InfoCircleOutlined } from "@ant-design/icons"; + +interface IdJagFormFieldsProps { + isEditing?: boolean; +} + +const fieldClassName = "rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500"; + +const FieldLabel: React.FC<{ label: string; tooltip: string }> = ({ label, tooltip }) => ( + + {label} + + + + +); + +const IdJagFormFields: React.FC = ({ isEditing = false }) => { + const placeholderSuffix = isEditing ? " (leave blank to keep existing)" : ""; + const [clientAuthMethod, setClientAuthMethod] = useState<"client_secret" | "private_key_jwt">("client_secret"); + + return ( + <> + + } + name="token_exchange_endpoint" + rules={[{ required: !isEditing, message: "The IdP token exchange endpoint is required for ID-JAG" }]} + > + + + + } + name={["credentials", "id_jag_resource_token_endpoint"]} + > + + + + } + name={["credentials", "client_id"]} + rules={[{ required: !isEditing, message: "Client ID is required for ID-JAG" }]} + > + + + + } + > + + className="rounded-lg" + size="large" + value={clientAuthMethod} + onChange={setClientAuthMethod} + options={[ + { value: "client_secret", label: Client Secret }, + { value: "private_key_jwt", label: Private Key JWT }, + ]} + /> + + {clientAuthMethod === "client_secret" && ( + + } + name={["credentials", "client_secret"]} + rules={[{ required: !isEditing, message: "Client Secret is required for ID-JAG" }]} + > + + + )} + {clientAuthMethod === "private_key_jwt" && ( + <> + + } + name={["credentials", "client_private_key"]} + rules={[{ required: !isEditing, message: "A private key is required for private_key_jwt" }]} + > + + + + } + name={["credentials", "client_private_key_id"]} + > + + + + } + name={["credentials", "client_assertion_signing_alg"]} + > + + + + )} + + } + name="audience" + > + + + } + name={["credentials", "scopes"]} + > + + +