feat(mcp): show OAuth2 Connect/Disconnect in catalog Credential column

This commit is contained in:
Ishaan Jaffer 2026-04-25 16:02:02 -07:00
parent 9bd94ee96f
commit 8759d6086b
No known key found for this signature in database

View file

@ -1,11 +1,12 @@
import { useState } from "react";
import { ColumnDef } from "@tanstack/react-table";
import { MCPServer } from "./types";
import { AUTH_TYPE, MCPServer } from "./types";
import { Icon } from "@tremor/react";
import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
import { getMaskedAndFullUrl } from "./utils";
import { Tooltip } from "antd";
import { CheckOutlined } from "@ant-design/icons";
import OAuth2ConnectButton from "./OAuth2ConnectButton";
const HealthStatusBadge: React.FC<{
server: MCPServer;
@ -92,6 +93,9 @@ export const mcpServerColumns = (
onByokConnect?: (server: MCPServer) => void,
onRecheckHealth?: (serverId: string) => void,
recheckingServerIds?: Set<string>,
accessToken?: string,
onOAuthDisconnect?: (server: MCPServer) => void,
onRefreshServers?: () => void,
): ColumnDef<MCPServer>[] => [
{
accessorKey: "server_id",
@ -266,6 +270,38 @@ export const mcpServerColumns = (
header: "Credential",
cell: ({ row }) => {
const server = row.original;
// OAuth2 servers: show OAuth2 connect/disconnect UI
if (server.auth_type === AUTH_TYPE.OAUTH2 && !server.is_byok) {
if (server.has_user_credential) {
return (
<div className="flex items-center gap-2">
<span className="inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full bg-green-50 text-green-700 border border-green-200">
<CheckOutlined style={{ fontSize: 10 }} /> Connected
</span>
{onOAuthDisconnect && (
<button
className="text-xs text-gray-400 hover:text-red-600 transition-colors"
onClick={() => onOAuthDisconnect(server)}
>
Disconnect
</button>
)}
</div>
);
}
if (accessToken && onRefreshServers) {
return (
<OAuth2ConnectButton
server={server}
accessToken={accessToken}
onSuccess={onRefreshServers}
/>
);
}
return null;
}
if (!server.is_byok) {
return <span className="text-gray-300 text-xs">—</span>;
}