feat: add Relation field form (#2572)

* feat: add useCreateOneRelationMetadata and useRelationMetadata

Closes #2423

* feat: add Relation field form

Closes #2003

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/display/chip/components/Chip.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { MouseEvent, ReactNode } from 'react';
 import styled from '@emotion/styled';
 
 import { OverflowingTextWithTooltip } from '../../tooltip/OverflowingTextWithTooltip';
@@ -28,9 +28,10 @@ type ChipProps = {
   maxWidth?: string;
   variant?: ChipVariant;
   accent?: ChipAccent;
-  leftComponent?: React.ReactNode;
-  rightComponent?: React.ReactNode;
+  leftComponent?: ReactNode;
+  rightComponent?: ReactNode;
   className?: string;
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 };
 
 const StyledContainer = styled.div<Partial<ChipProps>>`
@@ -125,6 +126,7 @@ export const Chip = ({
   accent = ChipAccent.TextPrimary,
   maxWidth,
   className,
+  onClick,
 }: ChipProps) => (
   <StyledContainer
     data-testid="chip"
@@ -135,6 +137,7 @@ export const Chip = ({
     disabled={disabled}
     className={className}
     maxWidth={maxWidth}
+    onClick={onClick}
   >
     {leftComponent}
     <StyledLabel>

front/src/modules/ui/display/chip/components/EntityChip.tsx

@@ -45,31 +45,31 @@ export const EntityChip = ({
   };
 
   return isNonEmptyString(name) ? (
-    <div onClick={handleLinkClick}>
-      <Chip
-        label={name}
-        variant={
-          linkToEntity
-            ? variant === EntityChipVariant.Regular
-              ? ChipVariant.Highlighted
-              : ChipVariant.Regular
-            : ChipVariant.Transparent
-        }
-        leftComponent={
-          LeftIcon ? (
-            <LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
-          ) : (
-            <Avatar
-              avatarUrl={pictureUrl}
-              colorId={entityId}
-              placeholder={name}
-              size="sm"
-              type={avatarType}
-            />
-          )
-        }
-      />
-    </div>
+    <Chip
+      label={name}
+      variant={
+        linkToEntity
+          ? variant === EntityChipVariant.Regular
+            ? ChipVariant.Highlighted
+            : ChipVariant.Regular
+          : ChipVariant.Transparent
+      }
+      leftComponent={
+        LeftIcon ? (
+          <LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+        ) : (
+          <Avatar
+            avatarUrl={pictureUrl}
+            colorId={entityId}
+            placeholder={name}
+            size="sm"
+            type={avatarType}
+          />
+        )
+      }
+      clickable={!!linkToEntity}
+      onClick={handleLinkClick}
+    />
   ) : (
     <></>
   );

front/src/modules/ui/display/icon/index.ts

@@ -69,6 +69,9 @@ export {
   IconPlug,
   IconPlus,
   IconProgressCheck,
+  IconRelationManyToMany,
+  IconRelationOneToMany,
+  IconRelationOneToOne,
   IconRepeat,
   IconRobot,
   IconSearch,