From 542419bc1b86053e90e28db67d795bf7bee40c74 Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Mon, 5 Aug 2024 14:36:57 +0200
Subject: [PATCH] Timeline log displays empty when field value deleted (#6542)

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

## Before
<img width="1282" alt="Screenshot 2024-08-05 at 13 22 13"
src="https://github.com/user-attachments/assets/27bf3343-7d6a-440f-905b-e55fdde918d7">

## After
<img width="1251" alt="Screenshot 2024-08-05 at 13 22 05"
src="https://github.com/user-attachments/assets/25404bff-9d90-4631-af09-fe18b6df43f5">
---
 .../main-object/components/EventFieldDiff.tsx | 44 ++++++++++++++-----
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiff.tsx b/packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiff.tsx
index 1cebf7e5e..94726465f 100644
--- a/packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiff.tsx
+++ b/packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiff.tsx
@@ -23,6 +23,10 @@ const StyledEventFieldDiffContainer = styled.div`
   width: 380px;
 `;
 
+const StyledEmptyValue = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
 export const EventFieldDiff = ({
   diffRecord,
   mainObjectMetadataItem,
@@ -33,21 +37,39 @@ export const EventFieldDiff = ({
     throw new Error('fieldMetadataItem is required');
   }
 
+  const isValueEmpty = (value: unknown): boolean =>
+    value === null || value === undefined || value === '';
+
+  const isObjectEmpty = (obj: Record<string, unknown>): boolean =>
+    Object.values(obj).every(isValueEmpty);
+
+  const isUpdatedToEmpty =
+    isValueEmpty(diffRecord) ||
+    (typeof diffRecord === 'object' &&
+      diffRecord !== null &&
+      isObjectEmpty(diffRecord));
+
   return (
     <RecordFieldValueSelectorContextProvider>
       <StyledEventFieldDiffContainer>
         <EventFieldDiffLabel fieldMetadataItem={fieldMetadataItem} />→
-        <EventFieldDiffValueEffect
-          diffArtificialRecordStoreId={diffArtificialRecordStoreId}
-          mainObjectMetadataItem={mainObjectMetadataItem}
-          fieldMetadataItem={fieldMetadataItem}
-          diffRecord={diffRecord}
-        />
-        <EventFieldDiffValue
-          diffArtificialRecordStoreId={diffArtificialRecordStoreId}
-          mainObjectMetadataItem={mainObjectMetadataItem}
-          fieldMetadataItem={fieldMetadataItem}
-        />
+        {isUpdatedToEmpty ? (
+          <StyledEmptyValue>Empty</StyledEmptyValue>
+        ) : (
+          <>
+            <EventFieldDiffValueEffect
+              diffArtificialRecordStoreId={diffArtificialRecordStoreId}
+              mainObjectMetadataItem={mainObjectMetadataItem}
+              fieldMetadataItem={fieldMetadataItem}
+              diffRecord={diffRecord}
+            />
+            <EventFieldDiffValue
+              diffArtificialRecordStoreId={diffArtificialRecordStoreId}
+              mainObjectMetadataItem={mainObjectMetadataItem}
+              fieldMetadataItem={fieldMetadataItem}
+            />
+          </>
+        )}
       </StyledEventFieldDiffContainer>
     </RecordFieldValueSelectorContextProvider>
   );