feat: add link on domain name tags

assets/App.tsx

@@ -96,6 +96,7 @@ export default function App() {
                                 <Route path="/home" element={<TextPage resource='home.md'/>}/>
 
                                 <Route path="/search/domain" element={<DomainSearchPage/>}/>
+                                <Route path="/search/domain/:query" element={<DomainSearchPage/>}/>
                                 <Route path="/search/entity" element={<EntitySearchPage/>}/>
                                 <Route path="/search/nameserver" element={<NameserverSearchPage/>}/>
                                 <Route path="/search/tld" element={<TldPage/>}/>

assets/components/tracking/DomainToTag.tsx

@@ -0,0 +1,21 @@
+import {Tag} from "antd";
+import {DeleteOutlined, ExclamationCircleOutlined} from "@ant-design/icons";
+import punycode from "punycode/punycode";
+import {Link} from "react-router-dom";
+import React from "react";
+
+export function DomainToTag({domain}: { domain: { ldhName: string, deleted: boolean, status: string[] } }) {
+    return <Link to={'/search/domain/' + domain.ldhName}>
+        <Tag
+            color={
+                domain.deleted ? 'magenta' :
+                    domain.status.includes('redemption period') ? 'yellow' :
+                        domain.status.includes('pending delete') ? 'volcano' : 'default'
+            }
+            icon={
+                domain.deleted ? <DeleteOutlined/> :
+                    domain.status.includes('redemption period') ? <ExclamationCircleOutlined/> :
+                        domain.status.includes('pending delete') ? <DeleteOutlined/> : null
+            }>{punycode.toUnicode(domain.ldhName)}</Tag>
+    </Link>
+}

assets/components/tracking/watchlist/TrackedDomainTable.tsx

@@ -7,6 +7,7 @@ import {rdapStatusCodeDetailTranslation} from "../../../utils/functions/rdapTran
 import {eppStatusCodeToColor} from "../../../utils/functions/eppStatusCodeToColor";
 import {Link} from "react-router-dom";
 import {ExceptionOutlined, MonitorOutlined} from '@ant-design/icons'
+import {DomainToTag} from "../DomainToTag";
 
 
 export function TrackedDomainTable() {
@@ -42,7 +43,7 @@ export function TrackedDomainTable() {
 
                 return {
                     key: d.ldhName,
-                    ldhName: d.ldhName,
+                    ldhName: <DomainToTag domain={d}/>,
                     expirationDate: expirationDate ? new Date(expirationDate).toLocaleString() : '-',
                     status: d.status.map(s => <Tooltip
                             placement='bottomLeft'

assets/components/tracking/watchlist/WatchlistCard.tsx

@@ -1,10 +1,9 @@
 import {Card, Divider, Space, Table, Tag, Tooltip} from "antd";
-import {DeleteOutlined, DisconnectOutlined, ExclamationCircleOutlined, LinkOutlined} from "@ant-design/icons";
+import {DisconnectOutlined, LinkOutlined} from "@ant-design/icons";
 import {t} from "ttag";
 import {ViewDiagramWatchlistButton} from "./diagram/ViewDiagramWatchlistButton";
 import {UpdateWatchlistButton} from "./UpdateWatchlistButton";
 import {DeleteWatchlistButton} from "./DeleteWatchlistButton";
-import punycode from "punycode/punycode";
 import React from "react";
 import {Watchlist} from "../../../pages/tracking/WatchlistPage";
 import {Connector} from "../../../utils/api/connectors";
@@ -13,6 +12,7 @@ import {CalendarWatchlistButton} from "./CalendarWatchlistButton";
 import {rdapEventDetailTranslation, rdapEventNameTranslation} from "../../../utils/functions/rdapTranslation";
 
 import {actionToColor} from "../../../utils/functions/actionToColor";
+import {DomainToTag} from "../DomainToTag";
 
 export function WatchlistCard({watchlist, onUpdateWatchlist, connectors, onDelete}: {
     watchlist: Watchlist,
@@ -78,17 +78,7 @@ export function WatchlistCard({watchlist, onUpdateWatchlist, connectors, onDelet
                 pagination={false}
                 style={{width: '100%'}}
                 dataSource={[{
-                    domains: watchlist.domains.map(d => <Tag
-                        color={
-                            d.deleted ? 'magenta' :
-                                d.status.includes('redemption period') ? 'yellow' :
-                                    d.status.includes('pending delete') ? 'volcano' : 'default'
-                        }
-                        icon={
-                            d.deleted ? <DeleteOutlined/> :
-                                d.status.includes('redemption period') ? <ExclamationCircleOutlined/> :
-                                    d.status.includes('pending delete') ? <DeleteOutlined/> : null
-                        }>{punycode.toUnicode(d.ldhName)}</Tag>),
+                    domains: watchlist.domains.map(d => <DomainToTag domain={d}/>),
                     events: watchlist.triggers?.filter(t => t.action === 'email')
                         .map(t => <Tooltip
                                 title={t.event in rdapEventDetailTranslated ? rdapEventDetailTranslated[t.event as keyof typeof rdapEventDetailTranslated] : undefined}>

assets/pages/search/DomainSearchPage.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import {Empty, Flex, FormProps, message, Skeleton} from "antd";
 import {Domain, getDomain} from "../../utils/api";
 import {AxiosError} from "axios"
@@ -6,11 +6,14 @@ import {t} from 'ttag'
 import {DomainSearchBar, FieldType} from "../../components/search/DomainSearchBar";
 import {DomainResult} from "../../components/search/DomainResult";
 import {showErrorAPI} from "../../utils/functions/showErrorAPI";
+import {useParams} from "react-router-dom";
 
 export default function DomainSearchPage() {
     const [domain, setDomain] = useState<Domain | null>()
     const [messageApi, contextHolder] = message.useMessage()
 
+    const {query} = useParams()
+
     const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
         setDomain(null)
         getDomain(values.ldhName).then(d => {
@@ -22,6 +25,10 @@ export default function DomainSearchPage() {
         })
     }
 
+    useEffect(() => {
+        if (query) onFinish({ldhName: query})
+    }, [query])
+
     return <Flex gap="middle" align="center" justify="center" vertical>
         {contextHolder}
         <DomainSearchBar onFinish={onFinish}/>