feat: remove some cards

assets/components/search/EventTimeline.tsx

@@ -8,10 +8,19 @@ import {
 } from "@ant-design/icons";
 import {Timeline} from "antd";
 import React from "react";
-import {Domain} from "../../utils/api";
+import {Domain, EventAction} from "../../utils/api";
 import {t} from "ttag";
 import useBreakpoint from "../../hooks/useBreakpoint";
 
+export function actionToColor(a: EventAction) {
+    return a === 'registration' ? 'green' :
+        a === 'reregistration' ? 'cyan' :
+            a === 'expiration' ? 'red' :
+                a === 'deletion' ? 'magenta' :
+                    a === 'transfer' ? 'orange' :
+                        a === 'last changed' ? 'blue' : 'default'
+}
+
 export function EventTimeline({domain}: { domain: Domain }) {
     const sm = useBreakpoint('sm')
 
@@ -37,24 +46,18 @@ export function EventTimeline({domain}: { domain: Domain }) {
             .sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime())
             .map(({action, date}) => {
 
-                    let color, dot
+                    let dot
                     if (action === 'registration') {
-                        color = 'green'
                         dot = <SignatureOutlined style={{fontSize: '16px'}}/>
                     } else if (action === 'expiration') {
-                        color = 'red'
                         dot = <ClockCircleOutlined style={{fontSize: '16px'}}/>
                     } else if (action === 'transfer') {
-                        color = 'orange'
                         dot = <ShareAltOutlined style={{fontSize: '16px'}}/>
                     } else if (action === 'last changed') {
-                        color = 'blue'
                         dot = <SyncOutlined style={{fontSize: '16px'}}/>
                     } else if (action === 'deletion') {
-                        color = 'red'
                         dot = <DeleteOutlined style={{fontSize: '16px'}}/>
                     } else if (action === 'reregistration') {
-                        color = 'green'
                         dot = <ReloadOutlined style={{fontSize: '16px'}}/>
                     }
 
@@ -69,7 +72,7 @@ export function EventTimeline({domain}: { domain: Domain }) {
                     }
 
                     return {
-                        color,
+                        color: actionToColor(action),
                         dot,
                         pending: new Date(date).getTime() > new Date().getTime(),
                         ...text

assets/components/tracking/ConnectorsList.tsx

@@ -1,8 +1,9 @@
-import {Card, Divider, Popconfirm, theme, Typography} from "antd";
+import {Card, Divider, Popconfirm, Table, theme} 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;
 
@@ -11,20 +12,38 @@ type ConnectorElement = Connector & { id: 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 ${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 style={{color: token.colorError}}/></Popconfirm>}>
-                    <Typography.Paragraph>
-                        {t`Provider`} : {connector.provider}
-                    </Typography.Paragraph>
+                <Card title={t`Connector`}
+                      size='small'
+                      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 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/>
             </>

assets/components/tracking/WatchlistsList.tsx

@@ -1,37 +1,56 @@
-import {Card, Divider, Popconfirm, theme, Typography} from "antd";
+import {Card, Divider, Popconfirm, Table, Tag, theme, Typography} from "antd";
 import {t} from "ttag";
-import {deleteWatchlist, EventAction} from "../../utils/api";
+import {deleteWatchlist} from "../../utils/api";
 import {DeleteFilled} from "@ant-design/icons";
 import React from "react";
+import useBreakpoint from "../../hooks/useBreakpoint";
+import {actionToColor} from "../search/EventTimeline";
+import {Watchlist} from "../../pages/tracking/WatchlistPage";
 
 const {useToken} = theme;
 
-type Watchlist = { token: string, domains: { ldhName: string }[], triggers?: { event: EventAction, action: string }[] }
-
 
 export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[], onDelete: () => void }) {
     const {token} = useToken()
+    const sm = useBreakpoint('sm')
+
+    const columns = [
+        {
+            title: t`Domain names`,
+            dataIndex: 'domains'
+        },
+        {
+            title: t`Tracked events`,
+            dataIndex: 'events'
+        }
+    ]
 
     return <>
         {watchlists.map(watchlist =>
             <>
-                <Card title={t`Watchlist`} type="inner" extra={<Popconfirm
-                    title={t`Delete the Watchlist`}
-                    description={t`Are you sure to delete this Watchlist?`}
-                    onConfirm={() => deleteWatchlist(watchlist.token).then(onDelete)}
-                    okText={t`Yes`}
-                    cancelText={t`No`}
-                    okButtonProps={{danger: true}}
-                ><DeleteFilled style={{color: token.colorError}}/></Popconfirm>}>
+                <Card
+                    title={t`Watchlist`}
+                    size='small'
+                    extra={<Popconfirm
+                        title={t`Delete the Watchlist`}
+                        description={t`Are you sure to delete this Watchlist?`}
+                        onConfirm={() => deleteWatchlist(watchlist.token).then(onDelete)}
+                        okText={t`Yes`}
+                        cancelText={t`No`}
+                        okButtonProps={{danger: true}}
+                    ><DeleteFilled style={{color: token.colorError}}/></Popconfirm>}>
                     <Card.Meta description={watchlist.token} style={{marginBottom: '1em'}}/>
-                    <Typography.Paragraph>
-                        {t`Domain name`} : {watchlist?.domains.map(d => d.ldhName).join(',')}
-                    </Typography.Paragraph>
-                    {
-                        watchlist.triggers && <Typography.Paragraph>
-                            {t`Domain triggers`} : {watchlist.triggers.map(t => `${t.event} => ${t.action}`).join(',')}
-                        </Typography.Paragraph>
-                    }
+                    <Table
+                        columns={columns}
+                        pagination={false}
+                        dataSource={[{
+                            domains: watchlist.domains.map(d =>
+                                <Typography.Paragraph>{d.ldhName}</Typography.Paragraph>),
+                            events: watchlist.triggers?.filter(t => t.action === 'email')
+                                .map(t => <Tag color={actionToColor(t.event)}>{t.event}</Tag>)
+                        }]}
+                        {...(sm ? {scroll: {y: 'max-content'}} : {scroll: {y: 240}})}
+                    />
                 </Card>
                 <Divider/>
             </>