Merge pull request #242 from CREDO23/feature/clickup-connector

[Feature] Add clickup connector

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

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

@@ -0,0 +1,217 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, ExternalLink, Eye, EyeOff } from "lucide-react";
+import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import * as z from "zod";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
+
+// 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() {
+	const router = useRouter();
+	const params = useParams();
+	const searchSpaceId = params.search_space_id as string;
+	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/${searchSpaceId}/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">
+			<Button
+				variant="ghost"
+				className="mb-6"
+				onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
+			>
+				<ArrowLeft className="mr-2 h-4 w-4" />
+				Back to Connectors
+			</Button>
+
+			<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>
+	);
+}

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

@@ -8,6 +8,7 @@ import {
 	IconBrandSlack,
 	IconBrandWindows,
 	IconBrandZoom,
+	IconChecklist,
 	IconChevronDown,
 	IconChevronRight,
 	IconLayoutKanban,
@@ -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",
+			},
 		],
 	},
 	{

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>[] = [
@@ -222,6 +224,7 @@ const columns: ColumnDef<Document>[] = [
 			);
 		},
 		size: 180,
+		enableColumnFilter: true,
 	},
 	{
 		header: "Content Summary",
@@ -402,25 +405,29 @@ export default function DocumentsTable() {
 	// Get unique status values
 	const uniqueStatusValues = useMemo(() => {
 		const statusColumn = table.getColumn("document_type");
+		if (!data.length) return []; // Don't compute until data is present
 
 		if (!statusColumn) return [];
 
 		const values = Array.from(statusColumn.getFacetedUniqueValues().keys());
 
 		return values.sort();
-	}, [table.getColumn]);
+	}, [table.getColumn, data]);
 
 	// Get counts for each status
 	const statusCounts = useMemo(() => {
 		const statusColumn = table.getColumn("document_type");
+		if (!data.length) return new Map(); // Don't compute until data is present
 		if (!statusColumn) return new Map();
 		return statusColumn.getFacetedUniqueValues();
-	}, [table.getColumn]);
+	}, [table.getColumn, data, columnFilters]);
 
 	const selectedStatuses = useMemo(() => {
 		const filterValue = table.getColumn("document_type")?.getFilterValue() as string[];
+		if (!data.length) return []; // Don't compute until data is present
+
 		return filterValue ?? [];
-	}, [table.getColumn]);
+	}, [table.getColumn, data, columnFilters]);
 
 	const handleStatusChange = (checked: boolean, value: string) => {
 		const filterValue = table.getColumn("document_type")?.getFilterValue() as string[];
@@ -435,6 +442,13 @@ export default function DocumentsTable() {
 			}
 		}
 
+		setColumnFilters([
+			{
+				id: "document_type",
+				value: newFilterValue,
+			},
+		]);
+
 		table
 			.getColumn("document_type")
 			?.setFilterValue(newFilterValue.length ? newFilterValue : undefined);