fix(UI-1863): fix info popover not-displayed in triggers and connections tables (#1315)

## Description

# Fix IconButton ref forwarding for popover functionality

## Problem

Popovers were not displaying correctly in triggers and connections
tables due to a React ref forwarding issue. The console showed warnings:

```
Warning: Function components cannot be given refs. Attempts to access this ref will fail. 
Did you mean to use React.forwardRef()?
```

This prevented the popover library from properly positioning and
displaying popover content when hovering over info icons.

## Root Cause

The `IconButton` component was not using `React.forwardRef()`, which
meant that when `PopoverTrigger` with `asChild` prop tried to pass a ref
to the IconButton, it failed. This broke the popover positioning
mechanism that relies on getting a reference to the trigger element.

## Solution

Implemented a **combined approach** that takes the best aspects of both
comprehensive and minimal solutions:

### Key Changes

1. **Added proper ref forwarding to IconButton**
- Used `React.forwardRef<HTMLButtonElement | HTMLAnchorElement>` for
correct TypeScript types
   - Supports both button and link rendering scenarios
   - Maintains backward compatibility

2. **Enhanced Link component with minimal ref support**
   - Added `React.forwardRef` to Link component
   - Keeps interface simple and focused

3. **Maintained type safety**
   - Proper union types prevent future TypeScript errors
   - Future-proof design without over-engineering

## Linear Ticket

https://linear.app/autokitteh/issue/UI-1863/fix-info-popover-display-in-triggers-and-connections-tables

## What type of PR is this? (check all applicable)

- [ ] 💡 (feat) - A new feature (non-breaking change which adds
functionality)
- [ ] 🔄 (refactor) - Code Refactoring - A code change that neither fixes
a bug nor adds a feature
- [x] 🐞 (fix) - Bug Fix (non-breaking change which fixes an issue)
- [ ] 🏎 (perf) - Optimization
- [ ] 📄 (docs) - Documentation - Documentation only changes
- [ ] 📄 (test) - Tests - Adding missing tests or correcting existing
tests
- [ ] 🎨 (style) - Styles - Changes that do not affect the meaning of the
code (white-space, formatting, missing semi-colons, etc)
- [ ] ⚙️ (ci) - Continuous Integrations - Changes to our CI
configuration files and scripts (example scopes: Travis, Circle,
BrowserStack, SauceLabs)
- [ ] ☑️ (chore) - Chores - Other changes that don't modify src or test
files
- [ ] ↩️ (revert) - Reverts - Reverts a previous commit(s).

<!--
     For a timely review/response, please avoid force-pushing additional
     commits if your PR already received reviews or comments.
Before submitting a Pull Request, please ensure you've done the
following:
     - 👷‍♀️ Create small PRs. In most cases this will be possible.
     - ✅ Provide tests for your changes.
     - 📝 Use descriptive commit messages (as described below).
- 📗 Update any related documentation and include any relevant
screenshots.
     Commit Message Structure (all lower-case):
     <type>(optional ticket number): <description>
     [optional body]
-->

Author: RonenMars

public/grammars/python.tmLanguage.json

@@ -4210,4 +4210,4 @@
 			]
 		}
 	}
-}
+}

src/components/atoms/buttons/iconButton.tsx

@@ -6,53 +6,71 @@ import { cn } from "@utilities";
 
 import { Link } from "@components/atoms";
 
-export const IconButton = ({
-	ariaLabel,
-	children,
-	className,
-	disabled,
-	href,
-	onClick,
-	onKeyDown,
-	onMouseEnter,
-	onMouseLeave,
-	title,
-	type = "button",
-	variant,
-	id,
-}: IconButtonProps) => {
-	const iconButtonClass = cn(
-		"flex shrink-0 items-center justify-center rounded-full p-2 outline-0 transition duration-300 hover:bg-gray-850",
+export const IconButton = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, IconButtonProps>(
+	(
 		{
-			"bg-black": variant === ButtonVariant.filled,
-			"border border-gray-750 hover:border-transparent": variant === ButtonVariant.outline,
-			"cursor-not-allowed opacity-40": disabled,
-			"hover:border-gray-750": disabled && variant === ButtonVariant.outline,
-			"hover:bg-transparen border hover:border-black/50": variant === ButtonVariant.flatText,
+			ariaLabel,
+			children,
+			className,
+			disabled,
+			href,
+			onClick,
+			onKeyDown,
+			onMouseEnter,
+			onMouseLeave,
+			title,
+			type = "button",
+			variant,
+			id,
 		},
-		className
-	);
+		ref
+	) => {
+		const iconButtonClass = cn(
+			"flex shrink-0 items-center justify-center rounded-full p-2 outline-0 transition duration-300 hover:bg-gray-850",
+			{
+				"bg-black": variant === ButtonVariant.filled,
+				"border border-gray-750 hover:border-transparent": variant === ButtonVariant.outline,
+				"cursor-not-allowed opacity-40": disabled,
+				"hover:border-gray-750": disabled && variant === ButtonVariant.outline,
+				"hover:bg-transparen border hover:border-black/50": variant === ButtonVariant.flatText,
+			},
+			className
+		);
 
-	const Component = href ? Link : "button";
-	const linkHref = href ? { to: href } : { to: "" };
+		if (href) {
+			return (
+				<Link
+					ariaLabel={ariaLabel}
+					className={iconButtonClass}
+					id={id}
+					ref={ref as React.ForwardedRef<HTMLAnchorElement>}
+					title={title}
+					to={href}
+				>
+					{children}
+				</Link>
+			);
+		}
 
-	return (
-		<Component
-			aria-label={ariaLabel}
-			className={iconButtonClass}
-			disabled={disabled}
-			onClick={onClick}
-			onKeyDown={onKeyDown}
-			onMouseEnter={onMouseEnter}
-			onMouseLeave={onMouseLeave}
-			role="button"
-			tabIndex={0}
-			title={title}
-			type={type}
-			{...linkHref}
-			id={id}
-		>
-			{children}
-		</Component>
-	);
-};
+		return (
+			<button
+				aria-label={ariaLabel}
+				className={iconButtonClass}
+				disabled={disabled}
+				id={id}
+				onClick={onClick}
+				onKeyDown={onKeyDown}
+				onMouseEnter={onMouseEnter}
+				onMouseLeave={onMouseLeave}
+				ref={ref as React.ForwardedRef<HTMLButtonElement>}
+				tabIndex={0}
+				title={title}
+				type={type}
+			>
+				{children}
+			</button>
+		);
+	}
+);
+
+IconButton.displayName = "IconButton";

src/components/atoms/link.tsx

@@ -5,17 +5,29 @@ import { Link as LinkReact } from "react-router-dom";
 import { LinkProps } from "@interfaces/components";
 import { cn } from "@utilities";
 
-export const Link = ({ ariaLabel, children, className, disabled, target, title, to, id }: LinkProps) => {
-	const linkClass = cn(
-		{
-			"pointer-events-none cursor-not-allowed select-none": disabled,
-		},
-		className
-	);
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+	({ ariaLabel, children, className, disabled, target, title, to, id }, ref) => {
+		const linkClass = cn(
+			{
+				"pointer-events-none cursor-not-allowed select-none": disabled,
+			},
+			className
+		);
 
-	return (
-		<LinkReact aria-label={ariaLabel} className={linkClass} id={id} target={target} title={title} to={to}>
-			{children}
-		</LinkReact>
-	);
-};
+		return (
+			<LinkReact
+				aria-label={ariaLabel}
+				className={linkClass}
+				id={id}
+				ref={ref}
+				target={target}
+				title={title}
+				to={to}
+			>
+				{children}
+			</LinkReact>
+		);
+	}
+);
+
+Link.displayName = "Link";

src/components/organisms/tour/tourPopover.tsx

@@ -60,7 +60,7 @@ export const TourPopover = ({
 		onSkip?.();
 	};
 
-	const popoverClassName = cn("z-[100] w-80 rounded-lg bg-gray-850 p-4 text-white shadow-lg", { hidden: !visible });
+	const popoverClassName = cn("z-overlay w-80 rounded-lg bg-gray-850 p-4 text-white shadow-lg", { hidden: !visible });
 
 	return (
 		<PopoverContext.Provider value={popover}>