From 999a66882df22010401fe2b13d0474fd82245d5b Mon Sep 17 00:00:00 2001
From: Marie <51697796+ijreilly@users.noreply.github.com>
Date: Fri, 10 May 2024 13:00:24 +0200
Subject: [PATCH] [fix] Do not stringify json field value if null (#5348)

as per title


https://github.com/twentyhq/twenty/assets/51697796/74ff0185-f20c-4ff1-9d89-3078063f23e1
---
 .../meta-types/display/components/JsonFieldDisplay.tsx     | 7 ++++++-
 .../record-field/utils/computeDraftValueFromFieldValue.ts  | 3 ++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/JsonFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/JsonFieldDisplay.tsx
index e5b5ca1ece..ed06e8736d 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/JsonFieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/JsonFieldDisplay.tsx
@@ -1,13 +1,18 @@
 import { useJsonField } from '@/object-record/record-field/meta-types/hooks/useJsonField';
 import { isFieldRawJsonValue } from '@/object-record/record-field/types/guards/isFieldRawJsonValue';
 import { JsonDisplay } from '@/ui/field/display/components/JsonDisplay';
+import { isDefined } from '~/utils/isDefined';
 
 export const JsonFieldDisplay = () => {
   const { fieldValue, maxWidth } = useJsonField();
 
   return (
     <JsonDisplay
-      text={isFieldRawJsonValue(fieldValue) ? JSON.stringify(fieldValue) : ''}
+      text={
+        isFieldRawJsonValue(fieldValue) && isDefined(fieldValue)
+          ? JSON.stringify(fieldValue)
+          : ''
+      }
       maxWidth={maxWidth}
     />
   );
diff --git a/packages/twenty-front/src/modules/object-record/record-field/utils/computeDraftValueFromFieldValue.ts b/packages/twenty-front/src/modules/object-record/record-field/utils/computeDraftValueFromFieldValue.ts
index e37880251f..725ca65cc1 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/utils/computeDraftValueFromFieldValue.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/utils/computeDraftValueFromFieldValue.ts
@@ -8,6 +8,7 @@ import { isFieldRawJsonValue } from '@/object-record/record-field/types/guards/i
 import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
 import { computeEmptyDraftValue } from '@/object-record/record-field/utils/computeEmptyDraftValue';
 import { isFieldValueEmpty } from '@/object-record/record-field/utils/isFieldValueEmpty';
+import { isDefined } from '~/utils/isDefined';
 
 type computeDraftValueFromFieldValueParams<FieldValue> = {
   fieldDefinition: Pick<FieldDefinition<FieldMetadata>, 'type'>;
@@ -41,7 +42,7 @@ export const computeDraftValueFromFieldValue = <FieldValue>({
   }
 
   if (isFieldRawJson(fieldDefinition)) {
-    return isFieldRawJsonValue(fieldValue)
+    return isFieldRawJsonValue(fieldValue) && isDefined(fieldValue)
       ? (JSON.stringify(
           fieldValue,
           null,