diff --git a/apps/web/components/views/integrations.tsx b/apps/web/components/views/integrations.tsx index f020a3d6..2e240607 100644 --- a/apps/web/components/views/integrations.tsx +++ b/apps/web/components/views/integrations.tsx @@ -133,6 +133,20 @@ const ChromeIcon = ({ className }: { className?: string }) => ( ) +const getRelativeTime = (timestamp: number): string => { + const now = Date.now() + const diff = now - timestamp + const minutes = Math.floor(diff / (1000 * 60)) + const hours = Math.floor(diff / (1000 * 60 * 60)) + const days = Math.floor(diff / (1000 * 60 * 60 * 24)) + + if (minutes < 1) return "Just now" + if (minutes < 60) return `${minutes}m ago` + if (hours < 24) return `${hours}h ago` + if (days < 7) return `${days}d ago` + return new Date(timestamp).toLocaleDateString() +} + export function IntegrationsView() { const { org } = useAuth() const queryClient = useQueryClient() @@ -214,6 +228,7 @@ export function IntegrationsView() { }, staleTime: 30 * 1000, refetchInterval: 60 * 1000, + refetchIntervalInBackground: true, }) const { data: projects = [] } = useQuery({ @@ -824,12 +839,13 @@ export function IntegrationsView() { const connection = connections.find( (conn) => conn.provider === provider, ) + console.log(connection) const isConnected = !!connection const isMoreComing = provider === COMING_SOON_CONNECTOR return (
) : isConnected ? (
-
- - Connected - + {connection.metadata?.syncInProgress ? ( + <> + + + Syncing... + + + ) : ( +
+
+ + Connected + +
+ )}
) : (
@@ -888,14 +915,28 @@ export function IntegrationsView() { )}
-

+

{config.description}

- {connection?.email && !isMoreComing && ( -

- {connection.email} -

+ {isConnected && !isMoreComing && ( +
+ {connection?.email && ( +

+ Email:{" "} + {connection.email} +

+ )} + {connection?.metadata?.lastSyncedAt && ( +

+ Last synced:{" "} + {getRelativeTime(connection.metadata.lastSyncedAt)} +

+ )} +
)} {!isConnected && !isMoreComing && (