Skip to content

Commit

Permalink
fix: invalid HTML and react errors in insights pages (#6593)
Browse files Browse the repository at this point in the history
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:

![image](https://github.com/Unleash/unleash/assets/17786332/ffffd3cc-1236-458f-8449-3310b0044f14)



And here's after:

![image](https://github.com/Unleash/unleash/assets/17786332/9ad2d8f7-9f9e-492f-932e-a194683b1d75)
  • Loading branch information
thomasheartman committed Mar 18, 2024
1 parent a3d06bd commit c2015c6
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 27 deletions.
20 changes: 10 additions & 10 deletions frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx
Expand Up @@ -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);
Expand Down
Expand Up @@ -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 }> = ({
Expand Down
Expand Up @@ -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,
Expand Down

0 comments on commit c2015c6

Please sign in to comment.