feat: add trackedEppStatus field in Watchlist

assets/components/tracking/watchlist/UpdateWatchlistButton.tsx

@@ -8,7 +8,7 @@ import type {Watchlist} from '../../../utils/api'
 
 export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}: {
     watchlist: Watchlist
-    onUpdateWatchlist: (values: { domains: string[], trackedEvents: string[], token: string }) => Promise<void>
+    onUpdateWatchlist: (values: { domains: string[], trackedEvents: string[], trackedEppStatus: string[], token: string }) => Promise<void>
     connectors: Array<Connector & { id: string }>
 }) {
     const [form] = Form.useForm()
@@ -36,6 +36,7 @@ export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}
                         {name: 'connector', value: watchlist.connector?.id},
                         {name: 'domains', value: watchlist.domains.map(d => d.ldhName)},
                         {name: 'trackedEvents', value: watchlist.trackedEvents},
+                        {name: 'trackedEppStatus', value: watchlist.trackedEppStatus},
                         {name: 'dsn', value: watchlist.dsn}
                     ])
                 }}

assets/components/tracking/watchlist/WatchlistCard.tsx

@@ -7,20 +7,31 @@ import {DeleteWatchlistButton} from './DeleteWatchlistButton'
 import React from 'react'
 import type {Connector} from '../../../utils/api/connectors'
 import {CalendarWatchlistButton} from './CalendarWatchlistButton'
-import {rdapEventDetailTranslation, rdapEventNameTranslation} from '../../../utils/functions/rdapTranslation'
+import {
+    rdapDomainStatusCodeDetailTranslation,
+    rdapEventDetailTranslation,
+    rdapEventNameTranslation
+} from '../../../utils/functions/rdapTranslation'
 
 import {actionToColor} from '../../../utils/functions/actionToColor'
 import {DomainToTag} from '../../../utils/functions/DomainToTag'
 import type {Watchlist} from '../../../utils/api'
+import {eppStatusCodeToColor} from "../../../utils/functions/eppStatusCodeToColor"
 
 export function WatchlistCard({watchlist, onUpdateWatchlist, connectors, onDelete}: {
     watchlist: Watchlist
-    onUpdateWatchlist: (values: { domains: string[], trackedEvents: string[], token: string }) => Promise<void>
+    onUpdateWatchlist: (values: {
+        domains: string[],
+        trackedEvents: string[],
+        trackedEppStatus: string[],
+        token: string
+    }) => Promise<void>
     connectors: Array<Connector & { id: string }>
     onDelete: () => void
 }) {
     const rdapEventNameTranslated = rdapEventNameTranslation()
     const rdapEventDetailTranslated = rdapEventDetailTranslation()
+    const rdapDomainStatusCodeDetailTranslated = rdapDomainStatusCodeDetailTranslation()
 
     return (
         <>
@@ -61,18 +72,56 @@ export function WatchlistCard({watchlist, onUpdateWatchlist, connectors, onDelet
                 <Card.Meta description={watchlist.token} style={{marginBottom: '1em'}}/>
                 <Row gutter={16}>
                     <Col span={16}>
-                        {watchlist.domains.map(d => <DomainToTag key={d.ldhName} domain={d}/>)}
+                        {watchlist.domains.map(d => (
+                            <DomainToTag key={d.ldhName} domain={d}/>
+                        ))}
                     </Col>
+
                     <Col span={8}>
-                        {watchlist.trackedEvents?.map(t => <Tooltip
-                                    key={t}
-                                    title={rdapEventDetailTranslated[t as keyof typeof rdapEventDetailTranslated] || undefined}
-                                >
-                                    <Tag color={actionToColor(t)}>
-                                        {rdapEventNameTranslated[t as keyof typeof rdapEventNameTranslated]}
-                                    </Tag>
-                                </Tooltip>
-                            )}
+                        <>
+                            <div style={{
+                                fontWeight: 500,
+                                marginBottom: '0.5em',
+                                color: '#555',
+                                fontSize: '0.9em'
+                            }}>
+                                {t`Tracked events`}
+                            </div>
+                            <div style={{marginBottom: '1em'}}>
+                                {watchlist.trackedEvents?.map(t => (
+                                    <Tooltip
+                                        key={t}
+                                        title={rdapEventDetailTranslated[t as keyof typeof rdapEventDetailTranslated]}
+                                    >
+                                        <Tag color={actionToColor(t)} style={{marginBottom: 4}}>
+                                            {rdapEventNameTranslated[t as keyof typeof rdapEventNameTranslated]}
+                                        </Tag>
+                                    </Tooltip>
+                                ))}
+                            </div>
+                        </>
+                        <>
+                            <div style={{
+                                fontWeight: 500,
+                                marginBottom: '0.5em',
+                                color: '#555',
+                                fontSize: '0.9em'
+                            }}>
+                                {t`Tracked EPP status`}
+                            </div>
+                            <div>
+                                {watchlist.trackedEppStatus?.map(t => (
+                                    <Tooltip
+                                        key={t}
+                                        title={rdapDomainStatusCodeDetailTranslated[t as keyof typeof rdapDomainStatusCodeDetailTranslated]}
+                                    >
+                                        <Tag color={eppStatusCodeToColor(t)} style={{marginBottom: 4}}>
+                                            {t}
+                                        </Tag>
+                                    </Tooltip>
+                                ))}
+                            </div>
+                        </>
                     </Col>
                 </Row>
             </Card>

assets/components/tracking/watchlist/WatchlistForm.tsx

@@ -4,11 +4,16 @@ import {t} from 'ttag'
 import {ApiOutlined, MinusCircleOutlined, PlusOutlined} from '@ant-design/icons'
 import React from 'react'
 import type {Connector} from '../../../utils/api/connectors'
-import {rdapEventDetailTranslation, rdapEventNameTranslation} from '../../../utils/functions/rdapTranslation'
+import {
+    rdapDomainStatusCodeDetailTranslation,
+    rdapEventDetailTranslation,
+    rdapEventNameTranslation
+} from '../../../utils/functions/rdapTranslation'
 import {actionToColor} from '../../../utils/functions/actionToColor'
 import {actionToIcon} from '../../../utils/functions/actionToIcon'
 import type {EventAction, Watchlist} from '../../../utils/api'
 import {formItemLayoutWithOutLabel} from "../../../utils/providers"
+import {eppStatusCodeToColor} from "../../../utils/functions/eppStatusCodeToColor"
 
 type TagRender = SelectProps['tagRender']
 
@@ -26,14 +31,15 @@ const formItemLayout = {
 export function WatchlistForm({form, connectors, onFinish, isCreation}: {
     form: FormInstance
     connectors: Array<Connector & { id: string }>
-    onFinish: (values: { domains: string[], trackedEvents: string[], token: string }) => void
+    onFinish: (values: { domains: string[], trackedEvents: string[], trackedEppStatus: string[], token: string }) => void
     isCreation: boolean,
     watchList?: Watchlist,
 }) {
     const rdapEventNameTranslated = rdapEventNameTranslation()
     const rdapEventDetailTranslated = rdapEventDetailTranslation()
+    const rdapDomainStatusCodeDetailTranslated = rdapDomainStatusCodeDetailTranslation()
 
-    const triggerTagRenderer: TagRender = ({value, closable, onClose}: {
+    const eventActionTagRenderer: TagRender = ({value, closable, onClose}: {
         value: EventAction
         closable: boolean
         onClose: () => void
@@ -60,12 +66,41 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
         )
     }
 
+    const domainStatusTagRenderer: TagRender = ({value, closable, onClose}: {
+        value: EventAction
+        closable: boolean
+        onClose: () => void
+    }) => {
+        const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+            event.preventDefault()
+            event.stopPropagation()
+        }
+        return (
+            <Tooltip
+                title={rdapDomainStatusCodeDetailTranslated[value as keyof typeof rdapDomainStatusCodeDetailTranslated] || undefined}
+            >
+                <Tag
+                    color={eppStatusCodeToColor(value)}
+                    onMouseDown={onPreventMouseDown}
+                    closable={closable}
+                    onClose={onClose}
+                    style={{marginInlineEnd: 4}}
+                >
+                    {value}
+                </Tag>
+            </Tooltip>
+        )
+    }
+
     return (
         <Form
             {...formItemLayoutWithOutLabel}
             form={form}
             onFinish={onFinish}
-            initialValues={{trackedEvents: ['last changed', 'transfer', 'expiration', 'deletion']}}
+            initialValues={{
+                trackedEvents: ['last changed', 'transfer', 'expiration', 'deletion'],
+                trackedEppStatus: ['redemption period', 'pending delete', 'client hold', 'server hold']
+        }}
         >
 
             <Form.Item name='token' hidden>
@@ -155,7 +190,7 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
             <Form.Item
                 label={t`Tracked events`}
                 name='trackedEvents'
-                rules={[{required: true, message: t`At least one trigger`, type: 'array'}]}
+                rules={[{required: true, message: t`At least one event`, type: 'array'}]}
                 labelCol={{
                     xs: {span: 24},
                     sm: {span: 4}
@@ -168,7 +203,7 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
             >
                 <Select
                     mode='multiple'
-                    tagRender={triggerTagRenderer}
+                    tagRender={eventActionTagRenderer}
                     style={{width: '100%'}}
                     options={Object.keys(rdapEventNameTranslated).map(e => ({
                         value: e,
@@ -178,6 +213,32 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
                 />
             </Form.Item>
 
+            <Form.Item
+                label={t`Tracked EPP status`}
+                name='trackedEppStatus'
+                rules={[{required: true, message: t`At least one EPP status`, type: 'array'}]}
+                labelCol={{
+                    xs: {span: 24},
+                    sm: {span: 4}
+                }}
+                wrapperCol={{
+                    md: {span: 12},
+                    sm: {span: 20}
+                }}
+                required
+            >
+                <Select
+                    mode='multiple'
+                    tagRender={domainStatusTagRenderer}
+                    style={{width: '100%'}}
+                    options={Object.keys(rdapDomainStatusCodeDetailTranslated).map(e => ({
+                        value: e,
+                        title: rdapDomainStatusCodeDetailTranslated[e as keyof typeof rdapDomainStatusCodeDetailTranslated] || undefined,
+                        label: e
+                    }))}
+                />
+            </Form.Item>
+
             <Form.Item
                 label={t`Connector`}
                 name='connector'

assets/components/tracking/watchlist/WatchlistsList.tsx

@@ -6,7 +6,7 @@ import type {Watchlist} from '../../../utils/api'
 export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connectors}: {
     watchlists: Watchlist[]
     onDelete: () => void
-    onUpdateWatchlist: (values: { domains: string[], trackedEvents: string[], token: string }) => Promise<void>
+    onUpdateWatchlist: (values: { domains: string[], trackedEvents: string[], trackedEppStatus: string[], token: string }) => Promise<void>
     connectors: Array<Connector & { id: string }>
 }) {
     return (