Add CreateSearchSpaceDialog component

surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useAtomValue } from "jotai";
+import { Loader2, Plus, Search } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { createSearchSpaceMutationAtom } from "@/atoms/search-spaces/search-space-mutation.atoms";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { trackSearchSpaceCreated } from "@/lib/posthog/events";
+
+const formSchema = z.object({
+	name: z.string().min(1, "Name is required"),
+	description: z.string().optional(),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+interface CreateSearchSpaceDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+}
+
+export function CreateSearchSpaceDialog({ open, onOpenChange }: CreateSearchSpaceDialogProps) {
+	const t = useTranslations("searchSpace");
+	const tCommon = useTranslations("common");
+	const router = useRouter();
+	const [isSubmitting, setIsSubmitting] = useState(false);
+
+	const { mutateAsync: createSearchSpace } = useAtomValue(createSearchSpaceMutationAtom);
+
+	const form = useForm<FormValues>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			name: "",
+			description: "",
+		},
+	});
+
+	const handleSubmit = async (values: FormValues) => {
+		setIsSubmitting(true);
+		try {
+			const result = await createSearchSpace({
+				name: values.name,
+				description: values.description || "",
+			});
+
+			// Track search space creation
+			trackSearchSpaceCreated(result.id, values.name);
+
+			// Reset form and close dialog
+			form.reset();
+			onOpenChange(false);
+
+			// Redirect to the newly created search space's onboarding
+			router.push(`/dashboard/${result.id}/onboard`);
+		} catch (error) {
+			console.error("Failed to create search space:", error);
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+
+	const handleOpenChange = (newOpen: boolean) => {
+		if (!newOpen) {
+			form.reset();
+		}
+		onOpenChange(newOpen);
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={handleOpenChange}>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader>
+					<div className="flex items-center gap-3">
+						<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+							<Search className="h-5 w-5 text-primary" />
+						</div>
+						<div>
+							<DialogTitle>{t("create_title")}</DialogTitle>
+							<DialogDescription>{t("create_description")}</DialogDescription>
+						</div>
+					</div>
+				</DialogHeader>
+
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(handleSubmit)} className="flex flex-col gap-4">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>{t("name_label")}</FormLabel>
+									<FormControl>
+										<Input
+											placeholder={t("name_placeholder")}
+											{...field}
+											autoFocus
+										/>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="description"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>
+										{t("description_label")}{" "}
+										<span className="text-muted-foreground font-normal">
+											({tCommon("optional")})
+										</span>
+									</FormLabel>
+									<FormControl>
+										<Input placeholder={t("description_placeholder")} {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<DialogFooter className="flex gap-2 pt-2">
+							<Button
+								type="button"
+								variant="outline"
+								onClick={() => handleOpenChange(false)}
+								disabled={isSubmitting}
+							>
+								{tCommon("cancel")}
+							</Button>
+							<Button type="submit" disabled={isSubmitting}>
+								{isSubmitting ? (
+									<>
+										<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+										{t("creating")}
+									</>
+								) : (
+									<>
+										<Plus className="mr-2 h-4 w-4" />
+										{t("create_button")}
+									</>
+								)}
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+}
+