diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilityCardBody.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilityCardBody.tsx index 988f8a2a61b..79ef7c52ccc 100644 --- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilityCardBody.tsx +++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilityCardBody.tsx @@ -1,5 +1,5 @@ import { useState } from 'react' -import { cn } from 'ui' +import { Badge } from 'ui' import { EndpointRow } from './EndpointRow' import { MAX_VISIBLE_ENDPOINT_ROWS } from './TokenCapabilities.constants' @@ -11,18 +11,14 @@ interface CapabilityCardBodyProps { mcpTools: string[] } -/** - * One bordered container holding two labelled, independently-tabled groups — endpoints and MCP - * tools — rather than a single table with interleaved header rows, per the two-table a11y pattern. - */ export const CapabilityCardBody = ({ endpoints, mcpTools }: CapabilityCardBodyProps) => { const [showAllEndpoints, setShowAllEndpoints] = useState(false) if (endpoints.length === 0 && mcpTools.length === 0) { return ( -
- No Management API endpoints or MCP tools are enabled by this capability yet. -
+

+ No API endpoints or MCP tools are enabled by this capability yet. +

) } @@ -35,34 +31,29 @@ export const CapabilityCardBody = ({ endpoints, mcpTools }: CapabilityCardBodyPr const hiddenEndpointCount = endpoints.length - visibleEndpoints.length return ( -
+
{endpoints.length > 0 && ( -
-
- - Management API endpoints - - {endpoints.length} +
+

+ API endpoints +

+
+ {visibleEndpoints.map((endpoint) => ( + + ))}
- - - {visibleEndpoints.map((endpoint) => ( - - ))} - -
{hiddenEndpointCount > 0 && ( @@ -70,28 +61,17 @@ export const CapabilityCardBody = ({ endpoints, mcpTools }: CapabilityCardBodyPr
)} {mcpTools.length > 0 && ( -
0 && 'border-t border-strong')}> -
- - MCP tools - - {mcpTools.length} +
+

+ MCP tools +

+
+ {mcpTools.map((tool) => ( + + {tool} + + ))}
- - - {mcpTools.map((tool) => ( - - - {/* No description field exists yet for MCP tools — stubbed rather than fabricated. */} - - - ))} - -
- {tool} - - No description available -
)}
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/EndpointRow.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/EndpointRow.tsx index 92527243027..2b40b5674c9 100644 --- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/EndpointRow.tsx +++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/EndpointRow.tsx @@ -26,22 +26,20 @@ export const EndpointRow = ({ const isMutating = method !== 'GET' return ( - - +
+ {isMutating ? ( {method} ) : ( {method} )} - - -
- {prefix !== '' && ( - {prefix} - )} - {distinguishing} -
- - +
+ + {prefix !== '' && ( + {prefix} + )} + {distinguishing} + +
) } diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ViewTokenSheet.test.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ViewTokenSheet.test.tsx index 5c630c961ac..92e7431cee2 100644 --- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ViewTokenSheet.test.tsx +++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ViewTokenSheet.test.tsx @@ -185,8 +185,6 @@ describe('ViewTokenSheet', () => { expect(screen.getByText('get_advisors')).toBeInTheDocument() expect(screen.getByText('execute_sql')).toBeInTheDocument() - // MCP tools have no description field yet — stubbed visibly rather than fabricated. - expect(screen.getAllByText('No description available').length).toBe(2) // project:database is catalog-high risk and granted read-write — max() over capabilities. expect(screen.getByText('High risk')).toBeInTheDocument()