Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix(site): standardize AI provider badge tooltips #28624

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ssncferreira merged 4 commits into from
Aug 26, 2026
+41 −24
Merged

fix(site): standardize AI provider badge tooltips #28624

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
07d60da
fix(site): standardize AI provider badge tooltips
ssncferreira Aug 26, 2026
22083f9
fix(site): capitalize AI Gateway Proxy tooltip
ssncferreira Aug 26, 2026
a36d66b
chore: address comments
ssncferreira Aug 26, 2026
91b1b67
fix(site): make AI Providers table scroll horizontally
jeremyruppel Aug 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/src/pages/AISettingsPage/ProvidersPage/ProvidersPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const ProvidersPageView: React.FC<ProvidersPageViewProps> = ({
<ErrorAlert error={error} />
</div>
)}
<Table className="table-fixed" aria-label="AI providers">
<Table aria-label="AI providers">
<TableHeader>
<TableRow>
<TableHead className="w-1/3">Name</TableHead>
Expand Down
36 changes: 20 additions & 16 deletions site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,12 @@ const meta: Meta<typeof ProviderRow> = {
},
decorators: [
(Story) => (
<Table className="table-fixed" aria-label="AI providers">
<Table aria-label="AI providers">
<TableHeader>
<TableRow>
<TableHead className="w-[42%]">Name</TableHead>
<TableHead className="w-[38%]">Base URL</TableHead>
<TableHead className="w-20 text-center">
<span className="sr-only">Enabled</span>
</TableHead>
<TableHead className="w-12">
<span className="sr-only">Open provider</span>
</TableHead>
<TableHead className="w-1/3">Name</TableHead>
<TableHead className="w-1/3">Base URL</TableHead>
<TableHead className="w-22">Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
Expand Down Expand Up @@ -84,9 +79,17 @@ export const NotSupportedInAgents: Story = {
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await expect(
canvas.getByText("Not supported in Agents"),
).toBeInTheDocument();
const badge = canvas.getByRole("button", {
name: "Not supported in Agents",
});
await expect(badge).toBeInTheDocument();
await userEvent.hover(badge);
const tooltip = await within(canvasElement.ownerDocument.body).findByRole(
"tooltip",
);
await expect(tooltip).toHaveTextContent(
"This provider works with the AI Gateway Proxy but Coder Agents can't use it.",
);
},
};

Expand Down Expand Up @@ -117,7 +120,7 @@ export const WithHostnameCollisionWarning: Story = {
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
const badge = canvas.getByText(/warning/i);
const badge = canvas.getByLabelText(/^Warning: Hostname/);
await expect(badge).toBeInTheDocument();
await expect(badge).toHaveAttribute(
"aria-label",
Expand All @@ -127,9 +130,10 @@ export const WithHostnameCollisionWarning: Story = {

// Hover shows the tooltip with the warning text.
await userEvent.hover(badge);
await expect(
await canvas.findByText(/api\.openai\.com/, {}, { timeout: 2000 }),
).toBeInTheDocument();
const tooltip = await within(canvasElement.ownerDocument.body).findByRole(
"tooltip",
);
await expect(tooltip).toHaveTextContent("api.openai.com");

// Keyboard and mouse activation must not navigate the row.
badge.focus();
Expand Down
27 changes: 20 additions & 7 deletions site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,18 +68,31 @@ export const ProviderRow: React.FC<ProviderRowProps> = ({
<div className="flex flex-wrap items-center gap-1">
{provider.enabled && <Badge variant="default">Enabled</Badge>}
{AgentsUnsupportedProviderTypes.some((t) => t === provider.type) && (
<Badge
variant="info"
title="This provider works with the AI Gateway proxy but Coder Agents can't use it."
>
Not supported in Agents
</Badge>
<Tooltip>
<TooltipTrigger asChild>
<Badge
variant="info"
role="button"
tabIndex={0}
onClick={stopPropagation}
onKeyDown={stopPropagation}
onKeyUp={stopPropagation}
>
Not supported in Agents
Comment thread
jeremyruppel marked this conversation as resolved.
</Badge>
</TooltipTrigger>
<TooltipContent className="max-w-xs">
This provider works with the AI Gateway Proxy but Coder Agents
can't use it.
</TooltipContent>
</Tooltip>
)}
{provider.status?.warnings && provider.status.warnings.length > 0 && (
<Tooltip>
<TooltipTrigger asChild>
<Badge
variant="warning"
role="button"
tabIndex={0}
aria-label={`Warning: ${provider.status.warnings.join("; ")}`}
onClick={stopPropagation}
Expand All @@ -89,7 +102,7 @@ export const ProviderRow: React.FC<ProviderRowProps> = ({
Warning
</Badge>
</TooltipTrigger>
<TooltipContent>
<TooltipContent className="max-w-xs">
{provider.status.warnings.map((warning) => (
<p key={warning}>{warning}</p>
))}
Expand Down
Loading