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,
         )}

packages/twenty-front/src/modules/ui/field/display/components/JsonDisplay.tsx

@@ -0,0 +1,10 @@
+import { EllipsisDisplay } from './EllipsisDisplay';
+
+type JsonDisplayProps = {
+  text: string;
+  maxWidth?: number;
+};
+
+export const JsonDisplay = ({ text, maxWidth }: JsonDisplayProps) => (
+  <EllipsisDisplay maxWidth={maxWidth}>{text}</EllipsisDisplay>
+);

packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx

@@ -19,6 +19,7 @@ export type TextAreaInputProps = {
   onClickOutside: (event: MouseEvent | TouchEvent, inputValue: string) => void;
   hotkeyScope: string;
   onChange?: (newText: string) => void;
+  maxRows?: number;
 };
 
 const StyledTextArea = styled(TextareaAutosize)`
@@ -45,6 +46,7 @@ export const TextAreaInput = ({
   onShiftTab,
   onClickOutside,
   onChange,
+  maxRows,
 }: TextAreaInputProps) => {
   const [internalText, setInternalText] = useState(value);
 
@@ -84,6 +86,7 @@ export const TextAreaInput = ({
       onChange={handleChange}
       autoFocus={autoFocus}
       value={internalText}
+      maxRows={maxRows}
     />
   );
 };