Fix full-page re-rendering when opening status nav menu (#16590)

When opening the status pages menu while already viewing one of the
status pages, the whole page would be re-rendered because the menu target's
default action of following the current page's URL was not prevented. Also,
we don't need to use a NavLink component for the menu target when we are
not viewing a status page, because then the component won't need to be
highlighted anyways.

Discovered + fixed with the help of react-scan.

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2025-05-12 12:17:18 +02:00 committed by GitHub
parent 5c06804df8
commit dbf5d01a62
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -224,6 +224,7 @@ function App() {
leftSection={p.icon}
rightSection={<IconChevronDown style={navIconStyle} />}
px={navLinkXPadding}
onClick={(e) => e.preventDefault()}
>
Status <IconChevronRight style={navIconStyle} /> {p.title}
</Button>
@ -236,14 +237,9 @@ function App() {
element={
<Menu.Target>
<Button
component={NavLink}
to="/"
className={classes.link}
leftSection={<IconServer style={navIconStyle} />}
rightSection={<IconChevronDown style={navIconStyle} />}
onClick={(e) => {
e.preventDefault();
}}
px={navLinkXPadding}
>
Status
@ -339,8 +335,12 @@ function App() {
>
<Group gap={10} wrap="nowrap">
<img src={PrometheusLogo} height={30} />
<Text hiddenFrom="sm" fz={20}>Prometheus</Text>
<Text visibleFrom="md" fz={20}>Prometheus</Text>
<Text hiddenFrom="sm" fz={20}>
Prometheus
</Text>
<Text visibleFrom="md" fz={20}>
Prometheus
</Text>
<Text fz={20}>{agentMode && "Agent"}</Text>
</Group>
</Link>