feat: add links to Links field (#5223)

Closes #5115, Closes #5116

<img width="242" alt="image"
src="https://github.com/twentyhq/twenty/assets/3098428/ab78495a-4216-4243-8de3-53720818a09b">

---------

Co-authored-by: Jérémy Magrin <jeremy.magrin@gmail.com>

packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx

@@ -6,6 +6,7 @@ import { Chip, ChipSize, ChipVariant } from 'twenty-ui';
 type RoundedLinkProps = {
   href: string;
   children?: React.ReactNode;
+  className?: string;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 };
 
@@ -22,14 +23,20 @@ const StyledClickable = styled.div`
 `;
 
 const StyledChip = styled(Chip)`
+  border-color: ${({ theme }) => theme.border.color.strong};
   box-sizing: border-box;
   padding: ${({ theme }) => theme.spacing(2)};
 `;
 
-export const RoundedLink = ({ children, href, onClick }: RoundedLinkProps) => (
+export const RoundedLink = ({
+  children,
+  className,
+  href,
+  onClick,
+}: RoundedLinkProps) => (
   <div>
     {children !== '' ? (
-      <StyledClickable>
+      <StyledClickable className={className}>
         <ReactLink target="_blank" to={href} onClick={onClick}>
           <StyledChip
             label={`${children}`}

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, ReactNode } from 'react';
 import { IconComponent } from 'twenty-ui';
 
 import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
@@ -18,7 +18,7 @@ export type MenuItemIconButton = {
 export type MenuItemProps = {
   LeftIcon?: IconComponent | null;
   accent?: MenuItemAccent;
-  text: string;
+  text: ReactNode;
   iconButtons?: MenuItemIconButton[];
   isIconDisplayedOnHoverOnly?: boolean;
   isTooltipOpen?: boolean;

packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx

@@ -1,4 +1,6 @@
+import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
+import { isString } from '@sniptt/guards';
 import {
   IconComponent,
   IconGripVertical,
@@ -14,7 +16,7 @@ type MenuItemLeftContentProps = {
   className?: string;
   LeftIcon: IconComponent | null | undefined;
   showGrip?: boolean;
-  text: string;
+  text: ReactNode;
 };
 
 export const MenuItemLeftContent = ({
@@ -38,7 +40,7 @@ export const MenuItemLeftContent = ({
         <LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
       )}
       <StyledMenuItemLabel hasLeftIcon={!!LeftIcon}>
-        <OverflowingTextWithTooltip text={text} />
+        {isString(text) ? <OverflowingTextWithTooltip text={text} /> : text}
       </StyledMenuItemLabel>
     </StyledMenuItemLeftContent>
   );