From 64aba20a93ad195ecb111b1ed0cbc172877b4c62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=ABl=20Gangloff?= <contact@maelgangloff.fr>
Date: Fri, 16 Aug 2024 23:57:52 +0200
Subject: [PATCH] feat: add Webhook support on frontend

---
 .../watchlist/UpdateWatchlistButton.tsx       |  5 +-
 .../tracking/watchlist/WatchlistForm.tsx      | 53 +++++++++++++++++--
 .../tracking/watchlist/WatchlistsList.tsx     |  2 +-
 assets/pages/tracking/WatchlistPage.tsx       | 24 ++++++---
 assets/utils/api/index.ts                     |  2 +
 5 files changed, 72 insertions(+), 14 deletions(-)

diff --git a/assets/components/tracking/watchlist/UpdateWatchlistButton.tsx b/assets/components/tracking/watchlist/UpdateWatchlistButton.tsx
index 22206b2..6286a1b 100644
--- a/assets/components/tracking/watchlist/UpdateWatchlistButton.tsx
+++ b/assets/components/tracking/watchlist/UpdateWatchlistButton.tsx
@@ -8,7 +8,7 @@ import {Connector} from "../../../utils/api/connectors";
 
 export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}: {
     watchlist: Watchlist,
-    onUpdateWatchlist: (values: { domains: string[], emailTriggers: string[], token: string }) => Promise<void>,
+    onUpdateWatchlist: (values: { domains: string[], triggers: string[], token: string }) => Promise<void>,
     connectors: (Connector & { id: string })[]
 }) {
 
@@ -35,7 +35,8 @@ export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}
                     {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)},
+                    {name: 'triggers', value: watchlist.triggers?.map(t => t.event)},
+                    {name: 'dsn', value: watchlist.dsn}
                 ])
             }}/>
         </Typography.Link>
diff --git a/assets/components/tracking/watchlist/WatchlistForm.tsx b/assets/components/tracking/watchlist/WatchlistForm.tsx
index 15d3e9d..36b4159 100644
--- a/assets/components/tracking/watchlist/WatchlistForm.tsx
+++ b/assets/components/tracking/watchlist/WatchlistForm.tsx
@@ -28,7 +28,7 @@ const formItemLayoutWithOutLabel = {
 export function WatchlistForm({form, connectors, onFinish, isCreation}: {
     form: FormInstance,
     connectors: (Connector & { id: string })[]
-    onFinish: (values: { domains: string[], emailTriggers: string[], token: string }) => void
+    onFinish: (values: { domains: string[], triggers: string[], token: string }) => void
     isCreation: boolean
 }) {
     const domainEventTranslated = domainEvent()
@@ -56,7 +56,7 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
         {...formItemLayoutWithOutLabel}
         form={form}
         onFinish={onFinish}
-        initialValues={{emailTriggers: ['last changed', 'transfer', 'expiration', 'deletion']}}
+        initialValues={{triggers: ['last changed', 'transfer', 'expiration', 'deletion']}}
     >
 
         <Form.Item name='token' hidden>
@@ -140,7 +140,7 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
             )}
         </Form.List>
         <Form.Item label={t`Tracked events`}
-                   name='emailTriggers'
+                   name='triggers'
                    rules={[{required: true, message: t`At least one trigger`, type: 'array'}]}
                    labelCol={{
                        xs: {span: 24},
@@ -186,6 +186,53 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
                     }))}
             />
         </Form.Item>
+        <Form.List
+            name="dsn">
+            {(fields, {add, remove}, {errors}) => (
+                <>
+                    {fields.map((field, index) => (
+                        <Form.Item
+                            {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
+                            label={index === 0 ? t`DSN` : ''}
+                            required={true}
+                            key={field.key}
+                        >
+                            <Form.Item
+                                {...field}
+                                validateTrigger={['onChange', 'onBlur']}
+                                rules={[{
+                                    required: true,
+                                    message: t`Required`
+                                }, {
+                                    pattern: /:\/\//,
+                                    message: t`This DSN does not appear to be valid`
+                                }]}
+                                noStyle
+                            >
+                                <Input placeholder={t`Data Source Name`} style={{width: '60%'}} autoComplete='off'/>
+                            </Form.Item>
+                            {fields.length > 1 ? (
+                                <MinusCircleOutlined
+                                    className="dynamic-delete-button"
+                                    onClick={() => remove(field.name)}
+                                />
+                            ) : null}
+                        </Form.Item>
+                    ))}
+                    <Form.Item>
+                        <Button
+                            type="dashed"
+                            onClick={() => add()}
+                            style={{width: '60%'}}
+                            icon={<PlusOutlined/>}
+                        >
+                            {t`Add a Webhook`}
+                        </Button>
+                        <Form.ErrorList errors={errors}/>
+                    </Form.Item>
+                </>
+            )}
+        </Form.List>
         <Form.Item>
             <Space>
                 <Button type="primary" htmlType="submit">
diff --git a/assets/components/tracking/watchlist/WatchlistsList.tsx b/assets/components/tracking/watchlist/WatchlistsList.tsx
index d3a17b7..a61d786 100644
--- a/assets/components/tracking/watchlist/WatchlistsList.tsx
+++ b/assets/components/tracking/watchlist/WatchlistsList.tsx
@@ -14,7 +14,7 @@ import {ViewDiagramWatchlistButton} from "../diagram/ViewDiagramWatchlistButton"
 export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connectors}: {
     watchlists: Watchlist[],
     onDelete: () => void,
-    onUpdateWatchlist: (values: { domains: string[], emailTriggers: string[], token: string }) => Promise<void>,
+    onUpdateWatchlist: (values: { domains: string[], triggers: string[], token: string }) => Promise<void>,
     connectors: (Connector & { id: string })[]
 }) {
     const sm = useBreakpoint('sm')
diff --git a/assets/pages/tracking/WatchlistPage.tsx b/assets/pages/tracking/WatchlistPage.tsx
index 79c716b..d7b0765 100644
--- a/assets/pages/tracking/WatchlistPage.tsx
+++ b/assets/pages/tracking/WatchlistPage.tsx
@@ -14,6 +14,7 @@ export type Watchlist = {
     token: string,
     domains: { ldhName: string }[],
     triggers?: { event: EventAction, action: string }[],
+    dsn?: string[]
     connector?: {
         id: string
         provider: string
@@ -32,15 +33,20 @@ export default function WatchlistPage() {
     const onCreateWatchlist = (values: {
         name?: string
         domains: string[],
-        emailTriggers: string[]
-        connector?: string
+        triggers: string[]
+        connector?: string,
+        dsn?: string[]
     }) => {
         const domainsURI = values.domains.map(d => '/api/domains/' + d)
+        let triggers =  values.triggers.map(t => ({event: t, action: 'email'}))
+        if(values.dsn !== undefined) triggers = [...triggers, ...values.triggers.map(t => ({event: t, action: 'chat'}))]
+
         postWatchlist({
             name: values.name,
             domains: domainsURI,
-            triggers: values.emailTriggers.map(t => ({event: t, action: 'email'})),
-            connector: values.connector !== undefined ? ('/api/connectors/' + values.connector) : undefined
+            triggers,
+            connector: values.connector !== undefined ? ('/api/connectors/' + values.connector) : undefined,
+            dsn: values.dsn
         }).then((w) => {
             form.resetFields()
             refreshWatchlists()
@@ -54,8 +60,9 @@ export default function WatchlistPage() {
         token: string
         name?: string
         domains: string[],
-        emailTriggers: string[]
-        connector?: string
+        triggers: string[]
+        connector?: string,
+        dsn?: string[]
     }) => {
         const domainsURI = values.domains.map(d => '/api/domains/' + d)
 
@@ -63,8 +70,9 @@ export default function WatchlistPage() {
             token: values.token,
             name: values.name,
             domains: domainsURI,
-            triggers: values.emailTriggers.map(t => ({event: t, action: 'email'})),
-            connector: values.connector !== undefined ? ('/api/connectors/' + values.connector) : undefined
+            triggers: values.triggers.map(t => ({event: t, action: 'email'})),
+            connector: values.connector !== undefined ? ('/api/connectors/' + values.connector) : undefined,
+            dsn: values.dsn
         }).then((w) => {
             refreshWatchlists()
             messageApi.success(t`Watchlist updated !`)
diff --git a/assets/utils/api/index.ts b/assets/utils/api/index.ts
index cb5234e..f8e35db 100644
--- a/assets/utils/api/index.ts
+++ b/assets/utils/api/index.ts
@@ -69,6 +69,7 @@ export interface WatchlistRequest {
     domains: string[],
     triggers: { event: EventAction, action: TriggerAction }[],
     connector?: string
+    dsn?: string[]
 }
 
 export interface Watchlist {
@@ -78,6 +79,7 @@ export interface Watchlist {
     triggers: { event: EventAction, action: TriggerAction }[],
     connector?: string
     createdAt: string
+    dsn?: string[]
 }
 
 export interface InstanceConfig {