feat: update Watchlist

assets/components/tracking/WatchlistForm.tsx

@@ -25,19 +25,20 @@ const formItemLayoutWithOutLabel = {
     },
 };
 
-export function WatchlistForm({form, connectors, onCreateWatchlist}: {
+export function WatchlistForm({form, connectors, onFinish, isCreation}: {
     form: FormInstance,
     connectors: (Connector & { id: string })[]
-    onCreateWatchlist: (values: { domains: string[], emailTriggers: string[] }) => void
+    onFinish: (values: { domains: string[], emailTriggers: string[], token: string }) => void
+    isCreation: boolean
 }) {
     const domainEventTranslated = domainEvent()
 
     const triggerTagRenderer: TagRender = (props) => {
         const {value, closable, onClose} = props;
         const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
-            event.preventDefault();
-            event.stopPropagation();
-        };
+            event.preventDefault()
+            event.stopPropagation()
+        }
         return (
             <Tag
                 color={actionToColor(value)}
@@ -54,9 +55,14 @@ export function WatchlistForm({form, connectors, onCreateWatchlist}: {
     return <Form
         {...formItemLayoutWithOutLabel}
         form={form}
-        onFinish={onCreateWatchlist}
+        onFinish={onFinish}
         initialValues={{emailTriggers: ['last changed', 'transfer', 'expiration', 'deletion']}}
     >
+
+        <Form.Item name='token' hidden>
+            <Input hidden/>
+        </Form.Item>
+
         <Form.Item label={t`Name`}
                    name='name'
                    labelCol={{
@@ -183,7 +189,7 @@ export function WatchlistForm({form, connectors, onCreateWatchlist}: {
         <Form.Item>
             <Space>
                 <Button type="primary" htmlType="submit">
-                    {t`Create`}
+                    {isCreation ? t`Create` : t`Update`}
                 </Button>
                 <Button type="default" htmlType="reset">
                     {t`Reset`}

assets/components/tracking/WatchlistsList.tsx

@@ -1,20 +1,27 @@
-import {Card, Divider, Popconfirm, Space, Table, Tag, theme, Typography} from "antd";
+import {Button, Card, Divider, Drawer, Form, Popconfirm, Space, Table, Tag, theme, Typography} from "antd";
 import {t} from "ttag";
 import {deleteWatchlist} from "../../utils/api";
-import {CalendarFilled, DeleteFilled, DisconnectOutlined, LinkOutlined} from "@ant-design/icons";
-import React from "react";
+import {CalendarFilled, DeleteFilled, DisconnectOutlined, EditOutlined, LinkOutlined} from "@ant-design/icons";
+import React, {useState} from "react";
 import useBreakpoint from "../../hooks/useBreakpoint";
 import {actionToColor, domainEvent} from "../search/EventTimeline";
 import {Watchlist} from "../../pages/tracking/WatchlistPage";
 import punycode from "punycode/punycode";
+import {WatchlistForm} from "./WatchlistForm";
+import {Connector} from "../../utils/api/connectors";
 
 const {useToken} = theme;
 
-export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[], onDelete: () => void }) {
+export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connectors}: {
+    watchlists: Watchlist[],
+    onDelete: () => void,
+    onUpdateWatchlist: (values: { domains: string[], emailTriggers: string[], token: string }) => void,
+    connectors: (Connector & { id: string })[]
+}) {
     const {token} = useToken()
     const sm = useBreakpoint('sm')
-
     const domainEventTranslated = domainEvent()
+    const [form] = Form.useForm()
 
     const columns = [
         {
@@ -27,6 +34,16 @@ export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[]
         }
     ]
 
+    const [open, setOpen] = useState(false);
+
+    const showDrawer = () => {
+        setOpen(true)
+    };
+
+    const onClose = () => {
+        setOpen(false)
+    };
+
     return <>
         {watchlists.map(watchlist =>
             <>
@@ -47,9 +64,45 @@ export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[]
                     size='small'
                     style={{width: '100%'}}
                     extra={<Space size='middle'>
-                        <Typography.Link href={`/api/watchlists/${watchlist.token}/calendar`}>
+                        <Typography.Link>
                             <CalendarFilled title={t`Export events to iCalendar format`}/>
                         </Typography.Link>
+                        <Typography.Link>
+                            <EditOutlined title={t`Edit the Watchlist`} onClick={() => {
+                                showDrawer()
+                                form.setFields([
+                                    {name: 'token', value: watchlist.token},
+                                    {name: 'name', value: watchlist.name},
+                                    {name: 'connector', value: watchlist.connector?.id},
+                                    {name: 'domains', value: watchlist.domains.map(d => d.ldhName)},
+                                    {name: 'emailTriggers', value: watchlist.triggers?.map(t => t.event)},
+                                ])
+                            }}/>
+                        </Typography.Link>
+
+                        <Drawer
+                            title={t`Update a Watchlist`}
+                            width={800}
+                            onClose={onClose}
+                            open={open}
+                            styles={{
+                                body: {
+                                    paddingBottom: 80,
+                                }
+                            }}
+                            extra={<Button onClick={onClose}>Cancel</Button>}
+                        >
+                            <WatchlistForm
+                                form={form}
+                                onFinish={values => {
+                                    onUpdateWatchlist(values);
+                                    onClose()
+                                }}
+                                connectors={connectors}
+                                isCreation={false}
+                            />
+                        </Drawer>
+
                         <Popconfirm
                             title={t`Delete the Watchlist`}
                             description={t`Are you sure to delete this Watchlist?`}
@@ -57,7 +110,9 @@ export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[]
                             okText={t`Yes`}
                             cancelText={t`No`}
                             okButtonProps={{danger: true}}>
-                            <DeleteFilled style={{color: token.colorError}} title={t`Delete the Watchlist`}/>
+                            <Typography.Link>
+                                <DeleteFilled style={{color: token.colorError}} title={t`Delete the Watchlist`}/>
+                            </Typography.Link>
                         </Popconfirm>
                     </Space>}
                 >