Merge pull request #14882 from prometheus/new-ui-help-button

Bring back documentation link in the form of an action button

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
+        <IconBook size={20} />
-      </Button> */}
+      </ActionIcon>
     </>
   );
 
@@ -359,9 +368,8 @@ function App() {
                         {navLinks}
                       </Group>
                     </Group>
-                    <Group visibleFrom="xs" wrap="nowrap">
+                    <Group visibleFrom="xs" wrap="nowrap" gap="xs">
-                      <ThemeSelector />
+                      {navActionIcons}
-                      <SettingsMenu />
                     </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 />
+                  {navActionIcons}
-                  <SettingsMenu />
                 </Group>
               </AppShell.Navbar>
 

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>