scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-13 23:11:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 100

fix(ui): update tooltip/collapsible to Base UI render prop pattern

Browse source 
Replace asChild with render prop for TooltipTrigger and remove asChild
from CollapsibleTrigger to match Base UI migration on base branch.
Update e2e test selector for Base UI data attributes.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Krrish Dholakia 2026-07-07 17:46:06 +00:00
parent d42933bb46
commit d81587a6a2
2 changed files with 25 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/litellm-dashboard/e2e_tests/tests/migration/migratedPages.spec.ts
View file

@ -31,9 +31,9 @@ async function expectRendered(page: Page) {
async function clickSidebar(page: Page, segment: string) {
const link = page.locator(`a[href$="/ui/${segment}"]`).first();
for (let i = 0; i < 8 && !(await link.isVisible().catch(() => false)); i++) {
const closedCollapsible = page.locator('[data-state="closed"] > button[role="menuitem"]').first();
if (await closedCollapsible.isVisible().catch(() => false)) {
await closedCollapsible.click();
const closedTrigger = page.locator('button[role="menuitem"]:not([data-panel-open])').first();
if (await closedTrigger.isVisible().catch(() => false)) {
await closedTrigger.click();
await page.waitForTimeout(250);
continue;
}

45
ui/litellm-dashboard/src/components/leftnav.tsx
View file

@ -453,7 +453,7 @@ function NavItem({
const tooltipLabel = typeof item.label === "string" ? item.label : item.page;
return (
<Tooltip>
<TooltipTrigger asChild>{content}</TooltipTrigger>
<TooltipTrigger render={content} />
<TooltipContent side="right">{tooltipLabel}</TooltipContent>
</Tooltip>
);
@ -480,15 +480,17 @@ function CollapsibleNavItem({
const tooltipLabel = typeof item.label === "string" ? item.label : item.page;
return (
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={() => setOpen((o) => !o)}
className="flex items-center justify-center h-8 py-1.5 px-2 rounded-md text-[13px] text-sidebar-foreground/70 hover:bg-sidebar-accent transition-colors w-full"
>
<span className="shrink-0">{item.icon}</span>
</button>
</TooltipTrigger>
<TooltipTrigger
render={
<button
type="button"
onClick={() => setOpen((o) => !o)}
className="flex items-center justify-center h-8 py-1.5 px-2 rounded-md text-[13px] text-sidebar-foreground/70 hover:bg-sidebar-accent transition-colors w-full"
>
<span className="shrink-0">{item.icon}</span>
</button>
}
/>
<TooltipContent side="right">{tooltipLabel}</TooltipContent>
</Tooltip>
);
@ -496,19 +498,16 @@ function CollapsibleNavItem({
return (
<Collapsible open={open} onOpenChange={setOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
role="menuitem"
className={cn(
"flex items-center gap-2 h-8 py-1.5 px-2 rounded-md text-[13px] transition-colors w-full",
"hover:bg-sidebar-accent text-sidebar-foreground/70",
)}
>
<span className="shrink-0">{item.icon}</span>
<span className="truncate flex-1 text-left">{item.label}</span>
<ChevronRight className={cn("size-3.5 text-muted-foreground transition-transform", open && "rotate-90")} />
</button>
<CollapsibleTrigger
role="menuitem"
className={cn(
"flex items-center gap-2 h-8 py-1.5 px-2 rounded-md text-[13px] transition-colors w-full",
"hover:bg-sidebar-accent text-sidebar-foreground/70",
)}
>
<span className="shrink-0">{item.icon}</span>
<span className="truncate flex-1 text-left">{item.label}</span>
<ChevronRight className={cn("size-3.5 text-muted-foreground transition-transform", open && "rotate-90")} />
</CollapsibleTrigger>
<CollapsibleContent>
<div className="ml-4 border-l border-sidebar-border pl-2 mt-0.5 flex flex-col gap-0.5">