Merge pull request #295 from CREDO23/feature/airtable-connector

[Feature]  Add Airtable connector

surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/page.tsx

@@ -48,6 +48,11 @@ const getConnectorTypeDisplay = (type: string): string => {
 		JIRA_CONNECTOR: "Jira Connector",
 		DISCORD_CONNECTOR: "Discord Connector",
 		LINKUP_API: "Linkup",
+		CONFLUENCE_CONNECTOR: "Confluence Connector",
+		CLICKUP_CONNECTOR: "ClickUp Connector",
+		GOOGLE_CALENDAR_CONNECTOR: "Google Calendar Connector",
+		GOOGLE_GMAIL_CONNECTOR: "Google Gmail Connector",
+		AIRTABLE_CONNECTOR: "Airtable Connector",
 		// Add other connector types here as needed
 	};
 	return typeMap[type] || type;

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

@@ -0,0 +1,184 @@
+"use client";
+
+import { IconBrandAirtable } from "@tabler/icons-react";
+import { motion } from "framer-motion";
+import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
+import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import {
+	type SearchSourceConnector,
+	useSearchSourceConnectors,
+} from "@/hooks/useSearchSourceConnectors";
+
+export default function AirtableConnectorPage() {
+	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 { fetchConnectors } = useSearchSourceConnectors();
+
+	useEffect(() => {
+		fetchConnectors().then((data) => {
+			const connector = data.find(
+				(c: SearchSourceConnector) => c.connector_type === EnumConnectorName.AIRTABLE_CONNECTOR
+			);
+			if (connector) {
+				setDoesConnectorExist(true);
+			}
+		});
+	}, []);
+
+	const handleConnectAirtable = async () => {
+		setIsConnecting(true);
+		try {
+			const response = await fetch(
+				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/auth/airtable/connector/add/?space_id=${searchSpaceId}`,
+				{
+					method: "GET",
+					headers: {
+						Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
+					},
+				}
+			);
+
+			if (!response.ok) {
+				throw new Error("Failed to initiate Airtable OAuth");
+			}
+
+			const data = await response.json();
+
+			// Redirect to Airtable for authentication
+			window.location.href = data.auth_url;
+		} catch (error) {
+			console.error("Error connecting to Airtable:", error);
+			toast.error("Failed to connect to Airtable");
+		} 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 bg-blue-100 dark:bg-blue-900">
+							<IconBrandAirtable className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+						</div>
+						<div>
+							<h1 className="text-3xl font-bold tracking-tight">Connect Airtable</h1>
+							<p className="text-muted-foreground">Connect your Airtable to search records.</p>
+						</div>
+					</div>
+				</div>
+
+				{/* OAuth Connection Card */}
+				{!doesConnectorExist ? (
+					<Card>
+						<CardHeader>
+							<CardTitle>Connect Your Airtable Account</CardTitle>
+							<CardDescription>
+								Connect your Airtable account to access your records. We'll only request read-only
+								access to your records.
+							</CardDescription>
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<div className="flex items-center space-x-2 text-sm text-muted-foreground">
+								<Check className="h-4 w-4 text-green-500" />
+								<span>Read-only access to your records</span>
+							</div>
+							<div className="flex items-center space-x-2 text-sm text-muted-foreground">
+								<Check className="h-4 w-4 text-green-500" />
+								<span>Access works even when you're offline</span>
+							</div>
+							<div className="flex items-center space-x-2 text-sm text-muted-foreground">
+								<Check className="h-4 w-4 text-green-500" />
+								<span>You can disconnect anytime</span>
+							</div>
+						</CardContent>
+						<CardFooter className="flex justify-between">
+							<Button
+								type="button"
+								variant="outline"
+								onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
+							>
+								Cancel
+							</Button>
+							<Button onClick={handleConnectAirtable} disabled={isConnecting}>
+								{isConnecting ? (
+									<>
+										<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+										Connecting...
+									</>
+								) : (
+									<>
+										<ExternalLink className="mr-2 h-4 w-4" />
+										Connect Your Airtable Account
+									</>
+								)}
+							</Button>
+						</CardFooter>
+					</Card>
+				) : (
+					/* Configuration Form Card */
+					<Card>
+						<CardHeader>
+							<CardTitle>✅ Your Airtable is successfully connected!</CardTitle>
+						</CardHeader>
+					</Card>
+				)}
+
+				{/* Help Section */}
+				{!doesConnectorExist && (
+					<Card className="mt-6">
+						<CardHeader>
+							<CardTitle className="text-lg">How It Works</CardTitle>
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<div>
+								<h4 className="font-medium mb-2">1. Connect Your Account</h4>
+								<p className="text-sm text-muted-foreground">
+									Click "Connect Your Airtable Account" to start the secure OAuth process. You'll be
+									redirected to Airtable to sign in.
+								</p>
+							</div>
+							<div>
+								<h4 className="font-medium mb-2">2. Grant Permissions</h4>
+								<p className="text-sm text-muted-foreground">
+									Airtable will ask for permission to read your records. We only request read-only
+									access to keep your data safe.
+								</p>
+							</div>
+						</CardContent>
+					</Card>
+				)}
+			</motion.div>
+		</div>
+	);
+}

surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx

@@ -15,6 +15,7 @@ import {
 	IconLayoutKanban,
 	IconLinkPlus,
 	IconMail,
+	IconTable,
 	IconTicket,
 	IconWorldWww,
 } from "@tabler/icons-react";
@@ -143,6 +144,13 @@ const connectorCategories: ConnectorCategory[] = [
 				icon: <IconBook className="h-6 w-6" />,
 				status: "available",
 			},
+			{
+				id: "airtable-connector",
+				title: "Airtable",
+				description: "Connect to Airtable to search records, tables and database content.",
+				icon: <IconTable className="h-6 w-6" />,
+				status: "available",
+			},
 		],
 	},
 	{

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon.tsx

@@ -11,6 +11,7 @@ import {
 	IconChecklist,
 	IconLayoutKanban,
 	IconMail,
+	IconTable,
 	IconTicket,
 } from "@tabler/icons-react";
 import { File, Globe, Webhook } from "lucide-react";
@@ -33,6 +34,7 @@ const documentTypeIcons: Record<string, IconComponent> = {
 	CLICKUP_CONNECTOR: IconChecklist,
 	GOOGLE_CALENDAR_CONNECTOR: IconCalendar,
 	GOOGLE_GMAIL_CONNECTOR: IconMail,
+	AIRTABLE_CONNECTOR: IconTable,
 };
 
 export function getDocumentTypeIcon(type: string): IconComponent {

surfsense_web/components/chat/ChatSources.tsx

@@ -12,6 +12,7 @@ import {
 	BookOpen,
 	Calendar,
 	CheckSquare,
+	Database,
 	ExternalLink,
 	FileText,
 	Globe,
@@ -86,6 +87,11 @@ function getSourceIcon(type: string) {
 		case "GOOGLE_GMAIL_CONNECTOR":
 			return <Mail className="h-4 w-4" />;
 
+		// Airtable
+		case "USER_SELECTED_AIRTABLE_CONNECTOR":
+		case "AIRTABLE_CONNECTOR":
+			return <Database className="h-4 w-4" />;
+
 		// YouTube
 		case "USER_SELECTED_YOUTUBE_VIDEO":
 		case "YOUTUBE_VIDEO":

surfsense_web/components/chat/ConnectorComponents.tsx

@@ -8,6 +8,7 @@ import {
 	IconLayoutKanban,
 	IconLinkPlus,
 	IconMail,
+	IconTable,
 	IconTicket,
 } from "@tabler/icons-react";
 import {
@@ -62,6 +63,8 @@ export const getConnectorIcon = (connectorType: string) => {
 			return <IconCalendar {...iconProps} />;
 		case "GOOGLE_GMAIL_CONNECTOR":
 			return <IconMail {...iconProps} />;
+		case "AIRTABLE_CONNECTOR":
+			return <IconTable {...iconProps} />;
 		case "DEEP":
 			return <Sparkles {...iconProps} />;
 		case "DEEPER":

surfsense_web/components/chat/DocumentsDataTable.tsx

@@ -55,6 +55,10 @@ const DOCUMENT_TYPES: (DocumentType | "ALL")[] = [
 	"DISCORD_CONNECTOR",
 	"JIRA_CONNECTOR",
 	"CONFLUENCE_CONNECTOR",
+	"CLICKUP_CONNECTOR",
+	"GOOGLE_CALENDAR_CONNECTOR",
+	"GOOGLE_GMAIL_CONNECTOR",
+	"AIRTABLE_CONNECTOR",
 ];
 
 const getDocumentTypeColor = (type: DocumentType) => {

surfsense_web/contracts/enums/connector.ts

@@ -12,4 +12,5 @@ export enum EnumConnectorName {
 	CLICKUP_CONNECTOR = "CLICKUP_CONNECTOR",
 	GOOGLE_CALENDAR_CONNECTOR = "GOOGLE_CALENDAR_CONNECTOR",
 	GOOGLE_GMAIL_CONNECTOR = "GOOGLE_GMAIL_CONNECTOR",
+	AIRTABLE_CONNECTOR = "AIRTABLE_CONNECTOR",
 }

surfsense_web/hooks/use-documents.ts

@@ -23,7 +23,11 @@ export type DocumentType =
 	| "LINEAR_CONNECTOR"
 	| "DISCORD_CONNECTOR"
 	| "JIRA_CONNECTOR"
-	| "CONFLUENCE_CONNECTOR";
+	| "CONFLUENCE_CONNECTOR"
+	| "CLICKUP_CONNECTOR"
+	| "GOOGLE_CALENDAR_CONNECTOR"
+	| "GOOGLE_GMAIL_CONNECTOR"
+	| "AIRTABLE_CONNECTOR";
 
 export function useDocuments(searchSpaceId: number, lazy: boolean = false) {
 	const [documents, setDocuments] = useState<Document[]>([]);

surfsense_web/lib/connectors/utils.ts

@@ -14,6 +14,7 @@ export const getConnectorTypeDisplay = (type: string): string => {
 		CLICKUP_CONNECTOR: "ClickUp",
 		GOOGLE_CALENDAR_CONNECTOR: "Google Calendar",
 		GOOGLE_GMAIL_CONNECTOR: "Google Gmail",
+		AIRTABLE_CONNECTOR: "Airtable",
 	};
 	return typeMap[type] || type;
 };