refactor: simplify Watchlist triggers

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[], triggers: string[], token: string }) => Promise<void>
+    onUpdateWatchlist: (values: { domains: string[], trackedEvents: string[], token: string }) => Promise<void>
     connectors: Array<Connector & { id: string }>
 }) {
     const [form] = Form.useForm()
@@ -35,7 +35,7 @@ export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}
                         {name: 'name', value: watchlist.name},
                         {name: 'connector', value: watchlist.connector?.id},
                         {name: 'domains', value: watchlist.domains.map(d => d.ldhName)},
-                        {name: 'triggers', value: [...new Set(watchlist.triggers?.map(t => t.event))]},
+                        {name: 'trackedEvents', value: watchlist.trackedEvents},
                         {name: 'dsn', value: watchlist.dsn}
                     ])
                 }}

assets/components/tracking/watchlist/WatchlistCard.tsx

@@ -15,7 +15,7 @@ import type {Watchlist} from '../../../utils/api'
 
 export function WatchlistCard({watchlist, onUpdateWatchlist, connectors, onDelete}: {
     watchlist: Watchlist
-    onUpdateWatchlist: (values: { domains: string[], triggers: string[], token: string }) => Promise<void>
+    onUpdateWatchlist: (values: { domains: string[], trackedEvents: string[], token: string }) => Promise<void>
     connectors: Array<Connector & { id: string }>
     onDelete: () => void
 }) {
@@ -64,13 +64,12 @@ export function WatchlistCard({watchlist, onUpdateWatchlist, connectors, onDelet
                         {watchlist.domains.map(d => <DomainToTag key={d.ldhName} domain={d}/>)}
                     </Col>
                     <Col span={8}>
-                        {watchlist.triggers?.filter(t => t.action === 'email')
-                            .map(t => <Tooltip
-                                    key={t.event}
-                                    title={rdapEventDetailTranslated[t.event as keyof typeof rdapEventDetailTranslated] || undefined}
+                        {watchlist.trackedEvents?.map(t => <Tooltip
+                                    key={t}
+                                    title={rdapEventDetailTranslated[t as keyof typeof rdapEventDetailTranslated] || undefined}
                                 >
-                                    <Tag color={actionToColor(t.event)}>
-                                        {rdapEventNameTranslated[t.event as keyof typeof rdapEventNameTranslated]}
+                                    <Tag color={actionToColor(t)}>
+                                        {rdapEventNameTranslated[t as keyof typeof rdapEventNameTranslated]}
                                     </Tag>
                                 </Tooltip>
                             )}

assets/components/tracking/watchlist/WatchlistForm.tsx

@@ -2,13 +2,12 @@ import type { FormInstance, SelectProps} from 'antd'
 import {Button, Form, Input, Select, Space, Tag, Tooltip, Typography} from 'antd'
 import {t} from 'ttag'
 import {ApiOutlined, MinusCircleOutlined, PlusOutlined} from '@ant-design/icons'
-import React, {useState} from 'react'
+import React from 'react'
 import type {Connector} from '../../../utils/api/connectors'
 import {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 { createWatchlistTrigger, deleteWatchlistTrigger} from '../../../utils/api'
 import {formItemLayoutWithOutLabel} from "../../../utils/providers"
 
 type TagRender = SelectProps['tagRender']
@@ -24,10 +23,10 @@ const formItemLayout = {
     }
 }
 
-export function WatchlistForm({form, connectors, onFinish, isCreation, watchList}: {
+export function WatchlistForm({form, connectors, onFinish, isCreation}: {
     form: FormInstance
     connectors: Array<Connector & { id: string }>
-    onFinish: (values: { domains: string[], triggers: string[], token: string }) => void
+    onFinish: (values: { domains: string[], trackedEvents: string[], token: string }) => void
     isCreation: boolean,
     watchList?: Watchlist,
 }) {
@@ -61,48 +60,12 @@ export function WatchlistForm({form, connectors, onFinish, isCreation, watchList
         )
     }
 
-    const [triggersLoading, setTriggersLoading] = useState(false)
-
-    const createTrigger = async (event: string) => {
-        if (isCreation) return
-
-        setTriggersLoading(true)
-        await createWatchlistTrigger(watchList!.token, {
-            watchList: watchList!['@id'],
-            event,
-            action: 'email',
-        })
-        await createWatchlistTrigger(watchList!.token, {
-            watchList: watchList!['@id'],
-            event,
-            action: 'chat',
-        })
-        setTriggersLoading(false)
-    }
-
-    const removeTrigger = async (event: string) => {
-        if (isCreation) return
-
-        setTriggersLoading(true)
-        await deleteWatchlistTrigger(watchList!.token, {
-            watchList: watchList!['@id'],
-            event,
-            action: 'email',
-        })
-        await deleteWatchlistTrigger(watchList!.token, {
-            watchList: watchList!['@id'],
-            event,
-            action: 'chat',
-        })
-        setTriggersLoading(false)
-    }
-
     return (
         <Form
             {...formItemLayoutWithOutLabel}
             form={form}
             onFinish={onFinish}
-            initialValues={{triggers: ['last changed', 'transfer', 'expiration', 'deletion']}}
+            initialValues={{trackedEvents: ['last changed', 'transfer', 'expiration', 'deletion']}}
         >
 
             <Form.Item name='token' hidden>
@@ -191,7 +154,7 @@ export function WatchlistForm({form, connectors, onFinish, isCreation, watchList
             </Form.List>
             <Form.Item
                 label={t`Tracked events`}
-                name='triggers'
+                name='trackedEvents'
                 rules={[{required: true, message: t`At least one trigger`, type: 'array'}]}
                 labelCol={{
                     xs: {span: 24},
@@ -207,9 +170,6 @@ export function WatchlistForm({form, connectors, onFinish, isCreation, watchList
                     mode='multiple'
                     tagRender={triggerTagRenderer}
                     style={{width: '100%'}}
-                    onSelect={createTrigger}
-                    onDeselect={removeTrigger}
-                    loading={triggersLoading}
                     options={Object.keys(rdapEventNameTranslated).map(e => ({
                         value: e,
                         title: rdapEventDetailTranslated[e as keyof typeof rdapEventDetailTranslated] || undefined,

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[], triggers: string[], token: string }) => Promise<void>
+    onUpdateWatchlist: (values: { domains: string[], trackedEvents: string[], token: string }) => Promise<void>
     connectors: Array<Connector & { id: string }>
 }) {
     return (

assets/pages/tracking/WatchlistPage.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react'
 import {Card, Divider, Flex, Form, message} from 'antd'
-import type {Watchlist, WatchlistTrigger} from '../../utils/api'
+import type {Watchlist} from '../../utils/api'
 import {getWatchlists, postWatchlist, putWatchlist} from '../../utils/api'
 import type {AxiosError} from 'axios'
 import {t} from 'ttag'
@@ -14,37 +14,17 @@ import {showErrorAPI} from '../../utils/functions/showErrorAPI'
 interface FormValuesType {
     name?: string
     domains: string[]
-    triggers: string[]
+    trackedEvents: string[]
     connector?: string
     dsn?: string[]
 }
 
 const getRequestDataFromFormCreation = (values: FormValuesType) => {
     const domainsURI = values.domains.map(d => '/api/domains/' + d.toLowerCase())
-    let triggers: WatchlistTrigger[] = values.triggers.map(t => ({event: t, action: 'email'}))
-
-    if (values.dsn !== undefined) {
-        triggers = [...triggers, ...values.triggers.map((t): WatchlistTrigger => ({
-            event: t,
-            action: 'chat'
-        }))]
-    }
-
-    return {
-        name: values.name,
-        domains: domainsURI,
-        triggers,
-        connector: values.connector !== undefined ? ('/api/connectors/' + values.connector) : undefined,
-        dsn: values.dsn
-    }
-}
-
-const getRequestDataFromFormUpdate = (values: FormValuesType) => {
-    const domainsURI = values.domains.map(d => '/api/domains/' + d.toLowerCase())
-
     return {
         name: values.name,
         domains: domainsURI,
+        trackedEvents: values.trackedEvents,
         connector: values.connector !== undefined ? ('/api/connectors/' + values.connector) : undefined,
         dsn: values.dsn
     }
@@ -68,7 +48,7 @@ export default function WatchlistPage() {
 
     const onUpdateWatchlist = async (values: FormValuesType & { token: string }) => await putWatchlist({
             token: values.token,
-            ...getRequestDataFromFormUpdate(values)
+            ...getRequestDataFromFormCreation(values)
         }
     ).then(() => {
         refreshWatchlists()

assets/utils/api/index.ts

@@ -16,8 +16,6 @@ export type EventAction =
     | 'enum validation expiration'
     | string
 
-export type TriggerAction = 'email' | 'chat'
-
 export interface Event {
     action: EventAction
     date: string
@@ -79,16 +77,10 @@ export interface User {
     roles: string[]
 }
 
-export interface WatchlistTrigger {
-    event: EventAction
-    action: TriggerAction
-    watchList?: string
-}
-
 export interface WatchlistRequest {
     name?: string
     domains: string[]
-    triggers?: Array<WatchlistTrigger>
+    trackedEvents?: string[]
     connector?: string
     dsn?: string[]
 }
@@ -98,7 +90,7 @@ export interface Watchlist {
     name?: string
     token: string
     domains: Domain[]
-    triggers?: Array<WatchlistTrigger>
+    trackedEvents?: string[]
     dsn?: string[]
     connector?: {
         id: string

assets/utils/api/watchlist.ts

@@ -1,4 +1,4 @@
-import type {TrackedDomains, Watchlist, WatchlistRequest, WatchlistTrigger} from './index'
+import type {TrackedDomains, Watchlist, WatchlistRequest} from './index'
 import {request} from './index'
 
 interface WatchlistList {
@@ -56,20 +56,3 @@ export async function getTrackedDomainList(params: { page: number, itemsPerPage:
     })
     return response.data
 }
-
-export async function createWatchlistTrigger(watchListToken: string, watchListTrigger: WatchlistTrigger): Promise<WatchlistTrigger> {
-    const response = await request<WatchlistTrigger>({
-        method: 'POST',
-        url: `watchlist-triggers`,
-        data: watchListTrigger,
-    })
-    return response.data
-}
-
-export async function deleteWatchlistTrigger(watchListToken: string, watchListTrigger: WatchlistTrigger): Promise<void> {
-    await request<void>({
-        method: 'DELETE',
-        url: `watchlists/${watchListToken}/triggers/${watchListTrigger.action}/${watchListTrigger.event}`,
-        data: watchListTrigger
-    })
-}