feat: add trackedEppStatus field in Watchlist

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'