feat: add watchlist name

assets/components/tracking/WatchlistsList.tsx

@@ -6,6 +6,7 @@ import React from "react";
 import useBreakpoint from "../../hooks/useBreakpoint";
 import {actionToColor, domainEvent} from "../search/EventTimeline";
 import {Watchlist} from "../../pages/tracking/WatchlistPage";
+import punycode from "punycode/punycode";
 
 const {useToken} = theme;
 
@@ -31,7 +32,7 @@ export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[]
         {watchlists.map(watchlist =>
             <>
                 <Card
-                    title={t`Watchlist`}
+                    title={t`Watchlist` + (watchlist.name ? ` (${watchlist.name})` : '')}
                     size='small'
                     extra={<Popconfirm
                         title={t`Delete the Watchlist`}
@@ -49,7 +50,7 @@ export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[]
                         columns={columns}
                         pagination={false}
                         dataSource={[{
-                            domains: watchlist.domains.map(d => <Tag>{d.ldhName}</Tag>),
+                            domains: watchlist.domains.map(d => <Tag>{punycode.toUnicode(d.ldhName)}</Tag>),
                             events: watchlist.triggers?.filter(t => t.action === 'email')
                                 .map(t => <Tag color={actionToColor(t.event)}>
                                         {domainEventTranslated[t.event as keyof typeof domainEventTranslated]}

assets/pages/tracking/WatchlistPage.tsx

@@ -9,6 +9,7 @@ import {Connector, getConnectors} from "../../utils/api/connectors";
 
 
 export type Watchlist = {
+    name?: string
     token: string,
     domains: { ldhName: string }[],
     triggers?: { event: EventAction, action: string }[],
@@ -23,12 +24,14 @@ export default function WatchlistPage() {
     const [connectors, setConnectors] = useState<(Connector & { id: string })[] | null>()
 
     const onCreateWatchlist = (values: {
+        name?: string
         domains: string[],
         emailTriggers: string[]
         connector?: string
     }) => {
         const domainsURI = values.domains.map(d => '/api/domains/' + d)
         postWatchlist({
+            name: values.name,
             domains: domainsURI,
             triggers: values.emailTriggers.map(t => ({event: t, action: 'email'})),
             connector: values.connector !== undefined ? '/api/connectors/' + values.connector : undefined

assets/utils/api/index.ts

@@ -65,6 +65,7 @@ export interface User {
 }
 
 export interface Watchlist {
+    name?: string
     domains: string[],
     triggers: { event: EventAction, action: TriggerAction }[],
     connector?: string