From c1080990ac14602c9389c50f2110c411d24af182 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Mon, 9 Sep 2024 18:55:32 +0200
Subject: [PATCH] Bring back documentation link in the form of an action button

IMO this looks nicer than adding it as a normal page nav link as in
https://github.com/prometheus/prometheus/pull/14878

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 web/ui/mantine-ui/src/App.tsx                 | 29 ++++++++++++-------
 .../src/components/SettingsMenu.tsx           |  7 ++++-
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/web/ui/mantine-ui/src/App.tsx b/web/ui/mantine-ui/src/App.tsx
index 9cba77702..99ed2316d 100644
--- a/web/ui/mantine-ui/src/App.tsx
+++ b/web/ui/mantine-ui/src/App.tsx
@@ -6,6 +6,7 @@ import classes from "./App.module.css";
 import PrometheusLogo from "./images/prometheus-logo.svg";
 
 import {
+  ActionIcon,
   AppShell,
   Box,
   Burger,
@@ -22,6 +23,7 @@ import { useDisclosure } from "@mantine/hooks";
 import {
   IconBell,
   IconBellFilled,
+  IconBook,
   IconChevronDown,
   IconChevronRight,
   IconCloudDataConnection,
@@ -306,17 +308,24 @@ function App() {
             ))}
         </Menu.Dropdown>
       </Menu>
+    </>
+  );
 
-      {/* <Button
+  const navActionIcons = (
+    <>
+      <ThemeSelector />
+      <SettingsMenu />
+      <ActionIcon
         component="a"
         href="https://prometheus.io/docs/prometheus/latest/getting_started/"
-        className={classes.link}
-        leftSection={<IconHelp style={navIconStyle} />}
         target="_blank"
-        px={navLinkXPadding}
+        color="gray"
+        title="Documentation"
+        aria-label="Documentation"
+        size={32}
       >
-        Help
-      </Button> */}
+        <IconBook size={20} />
+      </ActionIcon>
     </>
   );
 
@@ -359,9 +368,8 @@ function App() {
                         {navLinks}
                       </Group>
                     </Group>
-                    <Group visibleFrom="xs" wrap="nowrap">
-                      <ThemeSelector />
-                      <SettingsMenu />
+                    <Group visibleFrom="xs" wrap="nowrap" gap="xs">
+                      {navActionIcons}
                     </Group>
                   </Group>
                   <Burger
@@ -377,8 +385,7 @@ function App() {
               <AppShell.Navbar py="md" px={4} bg="rgb(65, 73, 81)" c="#fff">
                 {navLinks}
                 <Group mt="md" hiddenFrom="xs" justify="center">
-                  <ThemeSelector />
-                  <SettingsMenu />
+                  {navActionIcons}
                 </Group>
               </AppShell.Navbar>
 
diff --git a/web/ui/mantine-ui/src/components/SettingsMenu.tsx b/web/ui/mantine-ui/src/components/SettingsMenu.tsx
index 0d004bd4b..c0631b1b4 100644
--- a/web/ui/mantine-ui/src/components/SettingsMenu.tsx
+++ b/web/ui/mantine-ui/src/components/SettingsMenu.tsx
@@ -18,7 +18,12 @@ const SettingsMenu: FC = () => {
   return (
     <Popover position="bottom" withArrow shadow="md">
       <Popover.Target>
-        <ActionIcon color="gray" aria-label="Settings" size={32}>
+        <ActionIcon
+          color="gray"
+          title="Settings"
+          aria-label="Settings"
+          size={32}
+        >
           <IconSettings size={20} />
         </ActionIcon>
       </Popover.Target>