mirror of
https://github.com/BerriAI/litellm.git
synced 2026-10-05 02:41:56 +00:00
ui(mcp): GitHub-style PR checks panel on submission cards
This commit is contained in:
Ishaan Jaffer
parent
5586b4f29e
commit
3acfd9bfce
1 changed files with 131 additions and 82 deletions
|
|
@ -277,102 +277,151 @@ function MCPServerCard({ server, onApprove, onReject, requiredFields }: MCPServe
|
|||
const checks = MCP_REQUIRED_FIELD_DEFS.filter((f) => requiredFields.includes(f.key)).map((f) => ({
|
||||
key: f.key,
|
||||
label: f.label,
|
||||
description: f.description,
|
||||
passed: f.check(server),
|
||||
}));
|
||||
const passCount = checks.filter((c) => c.passed).length;
|
||||
const allPassed = checks.length > 0 && passCount === checks.length;
|
||||
const failCount = checks.length - passCount;
|
||||
const allPassed = checks.length > 0 && failCount === 0;
|
||||
|
||||
return (
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1.5">
|
||||
<span
|
||||
className={`inline-flex items-center gap-1.5 text-xs font-medium px-2 py-0.5 rounded-full ${statusCfg.bg} ${statusCfg.text}`}
|
||||
>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${statusCfg.dot}`} />
|
||||
{statusCfg.label}
|
||||
</span>
|
||||
{checks.length > 0 && (
|
||||
<div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
|
||||
{/* Server info */}
|
||||
<div className="px-4 pt-4 pb-3">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1.5">
|
||||
<span
|
||||
className={`text-xs px-2 py-0.5 rounded-full font-medium ${
|
||||
allPassed ? "bg-green-50 text-green-700" : "bg-amber-50 text-amber-700"
|
||||
}`}
|
||||
className={`inline-flex items-center gap-1.5 text-xs font-medium px-2 py-0.5 rounded-full ${statusCfg.bg} ${statusCfg.text}`}
|
||||
>
|
||||
{passCount}/{checks.length} checks
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${statusCfg.dot}`} />
|
||||
{statusCfg.label}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-sm font-semibold text-gray-900">
|
||||
{server.alias ?? server.server_name ?? server.server_id}
|
||||
</h3>
|
||||
{server.description && (
|
||||
<p className="text-xs text-gray-500 mt-0.5 line-clamp-1">{server.description}</p>
|
||||
)}
|
||||
{server.url && (
|
||||
<div className="flex items-center gap-1.5 mt-1.5">
|
||||
<ServerIcon className="h-3.5 w-3.5 text-gray-400 flex-shrink-0" />
|
||||
<code className="text-xs text-gray-500 font-mono truncate">{server.url}</code>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-3 mt-1.5 text-xs text-gray-400">
|
||||
<span>Transport: <span className="text-gray-600">{server.transport ?? "sse"}</span></span>
|
||||
<span>·</span>
|
||||
<span>Submitted by: <span className="text-gray-600">{server.submitted_by ?? "—"}</span></span>
|
||||
<span>·</span>
|
||||
<span>{formatDate(server.submitted_at)}</span>
|
||||
</div>
|
||||
{approvalStatus === "rejected" && server.review_notes && (
|
||||
<p className="text-xs text-red-600 mt-1.5">Rejection reason: {server.review_notes}</p>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 mb-1">
|
||||
{server.alias ?? server.server_name ?? server.server_id}
|
||||
</h3>
|
||||
{server.description && (
|
||||
<p className="text-xs text-gray-500 mb-2 line-clamp-1">{server.description}</p>
|
||||
)}
|
||||
{server.url && (
|
||||
<div className="flex items-center gap-1.5 mb-2">
|
||||
<ServerIcon className="h-3.5 w-3.5 text-gray-400 flex-shrink-0" />
|
||||
<code className="text-xs text-gray-500 font-mono truncate">{server.url}</code>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500">
|
||||
<span>
|
||||
Transport:{" "}
|
||||
<span className="font-medium text-gray-700">{server.transport ?? "sse"}</span>
|
||||
</span>
|
||||
<span>
|
||||
Submitted by:{" "}
|
||||
<span className="font-medium text-gray-700">{server.submitted_by ?? "—"}</span>
|
||||
</span>
|
||||
<span>
|
||||
Date:{" "}
|
||||
<span className="font-medium text-gray-700">{formatDate(server.submitted_at)}</span>
|
||||
</span>
|
||||
</div>
|
||||
{approvalStatus === "rejected" && server.review_notes && (
|
||||
<p className="text-xs text-red-600 mt-1">
|
||||
Rejection reason: {server.review_notes}
|
||||
</p>
|
||||
)}
|
||||
{checks.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-2 pt-2 border-t border-gray-100">
|
||||
{checks.map((c) => (
|
||||
<span
|
||||
key={c.key}
|
||||
className={`inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full ${
|
||||
c.passed ? "bg-green-50 text-green-700" : "bg-red-50 text-red-700"
|
||||
}`}
|
||||
>
|
||||
{c.passed ? (
|
||||
<CheckIcon className="h-3 w-3" />
|
||||
) : (
|
||||
<XIcon className="h-3 w-3" />
|
||||
)}
|
||||
{c.label}
|
||||
</span>
|
||||
))}
|
||||
{/* Approve/Reject when no checks panel (no rules configured) */}
|
||||
{checks.length === 0 && approvalStatus === "pending_review" && (
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onApprove}
|
||||
className="text-xs bg-green-500 hover:bg-green-600 text-white px-3 py-1.5 rounded-md transition-colors font-medium"
|
||||
>
|
||||
Approve
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onReject}
|
||||
className="text-xs border border-red-300 text-red-600 hover:bg-red-50 px-3 py-1.5 rounded-md transition-colors font-medium"
|
||||
>
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{approvalStatus === "pending_review" && (
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onApprove}
|
||||
className="text-xs bg-green-500 hover:bg-green-600 text-white px-3 py-1.5 rounded-md transition-colors font-medium"
|
||||
>
|
||||
Approve
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onReject}
|
||||
className="text-xs border border-red-300 text-red-600 hover:bg-red-50 px-3 py-1.5 rounded-md transition-colors font-medium"
|
||||
>
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* GitHub-style checks panel */}
|
||||
{checks.length > 0 && (
|
||||
<div className="border-t border-gray-200">
|
||||
{/* Overall status header */}
|
||||
<div
|
||||
className={`flex items-center gap-3 px-4 py-3 ${
|
||||
allPassed ? "bg-green-50 border-b border-green-100" : "bg-red-50 border-b border-red-100"
|
||||
}`}
|
||||
>
|
||||
{/* Large status circle */}
|
||||
<div
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
|
||||
allPassed ? "bg-green-500" : "bg-red-500"
|
||||
}`}
|
||||
>
|
||||
{allPassed ? (
|
||||
<CheckIcon className="h-4 w-4 text-white" />
|
||||
) : (
|
||||
<XIcon className="h-4 w-4 text-white" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className={`text-sm font-semibold leading-tight ${allPassed ? "text-green-800" : "text-red-800"}`}>
|
||||
{allPassed
|
||||
? "All checks passed"
|
||||
: `${failCount} check${failCount !== 1 ? "s" : ""} failed`}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-0.5">
|
||||
{passCount} passing, {failCount} failing
|
||||
</div>
|
||||
</div>
|
||||
{/* Approve / Reject in header */}
|
||||
{approvalStatus === "pending_review" && (
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onApprove}
|
||||
className="text-xs bg-green-600 hover:bg-green-700 text-white px-3 py-1.5 rounded-md transition-colors font-medium"
|
||||
>
|
||||
Approve
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onReject}
|
||||
className="text-xs border border-red-300 text-red-600 hover:bg-red-50 bg-white px-3 py-1.5 rounded-md transition-colors font-medium"
|
||||
>
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Individual check rows */}
|
||||
<div className="divide-y divide-gray-100">
|
||||
{checks.map((c) => (
|
||||
<div key={c.key} className="flex items-center gap-3 px-4 py-2.5">
|
||||
{/* Small circle icon */}
|
||||
<div
|
||||
className={`w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 ${
|
||||
c.passed ? "bg-green-100" : "bg-red-100"
|
||||
}`}
|
||||
>
|
||||
{c.passed ? (
|
||||
<CheckIcon className="h-3 w-3 text-green-600" />
|
||||
) : (
|
||||
<XIcon className="h-3 w-3 text-red-600" />
|
||||
)}
|
||||
</div>
|
||||
<span className={`text-sm flex-1 ${c.passed ? "text-gray-700" : "text-gray-800"}`}>
|
||||
{c.label}
|
||||
</span>
|
||||
<span className={`text-xs ${c.passed ? "text-green-600" : "text-red-500"}`}>
|
||||
{c.passed ? "Passes" : "Missing"}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue