feat: update connector page

assets/pages/info/TldPage.tsx

@@ -2,6 +2,7 @@ import React, {useEffect, useState} from "react";
 import {Collapse, Divider, Table, Typography} from "antd";
 import {getTldList, Tld} from "../../utils/api";
 import {t} from 'ttag'
+import {regionNames} from "../../i18n";
 
 const {Text, Paragraph} = Typography
 
@@ -23,10 +24,6 @@ const getCountryCode = (tld: string): string => {
     return tld
 }
 
-const locale = navigator.language.split('-')[0]
-const regionNames = new Intl.DisplayNames([locale], {type: 'region'})
-
-
 function TldTable(filters: FiltersType) {
     const [dataTable, setDataTable] = useState<Tld[]>([])
     const [total, setTotal] = useState(0)

assets/pages/tracking/ConnectorsPage.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from "react";
 import {Card, Flex, Form, message, Skeleton} from "antd";
 import {t} from "ttag";
-import {Connector, getConnectors} from "../../utils/api/connectors";
+import {Connector, getConnectors, postConnector} from "../../utils/api/connectors";
 import {ConnectorForm} from "../../components/tracking/ConnectorForm";
 import {AxiosError} from "axios";
 import {ConnectorsList} from "../../components/tracking/ConnectorsList";
@@ -13,6 +13,16 @@ export default function ConnectorsPage() {
     const [messageApi, contextHolder] = message.useMessage()
     const [connectors, setConnectors] = useState<ConnectorElement[] | null>()
 
+    const onCreateConnector = (values: Connector) => {
+        postConnector(values).then((w) => {
+            form.resetFields()
+            refreshConnectors()
+            messageApi.success(t`Connector created !`)
+        }).catch((e: AxiosError) => {
+            const data = e?.response?.data as { detail: string }
+            messageApi.error(data.detail ?? t`An error occurred`)
+        })
+    }
 
     const refreshConnectors = () => getConnectors().then(c => {
         setConnectors(c['hydra:member'])
@@ -28,10 +38,9 @@ export default function ConnectorsPage() {
 
 
     return <Flex gap="middle" align="center" justify="center" vertical>
-        <Card title={t`Create a Connector`} style={{width: '100%'}} loading={true}>
+        <Card title={t`Create a Connector`} style={{width: '100%'}}>
             {contextHolder}
-            <ConnectorForm form={form} onCreate={() => {
-            }}/>
+            <ConnectorForm form={form} onCreate={onCreateConnector}/>
         </Card>
 
 

assets/pages/tracking/WatchlistPage.tsx

@@ -5,6 +5,7 @@ import {AxiosError} from "axios";
 import {t} from 'ttag'
 import {WatchlistForm} from "../../components/tracking/WatchlistForm";
 import {WatchlistsList} from "../../components/tracking/WatchlistsList";
+import {Connector, getConnectors} from "../../utils/api/connectors";
 
 
 type Watchlist = { token: string, domains: { ldhName: string }[], triggers?: { event: EventAction, action: string }[] }
@@ -14,10 +15,18 @@ export default function WatchlistPage() {
     const [form] = Form.useForm()
     const [messageApi, contextHolder] = message.useMessage()
     const [watchlists, setWatchlists] = useState<Watchlist[] | null>()
+    const [connectors, setConnectors] = useState<(Connector & { id: string })[] | null>()
 
-    const onCreateWatchlist = (values: { domains: string[], triggers: { event: string, action: string }[] }) => {
+    const onCreateWatchlist = (values: {
+        domains: string[],
+        triggers: { event: string, action: string, connector?: string }[]
+    }) => {
         const domainsURI = values.domains.map(d => '/api/domains/' + d)
-        postWatchlist(domainsURI, values.triggers).then((w) => {
+        postWatchlist(domainsURI, values.triggers.map(({action, event, connector}) => ({
+            action,
+            event,
+            connector: connector !== undefined ? '/api/connectors/' + connector : undefined
+        }))).then((w) => {
             form.resetFields()
             refreshWatchlists()
             messageApi.success(t`Watchlist created !`)
@@ -37,12 +46,16 @@ export default function WatchlistPage() {
 
     useEffect(() => {
         refreshWatchlists()
+        getConnectors().then(c => setConnectors(c['hydra:member']))
     }, [])
 
     return <Flex gap="middle" align="center" justify="center" vertical>
         <Card title={t`Create a Watchlist`} style={{width: '100%'}}>
             {contextHolder}
-            <WatchlistForm form={form} onCreateWatchlist={onCreateWatchlist}/>
+            {
+                connectors &&
+                <WatchlistForm form={form} onCreateWatchlist={onCreateWatchlist} connectors={connectors}/>
+            }
         </Card>