scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-07 08:26:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 36

fix(ui): make the suggested MCP network range keyboard operable

Browse source 
The suggested CIDR chip was a click-only span both before and after the shadcn
migration, so keyboard users could not reach or activate it. Render it as a
Button, which brings focus and Enter/Space activation with it, and cover the
keyboard path with a test that fails against the old span.
This commit is contained in:
Yuneng Jiang 2026-07-23 23:43:24 -07:00
parent bda431f8a8
commit f7f9dab7d0
No known key found for this signature in database
2 changed files with 18 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.test.tsx
View file

@ -58,6 +58,20 @@ describe("MCPNetworkSettings", () => {
expect(screen.getByText("203.0.113.0/24")).toBeInTheDocument();
});
it("exposes the suggested range as a control a keyboard user can reach and activate", async () => {
vi.mocked(fetchMCPClientIp).mockResolvedValue("203.0.113.45");
renderSettings();
const suggested = await screen.findByRole("button", { name: /203\.0\.113\.0\/24/ });
suggested.focus();
expect(suggested).toHaveFocus();
await userEvent.keyboard("{Enter}");
await waitFor(() => expect(screen.queryByText("Suggested range:")).not.toBeInTheDocument());
});
it("adds the suggested range to the list when clicked, and stops suggesting it", async () => {
vi.mocked(fetchMCPClientIp).mockResolvedValue("203.0.113.45");

7
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.tsx
View file

@ -127,14 +127,15 @@ const MCPNetworkSettings: React.FC<MCPNetworkSettingsProps> = ({ accessToken })
{suggestedRange && !privateRanges.includes(suggestedRange) && (
<div className="mt-1 flex items-center gap-2">
<p className="text-sm">Suggested range: </p>
<Badge
<Button
variant="outline"
className="cursor-pointer font-mono"
size="sm"
className="font-mono"
onClick={() => addSuggestedRange(suggestedRange)}
>
<Plus />
{suggestedRange}
</Badge>
</Button>
</div>
)}
</div>