Merge pull request #640 from CREDO23/google-drive-connector

[Feat] Add Google drive connector

surfsense_web/app/dashboard/[search_space_id]/connectors/(manage)/page.tsx

@@ -6,6 +6,9 @@ import {
 	Calendar as CalendarIcon,
 	Clock,
 	Edit,
+	Folder,
+	HardDrive,
+	Info,
 	Loader2,
 	Plus,
 	RefreshCw,
@@ -67,6 +70,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import { EnumConnectorName } from "@/contracts/enums/connector";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { cn } from "@/lib/utils";
+import { GoogleDriveFolderTree } from "@/components/connectors/google-drive-folder-tree";
 
 export default function ConnectorsPage() {
 	const t = useTranslations("connectors");
@@ -115,6 +119,10 @@ export default function ConnectorsPage() {
 	const [customFrequency, setCustomFrequency] = useState<string>("");
 	const [isSavingPeriodic, setIsSavingPeriodic] = useState(false);
 
+	// Google Drive folder selection state
+	const [driveFolderDialogOpen, setDriveFolderDialogOpen] = useState(false);
+	const [selectedFolders, setSelectedFolders] = useState<Array<{ id: string; name: string }>>([]);
+
 	useEffect(() => {
 		if (error) {
 			toast.error(t("failed_load"));
@@ -137,8 +145,55 @@ export default function ConnectorsPage() {
 
 	// Handle opening date picker for indexing
 	const handleOpenDatePicker = (connectorId: number) => {
+		// Check if this is a Google Drive connector
+		const connector = connectors.find((c) => c.id === connectorId);
+		if (connector?.connector_type === EnumConnectorName.GOOGLE_DRIVE_CONNECTOR) {
+			// Open folder selection dialog for Google Drive
+			handleOpenDriveFolderDialog(connectorId);
+		} else {
+			// Open date picker for other connectors
+			setSelectedConnectorForIndexing(connectorId);
+			setDatePickerOpen(true);
+		}
+	};
+
+	const handleOpenDriveFolderDialog = (connectorId: number) => {
 		setSelectedConnectorForIndexing(connectorId);
-		setDatePickerOpen(true);
+		setDriveFolderDialogOpen(true);
+	};
+
+	// Handle Google Drive folder indexing
+	const handleIndexDriveFolder = async () => {
+		if (selectedConnectorForIndexing === null || selectedFolders.length === 0) {
+			toast.error("Please select at least one folder");
+			return;
+		}
+
+		setDriveFolderDialogOpen(false);
+
+		try {
+			setIndexingConnectorId(selectedConnectorForIndexing);
+
+			const folderIds = selectedFolders.map((f) => f.id).join(",");
+			const folderNames = selectedFolders.map((f) => f.name).join(", ");
+
+			await indexConnector({
+				connector_id: selectedConnectorForIndexing,
+				queryParams: {
+					search_space_id: searchSpaceId,
+					folder_ids: folderIds,
+					folder_names: folderNames,
+				},
+			});
+			toast.success(t("indexing_started"));
+		} catch (error) {
+			console.error("Error indexing connector content:", error);
+			toast.error(error instanceof Error ? error.message : t("indexing_failed"));
+		} finally {
+		setIndexingConnectorId(null);
+		setSelectedConnectorForIndexing(null);
+		setSelectedFolders([]);
+	}
 	};
 
 	// Handle connector indexing with dates
@@ -387,39 +442,52 @@ export default function ConnectorsPage() {
 																		>
 																			{indexingConnectorId === connector.id ? (
 																				<RefreshCw className="h-4 w-4 animate-spin" />
+																			) : connector.connector_type === EnumConnectorName.GOOGLE_DRIVE_CONNECTOR ? (
+																				<Folder className="h-4 w-4" />
 																			) : (
 																				<CalendarIcon className="h-4 w-4" />
 																			)}
-																			<span className="sr-only">{t("index_date_range")}</span>
+																			<span className="sr-only">
+																				{connector.connector_type === EnumConnectorName.GOOGLE_DRIVE_CONNECTOR 
+																					? "Select folder to index" 
+																					: t("index_date_range")}
+																			</span>
 																		</Button>
 																	</TooltipTrigger>
 																	<TooltipContent>
-																		<p>{t("index_date_range")}</p>
-																	</TooltipContent>
-																</Tooltip>
-															</TooltipProvider>
-															<TooltipProvider>
-																<Tooltip>
-																	<TooltipTrigger asChild>
-																		<Button
-																			variant="outline"
-																			size="sm"
-																			onClick={() => handleQuickIndexConnector(connector.id)}
-																			disabled={indexingConnectorId === connector.id}
-																		>
-																			{indexingConnectorId === connector.id ? (
-																				<RefreshCw className="h-4 w-4 animate-spin" />
-																			) : (
-																				<RefreshCw className="h-4 w-4" />
-																			)}
-																			<span className="sr-only">{t("quick_index")}</span>
-																		</Button>
-																	</TooltipTrigger>
-																	<TooltipContent>
-																		<p>{t("quick_index_auto")}</p>
+																		<p>
+																			{connector.connector_type === EnumConnectorName.GOOGLE_DRIVE_CONNECTOR 
+																				? "Select folder to index" 
+																				: t("index_date_range")}
+																		</p>
 																	</TooltipContent>
 																</Tooltip>
 															</TooltipProvider>
+															{/* Hide quick index button for Google Drive (requires folder selection) */}
+															{connector.connector_type !== EnumConnectorName.GOOGLE_DRIVE_CONNECTOR && (
+																<TooltipProvider>
+																	<Tooltip>
+																		<TooltipTrigger asChild>
+																			<Button
+																				variant="outline"
+																				size="sm"
+																				onClick={() => handleQuickIndexConnector(connector.id)}
+																				disabled={indexingConnectorId === connector.id}
+																			>
+																				{indexingConnectorId === connector.id ? (
+																					<RefreshCw className="h-4 w-4 animate-spin" />
+																				) : (
+																					<RefreshCw className="h-4 w-4" />
+																				)}
+																				<span className="sr-only">{t("quick_index")}</span>
+																			</Button>
+																		</TooltipTrigger>
+																		<TooltipContent>
+																			<p>{t("quick_index_auto")}</p>
+																		</TooltipContent>
+																	</Tooltip>
+																</TooltipProvider>
+															)}
 														</div>
 													)}
 													{connector.is_indexable && (
@@ -607,6 +675,67 @@ export default function ConnectorsPage() {
 				</DialogContent>
 			</Dialog>
 
+			{/* Google Drive Folder Selection Dialog */}
+			<Dialog open={driveFolderDialogOpen} onOpenChange={setDriveFolderDialogOpen}>
+				<DialogContent className="w-auto max-w-full">
+				<DialogHeader>
+					<DialogTitle>Select Google Drive Folders</DialogTitle>
+					<DialogDescription className="flex items-start gap-2 text-sm p-2 border mt-1 rounded ">
+						<Info className="h-4 w-4 shrink-0 text-blue-500" />
+						<span>
+							Select folders to index. Only files <strong>directly in each folder</strong> will be
+							processed—subfolders must be selected separately.
+						</span>
+					</DialogDescription>
+				</DialogHeader>
+					<div className="grid gap-4 overflow-hidden w-full">
+						<div className="space-y-3 w-full overflow-hidden">
+							<Label>Browse Folders</Label>
+						{selectedConnectorForIndexing && (
+							<GoogleDriveFolderTree
+								connectorId={selectedConnectorForIndexing}
+								selectedFolders={selectedFolders}
+								onSelectFolders={(folders) => {
+									setSelectedFolders(folders);
+								}}
+							/>
+						)}
+					</div>
+					{selectedFolders.length > 0 && (
+						<div className="p-3 bg-muted rounded-lg text-sm space-y-2">
+							<div>
+								<p className="font-medium mb-1">
+									Selected {selectedFolders.length} folder{selectedFolders.length > 1 ? "s" : ""}:
+								</p>
+								<div className="max-h-24 overflow-y-auto">
+									{selectedFolders.map((folder) => (
+										<p key={folder.id} className="text-sm text-muted-foreground truncate" title={folder.name}>
+											• {folder.name}
+										</p>
+									))}
+								</div>
+							</div>
+						</div>
+					)}
+				</div>
+					<DialogFooter>
+						<Button
+							variant="outline"
+							onClick={() => {
+								setDriveFolderDialogOpen(false);
+								setSelectedConnectorForIndexing(null);
+								setSelectedFolders([]);
+							}}
+						>
+							{tCommon("cancel")}
+					</Button>
+					<Button onClick={handleIndexDriveFolder} disabled={selectedFolders.length === 0}>
+						{t("start_indexing")}
+					</Button>
+				</DialogFooter>
+				</DialogContent>
+			</Dialog>
+
 			{/* Periodic Indexing Configuration Dialog */}
 			<Dialog open={periodicDialogOpen} onOpenChange={setPeriodicDialogOpen}>
 				<DialogContent className="sm:max-w-[500px]">

surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-drive-connector/page.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import { useAtomValue } from "jotai";
+import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
+import { motion } from "motion/react";
+import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import { authenticatedFetch } from "@/lib/auth-utils";
+
+export default function GoogleDriveConnectorPage() {
+	const router = useRouter();
+	const params = useParams();
+	const searchSpaceId = params.search_space_id as string;
+	
+	const [isConnecting, setIsConnecting] = useState(false);
+	const [doesConnectorExist, setDoesConnectorExist] = useState(false);
+
+	const { refetch: fetchConnectors } = useAtomValue(connectorsAtom);
+
+	useEffect(() => {
+		fetchConnectors().then((data) => {
+			const connectors = data.data || [];
+			const connector = connectors.find(
+				(c: SearchSourceConnector) => c.connector_type === EnumConnectorName.GOOGLE_DRIVE_CONNECTOR
+			);
+			if (connector) {
+				setDoesConnectorExist(true);
+			}
+		});
+	}, []);
+
+	const handleConnectGoogle = async () => {
+		try {
+			setIsConnecting(true);
+			const response = await authenticatedFetch(
+				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/auth/google/drive/connector/add/?space_id=${searchSpaceId}`,
+				{ method: "GET" }
+			);
+
+			if (!response.ok) {
+				throw new Error("Failed to initiate Google OAuth");
+			}
+
+			const data = await response.json();
+			window.location.href = data.auth_url;
+		} catch (error) {
+			console.error("Error connecting to Google:", error);
+			toast.error("Failed to connect to Google Drive");
+		} finally {
+			setIsConnecting(false);
+		}
+	};
+
+	return (
+		<div className="container mx-auto py-8 max-w-2xl">
+			<motion.div
+				initial={{ opacity: 0, y: 20 }}
+				animate={{ opacity: 1, y: 0 }}
+				transition={{ duration: 0.5 }}
+			>
+				{/* Header */}
+				<div className="mb-8">
+					<Link
+						href={`/dashboard/${searchSpaceId}/connectors/add`}
+						className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
+					>
+						<ArrowLeft className="mr-2 h-4 w-4" />
+						Back to connectors
+					</Link>
+					<div className="flex items-center gap-4">
+						<div className="flex h-12 w-12 items-center justify-center rounded-lg">
+							{getConnectorIcon(EnumConnectorName.GOOGLE_DRIVE_CONNECTOR, "h-6 w-6")}
+						</div>
+						<div>
+							<h1 className="text-3xl font-bold tracking-tight">Connect Google Drive</h1>
+							<p className="text-muted-foreground">
+								Securely connect your Google Drive account
+							</p>
+						</div>
+					</div>
+				</div>
+
+				{/* Connection Card */}
+				{!doesConnectorExist ? (
+					<Card>
+						<CardHeader>
+							<CardTitle>Connect Your Google Account</CardTitle>
+							<CardDescription>
+								Authorize read-only access to your Google Drive. You'll select which folder to
+								index when you start indexing.
+							</CardDescription>
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<div className="flex items-center gap-3 text-sm text-muted-foreground">
+								<Check className="h-4 w-4 text-green-500" />
+								<span>Read-only access to your Drive files</span>
+							</div>
+							<div className="flex items-center gap-3 text-sm text-muted-foreground">
+								<Check className="h-4 w-4 text-green-500" />
+								<span>Index documents, spreadsheets, presentations, PDFs & more</span>
+							</div>
+							<div className="flex items-center gap-3 text-sm text-muted-foreground">
+								<Check className="h-4 w-4 text-green-500" />
+								<span>Automatic updates with change tracking</span>
+							</div>
+							<div className="flex items-center gap-3 text-sm text-muted-foreground">
+								<Check className="h-4 w-4 text-green-500" />
+								<span>Secure OAuth 2.0 authentication</span>
+							</div>
+						</CardContent>
+						<CardFooter className="flex justify-between">
+							<Button
+								type="button"
+								variant="outline"
+								onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
+							>
+								Cancel
+							</Button>
+							<Button onClick={handleConnectGoogle} disabled={isConnecting}>
+								{isConnecting ? (
+									<>
+										<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+										Connecting...
+									</>
+								) : (
+									<>
+										<ExternalLink className="mr-2 h-4 w-4" />
+										Connect Google Drive
+									</>
+								)}
+							</Button>
+						</CardFooter>
+					</Card>
+				) : (
+					<Card>
+						<CardHeader>
+							<CardTitle>✅ Already Connected</CardTitle>
+							<CardDescription>
+								Your Google Drive connector is already set up. Go to the connectors page to
+								start indexing.
+							</CardDescription>
+						</CardHeader>
+						<CardFooter>
+							<Button onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors`)}>
+								Go to Connectors
+							</Button>
+						</CardFooter>
+					</Card>
+				)}
+
+				{/* Information Card */}
+				<Card className="mt-6">
+					<CardHeader>
+						<CardTitle>How Google Drive Integration Works</CardTitle>
+					</CardHeader>
+					<CardContent className="space-y-4">
+						<div className="space-y-2">
+							<h4 className="font-medium">1️⃣ Connect Your Account</h4>
+							<p className="text-sm text-muted-foreground">
+								First, securely connect your Google Drive account using OAuth 2.0. We only
+								request read-only access.
+							</p>
+						</div>
+						<div className="space-y-2">
+							<h4 className="font-medium">2️⃣ Select Folder to Index</h4>
+							<p className="text-sm text-muted-foreground">
+								When you're ready to index, go to the connectors page and click "Index". You'll
+								choose which folder to process.
+							</p>
+						</div>
+						<div className="space-y-2">
+							<h4 className="font-medium">3️⃣ Automatic Change Detection</h4>
+							<p className="text-sm text-muted-foreground">
+								We use Google Drive's change tracking API to detect when files are modified,
+								added, or deleted. Only changed files are re-indexed.
+							</p>
+						</div>
+						<div className="space-y-2">
+							<h4 className="font-medium">📄 Comprehensive File Support</h4>
+							<p className="text-sm text-muted-foreground">
+								Supports Google Workspace files (Docs, Sheets, Slides), Microsoft Office
+								documents, PDFs, text files, images (with OCR), and more.
+							</p>
+						</div>
+					</CardContent>
+				</Card>
+			</motion.div>
+		</div>
+	);
+}