Enforce front project structure through ESLINT (#7863)

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

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

@@ -0,0 +1,71 @@
+import styled from '@emotion/styled';
+
+import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
+import {
+  EventRowDynamicComponentProps,
+  StyledEventRowItemAction,
+  StyledEventRowItemColumn,
+} from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useGetRecordFromCache } from '@/object-record/cache/hooks/useGetRecordFromCache';
+import { isNonEmptyString } from '@sniptt/guards';
+
+type EventRowActivityProps = EventRowDynamicComponentProps;
+
+const StyledLinkedActivity = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+  cursor: pointer;
+  text-decoration: underline;
+`;
+
+export const StyledEventRowItemText = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+`;
+
+export const EventRowActivity = ({
+  event,
+  authorFullName,
+  objectNameSingular,
+}: EventRowActivityProps & { objectNameSingular: CoreObjectNameSingular }) => {
+  const [eventLinkedObject, eventAction] = event.name.split('.');
+
+  const eventObject = eventLinkedObject.replace('linked-', '');
+
+  if (!event.linkedRecordId) {
+    throw new Error('Could not find linked record id for event');
+  }
+
+  const getActivityFromCache = useGetRecordFromCache({
+    objectNameSingular,
+    recordGqlFields: {
+      id: true,
+      title: true,
+    },
+  });
+
+  const activityInStore = getActivityFromCache(event.linkedRecordId);
+
+  const activityTitle = isNonEmptyString(activityInStore?.title)
+    ? activityInStore?.title
+    : isNonEmptyString(event.linkedRecordCachedName)
+      ? event.linkedRecordCachedName
+      : 'Untitled';
+
+  const openActivityRightDrawer = useOpenActivityRightDrawer({
+    objectNameSingular,
+  });
+
+  return (
+    <>
+      <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
+      <StyledEventRowItemAction>
+        {`${eventAction} a related ${eventObject}`}
+      </StyledEventRowItemAction>
+      <StyledLinkedActivity
+        onClick={() => openActivityRightDrawer(event.linkedRecordId)}
+      >
+        {activityTitle}
+      </StyledLinkedActivity>
+    </>
+  );
+};

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

@@ -0,0 +1,178 @@
+import styled from '@emotion/styled';
+import { isUndefined } from '@sniptt/guards';
+
+import { useOpenCalendarEventRightDrawer } from '@/activities/calendar/right-drawer/hooks/useOpenCalendarEventRightDrawer';
+import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
+import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
+import { UserContext } from '@/users/contexts/UserContext';
+import { useContext } from 'react';
+import {
+  formatToHumanReadableDay,
+  formatToHumanReadableMonth,
+  formatToHumanReadableTime,
+} from '~/utils/format/formatDate';
+import { isDefined } from '~/utils/isDefined';
+import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
+
+const StyledEventCardCalendarEventContainer = styled.div`
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(2)};
+  width: 100%;
+`;
+
+const StyledCalendarEventContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: center;
+  overflow: hidden;
+`;
+
+const StyledCalendarEventTop = styled.div`
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const StyledCalendarEventTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledCalendarEventBody = styled.div`
+  align-items: flex-start;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  justify-content: center;
+`;
+
+const StyledCalendarEventDateCard = styled.div`
+  display: flex;
+  padding: ${({ theme }) => theme.spacing(1)};
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing(1)};
+
+  border-radius: ${({ theme }) => theme.spacing(1)};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+`;
+
+const StyledCalendarEventDateCardMonth = styled.div`
+  color: ${({ theme }) => theme.font.color.danger};
+  font-size: ${({ theme }) => theme.font.size.xxs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+`;
+
+const StyledCalendarEventDateCardDay = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
+export const EventCardCalendarEvent = ({
+  calendarEventId,
+}: {
+  calendarEventId: string;
+}) => {
+  const { upsertRecords } = useUpsertRecordsInStore();
+
+  const {
+    record: calendarEvent,
+    loading,
+    error,
+  } = useFindOneRecord<CalendarEvent>({
+    objectNameSingular: CoreObjectNameSingular.CalendarEvent,
+    objectRecordId: calendarEventId,
+    recordGqlFields: {
+      id: true,
+      title: true,
+      startsAt: true,
+      endsAt: true,
+    },
+    onCompleted: (data) => {
+      upsertRecords([data]);
+    },
+  });
+
+  const { openCalendarEventRightDrawer } = useOpenCalendarEventRightDrawer();
+
+  const { timeZone } = useContext(UserContext);
+
+  if (isDefined(error)) {
+    const shouldHideMessageContent = error.graphQLErrors.some(
+      (e) => e.extensions?.code === 'FORBIDDEN',
+    );
+
+    if (shouldHideMessageContent) {
+      return <div>Calendar event not shared</div>;
+    }
+
+    const shouldHandleNotFound = error.graphQLErrors.some(
+      (e) => e.extensions?.code === 'NOT_FOUND',
+    );
+
+    if (shouldHandleNotFound) {
+      return <div>Calendar event not found</div>;
+    }
+
+    return <div>Error loading calendar event</div>;
+  }
+
+  if (loading || isUndefined(calendarEvent)) {
+    return <div>Loading...</div>;
+  }
+
+  const startsAtDate = calendarEvent?.startsAt;
+  const endsAtDate = calendarEvent?.endsAt;
+
+  if (isUndefinedOrNull(startsAtDate)) {
+    throw new Error("Can't render a calendarEvent without a start date");
+  }
+
+  const startsAtMonth = formatToHumanReadableMonth(startsAtDate, timeZone);
+
+  const startsAtDay = formatToHumanReadableDay(startsAtDate, timeZone);
+
+  const startsAtHour = formatToHumanReadableTime(startsAtDate, timeZone);
+  const endsAtHour = endsAtDate
+    ? formatToHumanReadableTime(endsAtDate, timeZone)
+    : null;
+
+  return (
+    <StyledEventCardCalendarEventContainer
+      onClick={() => openCalendarEventRightDrawer(calendarEvent.id)}
+    >
+      <StyledCalendarEventDateCard>
+        <StyledCalendarEventDateCardMonth>
+          {startsAtMonth}
+        </StyledCalendarEventDateCardMonth>
+        <StyledCalendarEventDateCardDay>
+          {startsAtDay}
+        </StyledCalendarEventDateCardDay>
+      </StyledCalendarEventDateCard>
+      <StyledCalendarEventContent>
+        <StyledCalendarEventTop>
+          <StyledCalendarEventTitle>
+            {calendarEvent.title}
+          </StyledCalendarEventTitle>
+        </StyledCalendarEventTop>
+        <StyledCalendarEventBody>
+          {startsAtHour} {endsAtHour && <>→ {endsAtHour}</>}
+        </StyledCalendarEventBody>
+      </StyledCalendarEventContent>
+    </StyledEventCardCalendarEventContainer>
+  );
+};

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

@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+import { useState } from 'react';
+
+import { EventCardCalendarEvent } from '@/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent';
+import { EventCard } from '@/activities/timeline-activities/rows/components/EventCard';
+import { EventCardToggleButton } from '@/activities/timeline-activities/rows/components/EventCardToggleButton';
+import {
+  EventRowDynamicComponentProps,
+  StyledEventRowItemAction,
+  StyledEventRowItemColumn,
+} from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent';
+
+type EventRowCalendarEventProps = EventRowDynamicComponentProps;
+
+const StyledEventRowCalendarEventContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledRowContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const EventRowCalendarEvent = ({
+  event,
+  authorFullName,
+  labelIdentifierValue,
+}: EventRowCalendarEventProps) => {
+  const [, eventAction] = event.name.split('.');
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (['linked'].includes(eventAction) === false) {
+    throw new Error('Invalid event action for calendarEvent event type.');
+  }
+
+  return (
+    <StyledEventRowCalendarEventContainer>
+      <StyledRowContainer>
+        <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
+        <StyledEventRowItemAction>
+          linked a calendar event with {labelIdentifierValue}
+        </StyledEventRowItemAction>
+        <EventCardToggleButton isOpen={isOpen} setIsOpen={setIsOpen} />
+      </StyledRowContainer>
+      <EventCard isOpen={isOpen}>
+        <EventCardCalendarEvent calendarEventId={event.linkedRecordId} />
+      </EventCard>
+    </StyledEventRowCalendarEventContainer>
+  );
+};

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

@@ -0,0 +1,68 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { HttpResponse, graphql } from 'msw';
+import { ComponentDecorator } from 'twenty-ui';
+
+import { EventCardCalendarEvent } from '@/activities/timeline-activities/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/timeline-activities/rows/components/EventCard.tsx

@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+
+import { Card } from '@/ui/layout/card/components/Card';
+
+type EventCardProps = {
+  children: React.ReactNode;
+  isOpen: boolean;
+};
+
+const StyledCardContainer = styled.div`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: ${({ theme }) => theme.spacing(2)};
+  width: 400px;
+  padding: ${({ theme }) => theme.spacing(2)} 0px
+    ${({ theme }) => theme.spacing(1)} 0px;
+`;
+
+const StyledCard = styled(Card)`
+  background: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+
+  display: flex;
+  padding: ${({ theme }) => theme.spacing(2)};
+  flex-direction: column;
+  align-items: flex-start;
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: center;
+  align-self: stretch;
+`;
+
+export const EventCard = ({ children, isOpen }: EventCardProps) => {
+  return (
+    isOpen && (
+      <StyledCardContainer>
+        <StyledCard fullWidth>{children}</StyledCard>
+      </StyledCardContainer>
+    )
+  );
+};

packages/twenty-front/src/modules/activities/timeline-activities/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/timeline-activities/rows/components/EventIconDynamicComponent.tsx

@@ -0,0 +1,29 @@
+import { IconCirclePlus, IconEditCircle, IconTrash, useIcons } from 'twenty-ui';
+
+import { TimelineActivity } from '@/activities/timeline-activities/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 />;
+  }
+  if (eventAction === 'deleted') {
+    return <IconTrash />;
+  }
+
+  const IconComponent = getIcon(linkedObjectMetadataItem?.icon);
+
+  return <IconComponent />;
+};

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

@@ -0,0 +1,98 @@
+import styled from '@emotion/styled';
+
+import { EventRowActivity } from '@/activities/timeline-activities/rows/activity/components/EventRowActivity';
+import { EventRowCalendarEvent } from '@/activities/timeline-activities/rows/calendar/components/EventRowCalendarEvent';
+import { EventRowMainObject } from '@/activities/timeline-activities/rows/main-object/components/EventRowMainObject';
+import { EventRowMessage } from '@/activities/timeline-activities/rows/message/components/EventRowMessage';
+import { TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
+export interface EventRowDynamicComponentProps {
+  labelIdentifierValue: string;
+  event: TimelineActivity;
+  mainObjectMetadataItem: ObjectMetadataItem;
+  linkedObjectMetadataItem: ObjectMetadataItem | null;
+  authorFullName: string;
+}
+
+export const StyledEventRowItemColumn = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const StyledEventRowItemAction = styled(StyledEventRowItemColumn)`
+  color: ${({ theme }) => theme.font.color.secondary};
+`;
+
+export const EventRowDynamicComponent = ({
+  labelIdentifierValue,
+  event,
+  mainObjectMetadataItem,
+  linkedObjectMetadataItem,
+  authorFullName,
+}: EventRowDynamicComponentProps) => {
+  const [eventName] = event.name.split('.');
+
+  switch (eventName) {
+    case 'calendarEvent':
+      return (
+        <EventRowCalendarEvent
+          labelIdentifierValue={labelIdentifierValue}
+          event={event}
+          mainObjectMetadataItem={mainObjectMetadataItem}
+          linkedObjectMetadataItem={linkedObjectMetadataItem}
+          authorFullName={authorFullName}
+        />
+      );
+    case 'message':
+      return (
+        <EventRowMessage
+          labelIdentifierValue={labelIdentifierValue}
+          event={event}
+          mainObjectMetadataItem={mainObjectMetadataItem}
+          linkedObjectMetadataItem={linkedObjectMetadataItem}
+          authorFullName={authorFullName}
+        />
+      );
+    case 'linked-task':
+      return (
+        <EventRowActivity
+          labelIdentifierValue={labelIdentifierValue}
+          event={event}
+          mainObjectMetadataItem={mainObjectMetadataItem}
+          linkedObjectMetadataItem={linkedObjectMetadataItem}
+          authorFullName={authorFullName}
+          objectNameSingular={CoreObjectNameSingular.Task}
+        />
+      );
+    case 'linked-note':
+      return (
+        <EventRowActivity
+          labelIdentifierValue={labelIdentifierValue}
+          event={event}
+          mainObjectMetadataItem={mainObjectMetadataItem}
+          linkedObjectMetadataItem={linkedObjectMetadataItem}
+          authorFullName={authorFullName}
+          objectNameSingular={CoreObjectNameSingular.Note}
+        />
+      );
+    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}`,
+      );
+  }
+};

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

@@ -0,0 +1,76 @@
+import styled from '@emotion/styled';
+
+import { EventFieldDiffLabel } from '@/activities/timeline-activities/rows/main-object/components/EventFieldDiffLabel';
+import { EventFieldDiffValue } from '@/activities/timeline-activities/rows/main-object/components/EventFieldDiffValue';
+import { EventFieldDiffValueEffect } from '@/activities/timeline-activities/rows/main-object/components/EventFieldDiffValueEffect';
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
+
+type EventFieldDiffProps = {
+  diffRecord: Record<string, any>;
+  mainObjectMetadataItem: ObjectMetadataItem;
+  fieldMetadataItem: FieldMetadataItem | undefined;
+  diffArtificialRecordStoreId: string;
+};
+
+const StyledEventFieldDiffContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: 24px;
+  width: 380px;
+`;
+
+const StyledEmptyValue = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
+export const EventFieldDiff = ({
+  diffRecord,
+  mainObjectMetadataItem,
+  fieldMetadataItem,
+  diffArtificialRecordStoreId,
+}: EventFieldDiffProps) => {
+  if (!fieldMetadataItem) {
+    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} />→
+        {isUpdatedToEmpty ? (
+          <StyledEmptyValue>Empty</StyledEmptyValue>
+        ) : (
+          <>
+            <EventFieldDiffValueEffect
+              diffArtificialRecordStoreId={diffArtificialRecordStoreId}
+              mainObjectMetadataItem={mainObjectMetadataItem}
+              fieldMetadataItem={fieldMetadataItem}
+              diffRecord={diffRecord}
+            />
+            <EventFieldDiffValue
+              diffArtificialRecordStoreId={diffArtificialRecordStoreId}
+              mainObjectMetadataItem={mainObjectMetadataItem}
+              fieldMetadataItem={fieldMetadataItem}
+            />
+          </>
+        )}
+      </StyledEventFieldDiffContainer>
+    </RecordFieldValueSelectorContextProvider>
+  );
+};

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

@@ -0,0 +1,39 @@
+import { EventFieldDiff } from '@/activities/timeline-activities/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/timeline-activities/rows/main-object/components/EventFieldDiffLabel.tsx

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+import { Icon123, useIcons } from 'twenty-ui';
+
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+
+type EventFieldDiffLabelProps = {
+  fieldMetadataItem: FieldMetadataItem;
+};
+
+const StyledUpdatedFieldContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
+const StyledUpdatedFieldIconContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  height: 14px;
+  width: 14px;
+`;
+
+export const EventFieldDiffLabel = ({
+  fieldMetadataItem,
+}: EventFieldDiffLabelProps) => {
+  const { getIcon } = useIcons();
+
+  const IconComponent = fieldMetadataItem?.icon
+    ? getIcon(fieldMetadataItem?.icon)
+    : Icon123;
+
+  return (
+    <StyledUpdatedFieldContainer>
+      <StyledUpdatedFieldIconContainer>
+        <IconComponent />
+      </StyledUpdatedFieldIconContainer>
+      {fieldMetadataItem.label}
+    </StyledUpdatedFieldContainer>
+  );
+};

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

@@ -0,0 +1,57 @@
+import styled from '@emotion/styled';
+
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
+import { FieldDisplay } from '@/object-record/record-field/components/FieldDisplay';
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
+
+type EventFieldDiffValueProps = {
+  diffArtificialRecordStoreId: string;
+  mainObjectMetadataItem: ObjectMetadataItem;
+  fieldMetadataItem: FieldMetadataItem;
+};
+
+const StyledEventFieldDiffValue = styled.div`
+  align-items: center;
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: ${({ theme }) => theme.font.color.primary};
+`;
+
+export const EventFieldDiffValue = ({
+  diffArtificialRecordStoreId,
+  mainObjectMetadataItem,
+  fieldMetadataItem,
+}: EventFieldDiffValueProps) => {
+  return (
+    <StyledEventFieldDiffValue>
+      <FieldContext.Provider
+        value={{
+          recordId: diffArtificialRecordStoreId,
+          isLabelIdentifier: isLabelIdentifierField({
+            fieldMetadataItem,
+            objectMetadataItem: mainObjectMetadataItem,
+          }),
+          fieldDefinition: {
+            type: fieldMetadataItem.type,
+            iconName: fieldMetadataItem?.icon || 'FieldIcon',
+            fieldMetadataId: fieldMetadataItem.id || '',
+            label: fieldMetadataItem.label,
+            metadata: {
+              fieldName: fieldMetadataItem.name,
+              objectMetadataNameSingular: mainObjectMetadataItem.nameSingular,
+              options: fieldMetadataItem.options ?? [],
+            },
+            defaultValue: fieldMetadataItem.defaultValue,
+          },
+          hotkeyScope: 'field-event-diff',
+        }}
+      >
+        <FieldDisplay />
+      </FieldContext.Provider>
+    </StyledEventFieldDiffValue>
+  );
+};

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

@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useSetRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { isDefined } from 'twenty-ui';
+
+export const EventFieldDiffValueEffect = ({
+  diffArtificialRecordStoreId,
+  diffRecord,
+  mainObjectMetadataItem,
+  fieldMetadataItem,
+}: {
+  diffArtificialRecordStoreId: string;
+  diffRecord: Record<string, any> | undefined;
+  mainObjectMetadataItem: ObjectMetadataItem;
+  fieldMetadataItem: FieldMetadataItem;
+}) => {
+  const setEntity = useSetRecoilState(
+    recordStoreFamilyState(diffArtificialRecordStoreId),
+  );
+  const setRecordValue = useSetRecordValue();
+
+  useEffect(() => {
+    if (!isDefined(diffRecord)) return;
+
+    const forgedObjectRecord = {
+      __typename: mainObjectMetadataItem.nameSingular,
+      id: diffArtificialRecordStoreId,
+      [fieldMetadataItem.name]: diffRecord,
+    };
+
+    setEntity(forgedObjectRecord);
+    setRecordValue(forgedObjectRecord.id, forgedObjectRecord);
+  }, [
+    diffRecord,
+    diffArtificialRecordStoreId,
+    fieldMetadataItem.name,
+    mainObjectMetadataItem.nameSingular,
+    setEntity,
+    setRecordValue,
+  ]);
+
+  return <></>;
+};

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

@@ -0,0 +1,61 @@
+import {
+  EventRowDynamicComponentProps,
+  StyledEventRowItemAction,
+  StyledEventRowItemColumn,
+} from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent';
+import { EventRowMainObjectUpdated } from '@/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated';
+import styled from '@emotion/styled';
+
+type EventRowMainObjectProps = EventRowDynamicComponentProps;
+
+const StyledMainContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const EventRowMainObject = ({
+  authorFullName,
+  labelIdentifierValue,
+  event,
+  mainObjectMetadataItem,
+}: EventRowMainObjectProps) => {
+  const [, eventAction] = event.name.split('.');
+
+  switch (eventAction) {
+    case 'created': {
+      return (
+        <StyledMainContainer>
+          <StyledEventRowItemColumn>
+            {labelIdentifierValue}
+          </StyledEventRowItemColumn>
+          <StyledEventRowItemAction>was created by</StyledEventRowItemAction>
+          <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
+        </StyledMainContainer>
+      );
+    }
+    case 'updated': {
+      return (
+        <EventRowMainObjectUpdated
+          authorFullName={authorFullName}
+          labelIdentifierValue={labelIdentifierValue}
+          event={event}
+          mainObjectMetadataItem={mainObjectMetadataItem}
+        />
+      );
+    }
+    case 'deleted': {
+      return (
+        <StyledMainContainer>
+          <StyledEventRowItemColumn>
+            {labelIdentifierValue}
+          </StyledEventRowItemColumn>
+          <StyledEventRowItemAction>was deleted by</StyledEventRowItemAction>
+          <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
+        </StyledMainContainer>
+      );
+    }
+    default:
+      return null;
+  }
+};

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

@@ -0,0 +1,97 @@
+import styled from '@emotion/styled';
+import { useState } from 'react';
+
+import { EventCard } from '@/activities/timeline-activities/rows/components/EventCard';
+import { EventCardToggleButton } from '@/activities/timeline-activities/rows/components/EventCardToggleButton';
+import {
+  StyledEventRowItemAction,
+  StyledEventRowItemColumn,
+} from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent';
+import { EventFieldDiffContainer } from '@/activities/timeline-activities/rows/main-object/components/EventFieldDiffContainer';
+import { TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity';
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
+type EventRowMainObjectUpdatedProps = {
+  mainObjectMetadataItem: ObjectMetadataItem;
+  authorFullName: string;
+  labelIdentifierValue: string;
+  event: TimelineActivity;
+};
+
+const StyledRowContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledEventRowMainObjectUpdatedContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const EventRowMainObjectUpdated = ({
+  authorFullName,
+  labelIdentifierValue,
+  event,
+  mainObjectMetadataItem,
+}: EventRowMainObjectUpdatedProps) => {
+  const diff: Record<string, { before: any; after: any }> =
+    event.properties?.diff;
+
+  const [isOpen, setIsOpen] = useState(true);
+
+  const fieldMetadataItemMap: Record<string, FieldMetadataItem> =
+    mainObjectMetadataItem.fields.reduce(
+      (acc, field) => ({ ...acc, [field.name]: field }),
+      {},
+    );
+
+  const diffEntries = Object.entries(diff);
+  if (diffEntries.length === 0) {
+    throw new Error('Cannot render update description without changes');
+  }
+
+  return (
+    <StyledEventRowMainObjectUpdatedContainer>
+      <StyledRowContainer>
+        <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
+        <StyledEventRowItemAction>
+          updated
+          {diffEntries.length === 1 && (
+            <EventFieldDiffContainer
+              mainObjectMetadataItem={mainObjectMetadataItem}
+              diffKey={diffEntries[0][0]}
+              diffValue={diffEntries[0][1].after}
+              eventId={event.id}
+              fieldMetadataItemMap={fieldMetadataItemMap}
+            />
+          )}
+          {diffEntries.length > 1 && (
+            <>
+              <span>
+                {diffEntries.length} fields on {labelIdentifierValue}
+              </span>
+              <EventCardToggleButton isOpen={isOpen} setIsOpen={setIsOpen} />
+            </>
+          )}
+        </StyledEventRowItemAction>
+      </StyledRowContainer>
+      {diffEntries.length > 1 && (
+        <EventCard isOpen={isOpen}>
+          {diffEntries.map(([diffKey, diffValue]) => (
+            <EventFieldDiffContainer
+              key={diffKey}
+              mainObjectMetadataItem={mainObjectMetadataItem}
+              diffKey={diffKey}
+              diffValue={diffValue.after}
+              eventId={event.id}
+              fieldMetadataItemMap={fieldMetadataItemMap}
+            />
+          ))}
+        </EventCard>
+      )}
+    </StyledEventRowMainObjectUpdatedContainer>
+  );
+};

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

@@ -0,0 +1,53 @@
+import { EventRowMainObjectUpdated } from '@/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated';
+import { TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity';
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator, RouterDecorator } from 'twenty-ui';
+
+import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
+
+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: generatedMockObjectMetadataItems.find(
+      (item) => item.nameSingular === 'person',
+    ),
+  },
+  decorators: [
+    ComponentDecorator,
+    ObjectMetadataItemsDecorator,
+    SnackBarDecorator,
+    RouterDecorator,
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof EventRowMainObjectUpdated>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,131 @@
+import styled from '@emotion/styled';
+import { isUndefined } from '@sniptt/guards';
+import { OverflowingTextWithTooltip } from 'twenty-ui';
+
+import { useEmailThread } from '@/activities/emails/hooks/useEmailThread';
+import { EmailThreadMessage } from '@/activities/emails/types/EmailThreadMessage';
+import { EventCardMessageNotShared } from '@/activities/timeline-activities/rows/message/components/EventCardMessageNotShared';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
+import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
+import { isDefined } from '~/utils/isDefined';
+
+const StyledEventCardMessageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 380px;
+`;
+
+const StyledEmailContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(4)};
+  justify-content: center;
+`;
+
+const StyledEmailTop = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledEmailTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledEmailParticipants = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+`;
+
+const StyledEmailBody = styled.div`
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const EventCardMessage = ({
+  messageId,
+  authorFullName,
+}: {
+  messageId: string;
+  authorFullName: string;
+}) => {
+  const { upsertRecords } = useUpsertRecordsInStore();
+
+  const {
+    record: message,
+    loading,
+    error,
+  } = useFindOneRecord<EmailThreadMessage>({
+    objectNameSingular: CoreObjectNameSingular.Message,
+    objectRecordId: messageId,
+    recordGqlFields: {
+      id: true,
+      text: true,
+      subject: true,
+      direction: true,
+      messageThreadId: true,
+      messageParticipants: {
+        handle: true,
+      },
+    },
+    onCompleted: (data) => {
+      upsertRecords([data]);
+    },
+  });
+
+  const { openEmailThread } = useEmailThread();
+
+  if (isDefined(error)) {
+    const shouldHideMessageContent = error.graphQLErrors.some(
+      (e) => e.extensions?.code === 'FORBIDDEN',
+    );
+
+    if (shouldHideMessageContent) {
+      return <EventCardMessageNotShared sharedByFullName={authorFullName} />;
+    }
+
+    const shouldHandleNotFound = error.graphQLErrors.some(
+      (e) => e.extensions?.code === 'NOT_FOUND',
+    );
+
+    if (shouldHandleNotFound) {
+      return <div>Message not found</div>;
+    }
+
+    return <div>Error loading message</div>;
+  }
+
+  if (loading || isUndefined(message)) {
+    return <div>Loading...</div>;
+  }
+
+  const messageParticipantHandles = message.messageParticipants
+    .map((participant) => participant.handle)
+    .filter((handle) => isDefined(handle) && handle !== '')
+    .join(', ');
+
+  return (
+    <StyledEventCardMessageContainer>
+      <StyledEmailContent>
+        <StyledEmailTop>
+          <StyledEmailTitle>{message.subject}</StyledEmailTitle>
+          <StyledEmailParticipants>
+            <OverflowingTextWithTooltip text={messageParticipantHandles} />
+          </StyledEmailParticipants>
+        </StyledEmailTop>
+        <StyledEmailBody
+          onClick={() => openEmailThread(message.messageThreadId)}
+        >
+          {message.text}
+        </StyledEmailBody>
+      </StyledEmailContent>
+    </StyledEventCardMessageContainer>
+  );
+};

packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessageNotShared.tsx

@@ -0,0 +1,86 @@
+import styled from '@emotion/styled';
+import { IconLock } from 'twenty-ui';
+
+const StyledEventCardMessageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledEmailContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(4)};
+  justify-content: center;
+`;
+
+const StyledEmailTop = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledEmailTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  display: flex;
+`;
+
+const StyledEmailBodyNotShareContainer = styled.div`
+  align-items: center;
+  align-self: stretch;
+  background: ${({ theme }) => theme.background.transparent.lighter};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: ${({ theme }) => theme.spacing(1)};
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+
+  height: 80px;
+  justify-content: center;
+  padding: 0 ${({ theme }) => theme.spacing(1)};
+
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
+const StyledEmailBodyNotSharedIconContainer = styled.div`
+  display: flex;
+  width: 14px;
+  height: 14px;
+  justify-content: center;
+  align-items: center;
+`;
+
+const StyledEmailBodyNotShare = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  padding: 0 ${({ theme }) => theme.spacing(1)};
+`;
+
+export const EventCardMessageNotShared = ({
+  sharedByFullName,
+}: {
+  sharedByFullName: string;
+}) => {
+  return (
+    <StyledEventCardMessageContainer>
+      <StyledEmailContent>
+        <StyledEmailTop>
+          <StyledEmailTitle>
+            <span>Subject not shared</span>
+          </StyledEmailTitle>
+        </StyledEmailTop>
+        <StyledEmailBodyNotShareContainer>
+          <StyledEmailBodyNotShare>
+            <StyledEmailBodyNotSharedIconContainer>
+              <IconLock />
+            </StyledEmailBodyNotSharedIconContainer>
+            <span>Not shared by {sharedByFullName}</span>
+          </StyledEmailBodyNotShare>
+        </StyledEmailBodyNotShareContainer>
+      </StyledEmailContent>
+    </StyledEventCardMessageContainer>
+  );
+};

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

@@ -0,0 +1,59 @@
+import styled from '@emotion/styled';
+import { useState } from 'react';
+
+import { EventCard } from '@/activities/timeline-activities/rows/components/EventCard';
+import { EventCardToggleButton } from '@/activities/timeline-activities/rows/components/EventCardToggleButton';
+import {
+  EventRowDynamicComponentProps,
+  StyledEventRowItemAction,
+  StyledEventRowItemColumn,
+} from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent';
+import { EventCardMessage } from '@/activities/timeline-activities/rows/message/components/EventCardMessage';
+
+type EventRowMessageProps = EventRowDynamicComponentProps;
+
+const StyledEventRowMessageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledRowContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const EventRowMessage = ({
+  event,
+  authorFullName,
+  labelIdentifierValue,
+}: EventRowMessageProps) => {
+  const [, eventAction] = event.name.split('.');
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (['linked'].includes(eventAction) === false) {
+    throw new Error('Invalid event action for message event type.');
+  }
+
+  return (
+    <StyledEventRowMessageContainer>
+      <StyledRowContainer>
+        <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
+        <StyledEventRowItemAction>
+          linked an email with
+        </StyledEventRowItemAction>
+        <StyledEventRowItemColumn>
+          {labelIdentifierValue}
+        </StyledEventRowItemColumn>
+        <EventCardToggleButton isOpen={isOpen} setIsOpen={setIsOpen} />
+      </StyledRowContainer>
+      <EventCard isOpen={isOpen}>
+        <EventCardMessage
+          messageId={event.linkedRecordId}
+          authorFullName={authorFullName}
+        />
+      </EventCard>
+    </StyledEventRowMessageContainer>
+  );
+};

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

@@ -0,0 +1,82 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { HttpResponse, graphql } from 'msw';
+import { ComponentDecorator } from 'twenty-ui';
+
+import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext';
+import { EventCardMessage } from '@/activities/timeline-activities/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',
+                },
+              },
+            ],
+          });
+        }),
+      ],
+    },
+  },
+};