feat: start Connector page

assets/components/tracking/ConnectorForm.tsx

@@ -0,0 +1,8 @@
+import {FormInstance} from "antd";
+import React from "react";
+import {Connector} from "../../utils/api/connectors";
+
+export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
+    return <>
+    </>
+}

assets/components/tracking/ConnectorsList.tsx

@@ -0,0 +1,28 @@
+import {Card, Divider, Popconfirm, Typography} from "antd";
+import {t} from "ttag";
+import {DeleteFilled} from "@ant-design/icons";
+import React from "react";
+import {Connector, deleteConnector} from "../../utils/api/connectors";
+
+type ConnectorElement = Connector & { id: string }
+
+export function ConnectorsList({connectors, onDelete}: { connectors: ConnectorElement[], onDelete: () => void }) {
+    return <>
+        {connectors.map(connector =>
+            <>
+                <Card title={t`Connector ${connector.id}`} extra={<Popconfirm
+                    title={t`Delete the Connector`}
+                    description={t`Are you sure to delete this Connector?`}
+                    onConfirm={() => deleteConnector(connector.id).then(onDelete)}
+                    okText={t`Yes`}
+                    cancelText={t`No`}
+                ><DeleteFilled/> </Popconfirm>}>
+                    <Typography.Paragraph>
+                        {t`Provider`} : {connector.provider}
+                    </Typography.Paragraph>
+                </Card>
+                <Divider/>
+            </>
+        )}
+    </>
+}

assets/pages/tracking/ConnectorsPage.tsx

@@ -1,7 +1,45 @@
-import React from "react";
+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 {ConnectorForm} from "../../components/tracking/ConnectorForm";
+import {AxiosError} from "axios";
+import {ConnectorsList} from "../../components/tracking/ConnectorsList";
+
+type ConnectorElement = Connector & { id: string }
 
 export default function ConnectorsPage() {
-    return <p>
+    const [form] = Form.useForm()
-        Not implemented
+    const [messageApi, contextHolder] = message.useMessage()
-    </p>
+    const [connectors, setConnectors] = useState<ConnectorElement[] | null>()
+
+
+    const refreshConnectors = () => getConnectors().then(c => {
+        setConnectors(c['hydra:member'])
+    }).catch((e: AxiosError) => {
+        const data = e?.response?.data as { detail: string }
+        messageApi.error(data.detail ?? t`An error occurred`)
+        setConnectors(undefined)
+    })
+
+    useEffect(() => {
+        refreshConnectors()
+    }, [])
+
+
+    return <Flex gap="middle" align="center" justify="center" vertical>
+        <Card title={t`Create a Connector`} style={{width: '100%'}} loading={true}>
+            {contextHolder}
+            <ConnectorForm form={form} onCreate={() => {
+            }}/>
+        </Card>
+
+
+        <Skeleton loading={connectors === undefined} active>
+            {connectors && connectors.length > 0 && <Card title={t`My Connectors`} style={{width: '100%'}}>
+                <ConnectorsList connectors={connectors} onDelete={refreshConnectors}/>
+            </Card>
+            }
+        </Skeleton>
+    </Flex>
 }

assets/pages/tracking/WatchlistPage.tsx

@@ -29,14 +29,18 @@ export default function WatchlistPage() {
 
     const refreshWatchlists = () => getWatchlists().then(w => {
         setWatchlists(w['hydra:member'])
-    }).catch(() => setWatchlists(undefined))
+    }).catch((e: AxiosError) => {
+        const data = e?.response?.data as { detail: string }
+        messageApi.error(data.detail ?? t`An error occurred`)
+        setWatchlists(undefined)
+    })
 
     useEffect(() => {
         refreshWatchlists()
     }, [])
 
     return <Flex gap="middle" align="center" justify="center" vertical>
-        <Card title={t`Create a watchlist`} style={{width: '100%'}}>
+        <Card title={t`Create a Watchlist`} style={{width: '100%'}}>
             {contextHolder}
             <WatchlistForm form={form} onCreateWatchlist={onCreateWatchlist}/>
         </Card>

translations/translations.pot

@@ -203,10 +203,12 @@ msgstr ""
 msgid "Are you sure to delete this Watchlist?"
 msgstr ""
 
+#: assets/components/tracking/ConnectorsList.tsx:17
 #: assets/components/tracking/WatchlistsList.tsx:18
 msgid "Yes"
 msgstr ""
 
+#: assets/components/tracking/ConnectorsList.tsx:18
 #: assets/components/tracking/WatchlistsList.tsx:19
 msgid "No"
 msgstr ""
@@ -215,12 +217,31 @@ msgstr ""
 msgid "Domain triggers"
 msgstr ""
 
+#: assets/components/tracking/ConnectorsList.tsx:13
+#, javascript-format
+msgid "Connector ${ connector.id }"
+msgstr ""
+
+#: assets/components/tracking/ConnectorsList.tsx:14
+msgid "Delete the Connector"
+msgstr ""
+
+#: assets/components/tracking/ConnectorsList.tsx:15
+msgid "Are you sure to delete this Connector?"
+msgstr ""
+
+#: assets/components/tracking/ConnectorsList.tsx:21
+msgid "Provider"
+msgstr ""
+
 #: assets/pages/search/DomainSearchPage.tsx:19
 msgid "Found !"
 msgstr ""
 
 #: assets/pages/search/DomainSearchPage.tsx:23
+#: assets/pages/tracking/ConnectorsPage.tsx:21
 #: assets/pages/tracking/WatchlistPage.tsx:26
+#: assets/pages/tracking/WatchlistPage.tsx:34
 msgid "An error occurred"
 msgstr ""
 
@@ -334,16 +355,24 @@ msgstr ""
 msgid "Roles"
 msgstr ""
 
+#: assets/pages/tracking/ConnectorsPage.tsx:31
+msgid "Create a Connector"
+msgstr ""
+
+#: assets/pages/tracking/ConnectorsPage.tsx:39
+msgid "My Connectors"
+msgstr ""
+
 #: assets/pages/tracking/WatchlistPage.tsx:23
 msgid "Watchlist created !"
 msgstr ""
 
-#: assets/pages/tracking/WatchlistPage.tsx:39
+#: assets/pages/tracking/WatchlistPage.tsx:43
-msgid "Create a watchlist"
+msgid "Create a Watchlist"
 msgstr ""
 
 #: assets/App.tsx:136
-#: assets/pages/tracking/WatchlistPage.tsx:46
+#: assets/pages/tracking/WatchlistPage.tsx:50
 msgid "My Watchlists"
 msgstr ""