feat: add docker registry upload

components/dashboard/settings/cluster/registry/add-docker-registry.tsx

@@ -23,6 +23,7 @@ import { AlertTriangle, Container } from "lucide-react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import { z } from "zod";
 
 const AddRegistrySchema = z.object({
@@ -38,6 +39,7 @@ const AddRegistrySchema = z.object({
 	registryUrl: z.string().min(1, {
 		message: "Registry URL is required",
 	}),
+	imagePrefix: z.string(),
 });
 
 type AddRegistry = z.infer<typeof AddRegistrySchema>;
@@ -45,39 +47,55 @@ type AddRegistry = z.infer<typeof AddRegistrySchema>;
 export const AddRegistry = () => {
 	const utils = api.useUtils();
 	const [isOpen, setIsOpen] = useState(false);
-	const { mutateAsync, error, isError } = api.project.create.useMutation();
+	const { mutateAsync, error, isError } = api.registry.create.useMutation();
+	const { mutateAsync: testRegistry, isLoading } =
+		api.registry.testRegistry.useMutation();
 	const router = useRouter();
 	const form = useForm<AddRegistry>({
 		defaultValues: {
 			username: "",
 			password: "",
 			registryUrl: "",
+			imagePrefix: "",
+			registryName: "",
 		},
 		resolver: zodResolver(AddRegistrySchema),
 	});
 
+	console.log(form.formState.errors);
+
+	const password = form.watch("password");
+	const username = form.watch("username");
+	const registryUrl = form.watch("registryUrl");
+	const registryName = form.watch("registryName");
+	const imagePrefix = form.watch("imagePrefix");
+
 	useEffect(() => {
 		form.reset({
 			username: "",
 			password: "",
 			registryUrl: "",
+			imagePrefix: "",
 		});
 	}, [form, form.reset, form.formState.isSubmitSuccessful]);
 
 	const onSubmit = async (data: AddRegistry) => {
-		// await mutateAsync({
-		// 	name: data.name,
-		// 	description: data.description,
-		// })
-		// 	.then(async (data) => {
-		// 		await utils.project.all.invalidate();
-		// 		toast.success("Project Created");
-		// 		setIsOpen(false);
-		// 		router.push(`/dashboard/project/${data.projectId}`);
-		// 	})
-		// 	.catch(() => {
-		// 		toast.error("Error to create a project");
-		// 	});
+		await mutateAsync({
+			password: data.password,
+			registryName: data.registryName,
+			username: data.username,
+			registryUrl: data.registryUrl,
+			registryType: "cloud",
+			imagePrefix: data.imagePrefix,
+		})
+			.then(async (data) => {
+				await utils.registry.all.invalidate();
+				toast.success("Registry added");
+				setIsOpen(false);
+			})
+			.catch(() => {
+				toast.error("Error to add a registry");
+			});
 	};
 
 	return (
@@ -160,6 +178,22 @@ export const AddRegistry = () => {
 								)}
 							/>
 						</div>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="imagePrefix"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Image Prefix</FormLabel>
+										<FormControl>
+											<Input {...field} placeholder="Image Prefix" />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
 						<div className="flex flex-col gap-4">
 							<FormField
 								control={form.control}
@@ -169,9 +203,8 @@ export const AddRegistry = () => {
 										<FormLabel>Registry URL</FormLabel>
 										<FormControl>
 											<Input
-												placeholder="https://aws_account_id.dkr.ecr.us-west-2.amazonaws.c"
+												placeholder="https://aws_account_id.dkr.ecr.us-west-2.amazonaws.com"
 												{...field}
-												type="password"
 											/>
 										</FormControl>
 
@@ -180,7 +213,34 @@ export const AddRegistry = () => {
 								)}
 							/>
 						</div>
-						<DialogFooter>
+						<DialogFooter className="flex flex-row w-full sm:justify-between gap-4 flex-wrap">
+							<Button
+								type="button"
+								variant={"secondary"}
+								isLoading={isLoading}
+								onClick={async () => {
+									if (!form.formState.isValid) {
+										toast.error("Please fill all the fields");
+										return;
+									}
+									await testRegistry({
+										username: username,
+										password: password,
+										registryUrl: registryUrl,
+										registryName: registryName,
+										registryType: "cloud",
+										imagePrefix: imagePrefix,
+									}).then((data) => {
+										if (data) {
+											toast.success("Registry Tested Successfully");
+										} else {
+											toast.error("Registry Test Failed");
+										}
+									});
+								}}
+							>
+								Test Registry
+							</Button>
 							<Button isLoading={form.formState.isSubmitting} type="submit">
 								Create
 							</Button>