From 9a98742f8139b1ec864809a5c0f1d0eb28ad2f00 Mon Sep 17 00:00:00 2001
From: CREDO23 <bakerathierry@gmail.com>
Date: Wed, 30 Jul 2025 21:37:12 +0200
Subject: [PATCH] Add web implementation for clickup connector

---
 .../15_add_clickup_connector_enums.py         |   8 +-
 .../app/services/connector_service.py         |   8 +-
 .../connectors/[connector_id]/edit/page.tsx   |  11 +
 .../connectors/add/clickup-connector/page.tsx | 232 ++++++++++++++++++
 .../[search_space_id]/connectors/add/page.tsx |   8 +
 .../documents/(manage)/page.tsx               |   2 +
 6 files changed, 263 insertions(+), 6 deletions(-)
 create mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/clickup-connector/page.tsx

diff --git a/surfsense_backend/alembic/versions/15_add_clickup_connector_enums.py b/surfsense_backend/alembic/versions/15_add_clickup_connector_enums.py
index 4f339c0d7..8882cfccc 100644
--- a/surfsense_backend/alembic/versions/15_add_clickup_connector_enums.py
+++ b/surfsense_backend/alembic/versions/15_add_clickup_connector_enums.py
@@ -6,15 +6,15 @@ Create Date: 2025-07-29 12:00:00.000000
 
 """
 
-from typing import Sequence, Union
+from collections.abc import Sequence
 
 from alembic import op
 
 # revision identifiers, used by Alembic.
 revision: str = "15_add_clickup_connector_enums"
-down_revision: Union[str, None] = "14_add_confluence_connector_enums"
-branch_labels: Union[str, Sequence[str], None] = None
-depends_on: Union[str, Sequence[str], None] = None
+down_revision: str | None = "14_add_confluence_connector_enums"
+branch_labels: str | Sequence[str] | None = None
+depends_on: str | Sequence[str] | None = None
 
 
 def upgrade() -> None:
diff --git a/surfsense_backend/app/services/connector_service.py b/surfsense_backend/app/services/connector_service.py
index 74f7c5a70..de9c4c22a 100644
--- a/surfsense_backend/app/services/connector_service.py
+++ b/surfsense_backend/app/services/connector_service.py
@@ -1246,7 +1246,9 @@ class ConnectorService:
             if task_priority:
                 description_parts.append(f"Priority: {task_priority}")
             if task_assignees:
-                assignee_names = [assignee.get("username", "Unknown") for assignee in task_assignees]
+                assignee_names = [
+                    assignee.get("username", "Unknown") for assignee in task_assignees
+                ]
                 description_parts.append(f"Assignees: {', '.join(assignee_names)}")
             if task_due_date:
                 description_parts.append(f"Due: {task_due_date}")
@@ -1255,7 +1257,9 @@ class ConnectorService:
             if task_space_name:
                 description_parts.append(f"Space: {task_space_name}")
 
-            description = " | ".join(description_parts) if description_parts else "ClickUp Task"
+            description = (
+                " | ".join(description_parts) if description_parts else "ClickUp Task"
+            )
 
             source = {
                 "id": document.get("id", self.source_id_counter),
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/edit/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/edit/page.tsx
index a535319a5..abd223a36 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/edit/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/edit/page.tsx
@@ -228,6 +228,17 @@ export default function EditConnectorPage() {
 									</div>
 								)}
 
+								{/* == ClickUp == */}
+								{connector.connector_type === "CLICKUP_CONNECTOR" && (
+									<EditSimpleTokenForm
+										control={editForm.control}
+										fieldName="CLICKUP_API_TOKEN"
+										fieldLabel="ClickUp API Token"
+										fieldDescription="Update your ClickUp API Token if needed."
+										placeholder="pk_..."
+									/>
+								)}
+
 								{/* == Linkup == */}
 								{connector.connector_type === "LINKUP_API" && (
 									<EditSimpleTokenForm
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/clickup-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/clickup-connector/page.tsx
new file mode 100644
index 000000000..5f6eee505
--- /dev/null
+++ b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/clickup-connector/page.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { ArrowLeft, ExternalLink, Eye, EyeOff } from "lucide-react";
+import Link from "next/link";
+import { toast } from "sonner";
+import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
+
+interface ClickUpConnectorPageProps {
+	params: {
+		search_space_id: string;
+	};
+}
+
+// Define the form schema with Zod
+const clickupConnectorFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	api_token: z.string().min(10, {
+		message: "ClickUp API Token is required and must be valid.",
+	}),
+});
+
+// Define the type for the form values
+type ClickUpConnectorFormValues = z.infer<typeof clickupConnectorFormSchema>;
+
+export default function ClickUpConnectorPage({ params }: ClickUpConnectorPageProps) {
+	const router = useRouter();
+	const { createConnector } = useSearchSourceConnectors();
+	const [isLoading, setIsLoading] = useState(false);
+	const [showApiToken, setShowApiToken] = useState(false);
+
+	// Initialize the form with react-hook-form and zod validation
+	const form = useForm<ClickUpConnectorFormValues>({
+		resolver: zodResolver(clickupConnectorFormSchema),
+		defaultValues: {
+			name: "ClickUp Connector",
+			api_token: "",
+		},
+	});
+
+	// Handle form submission
+	async function onSubmit(values: ClickUpConnectorFormValues) {
+		setIsLoading(true);
+
+		try {
+			const connectorData = {
+				name: values.name,
+				connector_type: "CLICKUP_CONNECTOR",
+				is_indexable: true,
+				config: {
+					CLICKUP_API_TOKEN: values.api_token,
+				},
+				last_indexed_at: null,
+			};
+
+			await createConnector(connectorData);
+
+			toast.success("ClickUp connector created successfully!");
+			router.push(`/dashboard/${params.search_space_id}/connectors`);
+		} catch (error) {
+			console.error("Error creating ClickUp connector:", error);
+			toast.error("Failed to create ClickUp connector. Please try again.");
+		} finally {
+			setIsLoading(false);
+		}
+	}
+
+	return (
+		<div className="container mx-auto py-6 max-w-2xl">
+			<div className="mb-6">
+				<Link
+					href={`/dashboard/${params.search_space_id}/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>
+				<h1 className="text-3xl font-bold">Add ClickUp Connector</h1>
+				<p className="text-muted-foreground mt-2">
+					Connect your ClickUp workspace to search and retrieve tasks.
+				</p>
+			</div>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>ClickUp Configuration</CardTitle>
+					<CardDescription>
+						Enter your ClickUp API token to connect your workspace. You can generate a personal API token from your ClickUp settings.
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Form {...form}>
+						<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+							<FormField
+								control={form.control}
+								name="name"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Connector Name</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="ClickUp Connector"
+												{...field}
+											/>
+										</FormControl>
+										<FormDescription>
+											A friendly name to identify this ClickUp connector.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="api_token"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>ClickUp API Token</FormLabel>
+										<FormControl>
+											<div className="relative">
+												<Input
+													type={showApiToken ? "text" : "password"}
+													placeholder="pk_..."
+													{...field}
+													className="pr-10"
+												/>
+												<Button
+													type="button"
+													variant="ghost"
+													size="sm"
+													className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+													onClick={() => setShowApiToken(!showApiToken)}
+												>
+													{showApiToken ? (
+														<EyeOff className="h-4 w-4" />
+													) : (
+														<Eye className="h-4 w-4" />
+													)}
+												</Button>
+											</div>
+										</FormControl>
+										<FormDescription>
+											Your ClickUp personal API token. You can generate one in your{" "}
+											<Link
+												href="https://app.clickup.com/settings/apps"
+												target="_blank"
+												className="text-primary hover:underline inline-flex items-center"
+											>
+												ClickUp settings
+												<ExternalLink className="ml-1 h-3 w-3" />
+											</Link>
+											.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<div className="flex justify-end space-x-4">
+								<Button
+									type="button"
+									variant="outline"
+									onClick={() => router.back()}
+									disabled={isLoading}
+								>
+									Cancel
+								</Button>
+								<Button type="submit" disabled={isLoading}>
+									{isLoading ? "Creating..." : "Create Connector"}
+								</Button>
+							</div>
+						</form>
+					</Form>
+				</CardContent>
+			</Card>
+
+			<Card className="mt-6">
+				<CardHeader>
+					<CardTitle className="text-lg">How to get your ClickUp API Token</CardTitle>
+				</CardHeader>
+				<CardContent className="space-y-4">
+					<div className="space-y-2">
+						<p className="text-sm text-muted-foreground">
+							1. Log in to your ClickUp account
+						</p>
+						<p className="text-sm text-muted-foreground">
+							2. Click your avatar in the upper-right corner and select "Settings"
+						</p>
+						<p className="text-sm text-muted-foreground">
+							3. In the sidebar, click "Apps"
+						</p>
+						<p className="text-sm text-muted-foreground">
+							4. Under "API Token", click "Generate" or "Regenerate"
+						</p>
+						<p className="text-sm text-muted-foreground">
+							5. Copy the generated token and paste it above
+						</p>
+					</div>
+					<div className="mt-4">
+						<Link
+							href="https://app.clickup.com/settings/apps"
+							target="_blank"
+							className="inline-flex items-center text-sm text-primary hover:underline"
+						>
+							Go to ClickUp API Settings
+							<ExternalLink className="ml-1 h-3 w-3" />
+						</Link>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx
index f6dbd51c9..a1be455f6 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx
@@ -15,6 +15,7 @@ import {
 	IconMail,
 	IconTicket,
 	IconWorldWww,
+	IconChecklist,
 } from "@tabler/icons-react";
 import { AnimatePresence, motion, type Variants } from "framer-motion";
 import Link from "next/link";
@@ -107,6 +108,13 @@ const connectorCategories: ConnectorCategory[] = [
 				icon: <IconTicket className="h-6 w-6" />,
 				status: "available",
 			},
+			{
+				id: "clickup-connector",
+				title: "ClickUp",
+				description: "Connect to ClickUp to search tasks, comments and project data.",
+				icon: <IconChecklist className="h-6 w-6" />,
+				status: "available",
+			},
 		],
 	},
 	{
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
index e9f49c990..727a7698b 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
@@ -7,6 +7,7 @@ import {
 	IconBrandNotion,
 	IconBrandSlack,
 	IconBrandYoutube,
+	IconChecklist,
 	IconLayoutKanban,
 	IconTicket,
 } from "@tabler/icons-react";
@@ -146,6 +147,7 @@ const documentTypeIcons = {
 	JIRA_CONNECTOR: IconTicket,
 	DISCORD_CONNECTOR: IconBrandDiscord,
 	CONFLUENCE_CONNECTOR: IconBook,
+	CLICKUP_CONNECTOR: IconChecklist,
 } as const;
 
 const columns: ColumnDef<Document>[] = [