From 4f30ce7155b93d27915efe4649cfc33ed8f7fce6 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 7 Feb 2025 11:11:54 +0100
Subject: [PATCH] chore(1-3349): no border for event timeline / dropdowns to
 the right (#9252)

Removes the border between the accordion summary and its contents for
the event timeline, and moves dropdown selectors to the right to avoid
overcrowding on the left.


![image](https://github.com/user-attachments/assets/b0df4c11-8e61-46f8-b844-349a709bd4e9)
---
 .../EventTimelineHeader.tsx                   | 93 ++++++++++---------
 .../personalDashboard/PersonalDashboard.tsx   | 21 +++--
 2 files changed, 64 insertions(+), 50 deletions(-)

diff --git a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx b/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
index 5f6371cb39..90c3206f37 100644
--- 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
index d572d6ae40..e1979dfe78 100644
--- 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,
 });
@@ -231,7 +236,7 @@ export const PersonalDashboard = () => {
                 expanded={expandProjects ?? true}
                 onChange={() => toggleSectionState('projects')}
             >
-                <StyledAccordionSummary
+                <StyledAccordionSummaryWithBorder
                     expandIcon={
                         <ExpandMore titleAccess='Toggle projects section' />
                     }
@@ -247,7 +252,7 @@ export const PersonalDashboard = () => {
                             you are a member of
                         </AccordionSummarySubtitle>
                     </AccordionSummaryText>
-                </StyledAccordionSummary>
+                </StyledAccordionSummaryWithBorder>
                 <StyledAccordionDetails>
                     <MyProjects
                         owners={personalDashboard?.projectOwners ?? []}
@@ -266,7 +271,7 @@ export const PersonalDashboard = () => {
                 expanded={expandFlags ?? true}
                 onChange={() => toggleSectionState('flags')}
             >
-                <StyledAccordionSummary
+                <StyledAccordionSummaryWithBorder
                     expandIcon={
                         <ExpandMore titleAccess='Toggle flags section' />
                     }
@@ -281,7 +286,7 @@ export const PersonalDashboard = () => {
                             Feature flags you have created or favorited
                         </AccordionSummarySubtitle>
                     </AccordionSummaryText>
-                </StyledAccordionSummary>
+                </StyledAccordionSummaryWithBorder>
                 <StyledAccordionDetails>
                     <MyFlags
                         hasProjects={projects?.length > 0}