feat: add createdAt to Connector and Watchlist

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/>
             </>