From 2822746fc1ba91bb609293ac3c06d0522b7605db Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 31 Jul 2024 09:46:47 +0200
Subject: [PATCH] refactor: Make event log look and act like other pages
 (#7704)

Updates the way the event log works. Previously, we'd use the
`displayInline` parameter to disable padding and border. However,
recent pages (including project overview etc) have moved away from
this look.

By bringing the event log into line with how those other pages look,
it'll be easier to make designs for the new filtering capability align
with other Unleash filters.

## Changes

The eventlog is used in three places. In two of them, it used to not
have a separating border. However, when we look at other screens that
have seen recent work (such as feature flags), we see that they *do*
have a separator, so bringing the event log in line seems like a
reasonable change.

Project flags list (notice the separator):

![image](https://github.com/user-attachments/assets/9b56a53d-38ef-4492-b1f8-f40ad5f3b6eb)


Here's what they look like before and after the change:

### Global event log
Before:

![image](https://github.com/user-attachments/assets/ccf428f6-3491-4c60-a853-13c50ae771f0)

After (no change):

![image](https://github.com/user-attachments/assets/cfc74538-285c-4565-bd38-dfb5e421e966)


### Project event log

Before:

![image](https://github.com/user-attachments/assets/80ef1a36-3b13-4e76-8d59-534d63f0e6bd)


After:

![image](https://github.com/user-attachments/assets/7380518c-f6dc-4d4f-b085-48ed3761bb20)


### Flag event log

Before:

![image](https://github.com/user-attachments/assets/345a5d72-d358-49fd-967c-f6cb0706a4f6)


After:

![image](https://github.com/user-attachments/assets/b4e0d8e9-e79c-477e-8fc4-181c366207fc)
---
 .../component/events/EventLog/EventLog.tsx    | 19 +++++--------------
 .../FeatureView/FeatureLog/FeatureLog.tsx     | 13 +------------
 .../project/Project/ProjectLog/ProjectLog.tsx | 13 +------------
 3 files changed, 7 insertions(+), 38 deletions(-)

diff --git a/frontend/src/component/events/EventLog/EventLog.tsx b/frontend/src/component/events/EventLog/EventLog.tsx
index dd096134ae..41dde17000 100644
--- a/frontend/src/component/events/EventLog/EventLog.tsx
+++ b/frontend/src/component/events/EventLog/EventLog.tsx
@@ -1,4 +1,4 @@
-import { Switch, FormControlLabel, useMediaQuery, Box } from '@mui/material';
+import { Switch, FormControlLabel, useMediaQuery } from '@mui/material';
 import EventJson from 'component/events/EventJson/EventJson';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
@@ -17,7 +17,6 @@ interface IEventLogProps {
     title: string;
     project?: string;
     feature?: string;
-    displayInline?: boolean;
 }
 
 const StyledEventsList = styled('ul')(({ theme }) => ({
@@ -28,12 +27,7 @@ const StyledEventsList = styled('ul')(({ theme }) => ({
     gap: theme.spacing(2),
 }));
 
-export const EventLog = ({
-    title,
-    project,
-    feature,
-    displayInline,
-}: IEventLogProps) => {
+export const EventLog = ({ title, project, feature }: IEventLogProps) => {
     const [query, setQuery] = useState('');
     const { events, totalEvents, fetchNextPage } = useEventSearch(
         project,
@@ -74,8 +68,6 @@ export const EventLog = ({
 
     return (
         <PageContent
-            disablePadding={displayInline}
-            disableBorder={displayInline}
             header={
                 <PageHeader
                     title={`${title} (${countText})`}
@@ -90,14 +82,13 @@ export const EventLog = ({
                 </PageHeader>
             }
         >
-            {displayInline && <Box sx={{ mt: 4 }} />}
             <ConditionallyRender
                 condition={Boolean(cache && cache.length === 0)}
-                show={() => <p>No events found.</p>}
+                show={<p>No events found.</p>}
             />
             <ConditionallyRender
                 condition={Boolean(cache && cache.length > 0)}
-                show={() => (
+                show={
                     <StyledEventsList>
                         {cache?.map((entry) => (
                             <ConditionallyRender
@@ -108,7 +99,7 @@ export const EventLog = ({
                             />
                         ))}
                     </StyledEventsList>
-                )}
+                }
             />
             <div ref={fetchNextPageRef} />
         </PageContent>
diff --git a/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx b/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx
index 0f83dcd3a6..31b1c946db 100644
--- a/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx
@@ -1,13 +1,6 @@
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { EventLog } from 'component/events/EventLog/EventLog';
-import { styled } from '@mui/material';
-
-const StyledContainer = styled('div')(({ theme }) => ({
-    borderRadius: theme.spacing(1.5),
-    backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing(4),
-}));
 
 const FeatureLog = () => {
     const projectId = useRequiredPathParam('projectId');
@@ -18,11 +11,7 @@ const FeatureLog = () => {
         return null;
     }
 
-    return (
-        <StyledContainer>
-            <EventLog title='Event log' feature={featureId} displayInline />
-        </StyledContainer>
-    );
+    return <EventLog title='Event log' feature={featureId} />;
 };
 
 export default FeatureLog;
diff --git a/frontend/src/component/project/Project/ProjectLog/ProjectLog.tsx b/frontend/src/component/project/Project/ProjectLog/ProjectLog.tsx
index 37aa5e2922..d28b7d4567 100644
--- a/frontend/src/component/project/Project/ProjectLog/ProjectLog.tsx
+++ b/frontend/src/component/project/Project/ProjectLog/ProjectLog.tsx
@@ -1,19 +1,8 @@
 import { EventLog } from 'component/events/EventLog/EventLog';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
-import { styled } from '@mui/material';
-
-const StyledDiv = styled('div')(({ theme }) => ({
-    borderRadius: '12.5px',
-    backgroundColor: theme.palette.background.paper,
-    padding: '2rem',
-}));
 
 export const ProjectLog = () => {
     const projectId = useRequiredPathParam('projectId');
 
-    return (
-        <StyledDiv>
-            <EventLog title='Event Log' project={projectId} displayInline />
-        </StyledDiv>
-    );
+    return <EventLog title='Event Log' project={projectId} />;
 };