From d6917237cb4b94caeb8c21f3f96c8e62d17b95c1 Mon Sep 17 00:00:00 2001
From: Frank Noirot <frank@kittycad.io>
Date: Thu, 5 Sep 2024 14:53:26 -0400
Subject: [PATCH] Add `no-drag` to Toolbar tooltips in Desktop, open links in
 default browser Fixes #3781

---
 src/Toolbar.tsx            | 8 ++++++++
 src/components/Tooltip.tsx | 7 ++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/Toolbar.tsx b/src/Toolbar.tsx
index 7791368ef6..8f0c0fb91a 100644
--- a/src/Toolbar.tsx
+++ b/src/Toolbar.tsx
@@ -20,6 +20,8 @@ import {
   ToolbarItemResolved,
   ToolbarModeName,
 } from 'lib/toolbar'
+import { isDesktop } from 'lib/isDesktop'
+import { openExternalBrowserIfDesktop } from 'lib/openWindow'
 
 export function Toolbar({
   className = '',
@@ -288,6 +290,11 @@ const ToolbarItemTooltip = memo(function ToolbarItemContents({
   return (
     <Tooltip
       inert={false}
+      wrapperStyle={
+        isDesktop()
+          ? ({ '-webkit-app-region': 'no-drag' } as React.CSSProperties)
+          : {}
+      }
       position="bottom"
       wrapperClassName="!p-4 !pointer-events-auto"
       contentClassName="!text-left text-wrap !text-xs !p-0 !pb-2 flex gap-2 !max-w-none !w-72 flex-col items-stretch"
@@ -337,6 +344,7 @@ const ToolbarItemTooltip = memo(function ToolbarItemContents({
               <li key={link.label} className="contents">
                 <a
                   href={link.url}
+                  onClick={openExternalBrowserIfDesktop(link.url)}
                   target="_blank"
                   rel="noreferrer"
                   className="flex items-center rounded-sm p-1 no-underline text-inherit hover:bg-primary/10 hover:text-primary dark:hover:bg-chalkboard-70 dark:hover:text-inherit"
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 8e0167c08e..cab9b1a0e8 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -12,6 +12,7 @@ interface TooltipProps extends React.PropsWithChildren {
   position?: TooltipPosition
   wrapperClassName?: string
   contentClassName?: string
+  wrapperStyle?: React.CSSProperties
   delay?: number
   hoverOnly?: boolean
   inert?: boolean
@@ -22,6 +23,7 @@ export default function Tooltip({
   position = 'top',
   wrapperClassName: className,
   contentClassName,
+  wrapperStyle = {},
   delay = 200,
   hoverOnly = false,
   inert = true,
@@ -36,7 +38,10 @@ export default function Tooltip({
       } ${styles.tooltipWrapper} ${hoverOnly ? '' : styles.withFocus} ${
         styles[position]
       } ${className}`}
-      style={{ '--_delay': delay + 'ms' } as React.CSSProperties}
+      style={Object.assign(
+        { '--_delay': delay + 'ms' } as React.CSSProperties,
+        wrapperStyle
+      )}
     >
       <div className={`rounded ${styles.tooltip} ${contentClassName || ''}`}>
         {children}