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/input/button/components/LightIconButtonGroup.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import { FunctionComponent, MouseEvent, ReactElement } from 'react';
 import styled from '@emotion/styled';
 import { IconComponent } from 'twenty-ui';
 
@@ -14,7 +14,9 @@ export type LightIconButtonGroupProps = Pick<
   'className' | 'size'
 > & {
   iconButtons: {
+    Wrapper?: FunctionComponent<{ iconButton: ReactElement }>;
     Icon: IconComponent;
+    accent?: LightIconButtonProps['accent'];
     onClick?: (event: MouseEvent<any>) => void;
     disabled?: boolean;
   }[];
@@ -26,16 +28,26 @@ export const LightIconButtonGroup = ({
   className,
 }: LightIconButtonGroupProps) => (
   <StyledLightIconButtonGroupContainer className={className}>
-    {iconButtons.map(({ Icon, onClick }, index) => {
-      return (
+    {iconButtons.map(({ Wrapper, Icon, accent, onClick }, index) => {
+      const iconButton = (
         <LightIconButton
           key={`light-icon-button-${index}`}
           Icon={Icon}
+          accent={accent}
           disabled={!onClick}
           onClick={onClick}
           size={size}
         />
       );
+
+      return Wrapper ? (
+        <Wrapper
+          key={`light-icon-button-wrapper-${index}`}
+          iconButton={iconButton}
+        />
+      ) : (
+        iconButton
+      );
     })}
   </StyledLightIconButtonGroupContainer>
 );