feat: connector on watchlist

assets/components/tracking/ConnectorForm.tsx

@@ -40,6 +40,7 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
             rules={[{required: true, message: t`Required`}]}
         >
             <Select
+                allowClear
                 placeholder={t`Please select a Provider`}
                 suffixIcon={<BankOutlined/>}
                 options={Object.keys(ConnectorProvider).map((c) => ({

assets/components/tracking/WatchlistForm.tsx

@@ -1,7 +1,7 @@
 import {Button, Form, FormInstance, Input, Select, Space} from "antd";
 import {t} from "ttag";
-import {MinusCircleOutlined, PlusOutlined, ThunderboltFilled} from "@ant-design/icons";
-import React, {useState} from "react";
+import {ApiOutlined, MinusCircleOutlined, PlusOutlined, ThunderboltFilled} from "@ant-design/icons";
+import React from "react";
 import {EventAction} from "../../utils/api";
 import {Connector} from "../../utils/api/connectors";
 
@@ -73,13 +73,8 @@ export function WatchlistForm({form, connectors, onCreateWatchlist}: {
         {
             label: t`Send me an email`,
             value: 'email'
-        },
-        {
-            label: t`Buy the domain if available`,
-            value: 'buy'
         }
     ]
-    const [actionsSelect, setActionsSelect] = useState<{ [key: number]: string }>({})
 
     return <Form
         {...formItemLayoutWithOutLabel}
@@ -186,27 +181,8 @@ export function WatchlistForm({form, connectors, onCreateWatchlist}: {
                                            noStyle name={[field.name, 'action']}>
                                     <Select style={{minWidth: 300}} options={triggerActionItems} showSearch
                                             placeholder={t`Then do that`}
-                                            optionFilterProp="label" value={actionsSelect[field.key]}
-                                            onChange={(e) => setActionsSelect({...actionsSelect, [field.key]: e})}/>
+                                            optionFilterProp="label"/>
                                 </Form.Item>
-                                {actionsSelect[field.key] === 'buy' && <Form.Item {...field}
-                                                                                  validateTrigger={['onChange', 'onBlur']}
-                                                                                  rules={[{
-                                                                                      required: true,
-                                                                                      message: t`Required`
-                                                                                  }]}
-                                                                                  noStyle
-                                                                                  name={[field.name, 'connector']}>
-                                    <Select style={{minWidth: 500}} showSearch
-                                            placeholder={t`Connector`}
-                                            optionFilterProp="label"
-                                            options={connectors.map(c => ({
-                                                label: `${c.provider} (${c.id})`,
-                                                value: c.id
-                                            }))}
-                                    />
-                                </Form.Item>
-                                }
                             </Space>
 
                             {fields.length > 1 ? (
@@ -231,6 +207,21 @@ export function WatchlistForm({form, connectors, onCreateWatchlist}: {
                 </>
             )}
         </Form.List>
+        <Form.Item label={t`Connector`}
+                   name='connector'
+        >
+            <Select showSearch
+                    allowClear
+                    style={{width: '60%'}}
+                    placeholder={t`Connector`}
+                    suffixIcon={<ApiOutlined/>}
+                    optionFilterProp="label"
+                    options={connectors.map(c => ({
+                        label: `${c.provider} (${c.id})`,
+                        value: c.id
+                    }))}
+            />
+        </Form.Item>
         <Form.Item>
             <Space>
                 <Button type="primary" htmlType="submit">

assets/pages/tracking/WatchlistPage.tsx

@@ -20,13 +20,14 @@ export default function WatchlistPage() {
     const onCreateWatchlist = (values: {
         domains: string[],
         triggers: { event: string, action: string, connector?: string }[]
+        connector?: string
     }) => {
         const domainsURI = values.domains.map(d => '/api/domains/' + d)
-        postWatchlist(domainsURI, values.triggers.map(({action, event, connector}) => ({
-            action,
-            event,
-            connector: connector !== undefined ? '/api/connectors/' + connector : undefined
-        }))).then((w) => {
+        postWatchlist({
+            domains: domainsURI,
+            triggers: values.triggers,
+            connector: values.connector !== undefined ? '/api/connectors/' + values.connector : undefined
+        }).then((w) => {
             form.resetFields()
             refreshWatchlists()
             messageApi.success(t`Watchlist created !`)

assets/utils/api/index.ts

@@ -16,6 +16,8 @@ export type EventAction =
     | 'enum validation expiration'
     | string
 
+export type TriggerAction = 'email' | string
+
 export interface Event {
     action: EventAction
     date: string
@@ -62,9 +64,10 @@ export interface User {
     roles: string[]
 }
 
-export interface Watchlist {
-    domains: string[]
-    triggers: Event[]
+export interface Watchlist  {
+    domains: string[],
+    triggers: { event: EventAction, action: TriggerAction }[],
+    connector?: string
 }
 
 export async function request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig): Promise<R> {

assets/utils/api/watchlist.ts

@@ -1,4 +1,4 @@
-import {Event, EventAction, request, Watchlist} from "./index";
+import {Event, request, Watchlist} from "./index";
 
 export async function getWatchlists() {
     const response = await request({
@@ -8,24 +8,17 @@ export async function getWatchlists() {
 }
 
 export async function getWatchlist(token: string) {
-    const response = await request<Watchlist>({
+    const response = await request<Watchlist & { token: string }>({
         url: 'watchlists/' + token
     })
     return response.data
 }
 
-export async function postWatchlist(domains: string[], triggers: {
-    action: string,
-    event: EventAction,
-    connector?: string
-}[]) {
+export async function postWatchlist(watchlist: Watchlist) {
     const response = await request<{ token: string }>({
         method: 'POST',
         url: 'watchlists',
-        data: {
-            domains,
-            triggers
-        },
+        data: watchlist,
         headers: {
             "Content-Type": 'application/json'
         }