Fix raw json field display in read only (#16502)

Preview
<img width="1185" height="617" alt="Screenshot 2025-12-11 at 15 54 07"
src="https://github.com/user-attachments/assets/863fb58c-04df-4e4d-bf8c-0045c833466c"
/>

Fixes https://github.com/twentyhq/twenty/issues/16311

packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/JsonFieldDisplay.tsx

@@ -1,9 +1,29 @@
 import { useJsonFieldDisplay } from '@/object-record/record-field/ui/meta-types/hooks/useJsonFieldDisplay';
 import { JsonDisplay } from '@/ui/field/display/components/JsonDisplay';
+import { ExpandedFieldDisplay } from '@/ui/layout/expandable-list/components/ExpandedFieldDisplay';
+import { t } from '@lingui/core/macro';
+import { useRef, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
+import { isTwoFirstDepths, JsonTree } from 'twenty-ui/json-visualizer';
+import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
 
 export const JsonFieldDisplay = () => {
-  const { fieldValue, maxWidth } = useJsonFieldDisplay();
+  const { copyToClipboard } = useCopyToClipboard();
+
+  const { fieldValue, maxWidth, isRecordFieldReadOnly } = useJsonFieldDisplay();
+
+  const [isJsonTreeViewOpen, setIsJsonTreeViewOpen] = useState(false);
+  const anchorRef = useRef<HTMLDivElement>(null);
+
+  const handleClick = () => {
+    if (isRecordFieldReadOnly) {
+      setIsJsonTreeViewOpen(true);
+    }
+  };
+
+  const handleClickOutside = () => {
+    setIsJsonTreeViewOpen(false);
+  };
 
   if (!isDefined(fieldValue)) {
     return <></>;
@@ -11,5 +31,28 @@ export const JsonFieldDisplay = () => {
 
   const value = JSON.stringify(fieldValue);
 
-  return <JsonDisplay text={value} maxWidth={maxWidth} />;
+  return (
+    <>
+      <div ref={anchorRef} onClick={handleClick}>
+        <JsonDisplay text={value} maxWidth={maxWidth} />
+      </div>
+      {isJsonTreeViewOpen && (
+        <ExpandedFieldDisplay
+          anchorElement={anchorRef.current ?? undefined}
+          onClickOutside={handleClickOutside}
+        >
+          <JsonTree
+            value={fieldValue}
+            shouldExpandNodeInitially={isTwoFirstDepths}
+            emptyArrayLabel={t`Empty Array`}
+            emptyObjectLabel={t`Empty Object`}
+            emptyStringLabel={t`[empty string]`}
+            arrowButtonCollapsedLabel={t`Expand`}
+            arrowButtonExpandedLabel={t`Collapse`}
+            onNodeValueClick={copyToClipboard}
+          />
+        </ExpandedFieldDisplay>
+      )}
+    </>
+  );
 };

packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/hooks/useJsonFieldDisplay.ts

@@ -7,7 +7,8 @@ import { useRecordFieldValue } from '@/object-record/record-store/hooks/useRecor
 import { FieldContext } from '../../contexts/FieldContext';
 
 export const useJsonFieldDisplay = () => {
-  const { recordId, fieldDefinition, maxWidth } = useContext(FieldContext);
+  const { recordId, fieldDefinition, maxWidth, isRecordFieldReadOnly } =
+    useContext(FieldContext);
 
   const fieldName = fieldDefinition.metadata.fieldName;
 
@@ -25,5 +26,6 @@ export const useJsonFieldDisplay = () => {
     maxWidth,
     fieldDefinition,
     fieldValue: formattedFieldValue,
+    isRecordFieldReadOnly,
   };
 };