1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00

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

This commit is contained in:
Thomas Heartman 2025-02-07 11:23:41 +01:00
commit 02fa92f5e1
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
2 changed files with 64 additions and 50 deletions

View File

@ -94,14 +94,7 @@ export const EventTimelineHeader = ({
/> />
); );
return ( const TimeSpanFilter = () => (
<>
<StyledCol>
<StyledTimelineEventsCount>
{totalEvents} event
{totalEvents === 1 ? '' : 's'}
<HelpIcon tooltip='These are key events per environment across all your projects. For more details, visit the event log.' />
</StyledTimelineEventsCount>
<StyledFilter <StyledFilter
select select
size='small' size='small'
@ -109,9 +102,8 @@ export const EventTimelineHeader = ({
value={timeSpan.key} value={timeSpan.key}
onChange={(e) => onChange={(e) =>
setTimeSpan( setTimeSpan(
timeSpanOptions.find( timeSpanOptions.find(({ key }) => key === e.target.value) ||
({ key }) => key === e.target.value, timeSpanOptions[0],
) || timeSpanOptions[0],
) )
} }
> >
@ -121,10 +113,26 @@ export const EventTimelineHeader = ({
</MenuItem> </MenuItem>
))} ))}
</StyledFilter> </StyledFilter>
{frontendHeaderRefactor && <EnvironmentFilter />} );
</StyledCol>
{!frontendHeaderRefactor && ( return (
<>
<StyledCol> <StyledCol>
<StyledTimelineEventsCount>
{totalEvents} event
{totalEvents === 1 ? '' : 's'}
<HelpIcon tooltip='These are key events per environment across all your projects. For more details, visit the event log.' />
</StyledTimelineEventsCount>
{!frontendHeaderRefactor && <TimeSpanFilter />}
</StyledCol>
<StyledCol>
{frontendHeaderRefactor ? (
<>
<TimeSpanFilter />
<EnvironmentFilter />
</>
) : (
<>
<EventTimelineHeaderTip /> <EventTimelineHeaderTip />
<EnvironmentFilter /> <EnvironmentFilter />
<Tooltip title='Hide event timeline' arrow> <Tooltip title='Hide event timeline' arrow>
@ -143,8 +151,9 @@ export const EventTimelineHeader = ({
<CloseIcon /> <CloseIcon />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</StyledCol> </>
)} )}
</StyledCol>
</> </>
); );
}; };

View File

@ -71,11 +71,16 @@ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
'&>.MuiAccordionSummary-content.MuiAccordionSummary-content': { '&>.MuiAccordionSummary-content.MuiAccordionSummary-content': {
margin: '0', margin: '0',
}, },
}));
const StyledAccordionSummaryWithBorder = styled(StyledAccordionSummary)(
({ theme }) => ({
"&[aria-expanded='true']": { "&[aria-expanded='true']": {
// only add the border when it's open // only add the border when it's open
borderBottom: `1px solid ${theme.palette.divider}`, borderBottom: `1px solid ${theme.palette.divider}`,
}, },
})); }),
);
const StyledAccordionDetails = styled(AccordionDetails)({ const StyledAccordionDetails = styled(AccordionDetails)({
padding: 0, padding: 0,
@ -170,7 +175,7 @@ const FlagPanel = () => {
expanded={expandFlags ?? true} expanded={expandFlags ?? true}
onChange={() => toggleSectionState('flags')} onChange={() => toggleSectionState('flags')}
> >
<StyledAccordionSummary <StyledAccordionSummaryWithBorder
expandIcon={<ExpandMore titleAccess='Toggle flags section' />} expandIcon={<ExpandMore titleAccess='Toggle flags section' />}
id='flags-panel-header' id='flags-panel-header'
aria-controls='flags-panel-content' aria-controls='flags-panel-content'
@ -183,7 +188,7 @@ const FlagPanel = () => {
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}
@ -227,7 +232,7 @@ const ProjectPanel = () => {
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' />
} }
@ -241,7 +246,7 @@ const ProjectPanel = () => {
are a member of are a member of
</AccordionSummarySubtitle> </AccordionSummarySubtitle>
</AccordionSummaryText> </AccordionSummaryText>
</StyledAccordionSummary> </StyledAccordionSummaryWithBorder>
<StyledAccordionDetails> <StyledAccordionDetails>
<MyProjects <MyProjects
owners={personalDashboard?.projectOwners ?? []} owners={personalDashboard?.projectOwners ?? []}