From 52690f9ccae9c9967ff9953f151c4702cbe1a7e1 Mon Sep 17 00:00:00 2001
From: Linus Pahl <46300478+linuspahl@users.noreply.github.com>
Date: Tue, 11 Jun 2024 12:52:28 +0200
Subject: [PATCH] Fix client-side routing in `Button` component. (#19267)

* Fix client-side routing in `Button` component.

* Adding changelog.

---------

Co-authored-by: Dennis Oelkers <dennis@graylog.com>
---
 changelog/unreleased/pr-19267.toml                 |  4 ++++
 .../src/components/bootstrap/Button.md             | 14 +++++++++++---
 .../src/components/bootstrap/Button.tsx            |  5 +++--
 3 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 changelog/unreleased/pr-19267.toml

diff --git a/changelog/unreleased/pr-19267.toml b/changelog/unreleased/pr-19267.toml
new file mode 100644
index 000000000000..911d67e3606c
--- /dev/null
+++ b/changelog/unreleased/pr-19267.toml
@@ -0,0 +1,4 @@
+type = "f"
+message = "Fixing full page refreshes for buttons with href."
+
+pulls = ["19267"]
diff --git a/graylog2-web-interface/src/components/bootstrap/Button.md b/graylog2-web-interface/src/components/bootstrap/Button.md
index 788cf8a1fcd1..665a27a4d749 100644
--- a/graylog2-web-interface/src/components/bootstrap/Button.md
+++ b/graylog2-web-interface/src/components/bootstrap/Button.md
@@ -1,6 +1,5 @@
-```js
-import { MenuItem } from 'components/bootstrap';
-
+#### Variants
+```tsx
 const styles = ['Primary', 'Danger', 'Warning', 'Success', 'Info', 'Link', 'Default'];
 
 styles.map((style, i) => {
@@ -13,3 +12,12 @@ styles.map((style, i) => {
   )
 })
 ```
+
+#### Button with a link
+```tsx
+<Button href="https://www.graylog.org"
+        target="_blank"
+        rel="noopener noreferrer">
+  graylog.org
+</Button>
+```
diff --git a/graylog2-web-interface/src/components/bootstrap/Button.tsx b/graylog2-web-interface/src/components/bootstrap/Button.tsx
index a36bff4a9d46..78aedb23c81b 100644
--- a/graylog2-web-interface/src/components/bootstrap/Button.tsx
+++ b/graylog2-web-interface/src/components/bootstrap/Button.tsx
@@ -19,6 +19,7 @@ import type { ColorVariant } from '@graylog/sawmill';
 import { Button as MantineButton } from '@mantine/core';
 import type { DefaultTheme } from 'styled-components';
 import styled, { useTheme, css } from 'styled-components';
+import { Link } from 'react-router-dom';
 
 import type { BsSize } from 'components/bootstrap/types';
 
@@ -211,8 +212,8 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
 
     if (href) {
       return (
-        <StyledButton component="a"
-                      href={href}
+        <StyledButton component={Link}
+                      to={href}
                       target={target}
                       rel={rel}
                       onClick={onClick as (e: React.MouseEvent<HTMLAnchorElement>) => void}