From d81587a6a256cb8671d03a69d26aa20dda9a8381 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@berri.ai>
Date: Tue, 7 Jul 2026 17:46:06 +0000
Subject: [PATCH] fix(ui): update tooltip/collapsible to Base UI render prop
 pattern

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>
---
 .../tests/migration/migratedPages.spec.ts     |  6 +--
 .../src/components/leftnav.tsx                | 45 +++++++++----------
 2 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/ui/litellm-dashboard/e2e_tests/tests/migration/migratedPages.spec.ts b/ui/litellm-dashboard/e2e_tests/tests/migration/migratedPages.spec.ts
index 0b01ca5d280..61e89a95462 100644
--- a/ui/litellm-dashboard/e2e_tests/tests/migration/migratedPages.spec.ts
+++ b/ui/litellm-dashboard/e2e_tests/tests/migration/migratedPages.spec.ts
@@ -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;
     }
diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx
index 3e0e05565a2..c34f99fa0d9 100644
--- a/ui/litellm-dashboard/src/components/leftnav.tsx
+++ b/ui/litellm-dashboard/src/components/leftnav.tsx
@@ -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">