From dbf5d01a62249eddcd202303069f6cf7dd3c4a73 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Mon, 12 May 2025 12:17:18 +0200
Subject: [PATCH] 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>
---
 web/ui/mantine-ui/src/App.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/ui/mantine-ui/src/App.tsx b/web/ui/mantine-ui/src/App.tsx
index 2599c9f5aa..f3f02b41dc 100644
--- a/web/ui/mantine-ui/src/App.tsx
+++ b/web/ui/mantine-ui/src/App.tsx
@@ -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>