506 lines
No EOL
18 KiB
TypeScript
506 lines
No EOL
18 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { useSearchParams } from "next/navigation"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Loader2, PlugZap, CheckCircle, XCircle, RefreshCw, FileText, Download, AlertCircle } from "lucide-react"
|
|
import { useAuth } from "@/contexts/auth-context"
|
|
import { useTask } from "@/contexts/task-context"
|
|
import { ProtectedRoute } from "@/components/protected-route"
|
|
|
|
interface Connector {
|
|
id: string
|
|
name: string
|
|
description: string
|
|
icon: React.ReactNode
|
|
status: "not_connected" | "connecting" | "connected" | "error"
|
|
type: string
|
|
connectionId?: string // Store the active connection ID for syncing
|
|
access_token?: string // For connectors that use OAuth
|
|
}
|
|
|
|
interface ConnectorStatus {
|
|
authenticated: boolean
|
|
status: string
|
|
connections: Array<{
|
|
connection_id: string
|
|
name: string
|
|
is_active: boolean
|
|
created_at: string
|
|
last_sync?: string
|
|
}>
|
|
}
|
|
|
|
interface SyncResult {
|
|
processed?: number;
|
|
added?: number;
|
|
skipped?: number;
|
|
errors?: number;
|
|
error?: string;
|
|
message?: string; // For sync started messages
|
|
isStarted?: boolean; // For sync started state
|
|
}
|
|
|
|
function ConnectorsPage() {
|
|
const { user, isAuthenticated } = useAuth()
|
|
const { addTask, refreshTasks } = useTask()
|
|
const searchParams = useSearchParams()
|
|
const [connectors, setConnectors] = useState<Connector[]>([])
|
|
|
|
const [isConnecting, setIsConnecting] = useState<string | null>(null)
|
|
const [isSyncing, setIsSyncing] = useState<string | null>(null)
|
|
const [syncResults, setSyncResults] = useState<{[key: string]: SyncResult | null}>({})
|
|
const [syncProgress, setSyncProgress] = useState<{[key: string]: number | null}>({})
|
|
const [maxFiles, setMaxFiles] = useState<number>(10)
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
|
|
// Function definitions first
|
|
const checkConnectorStatuses = async () => {
|
|
// Initialize connectors list
|
|
setConnectors([
|
|
{
|
|
id: "google_drive",
|
|
name: "Google Drive",
|
|
description: "Connect your Google Drive to automatically sync documents",
|
|
icon: <div className="w-8 h-8 bg-blue-500 rounded flex items-center justify-center text-white font-bold">G</div>,
|
|
status: "not_connected",
|
|
type: "google_drive"
|
|
},
|
|
])
|
|
|
|
try {
|
|
// Check status for each connector type
|
|
const connectorTypes = ["google_drive"]
|
|
|
|
for (const connectorType of connectorTypes) {
|
|
const response = await fetch(`/api/connectors/${connectorType}/status`)
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
const connections = data.connections || []
|
|
const activeConnection = connections.find((conn: any) => conn.is_active)
|
|
const isConnected = activeConnection !== undefined
|
|
|
|
setConnectors(prev => prev.map(c =>
|
|
c.type === connectorType
|
|
? {
|
|
...c,
|
|
status: isConnected ? "connected" : "not_connected",
|
|
connectionId: activeConnection?.connection_id
|
|
}
|
|
: c
|
|
))
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to check connector statuses:', error)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
const refreshConnectorStatus = async (connector: Connector) => {
|
|
try {
|
|
const response = await fetch(`/api/connectors/${connector.type}/status`)
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
const connections = data.connections || []
|
|
const activeConnection = connections.find((conn: any) => conn.is_active)
|
|
const isConnected = activeConnection !== undefined
|
|
|
|
setConnectors(prev => prev.map(c =>
|
|
c.id === connector.id
|
|
? {
|
|
...c,
|
|
status: isConnected ? "connected" : "not_connected",
|
|
connectionId: activeConnection?.connection_id
|
|
}
|
|
: c
|
|
))
|
|
}
|
|
} catch (error) {
|
|
console.error(`Failed to refresh connector status for ${connector.name}:`, error)
|
|
}
|
|
}
|
|
|
|
const handleConnect = async (connector: Connector) => {
|
|
setIsConnecting(connector.id)
|
|
setConnectors(prev => prev.map(c =>
|
|
c.id === connector.id ? { ...c, status: "connecting" } : c
|
|
))
|
|
|
|
try {
|
|
// Use the shared auth callback URL, not a separate connectors callback
|
|
const redirectUri = `${window.location.origin}/auth/callback`
|
|
|
|
const response = await fetch('/api/auth/init', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
provider: connector.type.replace('_drive', ''), // "google_drive" -> "google"
|
|
purpose: "data_source",
|
|
name: `${connector.name} Connection`,
|
|
redirect_uri: redirectUri
|
|
}),
|
|
})
|
|
|
|
const result = await response.json()
|
|
|
|
if (response.ok) {
|
|
// Store connector ID for callback
|
|
localStorage.setItem('connecting_connector_id', result.connection_id)
|
|
localStorage.setItem('connecting_connector_type', connector.type)
|
|
|
|
// Handle client-side OAuth with Google's library
|
|
if (result.oauth_config) {
|
|
// Use the redirect URI provided by the backend
|
|
const authUrl = `${result.oauth_config.authorization_endpoint}?` +
|
|
`client_id=${result.oauth_config.client_id}&` +
|
|
`response_type=code&` +
|
|
`scope=${result.oauth_config.scopes.join(' ')}&` +
|
|
`redirect_uri=${encodeURIComponent(result.oauth_config.redirect_uri)}&` +
|
|
`access_type=offline&` +
|
|
`prompt=consent&` +
|
|
`state=${result.connection_id}`
|
|
|
|
window.location.href = authUrl
|
|
}
|
|
} else {
|
|
throw new Error(result.error || 'Failed to initialize OAuth')
|
|
}
|
|
} catch (error) {
|
|
console.error('OAuth initialization failed:', error)
|
|
setConnectors(prev => prev.map(c =>
|
|
c.id === connector.id ? { ...c, status: "error" } : c
|
|
))
|
|
} finally {
|
|
setIsConnecting(null)
|
|
}
|
|
}
|
|
|
|
const handleSync = async (connector: Connector) => {
|
|
if (!connector.connectionId) {
|
|
console.error('No connection ID available for connector')
|
|
return
|
|
}
|
|
|
|
setIsSyncing(connector.id)
|
|
setSyncProgress(prev => ({ ...prev, [connector.id]: null })) // Clear any existing progress
|
|
setSyncResults(prev => ({ ...prev, [connector.id]: null }))
|
|
|
|
try {
|
|
const response = await fetch(`/api/connectors/${connector.type}/sync`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
max_files: maxFiles
|
|
}),
|
|
})
|
|
|
|
const result = await response.json()
|
|
|
|
if (response.status === 201 && result.task_id) {
|
|
// Task-based sync, use centralized tracking
|
|
addTask(result.task_id)
|
|
console.log(`Sync task ${result.task_id} added to central tracking for connector ${connector.id}`)
|
|
|
|
// Immediately refresh task notifications to show the new task
|
|
await refreshTasks()
|
|
|
|
// Show sync started message
|
|
setSyncResults(prev => ({
|
|
...prev,
|
|
[connector.id]: {
|
|
message: "Check task notification panel for progress",
|
|
isStarted: true
|
|
}
|
|
}))
|
|
setIsSyncing(null)
|
|
} else if (response.ok) {
|
|
// Direct sync result - still show "sync started" message
|
|
setSyncResults(prev => ({
|
|
...prev,
|
|
[connector.id]: {
|
|
message: "Check task notification panel for progress",
|
|
isStarted: true
|
|
}
|
|
}))
|
|
setIsSyncing(null)
|
|
} else {
|
|
throw new Error(result.error || 'Sync failed')
|
|
}
|
|
} catch (error) {
|
|
console.error('Sync failed:', error)
|
|
setSyncResults(prev => ({
|
|
...prev,
|
|
[connector.id]: {
|
|
error: error instanceof Error ? error.message : 'Sync failed'
|
|
}
|
|
}))
|
|
setIsSyncing(null)
|
|
}
|
|
}
|
|
|
|
const handleDisconnect = async (connector: Connector) => {
|
|
// This would call a disconnect endpoint when implemented
|
|
setConnectors(prev => prev.map(c =>
|
|
c.id === connector.id ? { ...c, status: "not_connected", connectionId: undefined } : c
|
|
))
|
|
setSyncResults(prev => ({ ...prev, [connector.id]: null }))
|
|
}
|
|
|
|
const getStatusIcon = (status: Connector['status']) => {
|
|
switch (status) {
|
|
case "connected":
|
|
return <CheckCircle className="h-4 w-4 text-green-500" />
|
|
case "connecting":
|
|
return <Loader2 className="h-4 w-4 text-blue-500 animate-spin" />
|
|
case "error":
|
|
return <XCircle className="h-4 w-4 text-red-500" />
|
|
default:
|
|
return <XCircle className="h-4 w-4 text-gray-400" />
|
|
}
|
|
}
|
|
|
|
const getStatusBadge = (status: Connector['status']) => {
|
|
switch (status) {
|
|
case "connected":
|
|
return <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">Connected</Badge>
|
|
case "connecting":
|
|
return <Badge variant="outline" className="bg-blue-500/10 text-blue-500 border-blue-500/20">Connecting...</Badge>
|
|
case "error":
|
|
return <Badge variant="outline" className="bg-red-500/10 text-red-500 border-red-500/20">Error</Badge>
|
|
default:
|
|
return <Badge variant="outline" className="bg-gray-500/10 text-gray-500 border-gray-500/20">Not Connected</Badge>
|
|
}
|
|
}
|
|
|
|
// Check connector status on mount and when returning from OAuth
|
|
useEffect(() => {
|
|
if (isAuthenticated) {
|
|
checkConnectorStatuses()
|
|
}
|
|
|
|
// If we just returned from OAuth, clear the URL parameter
|
|
if (searchParams.get('oauth_success') === 'true') {
|
|
// Clear the URL parameter without causing a page reload
|
|
const url = new URL(window.location.href)
|
|
url.searchParams.delete('oauth_success')
|
|
window.history.replaceState({}, '', url.toString())
|
|
}
|
|
}, [searchParams, isAuthenticated])
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Connectors</h1>
|
|
<p className="text-muted-foreground mt-2">
|
|
Connect external services to automatically sync and index your documents
|
|
</p>
|
|
</div>
|
|
|
|
{/* Sync Settings */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Download className="h-5 w-5" />
|
|
Sync Settings
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Configure how many files to sync when manually triggering a sync
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center space-x-4">
|
|
<Label htmlFor="maxFiles" className="text-sm font-medium">
|
|
Max files per sync:
|
|
</Label>
|
|
<Input
|
|
id="maxFiles"
|
|
type="number"
|
|
value={maxFiles}
|
|
onChange={(e) => setMaxFiles(parseInt(e.target.value) || 10)}
|
|
className="w-24"
|
|
min="1"
|
|
max="100"
|
|
/>
|
|
<span className="text-sm text-muted-foreground">
|
|
(Leave blank or set to 0 for unlimited)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Connectors Grid */}
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
{connectors.map((connector) => (
|
|
<Card key={connector.id} className="relative">
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
{connector.icon}
|
|
<div>
|
|
<CardTitle className="text-lg">{connector.name}</CardTitle>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
{getStatusIcon(connector.status)}
|
|
{getStatusBadge(connector.status)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<CardDescription className="mt-2">
|
|
{connector.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex flex-col gap-2">
|
|
{connector.status === "not_connected" && (
|
|
<Button
|
|
onClick={() => handleConnect(connector)}
|
|
disabled={isConnecting === connector.id}
|
|
className="w-full"
|
|
>
|
|
{isConnecting === connector.id ? (
|
|
<>
|
|
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
|
Connecting...
|
|
</>
|
|
) : (
|
|
<>
|
|
<PlugZap className="h-4 w-4 mr-2" />
|
|
Connect
|
|
</>
|
|
)}
|
|
</Button>
|
|
)}
|
|
|
|
{connector.status === "connected" && (
|
|
<>
|
|
<Button
|
|
onClick={() => handleSync(connector)}
|
|
disabled={isSyncing === connector.id}
|
|
variant="default"
|
|
className="w-full"
|
|
>
|
|
{isSyncing === connector.id ? (
|
|
<>
|
|
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
|
Syncing...
|
|
</>
|
|
) : (
|
|
<>
|
|
<RefreshCw className="h-4 w-4 mr-2" />
|
|
Sync Files
|
|
</>
|
|
)}
|
|
</Button>
|
|
<Button
|
|
onClick={() => handleDisconnect(connector)}
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full"
|
|
>
|
|
Disconnect
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
{connector.status === "error" && (
|
|
<Button
|
|
onClick={() => handleConnect(connector)}
|
|
disabled={isConnecting === connector.id}
|
|
variant="destructive"
|
|
className="w-full"
|
|
>
|
|
<AlertCircle className="h-4 w-4 mr-2" />
|
|
Retry Connection
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Sync Results */}
|
|
{syncResults[connector.id] && (
|
|
<div className="mt-4 p-3 bg-muted/50 rounded-lg">
|
|
{syncResults[connector.id]?.isStarted && (
|
|
<div className="text-sm">
|
|
<div className="font-medium text-blue-600 mb-1">
|
|
<RefreshCw className="inline h-3 w-3 mr-1" />
|
|
Task initiated:
|
|
</div>
|
|
<div className="text-blue-600">
|
|
{syncResults[connector.id]?.message}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{syncResults[connector.id]?.error && (
|
|
<div className="text-sm">
|
|
<div className="font-medium text-red-600 mb-1">
|
|
<XCircle className="h-4 w-4 inline mr-1" />
|
|
Sync Failed
|
|
</div>
|
|
<div className="text-red-600">
|
|
{syncResults[connector.id]?.error}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Coming Soon Section */}
|
|
<Card className="border-dashed">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg text-muted-foreground">Coming Soon</CardTitle>
|
|
<CardDescription>
|
|
Additional connectors are in development
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 opacity-50">
|
|
<div className="flex items-center gap-3 p-3 rounded-lg border border-dashed">
|
|
<div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center text-white font-bold">D</div>
|
|
<div>
|
|
<div className="font-medium">Dropbox</div>
|
|
<div className="text-sm text-muted-foreground">File storage</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 p-3 rounded-lg border border-dashed">
|
|
<div className="w-8 h-8 bg-purple-600 rounded flex items-center justify-center text-white font-bold">O</div>
|
|
<div>
|
|
<div className="font-medium">OneDrive</div>
|
|
<div className="text-sm text-muted-foreground">Microsoft cloud storage</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 p-3 rounded-lg border border-dashed">
|
|
<div className="w-8 h-8 bg-orange-600 rounded flex items-center justify-center text-white font-bold">B</div>
|
|
<div>
|
|
<div className="font-medium">Box</div>
|
|
<div className="text-sm text-muted-foreground">Enterprise file sharing</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function ProtectedConnectorsPage() {
|
|
return (
|
|
<ProtectedRoute>
|
|
<ConnectorsPage />
|
|
</ProtectedRoute>
|
|
)
|
|
}
|