From a864696df7cf34814b2de3b8c3600ddd4e43ee28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=ABl=20Gangloff?= <contact@maelgangloff.fr>
Date: Sun, 4 Aug 2024 17:16:00 +0200
Subject: [PATCH] feat: add createdAt to Connector and Watchlist

---
 assets/components/tracking/ConnectorsList.tsx | 28 ++--------
 assets/components/tracking/WatchlistsList.tsx | 20 ++++++--
 assets/pages/tracking/ConnectorsPage.tsx      |  4 +-
 assets/pages/tracking/WatchlistPage.tsx       |  7 ++-
 translations/translations.pot                 | 51 +++++++++++--------
 5 files changed, 57 insertions(+), 53 deletions(-)

diff --git a/assets/components/tracking/ConnectorsList.tsx b/assets/components/tracking/ConnectorsList.tsx
index 0a2169d..92bf2b9 100644
--- a/assets/components/tracking/ConnectorsList.tsx
+++ b/assets/components/tracking/ConnectorsList.tsx
@@ -1,32 +1,24 @@
-import {Card, Divider, Popconfirm, Table, theme} from "antd";
+import {Card, Divider, Popconfirm, theme, Typography} from "antd";
 import {t} from "ttag";
 import {DeleteFilled} from "@ant-design/icons";
 import React from "react";
 import {Connector, deleteConnector} from "../../utils/api/connectors";
-import useBreakpoint from "../../hooks/useBreakpoint";
 
 const {useToken} = theme;
 
 
-type ConnectorElement = Connector & { id: string }
+export type ConnectorElement = Connector & { id: string, createdAt: string }
 
 export function ConnectorsList({connectors, onDelete}: { connectors: ConnectorElement[], onDelete: () => void }) {
     const {token} = useToken()
-    const sm = useBreakpoint('sm')
-
-
-    const columns = [
-        {
-            title: t`Provider`,
-            dataIndex: 'provider'
-        }
-    ]
 
     return <>
         {connectors.map(connector =>
             <>
-                <Card title={t`Connector`}
+                <Card title={<Typography.Text
+                    title={new Date(connector.createdAt).toLocaleString()}>{t`Connector ${connector.provider}`}</Typography.Text>}
                       size='small'
+                      style={{width: '100%'}}
                       extra={<Popconfirm title={t`Delete the Connector`}
                                          description={t`Are you sure to delete this Connector?`}
                                          onConfirm={() => deleteConnector(connector.id).then(onDelete)}
@@ -34,16 +26,6 @@ export function ConnectorsList({connectors, onDelete}: { connectors: ConnectorEl
                                          cancelText={t`No`}
                       ><DeleteFilled style={{color: token.colorError}}/></Popconfirm>}>
                     <Card.Meta description={connector.id} style={{marginBottom: '1em'}}/>
-                    <Table
-                        columns={columns}
-                        pagination={false}
-                        dataSource={[
-                            {
-                                provider: connector.provider
-                            }
-                        ]}
-                        {...(sm ? {scroll: {y: 'max-content'}} : {scroll: {y: 240}})}
-                    />
                 </Card>
                 <Divider/>
             </>
diff --git a/assets/components/tracking/WatchlistsList.tsx b/assets/components/tracking/WatchlistsList.tsx
index 0f0cee3..451f360 100644
--- a/assets/components/tracking/WatchlistsList.tsx
+++ b/assets/components/tracking/WatchlistsList.tsx
@@ -1,7 +1,7 @@
-import {Card, Divider, Popconfirm, Table, Tag, theme} from "antd";
+import {Card, Divider, Popconfirm, Table, Tag, theme, Typography} from "antd";
 import {t} from "ttag";
 import {deleteWatchlist} from "../../utils/api";
-import {DeleteFilled} from "@ant-design/icons";
+import {DeleteFilled, DisconnectOutlined, LinkOutlined} from "@ant-design/icons";
 import React from "react";
 import useBreakpoint from "../../hooks/useBreakpoint";
 import {actionToColor, domainEvent} from "../search/EventTimeline";
@@ -10,7 +10,6 @@ import punycode from "punycode/punycode";
 
 const {useToken} = theme;
 
-
 export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[], onDelete: () => void }) {
     const {token} = useToken()
     const sm = useBreakpoint('sm')
@@ -32,8 +31,20 @@ export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[]
         {watchlists.map(watchlist =>
             <>
                 <Card
-                    title={t`Watchlist` + (watchlist.name ? ` (${watchlist.name})` : '')}
+                    title={<>
+                        {
+                            watchlist.connector ?
+                                <Tag icon={<LinkOutlined/>} color="lime-inverse" title={watchlist.connector.id}/> :
+                                <Tag icon={<DisconnectOutlined/>} color="default"
+                                     title={t`This Watchlist is not linked to a Connector.`}/>
+                        }
+                        <Typography.Text title={new Date(watchlist.createdAt).toLocaleString()}>
+                            {t`Watchlist` + (watchlist.name ? ` (${watchlist.name})` : '')}
+                        </Typography.Text>
+                    </>
+                    }
                     size='small'
+                    style={{width: '100%'}}
                     extra={<Popconfirm
                         title={t`Delete the Watchlist`}
                         description={t`Are you sure to delete this Watchlist?`}
@@ -49,6 +60,7 @@ export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[]
                         size='small'
                         columns={columns}
                         pagination={false}
+                        style={{width: '100%'}}
                         dataSource={[{
                             domains: watchlist.domains.map(d => <Tag>{punycode.toUnicode(d.ldhName)}</Tag>),
                             events: watchlist.triggers?.filter(t => t.action === 'email')
diff --git a/assets/pages/tracking/ConnectorsPage.tsx b/assets/pages/tracking/ConnectorsPage.tsx
index 9f1b127..714e2a9 100644
--- a/assets/pages/tracking/ConnectorsPage.tsx
+++ b/assets/pages/tracking/ConnectorsPage.tsx
@@ -4,9 +4,7 @@ import {t} from "ttag";
 import {Connector, getConnectors, postConnector} 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 }
+import {ConnectorElement, ConnectorsList} from "../../components/tracking/ConnectorsList";
 
 export default function ConnectorsPage() {
     const [form] = Form.useForm()
diff --git a/assets/pages/tracking/WatchlistPage.tsx b/assets/pages/tracking/WatchlistPage.tsx
index e7ed470..fa7bd47 100644
--- a/assets/pages/tracking/WatchlistPage.tsx
+++ b/assets/pages/tracking/WatchlistPage.tsx
@@ -13,7 +13,12 @@ export type Watchlist = {
     token: string,
     domains: { ldhName: string }[],
     triggers?: { event: EventAction, action: string }[],
-    connector?: string
+    connector?: {
+        id: string
+        provider: string
+        createdAt: string
+    }
+    createdAt: string
 }
 
 export default function WatchlistPage() {
diff --git a/translations/translations.pot b/translations/translations.pot
index edad6df..4856e33 100644
--- a/translations/translations.pot
+++ b/translations/translations.pot
@@ -128,7 +128,7 @@ msgid "At least one domain name"
 msgstr ""
 
 #: assets/components/tracking/WatchlistForm.tsx:93
-#: assets/components/tracking/WatchlistsList.tsx:22
+#: assets/components/tracking/WatchlistsList.tsx:21
 msgid "Domain names"
 msgstr ""
 
@@ -141,7 +141,7 @@ msgid "Add a Domain name"
 msgstr ""
 
 #: assets/components/tracking/WatchlistForm.tsx:135
-#: assets/components/tracking/WatchlistsList.tsx:26
+#: assets/components/tracking/WatchlistsList.tsx:25
 msgid "Tracked events"
 msgstr ""
 
@@ -149,7 +149,6 @@ msgstr ""
 msgid "At least one trigger"
 msgstr ""
 
-#: assets/components/tracking/ConnectorsList.tsx:28
 #: assets/components/tracking/WatchlistForm.tsx:159
 #: assets/components/tracking/WatchlistForm.tsx:173
 msgid "Connector"
@@ -172,7 +171,6 @@ msgid "Reset"
 msgstr ""
 
 #: assets/components/tracking/ConnectorForm.tsx:37
-#: assets/components/tracking/ConnectorsList.tsx:20
 msgid "Provider"
 msgstr ""
 
@@ -222,33 +220,42 @@ msgid ""
 "names via the Provider's API"
 msgstr ""
 
-#: assets/components/tracking/WatchlistsList.tsx:35
+#: assets/components/tracking/WatchlistsList.tsx:39
+msgid "This Watchlist is not linked to a Connector."
+msgstr ""
+
+#: assets/components/tracking/WatchlistsList.tsx:42
 msgid "Watchlist"
 msgstr ""
 
-#: assets/components/tracking/WatchlistsList.tsx:38
+#: assets/components/tracking/WatchlistsList.tsx:49
 msgid "Delete the Watchlist"
 msgstr ""
 
-#: assets/components/tracking/WatchlistsList.tsx:39
+#: assets/components/tracking/WatchlistsList.tsx:50
 msgid "Are you sure to delete this Watchlist?"
 msgstr ""
 
-#: assets/components/tracking/ConnectorsList.tsx:33
-#: assets/components/tracking/WatchlistsList.tsx:41
+#: assets/components/tracking/ConnectorsList.tsx:25
+#: assets/components/tracking/WatchlistsList.tsx:52
 msgid "Yes"
 msgstr ""
 
-#: assets/components/tracking/ConnectorsList.tsx:34
-#: assets/components/tracking/WatchlistsList.tsx:42
+#: assets/components/tracking/ConnectorsList.tsx:26
+#: assets/components/tracking/WatchlistsList.tsx:53
 msgid "No"
 msgstr ""
 
-#: assets/components/tracking/ConnectorsList.tsx:30
+#: assets/components/tracking/ConnectorsList.tsx:19
+#, javascript-format
+msgid "Connector ${ connector.provider }"
+msgstr ""
+
+#: assets/components/tracking/ConnectorsList.tsx:22
 msgid "Delete the Connector"
 msgstr ""
 
-#: assets/components/tracking/ConnectorsList.tsx:31
+#: assets/components/tracking/ConnectorsList.tsx:23
 msgid "Are you sure to delete this Connector?"
 msgstr ""
 
@@ -328,11 +335,11 @@ msgid "Found !"
 msgstr ""
 
 #: assets/pages/search/DomainSearchPage.tsx:24
-#: assets/pages/tracking/ConnectorsPage.tsx:23
-#: assets/pages/tracking/ConnectorsPage.tsx:31
-#: assets/pages/tracking/WatchlistPage.tsx:44
-#: assets/pages/tracking/WatchlistPage.tsx:52
-#: assets/pages/tracking/WatchlistPage.tsx:62
+#: assets/pages/tracking/ConnectorsPage.tsx:21
+#: assets/pages/tracking/ConnectorsPage.tsx:29
+#: assets/pages/tracking/WatchlistPage.tsx:49
+#: assets/pages/tracking/WatchlistPage.tsx:57
+#: assets/pages/tracking/WatchlistPage.tsx:67
 msgid "An error occurred"
 msgstr ""
 
@@ -436,19 +443,19 @@ msgstr ""
 msgid "Roles"
 msgstr ""
 
-#: assets/pages/tracking/ConnectorsPage.tsx:20
+#: assets/pages/tracking/ConnectorsPage.tsx:18
 msgid "Connector created !"
 msgstr ""
 
-#: assets/pages/tracking/ConnectorsPage.tsx:41
+#: assets/pages/tracking/ConnectorsPage.tsx:39
 msgid "Create a Connector"
 msgstr ""
 
-#: assets/pages/tracking/WatchlistPage.tsx:41
+#: assets/pages/tracking/WatchlistPage.tsx:46
 msgid "Watchlist created !"
 msgstr ""
 
-#: assets/pages/tracking/WatchlistPage.tsx:67
+#: assets/pages/tracking/WatchlistPage.tsx:72
 msgid "Create a Watchlist"
 msgstr ""