feat: user can enable/disable a watchlist

assets/components/tracking/watchlist/CreateWatchlistButton.tsx

@@ -0,0 +1,59 @@
+import {Button, Drawer, Form} from 'antd'
+import {t} from 'ttag'
+import {WatchlistForm} from './WatchlistForm'
+import React, {useState} from 'react'
+import type {Connector} from '../../../utils/api/connectors'
+import useBreakpoint from "../../../hooks/useBreakpoint"
+
+export function CreateWatchlistButton({onUpdateWatchlist, connectors}: {
+    onUpdateWatchlist: (values: {
+        domains: string[],
+        trackedEvents: string[],
+        trackedEppStatus: string[],
+        token: string
+    }) => Promise<void>
+    connectors: Array<Connector & { id: string }>
+}) {
+    const [form] = Form.useForm()
+    const [open, setOpen] = useState(false)
+    const [loading, setLoading] = useState(false)
+    const sm = useBreakpoint('sm')
+
+    const showDrawer = () => setOpen(true)
+
+    const onClose = () => {
+        setOpen(false)
+        setLoading(false)
+    }
+
+    return (
+        <>
+            <Button type='default' block onClick={() => {
+                showDrawer()
+            }}>{t`Create a Watchlist`}</Button>
+            <Drawer
+                title={t`Create a Watchlist`}
+                width={sm ? '100%' : '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
+                />
+            </Drawer>
+        </>
+    )
+}