fix: event timeline should unmount when hidden and be closed by defau…

…lt (#8294)

Fixes 2 bugs:

- The initial state of the event timeline should have `open: false`, not
`true` - Closed by default, unless opened
- The event timeline should unmount when hidden - It should not emit
requests when closed

frontend/src/component/events/EventTimeline/useEventTimeline.ts

@@ -64,7 +64,7 @@ type EventTimelineState = {
 };
 
 const defaultState: EventTimelineState = {
-    open: true,
+    open: false,
     timeSpan: timeSpanOptions[0],
 };
 

frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx

@@ -1,11 +1,18 @@
-import { Box } from '@mui/material';
+import { Box, styled } from '@mui/material';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { EventTimeline } from 'component/events/EventTimeline/EventTimeline';
 import { useEffect, useState } from 'react';
 
 interface IMainLayoutEventTimelineProps {
     open: boolean;
 }
 
+const StyledEventTimelineWrapper = styled(Box)(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    height: '105px',
+    overflow: 'hidden',
+}));
+
 export const MainLayoutEventTimeline = ({
     open,
 }: IMainLayoutEventTimelineProps) => {
@@ -16,9 +23,8 @@ export const MainLayoutEventTimeline = ({
     }, []);
 
     return (
-        <Box
+        <StyledEventTimelineWrapper
             sx={{
-                overflow: 'hidden',
                 transition: isInitialLoad
                     ? 'none'
                     : 'max-height 0.3s ease-in-out',
@@ -31,8 +37,11 @@ export const MainLayoutEventTimeline = ({
                     backgroundColor: theme.palette.background.paper,
                 })}
             >
-                <EventTimeline />
+                <ConditionallyRender
+                    condition={open}
+                    show={<EventTimeline />}
+                />
             </Box>
-        </Box>
+        </StyledEventTimelineWrapper>
     );
 };