Activity timeline refactoring followup (#5835)

Following https://github.com/twentyhq/twenty/pull/5697, addressing
review

packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx

@@ -8,7 +8,7 @@ import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext'
 import { useCalendarEvents } from '@/activities/calendar/hooks/useCalendarEvents';
 import { getTimelineCalendarEventsFromCompanyId } from '@/activities/calendar/queries/getTimelineCalendarEventsFromCompanyId';
 import { getTimelineCalendarEventsFromPersonId } from '@/activities/calendar/queries/getTimelineCalendarEventsFromPersonId';
-import { FetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
+import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
 import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -128,7 +128,7 @@ export const Calendar = ({
             </Section>
           );
         })}
-        <FetchMoreLoader
+        <CustomResolverFetchMoreLoader
           loading={isFetchingMore || firstQueryLoading}
           onLastRowVisible={fetchMoreRecords}
         />

packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx

@@ -2,7 +2,7 @@ import { useInView } from 'react-intersection-observer';
 import styled from '@emotion/styled';
 import { GRAY_SCALE } from 'twenty-ui';
 
-type FetchMoreLoaderProps = {
+type CustomResolverFetchMoreLoaderProps = {
   loading: boolean;
   onLastRowVisible: (...args: any[]) => any;
 };
@@ -17,10 +17,10 @@ const StyledText = styled.div`
   padding-left: ${({ theme }) => theme.spacing(2)};
 `;
 
-export const FetchMoreLoader = ({
+export const CustomResolverFetchMoreLoader = ({
   loading,
   onLastRowVisible,
-}: FetchMoreLoaderProps) => {
+}: CustomResolverFetchMoreLoaderProps) => {
   const { ref: tbodyRef } = useInView({
     onChange: onLastRowVisible,
   });

packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { H1Title, H1TitleFontColor } from 'twenty-ui';
 
-import { FetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
+import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
 import { EmailLoader } from '@/activities/emails/components/EmailLoader';
 import { EmailThreadPreview } from '@/activities/emails/components/EmailThreadPreview';
 import { TIMELINE_THREADS_DEFAULT_PAGE_SIZE } from '@/activities/emails/constants/Messaging';
@@ -102,7 +102,7 @@ export const EmailThreads = ({
             ))}
           </Card>
         )}
-        <FetchMoreLoader
+        <CustomResolverFetchMoreLoader
           loading={isFetchingMore || firstQueryLoading}
           onLastRowVisible={fetchMoreRecords}
         />

packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { useRecoilCallback } from 'recoil';
 
-import { FetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
+import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
 import { EmailLoader } from '@/activities/emails/components/EmailLoader';
 import { EmailThreadHeader } from '@/activities/emails/components/EmailThreadHeader';
 import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
@@ -98,7 +98,7 @@ export const RightDrawerEmailThread = () => {
             sentAt={lastMessage.receivedAt}
             isExpanded
           />
-          <FetchMoreLoader
+          <CustomResolverFetchMoreLoader
             loading={loading}
             onLastRowVisible={fetchMoreMessages}
           />

packages/twenty-front/src/modules/activities/timelineActivities/components/EventRow.tsx

@@ -4,19 +4,14 @@ import { useRecoilValue } from 'recoil';
 
 import { useLinkedObject } from '@/activities/timeline/hooks/useLinkedObject';
 import { TimelineActivityContext } from '@/activities/timelineActivities/contexts/TimelineActivityContext';
-import {
+import { EventIconDynamicComponent } from '@/activities/timelineActivities/rows/components/EventIconDynamicComponent';
-  EventIconDynamicComponent,
+import { EventRowDynamicComponent } from '@/activities/timelineActivities/rows/components/EventRowDynamicComponent';
-  EventRowDynamicComponent,
-} from '@/activities/timelineActivities/rows/components/EventRowDynamicComponent';
 import { TimelineActivity } from '@/activities/timelineActivities/types/TimelineActivity';
-import {
+import { getTimelineActivityAuthorFullName } from '@/activities/timelineActivities/utils/getTimelineActivityAuthorFullName';
-  CurrentWorkspaceMember,
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
-  currentWorkspaceMemberState,
-} from '@/auth/states/currentWorkspaceMemberState';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
-import { isDefined } from '~/utils/isDefined';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 const StyledIconContainer = styled.div`
@@ -93,18 +88,6 @@ type EventRowProps = {
   event: TimelineActivity;
 };
 
-const getAuthorFullName = (
-  event: TimelineActivity,
-  currentWorkspaceMember: CurrentWorkspaceMember,
-) => {
-  if (isDefined(event.workspaceMember)) {
-    return currentWorkspaceMember.id === event.workspaceMember.id
-      ? 'You'
-      : `${event.workspaceMember?.name.firstName} ${event.workspaceMember?.name.lastName}`;
-  }
-  return 'Twenty';
-};
-
 export const EventRow = ({
   isLastEvent,
   event,
@@ -122,10 +105,13 @@ export const EventRow = ({
     return null;
   }
 
-  const authorFullName = getAuthorFullName(event, currentWorkspaceMember);
+  const authorFullName = getTimelineActivityAuthorFullName(
+    event,
+    currentWorkspaceMember,
+  );
 
   if (isUndefinedOrNull(mainObjectMetadataItem)) {
-    return null;
+    throw new Error('mainObjectMetadataItem is required');
   }
 
   return (

packages/twenty-front/src/modules/activities/timelineActivities/components/TimelineActivities.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { isNonEmptyArray } from '@sniptt/guards';
 
-import { FetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
+import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
 import { TimelineCreateButtonGroup } from '@/activities/timeline/components/TimelineCreateButtonGroup';
 import { EventList } from '@/activities/timelineActivities/components/EventList';
 import { useTimelineActivities } from '@/activities/timelineActivities/hooks/useTimelineActivities';
@@ -64,7 +64,10 @@ export const TimelineActivities = ({
         title="All"
         events={timelineActivities ?? []}
       />
-      <FetchMoreLoader loading={loading} onLastRowVisible={fetchMoreRecords} />
+      <CustomResolverFetchMoreLoader
+        loading={loading}
+        onLastRowVisible={fetchMoreRecords}
+      />
     </StyledMainContainer>
   );
 };

packages/twenty-front/src/modules/activities/timelineActivities/rows/activity/components/EventRowActivity.tsx

@@ -3,8 +3,8 @@ import styled from '@emotion/styled';
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
 import {
   EventRowDynamicComponentProps,
-  StyledItemAction,
+  StyledEventRowItemAction,
-  StyledItemAuthorText,
+  StyledEventRowItemColumn,
 } from '@/activities/timelineActivities/rows/components/EventRowDynamicComponent';
 
 type EventRowActivityProps = EventRowDynamicComponentProps;
@@ -14,7 +14,7 @@ const StyledLinkedActivity = styled.span`
   text-decoration: underline;
 `;
 
-export const EventRowActivity: React.FC<EventRowActivityProps> = ({
+export const EventRowActivity = ({
   event,
   authorFullName,
 }: EventRowActivityProps) => {
@@ -28,8 +28,8 @@ export const EventRowActivity: React.FC<EventRowActivityProps> = ({
 
   return (
     <>
-      <StyledItemAuthorText>{authorFullName}</StyledItemAuthorText>
+      <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
-      <StyledItemAction>{eventAction}</StyledItemAction>
+      <StyledEventRowItemAction>{eventAction}</StyledEventRowItemAction>
       <StyledLinkedActivity
         onClick={() => openActivityRightDrawer(event.linkedRecordId)}
       >

packages/twenty-front/src/modules/activities/timelineActivities/rows/calendar/components/EventCardCalendarEvent.tsx

@@ -10,7 +10,7 @@ import {
   formatToHumanReadableDay,
   formatToHumanReadableMonth,
   formatToHumanReadableTime,
-} from '~/utils';
+} from '~/utils/format/formatDate';
 import { isDefined } from '~/utils/isDefined';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
@@ -121,7 +121,7 @@ export const EventCardCalendarEvent = ({
       return <div>Calendar event not found</div>;
     }
 
-    return <div>Error loading message</div>;
+    return <div>Error loading calendar event</div>;
   }
 
   if (loading || isUndefined(calendarEvent)) {

packages/twenty-front/src/modules/activities/timelineActivities/rows/calendar/components/EventRowCalendarEvent.tsx

@@ -2,14 +2,12 @@ import { useState } from 'react';
 import styled from '@emotion/styled';
 
 import { EventCardCalendarEvent } from '@/activities/timelineActivities/rows/calendar/components/EventCardCalendarEvent';
-import {
+import { EventCard } from '@/activities/timelineActivities/rows/components/EventCard';
-  EventCard,
+import { EventCardToggleButton } from '@/activities/timelineActivities/rows/components/EventCardToggleButton';
-  EventCardToggleButton,
-} from '@/activities/timelineActivities/rows/components/EventCard';
 import {
   EventRowDynamicComponentProps,
-  StyledItemAction,
+  StyledEventRowItemAction,
-  StyledItemAuthorText,
+  StyledEventRowItemColumn,
 } from '@/activities/timelineActivities/rows/components/EventRowDynamicComponent';
 
 type EventRowCalendarEventProps = EventRowDynamicComponentProps;
@@ -26,7 +24,7 @@ const StyledRowContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const EventRowCalendarEvent: React.FC<EventRowCalendarEventProps> = ({
+export const EventRowCalendarEvent = ({
   event,
   authorFullName,
   labelIdentifierValue,
@@ -34,24 +32,17 @@ export const EventRowCalendarEvent: React.FC<EventRowCalendarEventProps> = ({
   const [, eventAction] = event.name.split('.');
   const [isOpen, setIsOpen] = useState(false);
 
-  const renderRow = () => {
+  if (['linked'].includes(eventAction) === false) {
-    switch (eventAction) {
+    throw new Error('Invalid event action for calendarEvent event type.');
-      case 'linked': {
+  }
-        return (
+
-          <StyledItemAction>
-            linked a calendar event with {labelIdentifierValue}
-          </StyledItemAction>
-        );
-      }
-      default:
-        throw new Error('Invalid event action for calendarEvent event type.');
-    }
-  };
   return (
     <StyledEventRowCalendarEventContainer>
       <StyledRowContainer>
-        <StyledItemAuthorText>{authorFullName}</StyledItemAuthorText>
+        <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
-        {renderRow()}
+        <StyledEventRowItemAction>
+          linked a calendar event with {labelIdentifierValue}
+        </StyledEventRowItemAction>
         <EventCardToggleButton isOpen={isOpen} setIsOpen={setIsOpen} />
       </StyledRowContainer>
       <EventCard isOpen={isOpen}>

packages/twenty-front/src/modules/activities/timelineActivities/rows/calendar/components/__stories__/EventCardCalendarEvent.stories.tsx

@@ -0,0 +1,68 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { graphql, HttpResponse } from 'msw';
+import { ComponentDecorator } from 'twenty-ui';
+
+import { EventCardCalendarEvent } from '@/activities/timelineActivities/rows/calendar/components/EventCardCalendarEvent';
+import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+
+const meta: Meta<typeof EventCardCalendarEvent> = {
+  title: 'Modules/TimelineActivities/Rows/CalendarEvent/EventCardCalendarEvent',
+  component: EventCardCalendarEvent,
+  decorators: [
+    ComponentDecorator,
+    ObjectMetadataItemsDecorator,
+    SnackBarDecorator,
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof EventCardCalendarEvent>;
+
+export const Default: Story = {
+  args: {
+    calendarEventId: '1',
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('FindOneCalendarEvent', () => {
+          return HttpResponse.json({
+            data: {
+              calendarEvent: {
+                id: '1',
+                title: 'Mock title',
+                startsAt: '2022-01-01T00:00:00Z',
+                endsAt: '2022-01-01T01:00:00Z',
+              },
+            },
+          });
+        }),
+      ],
+    },
+  },
+};
+
+export const NotShared: Story = {
+  args: {
+    calendarEventId: '1',
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('FindOneCalendarEvent', () => {
+          return HttpResponse.json({
+            errors: [
+              {
+                message: 'Forbidden',
+                extensions: {
+                  code: 'FORBIDDEN',
+                },
+              },
+            ],
+          });
+        }),
+      ],
+    },
+  },
+};

packages/twenty-front/src/modules/activities/timelineActivities/rows/components/EventCard.tsx

@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
-import { IconChevronDown, IconChevronUp } from 'twenty-ui';
 
-import { IconButton } from '@/ui/input/button/components/IconButton';
 import { Card } from '@/ui/layout/card/components/Card';
 
 type EventCardProps = {
@@ -9,15 +7,6 @@ type EventCardProps = {
   isOpen: boolean;
 };
 
-type EventCardToggleButtonProps = {
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-};
-
-const StyledButtonContainer = styled.div`
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-`;
-
 const StyledCardContainer = styled.div`
   align-items: flex-start;
   display: flex;
@@ -52,19 +41,3 @@ export const EventCard = ({ children, isOpen }: EventCardProps) => {
     )
   );
 };
-
-export const EventCardToggleButton = ({
-  isOpen,
-  setIsOpen,
-}: EventCardToggleButtonProps) => {
-  return (
-    <StyledButtonContainer>
-      <IconButton
-        Icon={isOpen ? IconChevronUp : IconChevronDown}
-        onClick={() => setIsOpen(!isOpen)}
-        size="small"
-        variant="secondary"
-      />
-    </StyledButtonContainer>
-  );
-};

packages/twenty-front/src/modules/activities/timelineActivities/rows/components/EventCardToggleButton.tsx

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+import { IconChevronDown, IconChevronUp } from 'twenty-ui';
+
+import { IconButton } from '@/ui/input/button/components/IconButton';
+
+type EventCardToggleButtonProps = {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+};
+
+const StyledButtonContainer = styled.div`
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+`;
+
+export const EventCardToggleButton = ({
+  isOpen,
+  setIsOpen,
+}: EventCardToggleButtonProps) => {
+  return (
+    <StyledButtonContainer>
+      <IconButton
+        Icon={isOpen ? IconChevronUp : IconChevronDown}
+        onClick={() => setIsOpen(!isOpen)}
+        size="small"
+        variant="secondary"
+      />
+    </StyledButtonContainer>
+  );
+};

packages/twenty-front/src/modules/activities/timelineActivities/rows/components/EventIconDynamicComponent.tsx

@@ -0,0 +1,26 @@
+import { IconCirclePlus, IconEditCircle, useIcons } from 'twenty-ui';
+
+import { TimelineActivity } from '@/activities/timelineActivities/types/TimelineActivity';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
+export const EventIconDynamicComponent = ({
+  event,
+  linkedObjectMetadataItem,
+}: {
+  event: TimelineActivity;
+  linkedObjectMetadataItem: ObjectMetadataItem | null;
+}) => {
+  const { getIcon } = useIcons();
+  const [, eventAction] = event.name.split('.');
+
+  if (eventAction === 'created') {
+    return <IconCirclePlus />;
+  }
+  if (eventAction === 'updated') {
+    return <IconEditCircle />;
+  }
+
+  const IconComponent = getIcon(linkedObjectMetadataItem?.icon);
+
+  return <IconComponent />;
+};

packages/twenty-front/src/modules/activities/timelineActivities/rows/components/EventRowDynamicComponent.tsx

@@ -1,13 +1,11 @@
 import styled from '@emotion/styled';
-import { IconCirclePlus, IconEditCircle, useIcons } from 'twenty-ui';
 
 import { EventRowActivity } from '@/activities/timelineActivities/rows/activity/components/EventRowActivity';
 import { EventRowCalendarEvent } from '@/activities/timelineActivities/rows/calendar/components/EventRowCalendarEvent';
-import { EventRowMainObject } from '@/activities/timelineActivities/rows/mainObject/components/EventRowMainObject';
+import { EventRowMainObject } from '@/activities/timelineActivities/rows/main-object/components/EventRowMainObject';
 import { EventRowMessage } from '@/activities/timelineActivities/rows/message/components/EventRowMessage';
 import { TimelineActivity } from '@/activities/timelineActivities/types/TimelineActivity';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { isDefined } from '~/utils/isDefined';
 
 export interface EventRowDynamicComponentProps {
   labelIdentifierValue: string;
@@ -17,7 +15,7 @@ export interface EventRowDynamicComponentProps {
   authorFullName: string;
 }
 
-const StyledItemColumn = styled.div`
+export const StyledEventRowItemColumn = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.primary};
   display: flex;
@@ -25,23 +23,10 @@ const StyledItemColumn = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const StyledItemAuthorText = styled(StyledItemColumn)``;
+export const StyledEventRowItemAction = styled(StyledEventRowItemColumn)`
-
-export const StyledItemLabelIdentifier = styled(StyledItemColumn)``;
-
-export const StyledItemAction = styled(StyledItemColumn)`
   color: ${({ theme }) => theme.font.color.secondary};
 `;
 
-const eventRowComponentMap: {
-  [key: string]: React.FC<EventRowDynamicComponentProps>;
-} = {
-  calendarEvent: EventRowCalendarEvent,
-  message: EventRowMessage,
-  task: EventRowActivity,
-  note: EventRowActivity,
-};
-
 export const EventRowDynamicComponent = ({
   labelIdentifierValue,
   event,
@@ -50,53 +35,52 @@ export const EventRowDynamicComponent = ({
   authorFullName,
 }: EventRowDynamicComponentProps) => {
   const [eventName] = event.name.split('.');
-  const EventRowComponent = eventRowComponentMap[eventName];
 
-  if (isDefined(EventRowComponent)) {
+  switch (eventName) {
-    return (
+    case 'calendarEvent':
-      <EventRowComponent
+      return (
-        labelIdentifierValue={labelIdentifierValue}
+        <EventRowCalendarEvent
-        event={event}
+          labelIdentifierValue={labelIdentifierValue}
-        mainObjectMetadataItem={mainObjectMetadataItem}
+          event={event}
-        linkedObjectMetadataItem={linkedObjectMetadataItem}
+          mainObjectMetadataItem={mainObjectMetadataItem}
-        authorFullName={authorFullName}
+          linkedObjectMetadataItem={linkedObjectMetadataItem}
-      />
+          authorFullName={authorFullName}
-    );
+        />
+      );
+    case 'message':
+      return (
+        <EventRowMessage
+          labelIdentifierValue={labelIdentifierValue}
+          event={event}
+          mainObjectMetadataItem={mainObjectMetadataItem}
+          linkedObjectMetadataItem={linkedObjectMetadataItem}
+          authorFullName={authorFullName}
+        />
+      );
+    case 'task':
+    case 'note':
+      return (
+        <EventRowActivity
+          labelIdentifierValue={labelIdentifierValue}
+          event={event}
+          mainObjectMetadataItem={mainObjectMetadataItem}
+          linkedObjectMetadataItem={linkedObjectMetadataItem}
+          authorFullName={authorFullName}
+        />
+      );
+    case mainObjectMetadataItem?.nameSingular:
+      return (
+        <EventRowMainObject
+          labelIdentifierValue={labelIdentifierValue}
+          event={event}
+          mainObjectMetadataItem={mainObjectMetadataItem}
+          linkedObjectMetadataItem={linkedObjectMetadataItem}
+          authorFullName={authorFullName}
+        />
+      );
+    default:
+      throw new Error(
+        `Cannot find event component for event name ${eventName}`,
+      );
   }
-
-  if (eventName === mainObjectMetadataItem?.nameSingular) {
-    return (
-      <EventRowMainObject
-        labelIdentifierValue={labelIdentifierValue}
-        event={event}
-        mainObjectMetadataItem={mainObjectMetadataItem}
-        linkedObjectMetadataItem={linkedObjectMetadataItem}
-        authorFullName={authorFullName}
-      />
-    );
-  }
-
-  throw new Error(`Cannot find event component for event name ${eventName}`);
-};
-
-export const EventIconDynamicComponent = ({
-  event,
-  linkedObjectMetadataItem,
-}: {
-  event: TimelineActivity;
-  linkedObjectMetadataItem: ObjectMetadataItem | null;
-}) => {
-  const { getIcon } = useIcons();
-  const [, eventAction] = event.name.split('.');
-
-  if (eventAction === 'created') {
-    return <IconCirclePlus />;
-  }
-  if (eventAction === 'updated') {
-    return <IconEditCircle />;
-  }
-
-  const IconComponent = getIcon(linkedObjectMetadataItem?.icon);
-
-  return <IconComponent />;
 };

packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiff.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 
-import { EventFieldDiffLabel } from '@/activities/timelineActivities/rows/mainObject/components/EventFieldDiffLabel';
+import { EventFieldDiffLabel } from '@/activities/timelineActivities/rows/main-object/components/EventFieldDiffLabel';
-import { EventFieldDiffValue } from '@/activities/timelineActivities/rows/mainObject/components/EventFieldDiffValue';
+import { EventFieldDiffValue } from '@/activities/timelineActivities/rows/main-object/components/EventFieldDiffValue';
-import { EventFieldDiffValueEffect } from '@/activities/timelineActivities/rows/mainObject/components/EventFieldDiffValueEffect';
+import { EventFieldDiffValueEffect } from '@/activities/timelineActivities/rows/main-object/components/EventFieldDiffValueEffect';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 
@@ -10,7 +10,7 @@ type EventFieldDiffProps = {
   diffRecord: Record<string, any>;
   mainObjectMetadataItem: ObjectMetadataItem;
   fieldMetadataItem: FieldMetadataItem | undefined;
-  forgedRecordId: string;
+  diffArtificialRecordStoreId: string;
 };
 
 const StyledEventFieldDiffContainer = styled.div`
@@ -26,23 +26,23 @@ export const EventFieldDiff = ({
   diffRecord,
   mainObjectMetadataItem,
   fieldMetadataItem,
-  forgedRecordId,
+  diffArtificialRecordStoreId,
 }: EventFieldDiffProps) => {
   if (!fieldMetadataItem) {
-    return null;
+    throw new Error('fieldMetadataItem is required');
   }
 
   return (
     <StyledEventFieldDiffContainer>
       <EventFieldDiffLabel fieldMetadataItem={fieldMetadataItem} />→
       <EventFieldDiffValueEffect
-        forgedRecordId={forgedRecordId}
+        diffArtificialRecordStoreId={diffArtificialRecordStoreId}
         mainObjectMetadataItem={mainObjectMetadataItem}
         fieldMetadataItem={fieldMetadataItem}
         diffRecord={diffRecord}
       />
       <EventFieldDiffValue
-        forgedRecordId={forgedRecordId}
+        diffArtificialRecordStoreId={diffArtificialRecordStoreId}
         mainObjectMetadataItem={mainObjectMetadataItem}
         fieldMetadataItem={fieldMetadataItem}
       />

packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiffContainer.tsx

@@ -0,0 +1,39 @@
+import { EventFieldDiff } from '@/activities/timelineActivities/rows/main-object/components/EventFieldDiff';
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
+type EventFieldDiffContainerProps = {
+  mainObjectMetadataItem: ObjectMetadataItem;
+  diffKey: string;
+  diffValue: any;
+  eventId: string;
+  fieldMetadataItemMap: Record<string, FieldMetadataItem>;
+};
+
+export const EventFieldDiffContainer = ({
+  mainObjectMetadataItem,
+  diffKey,
+  diffValue,
+  eventId,
+  fieldMetadataItemMap,
+}: EventFieldDiffContainerProps) => {
+  const fieldMetadataItem = fieldMetadataItemMap[diffKey];
+
+  if (!fieldMetadataItem) {
+    throw new Error(
+      `Cannot find field metadata item for field name ${diffKey} on object ${mainObjectMetadataItem.nameSingular}`,
+    );
+  }
+
+  const diffArtificialRecordStoreId = eventId + '--' + fieldMetadataItem.id;
+
+  return (
+    <EventFieldDiff
+      key={diffArtificialRecordStoreId}
+      diffRecord={diffValue}
+      fieldMetadataItem={fieldMetadataItem}
+      mainObjectMetadataItem={mainObjectMetadataItem}
+      diffArtificialRecordStoreId={diffArtificialRecordStoreId}
+    />
+  );
+};

packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiffLabel.tsx

@@ -22,8 +22,6 @@ const StyledUpdatedFieldIconContainer = styled.div`
   width: 14px;
 `;
 
-const StyledUpdatedFieldLabel = styled.div``;
-
 export const EventFieldDiffLabel = ({
   fieldMetadataItem,
 }: EventFieldDiffLabelProps) => {
@@ -38,9 +36,7 @@ export const EventFieldDiffLabel = ({
       <StyledUpdatedFieldIconContainer>
         <IconComponent />
       </StyledUpdatedFieldIconContainer>
-      <StyledUpdatedFieldLabel>
+      {fieldMetadataItem.label}
-        {fieldMetadataItem.label}
-      </StyledUpdatedFieldLabel>
     </StyledUpdatedFieldContainer>
   );
 };

packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiffValue.tsx

@@ -7,7 +7,7 @@ import { FieldDisplay } from '@/object-record/record-field/components/FieldDispl
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 
 type EventFieldDiffValueProps = {
-  forgedRecordId: string;
+  diffArtificialRecordStoreId: string;
   mainObjectMetadataItem: ObjectMetadataItem;
   fieldMetadataItem: FieldMetadataItem;
 };
@@ -18,7 +18,7 @@ const StyledEventFieldDiffValue = styled.div`
 `;
 
 export const EventFieldDiffValue = ({
-  forgedRecordId,
+  diffArtificialRecordStoreId,
   mainObjectMetadataItem,
   fieldMetadataItem,
 }: EventFieldDiffValueProps) => {
@@ -26,7 +26,7 @@ export const EventFieldDiffValue = ({
     <StyledEventFieldDiffValue>
       <FieldContext.Provider
         value={{
-          entityId: forgedRecordId,
+          entityId: diffArtificialRecordStoreId,
           isLabelIdentifier: isLabelIdentifierField({
             fieldMetadataItem,
             objectMetadataItem: mainObjectMetadataItem,

packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiffValueEffect.tsx

@@ -6,18 +6,18 @@ import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 
 export const EventFieldDiffValueEffect = ({
-  forgedRecordId,
+  diffArtificialRecordStoreId,
   diffRecord,
   mainObjectMetadataItem,
   fieldMetadataItem,
 }: {
-  forgedRecordId: string;
+  diffArtificialRecordStoreId: string;
   diffRecord: Record<string, any> | undefined;
   mainObjectMetadataItem: ObjectMetadataItem;
   fieldMetadataItem: FieldMetadataItem;
 }) => {
   const setEntityFields = useSetRecoilState(
-    recordStoreFamilyState(forgedRecordId),
+    recordStoreFamilyState(diffArtificialRecordStoreId),
   );
 
   useEffect(() => {
@@ -25,14 +25,14 @@ export const EventFieldDiffValueEffect = ({
 
     const forgedObjectRecord = {
       __typename: mainObjectMetadataItem.nameSingular,
-      id: forgedRecordId,
+      id: diffArtificialRecordStoreId,
       [fieldMetadataItem.name]: diffRecord,
     };
 
     setEntityFields(forgedObjectRecord);
   }, [
     diffRecord,
-    forgedRecordId,
+    diffArtificialRecordStoreId,
     fieldMetadataItem.name,
     mainObjectMetadataItem.nameSingular,
     setEntityFields,

packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventRowMainObject.tsx

@@ -2,11 +2,10 @@ import styled from '@emotion/styled';
 
 import {
   EventRowDynamicComponentProps,
-  StyledItemAction,
+  StyledEventRowItemAction,
-  StyledItemAuthorText,
+  StyledEventRowItemColumn,
-  StyledItemLabelIdentifier,
 } from '@/activities/timelineActivities/rows/components/EventRowDynamicComponent';
-import { EventRowMainObjectUpdated } from '@/activities/timelineActivities/rows/mainObject/components/EventRowMainObjectUpdated';
+import { EventRowMainObjectUpdated } from '@/activities/timelineActivities/rows/main-object/components/EventRowMainObjectUpdated';
 
 type EventRowMainObjectProps = EventRowDynamicComponentProps;
 
@@ -28,11 +27,11 @@ export const EventRowMainObject = ({
     case 'created': {
       return (
         <StyledMainContainer>
-          <StyledItemLabelIdentifier>
+          <StyledEventRowItemColumn>
             {labelIdentifierValue}
-          </StyledItemLabelIdentifier>
+          </StyledEventRowItemColumn>
-          <StyledItemAction>was created by</StyledItemAction>
+          <StyledEventRowItemAction>was created by</StyledEventRowItemAction>
-          <StyledItemAuthorText>{authorFullName}</StyledItemAuthorText>
+          <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
         </StyledMainContainer>
       );
     }

packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventRowMainObjectUpdated.tsx

@@ -1,15 +1,13 @@
 import { useState } from 'react';
 import styled from '@emotion/styled';
 
+import { EventCard } from '@/activities/timelineActivities/rows/components/EventCard';
+import { EventCardToggleButton } from '@/activities/timelineActivities/rows/components/EventCardToggleButton';
 import {
-  EventCard,
+  StyledEventRowItemAction,
-  EventCardToggleButton,
+  StyledEventRowItemColumn,
-} from '@/activities/timelineActivities/rows/components/EventCard';
-import {
-  StyledItemAction,
-  StyledItemAuthorText,
 } from '@/activities/timelineActivities/rows/components/EventRowDynamicComponent';
-import { EventFieldDiff } from '@/activities/timelineActivities/rows/mainObject/components/EventFieldDiff';
+import { EventFieldDiffContainer } from '@/activities/timelineActivities/rows/main-object/components/EventFieldDiffContainer';
 import { TimelineActivity } from '@/activities/timelineActivities/types/TimelineActivity';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
@@ -33,34 +31,6 @@ const StyledEventRowMainObjectUpdatedContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
 `;
 
-const renderUpdateDescription = (
-  mainObjectMetadataItem: ObjectMetadataItem,
-  diffKey: string,
-  diffValue: any,
-  eventId: string,
-  fieldMetadataItemMap: Record<string, FieldMetadataItem>,
-) => {
-  const fieldMetadataItem = fieldMetadataItemMap[diffKey];
-
-  if (!fieldMetadataItem) {
-    throw new Error(
-      `Cannot find field metadata item for field name ${diffKey} on object ${mainObjectMetadataItem.nameSingular}`,
-    );
-  }
-
-  const forgedRecordId = eventId + '--' + fieldMetadataItem.id;
-
-  return (
-    <EventFieldDiff
-      key={forgedRecordId}
-      diffRecord={diffValue}
-      fieldMetadataItem={fieldMetadataItem}
-      mainObjectMetadataItem={mainObjectMetadataItem}
-      forgedRecordId={forgedRecordId}
-    />
-  );
-};
-
 export const EventRowMainObjectUpdated = ({
   authorFullName,
   labelIdentifierValue,
@@ -86,17 +56,18 @@ export const EventRowMainObjectUpdated = ({
   return (
     <StyledEventRowMainObjectUpdatedContainer>
       <StyledRowContainer>
-        <StyledItemAuthorText>{authorFullName}</StyledItemAuthorText>
+        <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
-        <StyledItemAction>
+        <StyledEventRowItemAction>
           updated
-          {diffEntries.length === 1 &&
+          {diffEntries.length === 1 && (
-            renderUpdateDescription(
+            <EventFieldDiffContainer
-              mainObjectMetadataItem,
+              mainObjectMetadataItem={mainObjectMetadataItem}
-              diffEntries[0][0],
+              diffKey={diffEntries[0][0]}
-              diffEntries[0][1].after,
+              diffValue={diffEntries[0][1].after}
-              event.id,
+              eventId={event.id}
-              fieldMetadataItemMap,
+              fieldMetadataItemMap={fieldMetadataItemMap}
-            )}
+            />
+          )}
           {diffEntries.length > 1 && (
             <>
               <span>
@@ -105,19 +76,20 @@ export const EventRowMainObjectUpdated = ({
               <EventCardToggleButton isOpen={isOpen} setIsOpen={setIsOpen} />
             </>
           )}
-        </StyledItemAction>
+        </StyledEventRowItemAction>
       </StyledRowContainer>
       {diffEntries.length > 1 && (
         <EventCard isOpen={isOpen}>
-          {diffEntries.map(([diffKey, diffValue]) =>
+          {diffEntries.map(([diffKey, diffValue]) => (
-            renderUpdateDescription(
+            <EventFieldDiffContainer
-              mainObjectMetadataItem,
+              key={diffKey}
-              diffKey,
+              mainObjectMetadataItem={mainObjectMetadataItem}
-              diffValue.after,
+              diffKey={diffKey}
-              event.id,
+              diffValue={diffValue.after}
-              fieldMetadataItemMap,
+              eventId={event.id}
-            ),
+              fieldMetadataItemMap={fieldMetadataItemMap}
-          )}
+            />
+          ))}
         </EventCard>
       )}
     </StyledEventRowMainObjectUpdatedContainer>

packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/__stories__/EventRowMainObjectUpdated.stories.tsx

@@ -0,0 +1,51 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator, RouterDecorator } from 'twenty-ui';
+
+import { EventRowMainObjectUpdated } from '@/activities/timelineActivities/rows/main-object/components/EventRowMainObjectUpdated';
+import { TimelineActivity } from '@/activities/timelineActivities/types/TimelineActivity';
+import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+import { mockedPersonObjectMetadataItem } from '~/testing/mock-data/metadata';
+
+const meta: Meta<typeof EventRowMainObjectUpdated> = {
+  title: 'Modules/TimelineActivities/Rows/MainObject/EventRowMainObjectUpdated',
+  component: EventRowMainObjectUpdated,
+  args: {
+    authorFullName: 'John Doe',
+    labelIdentifierValue: 'Mock',
+    event: {
+      id: '1',
+      name: 'mock.updated',
+      properties: {
+        diff: {
+          jobTitle: {
+            after: 'mock job title',
+            before: '',
+          },
+          linkedinLink: {
+            after: {
+              url: 'mock.linkedin',
+              label: 'mock linkedin url',
+            },
+            before: {
+              url: '',
+              label: '',
+            },
+          },
+        },
+      },
+    } as TimelineActivity,
+    mainObjectMetadataItem: mockedPersonObjectMetadataItem,
+  },
+  decorators: [
+    ComponentDecorator,
+    ObjectMetadataItemsDecorator,
+    SnackBarDecorator,
+    RouterDecorator,
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof EventRowMainObjectUpdated>;
+
+export const Default: Story = {};

packages/twenty-front/src/modules/activities/timelineActivities/rows/message/components/EventCardMessage.tsx

@@ -101,7 +101,7 @@ export const EventCardMessage = ({
     return <div>Loading...</div>;
   }
 
-  const messageParticipantHandles = message?.messageParticipants
+  const messageParticipantHandles = message.messageParticipants
     .map((participant) => participant.handle)
     .join(', ');
 

packages/twenty-front/src/modules/activities/timelineActivities/rows/message/components/EventRowMessage.tsx

@@ -1,15 +1,12 @@
 import { useState } from 'react';
 import styled from '@emotion/styled';
 
-import {
+import { EventCard } from '@/activities/timelineActivities/rows/components/EventCard';
-  EventCard,
+import { EventCardToggleButton } from '@/activities/timelineActivities/rows/components/EventCardToggleButton';
-  EventCardToggleButton,
-} from '@/activities/timelineActivities/rows/components/EventCard';
 import {
   EventRowDynamicComponentProps,
-  StyledItemAction,
+  StyledEventRowItemAction,
-  StyledItemAuthorText,
+  StyledEventRowItemColumn,
-  StyledItemLabelIdentifier,
 } from '@/activities/timelineActivities/rows/components/EventRowDynamicComponent';
 import { EventCardMessage } from '@/activities/timelineActivities/rows/message/components/EventCardMessage';
 
@@ -27,36 +24,28 @@ const StyledRowContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const EventRowMessage: React.FC<EventRowMessageProps> = ({
+export const EventRowMessage = ({
-  labelIdentifierValue,
   event,
   authorFullName,
+  labelIdentifierValue,
 }: EventRowMessageProps) => {
   const [, eventAction] = event.name.split('.');
   const [isOpen, setIsOpen] = useState(false);
 
-  const renderRow = () => {
+  if (['linked'].includes(eventAction) === false) {
-    switch (eventAction) {
+    throw new Error('Invalid event action for message event type.');
-      case 'linked': {
+  }
-        return (
-          <>
-            <StyledItemAuthorText>{authorFullName}</StyledItemAuthorText>
-            <StyledItemAction>linked an email with</StyledItemAction>
-            <StyledItemLabelIdentifier>
-              {labelIdentifierValue}
-            </StyledItemLabelIdentifier>
-          </>
-        );
-      }
-      default:
-        throw new Error('Invalid event action for message event type.');
-    }
-  };
 
   return (
     <StyledEventRowMessageContainer>
       <StyledRowContainer>
-        {renderRow()}
+        <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
+        <StyledEventRowItemAction>
+          linked an email with
+        </StyledEventRowItemAction>
+        <StyledEventRowItemColumn>
+          {labelIdentifierValue}
+        </StyledEventRowItemColumn>
         <EventCardToggleButton isOpen={isOpen} setIsOpen={setIsOpen} />
       </StyledRowContainer>
       <EventCard isOpen={isOpen}>

packages/twenty-front/src/modules/activities/timelineActivities/rows/message/components/__stories__/EventCardMessage.stories.tsx

@@ -0,0 +1,82 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { graphql, HttpResponse } from 'msw';
+import { ComponentDecorator } from 'twenty-ui';
+
+import { TimelineActivityContext } from '@/activities/timelineActivities/contexts/TimelineActivityContext';
+import { EventCardMessage } from '@/activities/timelineActivities/rows/message/components/EventCardMessage';
+import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+
+const meta: Meta<typeof EventCardMessage> = {
+  title: 'Modules/TimelineActivities/Rows/Message/EventCardMessage',
+  component: EventCardMessage,
+  decorators: [
+    ComponentDecorator,
+    ObjectMetadataItemsDecorator,
+    SnackBarDecorator,
+    (Story) => {
+      return (
+        <TimelineActivityContext.Provider
+          value={{
+            labelIdentifierValue: 'Mock',
+          }}
+        >
+          <Story />
+        </TimelineActivityContext.Provider>
+      );
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof EventCardMessage>;
+
+export const Default: Story = {
+  args: {
+    messageId: '1',
+    authorFullName: 'John Doe',
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('FindOneMessage', () => {
+          return HttpResponse.json({
+            data: {
+              message: {
+                id: '1',
+                subject: 'Mock title',
+                text: 'Mock body',
+                messageParticipants: [],
+              },
+            },
+          });
+        }),
+      ],
+    },
+  },
+};
+
+export const NotShared: Story = {
+  args: {
+    messageId: '1',
+    authorFullName: 'John Doe',
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('FindOneMessage', () => {
+          return HttpResponse.json({
+            errors: [
+              {
+                message: 'Forbidden',
+                extensions: {
+                  code: 'FORBIDDEN',
+                },
+              },
+            ],
+          });
+        }),
+      ],
+    },
+  },
+};

packages/twenty-front/src/modules/activities/timelineActivities/utils/__tests__/getTimelineActivityAuthorFullName.test.ts

@@ -0,0 +1,63 @@
+import { TimelineActivity } from '@/activities/timelineActivities/types/TimelineActivity';
+import { getTimelineActivityAuthorFullName } from '@/activities/timelineActivities/utils/getTimelineActivityAuthorFullName';
+import { CurrentWorkspaceMember } from '@/auth/states/currentWorkspaceMemberState';
+
+describe('getTimelineActivityAuthorFullName', () => {
+  it('should return "You" if the current workspace member is the author', () => {
+    const event = {
+      workspaceMember: {
+        id: '123',
+        name: {
+          firstName: 'John',
+          lastName: 'Doe',
+        },
+      },
+    };
+    const currentWorkspaceMember = {
+      id: '123',
+    };
+
+    const result = getTimelineActivityAuthorFullName(
+      event as TimelineActivity,
+      currentWorkspaceMember as CurrentWorkspaceMember,
+    );
+
+    expect(result).toBe('You');
+  });
+
+  it('should return the full name of the workspace member if they are not the current workspace member', () => {
+    const event = {
+      workspaceMember: {
+        id: '456',
+        name: {
+          firstName: 'Jane',
+          lastName: 'Smith',
+        },
+      },
+    };
+    const currentWorkspaceMember = {
+      id: '123',
+    };
+
+    const result = getTimelineActivityAuthorFullName(
+      event as TimelineActivity,
+      currentWorkspaceMember as CurrentWorkspaceMember,
+    );
+
+    expect(result).toBe('Jane Smith');
+  });
+
+  it('should return "Twenty" if the workspace member is not defined', () => {
+    const event = {};
+    const currentWorkspaceMember = {
+      id: '123',
+    };
+
+    const result = getTimelineActivityAuthorFullName(
+      event as TimelineActivity,
+      currentWorkspaceMember as CurrentWorkspaceMember,
+    );
+
+    expect(result).toBe('Twenty');
+  });
+});

packages/twenty-front/src/modules/activities/timelineActivities/utils/getTimelineActivityAuthorFullName.ts

@@ -0,0 +1,15 @@
+import { TimelineActivity } from '@/activities/timelineActivities/types/TimelineActivity';
+import { CurrentWorkspaceMember } from '@/auth/states/currentWorkspaceMemberState';
+import { isDefined } from '~/utils/isDefined';
+
+export const getTimelineActivityAuthorFullName = (
+  event: TimelineActivity,
+  currentWorkspaceMember: CurrentWorkspaceMember,
+) => {
+  if (isDefined(event.workspaceMember)) {
+    return currentWorkspaceMember.id === event.workspaceMember.id
+      ? 'You'
+      : `${event.workspaceMember?.name.firstName} ${event.workspaceMember?.name.lastName}`;
+  }
+  return 'Twenty';
+};

packages/twenty-front/src/modules/object-metadata/utils/getObjectMetadataItemsMock.ts

@@ -3638,7 +3638,7 @@ export const getObjectMetadataItemsMock = () => {
     },
     {
       __typename: 'object',
-      id: '20202020-049d-4d0c-9e7c-e74fee3f88b2',
+      id: '20202020-6736-4337-b5c4-8b39fae325a5',
       dataSourceId: '20202020-7f63-47a9-b1b3-6c7290ca9fb1',
       nameSingular: 'timelineActivity',
       namePlural: 'timelineActivities',
@@ -3654,6 +3654,24 @@ export const getObjectMetadataItemsMock = () => {
       updatedAt: '2023-11-30T11:13:15.206Z',
       fields: [],
     },
+    {
+      __typename: 'object',
+      id: '20202020-3f6b-4425-80ab-e468899ab4b2',
+      dataSourceId: '20202020-7f63-47a9-b1b3-6c7290ca9fb1',
+      nameSingular: 'message',
+      namePlural: 'messages',
+      labelSingular: 'Message',
+      labelPlural: 'Messages',
+      description: 'A message',
+      icon: 'IconMessage',
+      isCustom: false,
+      isRemote: false,
+      isActive: true,
+      isSystem: true,
+      createdAt: '2023-11-30T11:13:15.206Z',
+      updatedAt: '2023-11-30T11:13:15.206Z',
+      fields: [],
+    },
   ];
 
   // Todo fix typing here (the backend is not in sync with the frontend)

packages/twenty-front/src/utils/format/__tests__/formatDate.test.ts

@@ -0,0 +1,29 @@
+import {
+  formatToHumanReadableDay,
+  formatToHumanReadableMonth,
+  formatToHumanReadableTime,
+} from '../formatDate';
+
+describe('formatToHumanReadableMonth', () => {
+  it('should format the date to a human-readable month', () => {
+    const date = new Date('2022-01-01');
+    const result = formatToHumanReadableMonth(date);
+    expect(result).toBe('Jan');
+  });
+});
+
+describe('formatToHumanReadableDay', () => {
+  it('should format the date to a human-readable day', () => {
+    const date = new Date('2022-01-01');
+    const result = formatToHumanReadableDay(date);
+    expect(result).toBe('1');
+  });
+});
+
+describe('formatToHumanReadableTime', () => {
+  it('should format the date to a human-readable time', () => {
+    const date = new Date('2022-01-01T12:30:00');
+    const result = formatToHumanReadableTime(date);
+    expect(result).toBe('12:30 PM');
+  });
+});

packages/twenty-front/src/utils/format/formatDate.ts

@@ -0,0 +1,26 @@
+import { parseDate } from '~/utils/date-utils';
+
+export const formatToHumanReadableMonth = (date: Date | string) => {
+  const parsedJSDate = parseDate(date).toJSDate();
+
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+  }).format(parsedJSDate);
+};
+
+export const formatToHumanReadableDay = (date: Date | string) => {
+  const parsedJSDate = parseDate(date).toJSDate();
+
+  return new Intl.DateTimeFormat(undefined, {
+    day: 'numeric',
+  }).format(parsedJSDate);
+};
+
+export const formatToHumanReadableTime = (date: Date | string) => {
+  const parsedJSDate = parseDate(date).toJSDate();
+
+  return new Intl.DateTimeFormat(undefined, {
+    hour: 'numeric',
+    minute: 'numeric',
+  }).format(parsedJSDate);
+};

packages/twenty-front/src/utils/index.ts

@@ -22,31 +22,6 @@ export const formatToHumanReadableDateTime = (date: Date | string) => {
   }).format(parsedJSDate);
 };
 
-export const formatToHumanReadableMonth = (date: Date | string) => {
-  const parsedJSDate = parseDate(date).toJSDate();
-
-  return new Intl.DateTimeFormat(undefined, {
-    month: 'short',
-  }).format(parsedJSDate);
-};
-
-export const formatToHumanReadableDay = (date: Date | string) => {
-  const parsedJSDate = parseDate(date).toJSDate();
-
-  return new Intl.DateTimeFormat(undefined, {
-    day: 'numeric',
-  }).format(parsedJSDate);
-};
-
-export const formatToHumanReadableTime = (date: Date | string) => {
-  const parsedJSDate = parseDate(date).toJSDate();
-
-  return new Intl.DateTimeFormat(undefined, {
-    hour: 'numeric',
-    minute: 'numeric',
-  }).format(parsedJSDate);
-};
-
 export const sanitizeURL = (link: string | null | undefined) => {
   return link
     ? link.replace(/(https?:\/\/)|(www\.)/g, '').replace(/\/$/, '')