refactor: split button components

assets/components/tracking/DeleteWatchlistButton.tsx

@@ -0,0 +1,22 @@
+import {Popconfirm, theme, Typography} from "antd";
+import {t} from "ttag";
+import {deleteWatchlist} from "../../utils/api";
+import {DeleteFilled} from "@ant-design/icons";
+import React from "react";
+import {Watchlist} from "../../pages/tracking/WatchlistPage";
+
+export function DeleteWatchlistButton({watchlist, onDelete}: { watchlist: Watchlist, onDelete: () => void }) {
+    const {token} = theme.useToken()
+
+    return <Popconfirm
+        title={t`Delete the Watchlist`}
+        description={t`Are you sure to delete this Watchlist?`}
+        onConfirm={() => deleteWatchlist(watchlist.token).then(onDelete)}
+        okText={t`Yes`}
+        cancelText={t`No`}
+        okButtonProps={{danger: true}}>
+        <Typography.Link>
+            <DeleteFilled style={{color: token.colorError}} title={t`Delete the Watchlist`}/>
+        </Typography.Link>
+    </Popconfirm>
+}

assets/components/tracking/UpdateWatchlistButton.tsx

@@ -0,0 +1,67 @@
+import {Button, Drawer, Form, Typography} from "antd";
+import {t} from "ttag";
+import {WatchlistForm} from "./WatchlistForm";
+import React, {useState} from "react";
+import {Watchlist} from "../../pages/tracking/WatchlistPage";
+import {EditOutlined} from "@ant-design/icons";
+import {Connector} from "../../utils/api/connectors";
+
+export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}: {
+    watchlist: Watchlist,
+    onUpdateWatchlist: (values: { domains: string[], emailTriggers: string[], token: string }) => Promise<void>,
+    connectors: (Connector & { id: string })[]
+}) {
+
+    const [form] = Form.useForm()
+    const [open, setOpen] = useState(false)
+    const [loading, setLoading] = useState(false)
+
+
+    const showDrawer = () => {
+        setOpen(true)
+    }
+
+    const onClose = () => {
+        setOpen(false)
+        setLoading(false)
+    }
+
+    return <>
+        <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='80%'
+            onClose={onClose}
+            open={open}
+            loading={loading}
+            styles={{
+                body: {
+                    paddingBottom: 80,
+                }
+            }}
+            extra={<Button onClick={onClose}>{t`Cancel`}</Button>}
+        >
+            <WatchlistForm
+                form={form}
+                onFinish={values => {
+                    setLoading(true)
+                    onUpdateWatchlist(values).then(onClose).catch(() => setLoading(false))
+                }}
+                connectors={connectors}
+                isCreation={false}
+            />
+        </Drawer>
+    </>
+
+}

assets/components/tracking/ViewDiagramWatchlistButton.tsx

@@ -0,0 +1,40 @@
+import {Button, Modal, Space, Typography} from "antd"
+import {t} from "ttag"
+import React, {useState} from "react"
+import {Watchlist} from "../../pages/tracking/WatchlistPage"
+import {ApartmentOutlined} from "@ant-design/icons"
+
+export function ViewDiagramWatchlistButton({watchlist}: { watchlist: Watchlist }) {
+    const [open, setOpen] = useState(false)
+
+    return <>
+        <Typography.Link>
+            <ApartmentOutlined title={t`View the Watchlist Entity Diagram`}
+                               style={{color: 'darkviolet'}}
+                               onClick={() => setOpen(true)}/>
+        </Typography.Link>
+        <Modal
+            title={t`Watchlist Entity Diagram`}
+            centered
+            open={open}
+            footer={
+                <Space>
+                    <Button type="primary" color='violet' onClick={() => {
+                    }}>
+                        Download
+                    </Button>
+
+                    <Button type="default" onClick={() => setOpen(false)}>
+                        Close
+                    </Button>
+                </Space>
+            }
+            onOk={() => setOpen(false)}
+            onCancel={() => setOpen(false)}
+            width='80%'
+        >
+
+        </Modal>
+    </>
+
+}

assets/components/tracking/WatchlistsList.tsx

@@ -1,16 +1,15 @@
-import {Button, Card, Divider, Drawer, Form, Popconfirm, Space, Table, Tag, theme, Typography} from "antd";
+import {Card, Divider, Space, Table, Tag, Typography} from "antd";
 import {t} from "ttag";
-import {deleteWatchlist} from "../../utils/api";
+import {CalendarFilled, DisconnectOutlined, LinkOutlined} from "@ant-design/icons";
-import {CalendarFilled, DeleteFilled, DisconnectOutlined, EditOutlined, LinkOutlined} from "@ant-design/icons";
+import React from "react";
-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";
-
+import {UpdateWatchlistButton} from "./UpdateWatchlistButton";
-const {useToken} = theme;
+import {DeleteWatchlistButton} from "./DeleteWatchlistButton";
+import {ViewDiagramWatchlistButton} from "./ViewDiagramWatchlistButton";
 
 export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connectors}: {
     watchlists: Watchlist[],
@@ -18,10 +17,9 @@ export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connect
     onUpdateWatchlist: (values: { domains: string[], emailTriggers: string[], token: string }) => Promise<void>,
     connectors: (Connector & { id: string })[]
 }) {
-    const {token} = useToken()
     const sm = useBreakpoint('sm')
     const domainEventTranslated = domainEvent()
-    const [form] = Form.useForm()
+
 
     const columns = [
         {
@@ -34,17 +32,6 @@ export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connect
         }
     ]
 
-    const [open, setOpen] = useState(false)
-    const [loading, setLoading] = useState(false)
-
-    const showDrawer = () => {
-        setOpen(true)
-    }
-
-    const onClose = () => {
-        setOpen(false)
-        setLoading(false)
-    }
 
     return <>
         {watchlists.map(watchlist =>
@@ -66,57 +53,22 @@ export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connect
                     size='small'
                     style={{width: '100%'}}
                     extra={<Space size='middle'>
-                        <Typography.Link>
+
-                            <CalendarFilled title={t`Export events to iCalendar format`}/>
+                        <ViewDiagramWatchlistButton watchlist={watchlist}/>
-                        </Typography.Link>
+
-                        <Typography.Link>
+                        <Typography.Link href={`/api/watchlists/${watchlist.token}/calendar`}>
-                            <EditOutlined title={t`Edit the Watchlist`} onClick={() => {
+                            <CalendarFilled title={t`Export events to iCalendar format`}
-                                showDrawer()
+                                            style={{color: 'limegreen'}}/>
-                                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
+                        <UpdateWatchlistButton
-                            title={t`Update a Watchlist`}
+                            watchlist={watchlist}
-                            width='80%'
+                            onUpdateWatchlist={onUpdateWatchlist}
-                            onClose={onClose}
-                            open={open}
-                            loading={loading}
-                            styles={{
-                                body: {
-                                    paddingBottom: 80,
-                                }
-                            }}
-                            extra={<Button onClick={onClose}>{t`Cancel`}</Button>}
-                        >
-                            <WatchlistForm
-                                form={form}
-                                onFinish={values => {
-                                    setLoading(true)
-                                    onUpdateWatchlist(values).then(onClose).catch(() => setLoading(false))
-                                }}
                             connectors={connectors}
-                                isCreation={false}
                         />
-                        </Drawer>
 
-                        <Popconfirm
+                        <DeleteWatchlistButton watchlist={watchlist} onDelete={onDelete}/>
-                            title={t`Delete the Watchlist`}
+
-                            description={t`Are you sure to delete this Watchlist?`}
-                            onConfirm={() => deleteWatchlist(watchlist.token).then(onDelete)}
-                            okText={t`Yes`}
-                            cancelText={t`No`}
-                            okButtonProps={{danger: true}}>
-                            <Typography.Link>
-                                <DeleteFilled style={{color: token.colorError}} title={t`Delete the Watchlist`}/>
-                            </Typography.Link>
-                        </Popconfirm>
                     </Space>}
                 >
                     <Card.Meta description={watchlist.token} style={{marginBottom: '1em'}}/>