296 lines
10 KiB
TypeScript
296 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { UnifiedCloudPicker, CloudFile } from "@/components/cloud-picker";
|
|
import { Loader2 } from "lucide-react";
|
|
|
|
// CloudFile interface is now imported from the unified cloud picker
|
|
|
|
interface CloudConnector {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
icon: React.ReactNode;
|
|
status: "not_connected" | "connecting" | "connected" | "error";
|
|
type: string;
|
|
connectionId?: string;
|
|
clientId: string;
|
|
hasAccessToken: boolean;
|
|
accessTokenError?: string;
|
|
}
|
|
|
|
interface CloudConnectorsDialogProps {
|
|
isOpen: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
onFileSelected?: (files: CloudFile[], connectorType: string) => void;
|
|
}
|
|
|
|
export function CloudConnectorsDialog({
|
|
isOpen,
|
|
onOpenChange,
|
|
onFileSelected,
|
|
}: CloudConnectorsDialogProps) {
|
|
const [connectors, setConnectors] = useState<CloudConnector[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [selectedFiles, setSelectedFiles] = useState<{
|
|
[connectorId: string]: CloudFile[];
|
|
}>({});
|
|
const [connectorAccessTokens, setConnectorAccessTokens] = useState<{
|
|
[connectorType: string]: string;
|
|
}>({});
|
|
const [activePickerType, setActivePickerType] = useState<string | null>(null);
|
|
|
|
const getConnectorIcon = (iconName: string) => {
|
|
const iconMap: { [key: string]: React.ReactElement } = {
|
|
"google-drive": (
|
|
<div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center text-white font-bold leading-none shrink-0">
|
|
G
|
|
</div>
|
|
),
|
|
sharepoint: (
|
|
<div className="w-8 h-8 bg-blue-700 rounded flex items-center justify-center text-white font-bold leading-none shrink-0">
|
|
SP
|
|
</div>
|
|
),
|
|
onedrive: (
|
|
<div className="w-8 h-8 bg-blue-400 rounded flex items-center justify-center text-white font-bold leading-none shrink-0">
|
|
OD
|
|
</div>
|
|
),
|
|
};
|
|
return (
|
|
iconMap[iconName] || (
|
|
<div className="w-8 h-8 bg-gray-500 rounded flex items-center justify-center text-white font-bold leading-none shrink-0">
|
|
?
|
|
</div>
|
|
)
|
|
);
|
|
};
|
|
|
|
const fetchConnectorStatuses = useCallback(async () => {
|
|
if (!isOpen) return;
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
// Fetch available connectors from backend
|
|
const connectorsResponse = await fetch("/api/connectors");
|
|
if (!connectorsResponse.ok) {
|
|
throw new Error("Failed to load connectors");
|
|
}
|
|
|
|
const connectorsResult = await connectorsResponse.json();
|
|
const connectorTypes = Object.keys(connectorsResult.connectors);
|
|
|
|
// Filter to only cloud connectors
|
|
const cloudConnectorTypes = connectorTypes.filter(
|
|
type =>
|
|
["google_drive", "onedrive", "sharepoint"].includes(type) &&
|
|
connectorsResult.connectors[type].available
|
|
);
|
|
|
|
// Initialize connectors list
|
|
const initialConnectors = cloudConnectorTypes.map(type => ({
|
|
id: type,
|
|
name: connectorsResult.connectors[type].name,
|
|
description: connectorsResult.connectors[type].description,
|
|
icon: getConnectorIcon(connectorsResult.connectors[type].icon),
|
|
status: "not_connected" as const,
|
|
type: type,
|
|
hasAccessToken: false,
|
|
accessTokenError: undefined,
|
|
clientId: "",
|
|
}));
|
|
|
|
setConnectors(initialConnectors);
|
|
|
|
// Check status for each cloud connector type
|
|
for (const connectorType of cloudConnectorTypes) {
|
|
try {
|
|
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: { connection_id: string; is_active: boolean }) =>
|
|
conn.is_active
|
|
);
|
|
const isConnected = activeConnection !== undefined;
|
|
|
|
let hasAccessToken = false;
|
|
let accessTokenError: string | undefined = undefined;
|
|
|
|
// Try to get access token for connected connectors
|
|
if (isConnected && activeConnection) {
|
|
try {
|
|
const tokenResponse = await fetch(
|
|
`/api/connectors/${connectorType}/token?connection_id=${activeConnection.connection_id}`
|
|
);
|
|
if (tokenResponse.ok) {
|
|
const tokenData = await tokenResponse.json();
|
|
if (tokenData.access_token) {
|
|
hasAccessToken = true;
|
|
setConnectorAccessTokens(prev => ({
|
|
...prev,
|
|
[connectorType]: tokenData.access_token,
|
|
}));
|
|
}
|
|
} else {
|
|
const errorData = await tokenResponse
|
|
.json()
|
|
.catch(() => ({ error: "Token unavailable" }));
|
|
accessTokenError =
|
|
errorData.error || "Access token unavailable";
|
|
}
|
|
} catch {
|
|
accessTokenError = "Failed to fetch access token";
|
|
}
|
|
}
|
|
|
|
setConnectors(prev =>
|
|
prev.map(c =>
|
|
c.type === connectorType
|
|
? {
|
|
...c,
|
|
status: isConnected ? "connected" : "not_connected",
|
|
connectionId: activeConnection?.connection_id,
|
|
clientId: activeConnection?.client_id,
|
|
hasAccessToken,
|
|
accessTokenError,
|
|
}
|
|
: c
|
|
)
|
|
);
|
|
}
|
|
} catch (error) {
|
|
console.error(`Failed to check status for ${connectorType}:`, error);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to load cloud connectors:", error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
const handleFileSelection = (connectorId: string, files: CloudFile[]) => {
|
|
setSelectedFiles(prev => ({
|
|
...prev,
|
|
[connectorId]: files,
|
|
}));
|
|
|
|
onFileSelected?.(files, connectorId);
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchConnectorStatuses();
|
|
}, [fetchConnectorStatuses]);
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-2xl max-h-[80vh] overflow-hidden">
|
|
<DialogHeader>
|
|
<DialogTitle>Cloud File Connectors</DialogTitle>
|
|
<DialogDescription>
|
|
Select files from your connected cloud storage providers
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="py-4">
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center py-8">
|
|
<Loader2 className="h-6 w-6 animate-spin mr-2" />
|
|
Loading connectors...
|
|
</div>
|
|
) : connectors.length === 0 ? (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
No cloud connectors available. Configure them in Settings first.
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{/* Service Buttons Row */}
|
|
<div className="flex flex-wrap gap-3 justify-center">
|
|
{connectors
|
|
.filter(connector => connector.status === "connected")
|
|
.map(connector => (
|
|
<Button
|
|
key={connector.id}
|
|
variant={
|
|
connector.hasAccessToken ? "default" : "secondary"
|
|
}
|
|
disabled={!connector.hasAccessToken}
|
|
title={
|
|
!connector.hasAccessToken
|
|
? connector.accessTokenError ||
|
|
"Access token required - try reconnecting your account"
|
|
: `Select files from ${connector.name}`
|
|
}
|
|
onClick={e => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (connector.hasAccessToken) {
|
|
setActivePickerType(connector.id);
|
|
}
|
|
}}
|
|
className="min-w-[120px]"
|
|
>
|
|
{connector.name}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
|
|
{connectors.every(c => c.status !== "connected") && (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
<p>No connected cloud providers found.</p>
|
|
<p className="text-sm mt-1">
|
|
Go to Settings to connect your cloud storage accounts.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Render unified picker inside dialog */}
|
|
{activePickerType &&
|
|
connectors.find(c => c.id === activePickerType) &&
|
|
(() => {
|
|
const connector = connectors.find(
|
|
c => c.id === activePickerType
|
|
)!;
|
|
|
|
return (
|
|
<div className="mt-6">
|
|
<UnifiedCloudPicker
|
|
provider={
|
|
connector.type as
|
|
| "google_drive"
|
|
| "onedrive"
|
|
| "sharepoint"
|
|
}
|
|
onFileSelected={files => {
|
|
handleFileSelection(connector.id, files);
|
|
setActivePickerType(null);
|
|
}}
|
|
selectedFiles={selectedFiles[connector.id] || []}
|
|
isAuthenticated={connector.status === "connected"}
|
|
accessToken={connectorAccessTokens[connector.type]}
|
|
onPickerStateChange={() => {}}
|
|
clientId={connector.clientId}
|
|
/>
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|