Create new field type JSON (#4729)

### Description
Create new field type JSON

### Refs
https://github.com/twentyhq/twenty/issues/3900

### Demo


https://github.com/twentyhq/twenty/assets/140154534/9ebdf4d4-f332-4940-b9d8-d9cf91935b67

Fixes #3900

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>

packages/twenty-front/src/modules/ui/display/tooltip/AppTooltip.tsx

@@ -35,6 +35,7 @@ export type AppTooltipProps = {
   className?: string;
   anchorSelect?: string;
   content?: string;
+  children?: React.ReactNode;
   delayHide?: number;
   offset?: number;
   noArrow?: boolean;
@@ -53,6 +54,7 @@ export const AppTooltip = ({
   offset,
   place,
   positionStrategy,
+  children,
 }: AppTooltipProps) => (
   <StyledAppTooltip
     {...{
@@ -65,6 +67,7 @@ export const AppTooltip = ({
       offset,
       place,
       positionStrategy,
+      children,
     }}
   />
 );

packages/twenty-front/src/modules/ui/display/tooltip/OverflowingTextWithTooltip.tsx

@@ -22,9 +22,11 @@ const StyledOverflowingText = styled.div<{ cursorPointer: boolean }>`
 export const OverflowingTextWithTooltip = ({
   text,
   className,
+  mutliline,
 }: {
   text: string | null | undefined;
   className?: string;
+  mutliline?: boolean;
 }) => {
   const textElementId = `title-id-${uuidV4()}`;
 
@@ -65,13 +67,15 @@ export const OverflowingTextWithTooltip = ({
           <div onClick={handleTooltipClick}>
             <AppTooltip
               anchorSelect={`#${textElementId}`}
-              content={text ?? ''}
+              content={mutliline ? undefined : text ?? ''}
               delayHide={0}
               offset={5}
               noArrow
               place="bottom"
               positionStrategy="absolute"
-            />
+            >
+              {mutliline ? <pre>{text}</pre> : ''}
+            </AppTooltip>
           </div>,
           document.body,
         )}