feat: Add Linear and Tavily API connector forms and configurations, organized the components

surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info } from "lucide-react";
+import type { FC } from "react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+
+const linearConnectorFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	api_key: z
+		.string()
+		.min(10, {
+			message: "Linear API Key is required and must be valid.",
+		})
+		.regex(/^lin_api_/, {
+			message: "Linear API Key should start with 'lin_api_'",
+		}),
+});
+
+type LinearConnectorFormValues = z.infer<typeof linearConnectorFormSchema>;
+
+export const LinearConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const form = useForm<LinearConnectorFormValues>({
+		resolver: zodResolver(linearConnectorFormSchema),
+		defaultValues: {
+			name: "Linear Connector",
+			api_key: "",
+		},
+	});
+
+	const handleSubmit = async (values: LinearConnectorFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.LINEAR_CONNECTOR,
+				config: {
+					LINEAR_API_KEY: values.api_key,
+				},
+				is_indexable: true,
+				last_indexed_at: null,
+				periodic_indexing_enabled: false,
+				indexing_frequency_minutes: null,
+				next_scheduled_at: null,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	return (
+		<div className="space-y-6 pb-6">
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						You'll need a Linear API Key to use this connector. You can create one from{" "}
+						<a
+							href="https://linear.app/settings/api"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="font-medium underline underline-offset-4"
+						>
+							Linear API Settings
+						</a>
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
+				<Form {...form}>
+					<form id="linear-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My Linear Connector" 
+											className="border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="api_key"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Linear API Key</FormLabel>
+									<FormControl>
+										<Input 
+											type="password" 
+											placeholder="lin_api_..." 
+											className="border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Your Linear API Key will be encrypted and stored securely. It typically starts with "lin_api_".
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</form>
+				</Form>
+			</div>
+		</div>
+	);
+};
+

surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/tavily-api-connect-form.tsx

@@ -18,7 +18,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { EnumConnectorName } from "@/contracts/enums/connector";
-import type { ConnectFormProps } from "./index";
+import type { ConnectFormProps } from "../index";
 
 const tavilyApiFormSchema = z.object({
 	name: z.string().min(3, {

surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx

@@ -1,5 +1,6 @@
 import type { FC } from "react";
-import { TavilyApiConnectForm } from "./tavily-api-connect-form";
+import { LinearConnectForm } from "./components/linear-connect-form";
+import { TavilyApiConnectForm } from "./components/tavily-api-connect-form";
 
 export interface ConnectFormProps {
 	onSubmit: (data: {
@@ -28,6 +29,8 @@ export function getConnectFormComponent(
 	switch (connectorType) {
 		case "TAVILY_API":
 			return TavilyApiConnectForm;
+		case "LINEAR_CONNECTOR":
+			return LinearConnectForm;
 		// Add other connector types here as needed
 		default:
 			return null;

surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/linear-config.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { KeyRound } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ConnectorConfigProps } from "../index";
+
+export interface LinearConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+export const LinearConfig: FC<LinearConfigProps> = ({
+	connector,
+	onConfigChange,
+	onNameChange,
+}) => {
+	const [apiKey, setApiKey] = useState<string>(
+		(connector.config?.LINEAR_API_KEY as string) || ""
+	);
+	const [name, setName] = useState<string>(connector.name || "");
+
+	// Update API key and name when connector changes
+	useEffect(() => {
+		const key = (connector.config?.LINEAR_API_KEY as string) || "";
+		setApiKey(key);
+		setName(connector.name || "");
+	}, [connector.config, connector.name]);
+
+	const handleApiKeyChange = (value: string) => {
+		setApiKey(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				LINEAR_API_KEY: value,
+			});
+		}
+	};
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My Linear Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Configuration */}
+			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Configuration</h3>
+				</div>
+
+				<div className="space-y-2">
+					<Label className="flex items-center gap-2 text-xs sm:text-sm">
+						<KeyRound className="h-4 w-4" />
+						Linear API Key
+					</Label>
+					<Input
+						type="password"
+						value={apiKey}
+						onChange={(e) => handleApiKeyChange(e.target.value)}
+						placeholder="Begins with lin_api_..."
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						Update your Linear API Key if needed.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+};
+

surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx

@@ -3,6 +3,7 @@
 import type { FC } from "react";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import { GoogleDriveConfig } from "./components/google-drive-config";
+import { LinearConfig } from "./components/linear-config";
 import { TavilyApiConfig } from "./components/tavily-api-config";
 import { WebcrawlerConfig } from "./components/webcrawler-config";
 import { YouTubeConfig } from "./components/youtube-config";
@@ -26,6 +27,8 @@ export function getConnectorConfigComponent(
 			return GoogleDriveConfig;
 		case "TAVILY_API":
 			return TavilyApiConfig;
+		case "LINEAR_CONNECTOR":
+			return LinearConfig;
 		case "WEBCRAWLER_CONNECTOR":
 			return WebcrawlerConfig;
 		case "YOUTUBE_CONNECTOR":

surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { EnumConnectorName } from "@/contracts/enums/connector";
 import { getConnectorTypeDisplay } from "@/lib/connectors/utils";
-import { getConnectFormComponent } from "../connect-forms";
+import { getConnectFormComponent } from "../../connect-forms";
 
 interface ConnectorConnectViewProps {
 	connectorType: string;
@@ -41,10 +41,18 @@ export const ConnectorConnectView: FC<ConnectorConnectViewProps> = ({
 		if (isSubmitting) {
 			return;
 		}
-		const form = document.getElementById("tavily-connect-form") as HTMLFormElement;
+		// Map connector types to their form IDs
+		const formIdMap: Record<string, string> = {
+			TAVILY_API: "tavily-connect-form",
+			LINEAR_CONNECTOR: "linear-connect-form",
+		};
+		const formId = formIdMap[connectorType];
+		if (formId) {
+			const form = document.getElementById(formId) as HTMLFormElement;
 			if (form) {
 				form.requestSubmit();
 			}
+		}
 	};
 
 	if (!ConnectFormComponent) {
@@ -79,7 +87,7 @@ export const ConnectorConnectView: FC<ConnectorConnectViewProps> = ({
 					</div>
 					<div>
 						<h2 className="text-xl sm:text-2xl font-semibold tracking-tight">
-							Connect {connectorType === "TAVILY_API" ? "Tavily API" : connectorType}
+							Connect {getConnectorTypeDisplay(connectorType)}
 						</h2>
 						<p className="text-xs sm:text-base text-muted-foreground mt-1">
 							Enter your connection details

surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx

@@ -104,11 +104,12 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 							const isWebcrawler = connector.id === "webcrawler-connector";
 							const isYouTube = connector.id === "youtube-connector";
 							const isTavily = connector.id === "tavily-api";
+							const isLinear = connector.id === "linear-connector";
 							const handleConnect = isWebcrawler && onCreateWebcrawler
 								? onCreateWebcrawler
 								: isYouTube && onCreateYouTube
 								? onCreateYouTube
-								: isTavily && onConnectNonOAuth
+								: (isTavily || isLinear) && onConnectNonOAuth
 								? () => onConnectNonOAuth(connector.connectorType)
 								: () => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`);