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 )} - + Jenkins - + - GitHub + + Git + 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 ( + + {children} + + ) +} + +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 n/a @@ -14,10 +15,8 @@ const UrlDisplay = ({ url, showCopy = true, showLink = false }) => { <> {showLink ? ( - { {url} - + ) : ( <>