From c0609cb09740567ed5ef28f1e18ca75fb5878b86 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sun, 23 Aug 2026 22:33:36 +0100
Subject: [PATCH] Refactor Link Handling in Dashboard Components

- Introduced ExternalLink component to manage external links consistently across the application, enhancing user experience in Electron environments.
- Updated About and UrlDisplay components to utilize ExternalLink for improved link handling and to ensure proper behavior in Electron.
- Removed direct usage of Ant Design's Link component in favor of the new ExternalLink, streamlining the codebase and enhancing maintainability.
---
 src/components/Dashboard/Management/About.jsx | 11 +++--
 .../Dashboard/common/ExternalLink.jsx         | 40 +++++++++++++++++++
 .../Dashboard/common/UrlDisplay.jsx           |  9 ++---
 3 files changed, 51 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Dashboard/common/ExternalLink.jsx

diff --git a/src/components/Dashboard/Management/About.jsx b/src/components/Dashboard/Management/About.jsx
index a7022e48..e97fbeb0 100644
--- a/src/components/Dashboard/Management/About.jsx
+++ b/src/components/Dashboard/Management/About.jsx
@@ -21,7 +21,8 @@ import { AppUpdateContext } from '../context/AppUpdateContext'
 import { useMediaQuery } from 'react-responsive'
 import FarmControlAppIcon from '../../Logos/FarmControlAppIcon'
 import SoftwareUpdateIcon from '../../Icons/SoftwareUpdateIcon'
-const { Title, Text, Link } = Typography
+import ExternalLink from '../common/ExternalLink'
+const { Title, Text } = Typography
 
 const About = () => {
   const [collapseState, updateCollapseState] = useCollapseState('About', {
@@ -171,11 +172,13 @@ const About = () => {
                       Development
                     </Tag>
                   )}
-                  <Link href='https://ci.tombutcher.work/job/farmcontrol'>
+                  <ExternalLink href='https://ci.tombutcher.work/job/farmcontrol'>
                     Jenkins
-                  </Link>
+                  </ExternalLink>
                   <Divider type='vertical' style={{ margin: 0 }} />
-                  <Link href='https://github.com/farmcontrol'>GitHub</Link>
+                  <ExternalLink href='https://git.tombutcher.work/farmcontrol'>
+                    Git
+                  </ExternalLink>
                 </Flex>
               </Flex>
             </Flex>
diff --git a/src/components/Dashboard/common/ExternalLink.jsx b/src/components/Dashboard/common/ExternalLink.jsx
new file mode 100644
index 00000000..71e7295c
--- /dev/null
+++ b/src/components/Dashboard/common/ExternalLink.jsx
@@ -0,0 +1,40 @@
+import { useContext } from 'react'
+import PropTypes from 'prop-types'
+import { Typography } from 'antd'
+import { ElectronContext } from '../context/ElectronContext'
+
+const { Link } = Typography
+
+const ExternalLink = ({ href, children, onClick, ...props }) => {
+  const { isElectron, openExternalUrl } = useContext(ElectronContext)
+
+  const handleClick = (event) => {
+    onClick?.(event)
+    if (event.defaultPrevented) return
+
+    if (isElectron) {
+      event.preventDefault()
+      openExternalUrl(href)
+    }
+  }
+
+  return (
+    <Link
+      {...props}
+      href={href}
+      target={isElectron ? undefined : '_blank'}
+      rel={isElectron ? undefined : 'noopener noreferrer'}
+      onClick={handleClick}
+    >
+      {children}
+    </Link>
+  )
+}
+
+ExternalLink.propTypes = {
+  href: PropTypes.string.isRequired,
+  children: PropTypes.node,
+  onClick: PropTypes.func
+}
+
+export default ExternalLink
diff --git a/src/components/Dashboard/common/UrlDisplay.jsx b/src/components/Dashboard/common/UrlDisplay.jsx
index a48128c3..6328aa0c 100644
--- a/src/components/Dashboard/common/UrlDisplay.jsx
+++ b/src/components/Dashboard/common/UrlDisplay.jsx
@@ -4,8 +4,9 @@ import Tooltip from './Tooltip'
 import LinkIcon from '../../Icons/LinkIcon'
 import CopyButton from './CopyButton'
 import ElipsisText from './ElipsisText'
+import ExternalLink from './ExternalLink'
 
-const { Text, Link } = Typography
+const { Text } = Typography
 
 const UrlDisplay = ({ url, showCopy = true, showLink = false }) => {
   if (!url) return <Text type='secondary'>n/a</Text>
@@ -14,10 +15,8 @@ const UrlDisplay = ({ url, showCopy = true, showLink = false }) => {
     <>
       <Flex style={{ minWidth: 0 }}>
         {showLink ? (
-          <Link
+          <ExternalLink
             href={url}
-            target='_blank'
-            rel='noopener noreferrer'
             style={{
               marginRight: 8,
               minWidth: 0,
@@ -29,7 +28,7 @@ const UrlDisplay = ({ url, showCopy = true, showLink = false }) => {
             <ElipsisText style={{ display: 'block' }}>
               {url}
             </ElipsisText>
-          </Link>
+          </ExternalLink>
         ) : (
           <>
             <ElipsisText style={{ marginRight: 8, minWidth: 0 }}>