feat: remove a link from a Links field (#5313)

Closes #5117

TO FIX in another PR: right now, the "Vertical Dots" LightIconButton
inside the Dropdown menu sometimes needs to be clicked twice to open the
nested dropdown, not sure why 🤔 Maybe an `event.preventDefault()` is
needed somewhere?

<img width="369" alt="image"
src="https://github.com/twentyhq/twenty/assets/3098428/dd0c771a-c18d-4eb2-8ed6-b107f56711e9">

---------

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

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

@@ -1,6 +1,7 @@
-import { MouseEvent, ReactNode } from 'react';
+import { FunctionComponent, MouseEvent, ReactElement, ReactNode } from 'react';
 import { IconComponent } from 'twenty-ui';
 
+import { LightIconButtonProps } from '@/ui/input/button/components/LightIconButton';
 import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
@@ -11,7 +12,9 @@ import {
 import { MenuItemAccent } from '../types/MenuItemAccent';
 
 export type MenuItemIconButton = {
+  Wrapper?: FunctionComponent<{ iconButton: ReactElement }>;
   Icon: IconComponent;
+  accent?: LightIconButtonProps['accent'];
   onClick?: (event: MouseEvent<any>) => void;
 };
 
@@ -24,7 +27,7 @@ export type MenuItemProps = {
   isTooltipOpen?: boolean;
   className?: string;
   testId?: string;
-  onClick?: (event: MouseEvent<HTMLLIElement>) => void;
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 };
 
 export const MenuItem = ({
@@ -32,7 +35,6 @@ export const MenuItem = ({
   accent = 'default',
   text,
   iconButtons,
-  isTooltipOpen,
   isIconDisplayedOnHoverOnly = true,
   className,
   testId,
@@ -40,7 +42,7 @@ export const MenuItem = ({
 }: MenuItemProps) => {
   const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
 
-  const handleMenuItemClick = (event: MouseEvent<HTMLLIElement>) => {
+  const handleMenuItemClick = (event: MouseEvent<HTMLDivElement>) => {
     if (!onClick) return;
     event.preventDefault();
     event.stopPropagation();
@@ -54,7 +56,6 @@ export const MenuItem = ({
       onClick={handleMenuItemClick}
       className={className}
       accent={accent}
-      isMenuOpen={!!isTooltipOpen}
       isIconDisplayedOnHoverOnly={isIconDisplayedOnHoverOnly}
     >
       <StyledMenuItemLeftContent>

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

@@ -23,7 +23,6 @@ export const MenuItemDraggable = ({
   LeftIcon,
   accent = 'default',
   iconButtons,
-  isTooltipOpen,
   onClick,
   text,
   isDragDisabled = false,
@@ -37,7 +36,6 @@ export const MenuItemDraggable = ({
       onClick={onClick}
       accent={accent}
       className={className}
-      isMenuOpen={!!isTooltipOpen}
       isIconDisplayedOnHoverOnly={isIconDisplayedOnHoverOnly}
     >
       <MenuItemLeftContent

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

@@ -10,7 +10,7 @@ export type MenuItemBaseProps = {
   isKeySelected?: boolean;
 };
 
-export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
+export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`
   --horizontal-padding: ${({ theme }) => theme.spacing(1)};
   --vertical-padding: ${({ theme }) => theme.spacing(2)};
 
@@ -101,23 +101,26 @@ export const StyledMenuItemRightContent = styled.div`
 `;
 
 export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
-  isMenuOpen: boolean;
   isIconDisplayedOnHoverOnly?: boolean;
 }>`
+  ${({ isIconDisplayedOnHoverOnly, theme }) =>
+    isIconDisplayedOnHoverOnly &&
+    css`
+      & .hoverable-buttons {
+        opacity: 0;
+        position: fixed;
+        right: ${theme.spacing(2)};
+      }
+
+      &:hover {
+        & .hoverable-buttons {
+          opacity: 1;
+          position: static;
+        }
+      }
+    `};
+
   & .hoverable-buttons {
-    pointer-events: none;
-    position: fixed;
-    right: ${({ theme }) => theme.spacing(2)};
-    opacity: ${({ isIconDisplayedOnHoverOnly }) =>
-      isIconDisplayedOnHoverOnly ? 0 : 1};
     transition: opacity ${({ theme }) => theme.animation.duration.instant}s ease;
   }
-
-  &:hover {
-    & .hoverable-buttons {
-      opacity: 1;
-      pointer-events: auto;
-      position: static;
-    }
-  }
 `;