wip: refactor watchlist triggers

assets/components/tracking/watchlist/UpdateWatchlistButton.tsx

@@ -62,6 +62,7 @@ export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}
                     }}
                     connectors={connectors}
                     isCreation={false}
+                    watchList={watchlist}
                 />
             </Drawer>
         </>

assets/components/tracking/watchlist/WatchlistForm.tsx

@@ -2,12 +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 from 'react'
+import React, {useState} 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} from '../../../utils/api'
+import {EventAction, putWatchlistTrigger, Watchlist} from '../../../utils/api'
 import {formItemLayoutWithOutLabel} from "../../../utils/providers"
 
 type TagRender = SelectProps['tagRender']
@@ -23,11 +23,12 @@ const formItemLayout = {
     }
 }
 
-export function WatchlistForm({form, connectors, onFinish, isCreation}: {
+export function WatchlistForm({form, connectors, onFinish, isCreation, watchList}: {
     form: FormInstance
     connectors: Array<Connector & { id: string }>
     onFinish: (values: { domains: string[], triggers: string[], token: string }) => void
-    isCreation: boolean
+    isCreation: boolean,
+    watchList?: Watchlist,
 }) {
     const rdapEventNameTranslated = rdapEventNameTranslation()
     const rdapEventDetailTranslated = rdapEventDetailTranslation()
@@ -59,6 +60,32 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
         )
     }
 
+    const [triggersLoading, setTriggersLoading] = useState(false);
+
+    const createTrigger = async (event: string) => {
+        if (isCreation) return
+
+        setTriggersLoading(true);
+        await putWatchlistTrigger(watchList!.token, { // FIXME this 500s
+            watchList: watchList!['@id'],
+            event,
+            action: 'email',
+        });
+        await putWatchlistTrigger(watchList!.token, {
+            watchList: watchList!['@id'],
+            event,
+            action: 'chat',
+        });
+        setTriggersLoading(false);
+    };
+
+    const removeTrigger = async (event: string) => {
+        if (isCreation) return
+
+        setTriggersLoading(true);
+        // TODO
+    };
+
     return (
         <Form
             {...formItemLayoutWithOutLabel}
@@ -169,6 +196,9 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
                     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/pages/tracking/WatchlistPage.tsx

@@ -21,18 +21,10 @@ interface FormValuesType {
 
 const getRequestDataFromForm = (values: FormValuesType) => {
     const domainsURI = values.domains.map(d => '/api/domains/' + d.toLowerCase())
-    let triggers = values.triggers.map(t => ({event: t, action: 'email'}))
 
-    if (values.dsn !== undefined) {
-        triggers = [...triggers, ...values.triggers.map(t => ({
-            event: t,
-            action: 'chat'
-        }))]
-    }
     return {
         name: values.name,
         domains: domainsURI,
-        triggers,
         connector: values.connector !== undefined ? ('/api/connectors/' + values.connector) : undefined,
         dsn: values.dsn
     }
@@ -91,7 +83,8 @@ export default function WatchlistPage() {
             <Divider/>
             {(connectors != null) && (watchlists != null) && watchlists.length > 0 &&
                 <WatchlistsList
-                    watchlists={watchlists} onDelete={refreshWatchlists}
+                    watchlists={watchlists}
+                    onDelete={refreshWatchlists}
                     connectors={connectors}
                     onUpdateWatchlist={onUpdateWatchlist}
                 />}

assets/utils/api/index.ts

@@ -16,7 +16,7 @@ export type EventAction =
     | 'enum validation expiration'
     | string
 
-export type TriggerAction = 'email' | string
+export type TriggerAction = 'email' | 'chat'
 
 export interface Event {
     action: EventAction
@@ -74,19 +74,26 @@ export interface User {
     roles: string[]
 }
 
+export interface WatchlistTrigger {
+    event: EventAction
+    action: TriggerAction
+    watchList?: string
+}
+
 export interface WatchlistRequest {
     name?: string
     domains: string[]
-    triggers: Array<{ event: EventAction, action: TriggerAction }>
+    triggers?: Array<WatchlistTrigger>
     connector?: string
     dsn?: string[]
 }
 
 export interface Watchlist {
+    '@id': string
     name?: string
     token: string
     domains: Domain[]
-    triggers?: Array<{ event: EventAction, action: string }>
+    triggers?: Array<WatchlistTrigger>
     dsn?: string[]
     connector?: {
         id: string

assets/utils/api/watchlist.ts

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