mirror of
https://github.com/Unleash/unleash.git
synced 2025-04-15 01:16:22 +02:00
fix: invalid HTML and react errors in insights pages (#6593)
This PR fixes these errors (that were showing up in the dev console) in the insights pages: - nesting a div within a p in the count header (flags, environments, apps); instead flip the relationship and nest the p within the div - missing keys in mapped components - passing a boolean "scrolled" value to the underlying component (a div) is invalid: instead, make it so that that prop is not passed The only one of these that could have a visual impact is the first one (p>div -> div>p), but it appears to be the same to me. Here's before the change:  And here's after: 
This commit is contained in:
parent
a3d06bd57f
commit
c2015c6f33
@ -49,16 +49,16 @@ const ChartWidget = styled(Widget)(({ theme }) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
const StickyWrapper = styled(Box)<{ scrolled?: boolean }>(
|
||||
({ theme, scrolled }) => ({
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 1000,
|
||||
padding: scrolled ? theme.spacing(2, 0) : theme.spacing(0, 0, 2),
|
||||
background: theme.palette.background.application,
|
||||
transition: 'padding 0.3s ease',
|
||||
}),
|
||||
);
|
||||
const StickyWrapper = styled(Box, {
|
||||
shouldForwardProp: (prop) => prop !== 'scrolled',
|
||||
})<{ scrolled?: boolean }>(({ theme, scrolled }) => ({
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 1000,
|
||||
padding: scrolled ? theme.spacing(2, 0) : theme.spacing(0, 0, 2),
|
||||
background: theme.palette.background.application,
|
||||
transition: 'padding 0.3s ease',
|
||||
}));
|
||||
|
||||
export const ExecutiveDashboard: VFC = () => {
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
@ -36,24 +36,24 @@ const InfoLine = ({
|
||||
);
|
||||
|
||||
const InfoSummary = ({ data }: { data: { key: string; value: number }[] }) => (
|
||||
<Typography variant={'body1'} component={'p'}>
|
||||
<Box display={'flex'} flexDirection={'row'}>
|
||||
{data.map(({ key, value }) => (
|
||||
<div style={{ flex: 1, flexDirection: 'column' }}>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
textAlign: 'center',
|
||||
marginBottom: '4px',
|
||||
}}
|
||||
>
|
||||
<Box display={'flex'} flexDirection={'row'}>
|
||||
{data.map(({ key, value }) => (
|
||||
<div style={{ flex: 1, flexDirection: 'column' }} key={key}>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
textAlign: 'center',
|
||||
marginBottom: '4px',
|
||||
}}
|
||||
>
|
||||
<Typography variant={'body1'} component={'p'}>
|
||||
{key}
|
||||
</div>
|
||||
<div style={{ flex: 1, textAlign: 'center' }}>{value}</div>
|
||||
</Typography>
|
||||
</div>
|
||||
))}
|
||||
</Box>
|
||||
</Typography>
|
||||
<div style={{ flex: 1, textAlign: 'center' }}>{value}</div>
|
||||
</div>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const MetricsSummaryTooltip: VFC<{ tooltip: TooltipState | null }> = ({
|
||||
|
@ -39,7 +39,7 @@ const InfoSummary = ({ data }: { data: { key: string; value: number }[] }) => (
|
||||
<Typography variant={'body1'} component={'p'}>
|
||||
<Box display={'flex'} flexDirection={'row'}>
|
||||
{data.map(({ key, value }) => (
|
||||
<div style={{ flex: 1, flexDirection: 'column' }}>
|
||||
<div style={{ flex: 1, flexDirection: 'column' }} key={key}>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
|
Loading…
Reference in New Issue
Block a user