Fix client-side routing in Button component. (#19267)

* Fix client-side routing in `Button` component. * Adding changelog. --------- Co-authored-by: Dennis Oelkers <[email protected]>
Graylog2 · Jun 11, 2024 · 52690f9 · 52690f9
1 parent 1ab6c33
commit 52690f9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/changelog/unreleased/pr-19267.toml 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
@@ -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
@@ -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}