Merge branch 'main' into fix/performance-problem-on-dashboard

Unleash · Feb 7, 2025 · 02fa92f · 02fa92f
2 parents 5416afa + 4f30ce7
commit 02fa92f
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 50 deletions.
diff --git a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx b/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
@@ -94,6 +94,27 @@ export const EventTimelineHeader = ({
         />
     );
 
+    const TimeSpanFilter = () => (
+        <StyledFilter
+            select
+            size='small'
+            variant='outlined'
+            value={timeSpan.key}
+            onChange={(e) =>
+                setTimeSpan(
+                    timeSpanOptions.find(({ key }) => key === e.target.value) ||
+                        timeSpanOptions[0],
+                )
+            }
+        >
+            {timeSpanOptions.map(({ key, label }) => (
+                <MenuItem key={key} value={key}>
+                    {label}
+                </MenuItem>
+            ))}
+        </StyledFilter>
+    );
+
     return (
         <>
             <StyledCol>
@@ -102,49 +123,37 @@ export const EventTimelineHeader = ({
                     {totalEvents === 1 ? '' : 's'}
                     <HelpIcon tooltip='These are key events per environment across all your projects. For more details, visit the event log.' />
                 </StyledTimelineEventsCount>
-                <StyledFilter
-                    select
-                    size='small'
-                    variant='outlined'
-                    value={timeSpan.key}
-                    onChange={(e) =>
-                        setTimeSpan(
-                            timeSpanOptions.find(
-                                ({ key }) => key === e.target.value,
-                            ) || timeSpanOptions[0],
-                        )
-                    }
-                >
-                    {timeSpanOptions.map(({ key, label }) => (
-                        <MenuItem key={key} value={key}>
-                            {label}
-                        </MenuItem>
-                    ))}
-                </StyledFilter>
-                {frontendHeaderRefactor && <EnvironmentFilter />}
+                {!frontendHeaderRefactor && <TimeSpanFilter />}
+            </StyledCol>
+            <StyledCol>
+                {frontendHeaderRefactor ? (
+                    <>
+                        <TimeSpanFilter />
+                        <EnvironmentFilter />
+                    </>
+                ) : (
+                    <>
+                        <EventTimelineHeaderTip />
+                        <EnvironmentFilter />
+                        <Tooltip title='Hide event timeline' arrow>
+                            <IconButton
+                                aria-label='close'
+                                size='small'
+                                onClick={() => {
+                                    trackEvent('event-timeline', {
+                                        props: {
+                                            eventType: 'close',
+                                        },
+                                    });
+                                    setOpen(false);
+                                }}
+                            >
+                                <CloseIcon />
+                            </IconButton>
+                        </Tooltip>
+                    </>
+                )}
             </StyledCol>
-            {!frontendHeaderRefactor && (
-                <StyledCol>
-                    <EventTimelineHeaderTip />
-                    <EnvironmentFilter />
-                    <Tooltip title='Hide event timeline' arrow>
-                        <IconButton
-                            aria-label='close'
-                            size='small'
-                            onClick={() => {
-                                trackEvent('event-timeline', {
-                                    props: {
-                                        eventType: 'close',
-                                    },
-                                });
-                                setOpen(false);
-                            }}
-                        >
-                            <CloseIcon />
-                        </IconButton>
-                    </Tooltip>
-                </StyledCol>
-            )}
         </>
     );
 };
diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
@@ -71,12 +71,17 @@ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
     '&>.MuiAccordionSummary-content.MuiAccordionSummary-content': {
         margin: '0',
     },
-    "&[aria-expanded='true']": {
-        // only add the border when it's open
-        borderBottom: `1px solid ${theme.palette.divider}`,
-    },
 }));
 
+const StyledAccordionSummaryWithBorder = styled(StyledAccordionSummary)(
+    ({ theme }) => ({
+        "&[aria-expanded='true']": {
+            // only add the border when it's open
+            borderBottom: `1px solid ${theme.palette.divider}`,
+        },
+    }),
+);
+
 const StyledAccordionDetails = styled(AccordionDetails)({
     padding: 0,
 });
@@ -170,7 +175,7 @@ const FlagPanel = () => {
             expanded={expandFlags ?? true}
             onChange={() => toggleSectionState('flags')}
         >
-            <StyledAccordionSummary
+            <StyledAccordionSummaryWithBorder
                 expandIcon={<ExpandMore titleAccess='Toggle flags section' />}
                 id='flags-panel-header'
                 aria-controls='flags-panel-content'
@@ -183,7 +188,7 @@ const FlagPanel = () => {
                         Feature flags you have created or favorited
                     </AccordionSummarySubtitle>
                 </AccordionSummaryText>
-            </StyledAccordionSummary>
+            </StyledAccordionSummaryWithBorder>
             <StyledAccordionDetails>
                 <MyFlags
                     hasProjects={projects?.length > 0}
@@ -227,7 +232,7 @@ const ProjectPanel = () => {
             expanded={expandProjects ?? true}
             onChange={() => toggleSectionState('projects')}
         >
-            <StyledAccordionSummary
+            <StyledAccordionSummaryWithBorder
                 expandIcon={
                     <ExpandMore titleAccess='Toggle projects section' />
                 }
@@ -241,7 +246,7 @@ const ProjectPanel = () => {
                         are a member of
                     </AccordionSummarySubtitle>
                 </AccordionSummaryText>
-            </StyledAccordionSummary>
+            </StyledAccordionSummaryWithBorder>
             <StyledAccordionDetails>
                 <MyProjects
                     owners={personalDashboard?.projectOwners ?? []}