Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00
Code Issues Projects Releases Wiki Activity

chore(1-3349): no border for event timeline / dropdowns to the right (#9252)

Browse Source 
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)
This commit is contained in:
Thomas Heartman 2025-02-07 11:11:54 +01:00 committed by GitHub
parent f9bd9d2d03
commit 4f30ce7155
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 64 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
View File

@ -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 ( return (
<> <>
<StyledCol> <StyledCol>
@ -102,49 +123,37 @@ export const EventTimelineHeader = ({
{totalEvents === 1 ? '' : 's'} {totalEvents === 1 ? '' : 's'}
<HelpIcon tooltip='These are key events per environment across all your projects. For more details, visit the event log.' /> <HelpIcon tooltip='These are key events per environment across all your projects. For more details, visit the event log.' />
</StyledTimelineEventsCount> </StyledTimelineEventsCount>
<StyledFilter {!frontendHeaderRefactor && <TimeSpanFilter />}
select </StyledCol>
size='small' <StyledCol>
variant='outlined' {frontendHeaderRefactor ? (
value={timeSpan.key} <>
onChange={(e) => <TimeSpanFilter />
setTimeSpan( <EnvironmentFilter />
timeSpanOptions.find( </>
({ key }) => key === e.target.value, ) : (
) || timeSpanOptions[0], <>
) <EventTimelineHeaderTip />
} <EnvironmentFilter />
> <Tooltip title='Hide event timeline' arrow>
{timeSpanOptions.map(({ key, label }) => ( <IconButton
<MenuItem key={key} value={key}> aria-label='close'
{label} size='small'
</MenuItem> onClick={() => {
))} trackEvent('event-timeline', {
</StyledFilter> props: {
{frontendHeaderRefactor && <EnvironmentFilter />} eventType: 'close',
},
});
setOpen(false);
}}
>
<CloseIcon />
</IconButton>
</Tooltip>
</>
)}
</StyledCol> </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>
)}
</> </>
); );
}; };

21
frontend/src/component/personalDashboard/PersonalDashboard.tsx
View File

@ -71,12 +71,17 @@ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
'&>.MuiAccordionSummary-content.MuiAccordionSummary-content': { '&>.MuiAccordionSummary-content.MuiAccordionSummary-content': {
margin: '0', 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)({ const StyledAccordionDetails = styled(AccordionDetails)({
padding: 0, padding: 0,
}); });
@ -231,7 +236,7 @@ export const PersonalDashboard = () => {
expanded={expandProjects ?? true} expanded={expandProjects ?? true}
onChange={() => toggleSectionState('projects')} onChange={() => toggleSectionState('projects')}
> >
<StyledAccordionSummary <StyledAccordionSummaryWithBorder
expandIcon={ expandIcon={
<ExpandMore titleAccess='Toggle projects section' /> <ExpandMore titleAccess='Toggle projects section' />
} }
@ -247,7 +252,7 @@ export const PersonalDashboard = () => {
you are a member of you are a member of
</AccordionSummarySubtitle> </AccordionSummarySubtitle>
</AccordionSummaryText> </AccordionSummaryText>
</StyledAccordionSummary> </StyledAccordionSummaryWithBorder>
<StyledAccordionDetails> <StyledAccordionDetails>
<MyProjects <MyProjects
owners={personalDashboard?.projectOwners ?? []} owners={personalDashboard?.projectOwners ?? []}
@ -266,7 +271,7 @@ export const PersonalDashboard = () => {
expanded={expandFlags ?? true} expanded={expandFlags ?? true}
onChange={() => toggleSectionState('flags')} onChange={() => toggleSectionState('flags')}
> >
<StyledAccordionSummary <StyledAccordionSummaryWithBorder
expandIcon={ expandIcon={
<ExpandMore titleAccess='Toggle flags section' /> <ExpandMore titleAccess='Toggle flags section' />
} }
@ -281,7 +286,7 @@ export const PersonalDashboard = () => {
Feature flags you have created or favorited Feature flags you have created or favorited
</AccordionSummarySubtitle> </AccordionSummarySubtitle>
</AccordionSummaryText> </AccordionSummaryText>
</StyledAccordionSummary> </StyledAccordionSummaryWithBorder>
<StyledAccordionDetails> <StyledAccordionDetails>
<MyFlags <MyFlags
hasProjects={projects?.length > 0} hasProjects={projects?.length > 0}