From 8ca175b917da02750f5b787bac898b6dac1fdbed Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <en3m@ya.ru>
Date: Wed, 10 Jul 2024 11:53:35 +0200
Subject: [PATCH] [hive/app] fixes error `<button>` cannot appear as a
 descendant of `<button>` for `TabsTrigger` inside `TooltipTrigger (#4999)

---
 packages/web/app/src/components/ui/tabs.tsx           | 3 ++-
 packages/web/app/src/pages/target-history-version.tsx | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/web/app/src/components/ui/tabs.tsx b/packages/web/app/src/components/ui/tabs.tsx
index 3be3bc9e8..977042dfa 100644
--- a/packages/web/app/src/components/ui/tabs.tsx
+++ b/packages/web/app/src/components/ui/tabs.tsx
@@ -28,7 +28,8 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm',
+      'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 data-[state=active]:shadow-sm',
+      'disabled:cursor-not-allowed active:disabled:pointer-events-none', // `:active` allows `:hover` state for using with `TooltipTrigger` with `asChild` prop
       className,
     )}
     {...props}
diff --git a/packages/web/app/src/pages/target-history-version.tsx b/packages/web/app/src/pages/target-history-version.tsx
index d5e8698f1..5cbec475f 100644
--- a/packages/web/app/src/pages/target-history-version.tsx
+++ b/packages/web/app/src/pages/target-history-version.tsx
@@ -283,7 +283,10 @@ function DefaultSchemaVersionView(props: {
           <TabsList className="bg-background border-muted w-full justify-start rounded-none border-x border-b">
             {availableViews.map(item => (
               <Tooltip key={item.value}>
-                <TooltipTrigger>
+                <TooltipTrigger
+                  // fixes <button> cannot appear as a descendant of <button>
+                  asChild
+                >
                   <TabsTrigger value={item.value} disabled={!!item.disabledReason}>
                     {item.icon}
                     <span className="ml-2">{item.label}</span>