From c079e8f9e232b4d6b0f7edf98ddae5cdf225708a Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 8 Oct 2024 14:07:27 +0200
Subject: [PATCH] fix: add event timestamps to display

---
 .../src/component/common/TimeAgo/TimeAgo.tsx  |  6 +++-
 .../personalDashboard/LatestProjectEvents.tsx | 29 ++++++++++++++++---
 ...ardProjectDetailsSchemaLatestEventsItem.ts |  1 +
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/common/TimeAgo/TimeAgo.tsx b/frontend/src/component/common/TimeAgo/TimeAgo.tsx
index a5b7b45126d2..ac1fea64f466 100644
--- a/frontend/src/component/common/TimeAgo/TimeAgo.tsx
+++ b/frontend/src/component/common/TimeAgo/TimeAgo.tsx
@@ -6,6 +6,7 @@ type TimeAgoProps = {
     fallback?: string;
     refresh?: boolean;
     timeElement?: boolean;
+    className?: string;
 };
 
 const formatTimeAgo = (date: string | number | Date) =>
@@ -20,6 +21,7 @@ export const TimeAgo: FC<TimeAgoProps> = ({
     fallback = '',
     refresh = true,
     timeElement = true,
+    className,
 }) => {
     const getValue = (): { description: string; dateTime?: Date } => {
         try {
@@ -53,6 +55,8 @@ export const TimeAgo: FC<TimeAgoProps> = ({
     }
 
     return (
-        <time dateTime={state.dateTime.toISOString()}>{state.description}</time>
+        <time className={className} dateTime={state.dateTime.toISOString()}>
+            {state.description}
+        </time>
     );
 };
diff --git a/frontend/src/component/personalDashboard/LatestProjectEvents.tsx b/frontend/src/component/personalDashboard/LatestProjectEvents.tsx
index 9b823b0ea09b..773dbed99ef9 100644
--- a/frontend/src/component/personalDashboard/LatestProjectEvents.tsx
+++ b/frontend/src/component/personalDashboard/LatestProjectEvents.tsx
@@ -3,6 +3,8 @@ import { Markdown } from '../common/Markdown/Markdown';
 import type { PersonalDashboardProjectDetailsSchema } from '../../openapi';
 import { UserAvatar } from '../common/UserAvatar/UserAvatar';
 import { Typography, styled } from '@mui/material';
+import { formatDateYMDHM } from 'utils/formatDate';
+import { useLocationSettings } from 'hooks/useLocationSettings';
 
 const Events = styled('ul')(({ theme }) => ({
     padding: 0,
@@ -16,6 +18,10 @@ const Event = styled('li')(({ theme }) => ({
     gap: theme.spacing(2),
     alignItems: 'center',
     marginBottom: theme.spacing(4),
+
+    '*': {
+        fontWeight: 'normal',
+    },
 }));
 
 const TitleContainer = styled('div')(({ theme }) => ({
@@ -32,9 +38,16 @@ const ActionBox = styled('article')(({ theme }) => ({
     flexDirection: 'column',
 }));
 
+const Timestamp = styled('time')(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.fontSize,
+    marginBottom: theme.spacing(1),
+}));
+
 export const LatestProjectEvents: FC<{
     latestEvents: PersonalDashboardProjectDetailsSchema['latestEvents'];
 }> = ({ latestEvents }) => {
+    const { locationSettings } = useLocationSettings();
     return (
         <ActionBox>
             <TitleContainer>
@@ -55,10 +68,18 @@ export const LatestProjectEvents: FC<{
                                 src={event.createdByImageUrl}
                                 sx={{ mt: 1 }}
                             />
-                            <Markdown>
-                                {event.summary ||
-                                    'No preview available for this event'}
-                            </Markdown>
+                            <div>
+                                <Timestamp dateTime={event.createdAt}>
+                                    {formatDateYMDHM(
+                                        event.createdAt,
+                                        locationSettings.locale,
+                                    )}
+                                </Timestamp>
+                                <Markdown>
+                                    {event.summary ||
+                                        'No preview available for this event'}
+                                </Markdown>
+                            </div>
                         </Event>
                     );
                 })}
diff --git a/frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts b/frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts
index 5de24466500d..2341bdaf3b00 100644
--- a/frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts
+++ b/frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts
@@ -22,4 +22,5 @@ export type PersonalDashboardProjectDetailsSchemaLatestEventsItem = {
      * @nullable
      */
     summary: string | null;
+    createdAt: string;
 };