From d6ec2514a272ae51f262be03e2c6f5f9869f694e Mon Sep 17 00:00:00 2001
From: kwasniew <kwasniewski.mateusz@gmail.com>
Date: Mon, 30 Sep 2024 11:10:19 +0200
Subject: [PATCH] feat: last project events ui polishing

---
 .../ContentGridNoProjects.tsx                 |  2 +-
 .../personalDashboard/LatestProjectEvents.tsx | 29 +++++++++++++++----
 ...ardProjectDetailsSchemaLatestEventsItem.ts |  2 ++
 .../personal-dashboard-service.ts             | 10 ++++++-
 ...rsonal-dashboard-project-details-schema.ts | 10 +++++++
 5 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx b/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx
index c358fd0d331e..75a5e90ba08e 100644
--- a/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx
+++ b/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx
@@ -103,7 +103,7 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
                         </p>
                         <AdminList>
                             {admins.map((admin) => (
-                                <AdminListItem>
+                                <AdminListItem key={admin.name}>
                                     <UserAvatar
                                         sx={{
                                             margin: 0,
diff --git a/frontend/src/component/personalDashboard/LatestProjectEvents.tsx b/frontend/src/component/personalDashboard/LatestProjectEvents.tsx
index 858259807e0c..9f9e3ba6403e 100644
--- a/frontend/src/component/personalDashboard/LatestProjectEvents.tsx
+++ b/frontend/src/component/personalDashboard/LatestProjectEvents.tsx
@@ -1,22 +1,41 @@
 import type { FC } from 'react';
-import type { PersonalDashboardProjectDetailsSchema } from '../../openapi';
 import { Markdown } from '../common/Markdown/Markdown';
+import type { PersonalDashboardProjectDetailsSchema } from '../../openapi';
+import { UserAvatar } from '../common/UserAvatar/UserAvatar';
+import { styled } from '@mui/material';
+
+const Events = styled('ul')(({ theme }) => ({
+    padding: 0,
+    alignItems: 'flex-start',
+}));
+
+const Event = styled('li')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(2),
+    listStyleType: 'none',
+    padding: 0,
+    marginBottom: theme.spacing(4),
+}));
 
 export const LatestProjectEvents: FC<{
     latestEvents: PersonalDashboardProjectDetailsSchema['latestEvents'];
 }> = ({ latestEvents }) => {
     return (
-        <ul>
+        <Events>
             {latestEvents.map((event) => {
                 return (
-                    <li key={event.summary}>
+                    <Event key={event.id}>
+                        <UserAvatar
+                            src={event.createdByImageUrl}
+                            sx={{ mt: 1 }}
+                        />
                         <Markdown>
                             {event.summary ||
                                 'No preview available for this event'}
                         </Markdown>
-                    </li>
+                    </Event>
                 );
             })}
-        </ul>
+        </Events>
     );
 };
diff --git a/frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts b/frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts
index 20fb888b6807..c809a8d571a4 100644
--- a/frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts
+++ b/frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts
@@ -15,4 +15,6 @@ export type PersonalDashboardProjectDetailsSchemaLatestEventsItem = {
      * @nullable
      */
     summary: string | null;
+    id: number;
+    createdByImageUrl: string;
 };
diff --git a/src/lib/features/personal-dashboard/personal-dashboard-service.ts b/src/lib/features/personal-dashboard/personal-dashboard-service.ts
index d28aa4fdc1d1..0013b2c55f0d 100644
--- a/src/lib/features/personal-dashboard/personal-dashboard-service.ts
+++ b/src/lib/features/personal-dashboard/personal-dashboard-service.ts
@@ -7,9 +7,15 @@ import type {
 import type { IProjectReadModel } from '../project/project-read-model-type';
 import type { IEventStore } from '../../types';
 import type { FeatureEventFormatter } from '../../addons/feature-event-formatter-md';
+import { generateImageUrl } from '../../util';
 
 type PersonalProjectDetails = {
-    latestEvents: { summary: string; createdBy: string }[];
+    latestEvents: {
+        summary: string;
+        createdBy: string;
+        id: number;
+        createdByImageUrl: string;
+    }[];
 };
 
 export class PersonalDashboardService {
@@ -73,6 +79,8 @@ export class PersonalDashboardService {
         const formattedEvents = recentEvents.map((event) => ({
             summary: this.featureEventFormatter.format(event).text,
             createdBy: event.createdBy,
+            id: event.id,
+            createdByImageUrl: generateImageUrl({ email: event.createdBy }),
         }));
 
         return { latestEvents: formattedEvents };
diff --git a/src/lib/openapi/spec/personal-dashboard-project-details-schema.ts b/src/lib/openapi/spec/personal-dashboard-project-details-schema.ts
index 0aa94d146f27..7c51686f6643 100644
--- a/src/lib/openapi/spec/personal-dashboard-project-details-schema.ts
+++ b/src/lib/openapi/spec/personal-dashboard-project-details-schema.ts
@@ -17,6 +17,11 @@ export const personalDashboardProjectDetailsSchema = {
                 additionalProperties: false,
                 required: ['summary', 'createdBy'],
                 properties: {
+                    id: {
+                        type: 'integer',
+                        minimum: 1,
+                        description: 'The ID of the event.',
+                    },
                     summary: {
                         type: 'string',
                         nullable: true,
@@ -28,6 +33,11 @@ export const personalDashboardProjectDetailsSchema = {
                         description: 'Which user created this event',
                         example: 'johndoe',
                     },
+                    createdByImageUrl: {
+                        type: 'string',
+                        description: `URL used for the user profile image of the event author`,
+                        example: 'https://example.com/242x200.png',
+                    },
                 },
             },
         },