feat: add test connection github

apps/dokploy/components/dashboard/settings/git/github/edit-github-provider.tsx

@@ -0,0 +1,154 @@
+import { GithubIcon } from "@/components/icons/data-tools-icons";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import { CardContent } from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Edit } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const Schema = z.object({
+	name: z.string().min(1, {
+		message: "Name is required",
+	}),
+});
+
+type Schema = z.infer<typeof Schema>;
+
+interface Props {
+	githubId: string;
+}
+
+export const EditGithubProvider = ({ githubId }: Props) => {
+	const { data: github } = api.github.one.useQuery(
+		{
+			githubId,
+		},
+		{
+			enabled: !!githubId,
+		},
+	);
+	const utils = api.useUtils();
+	const [isOpen, setIsOpen] = useState(false);
+	const { mutateAsync, error, isError } = api.github.update.useMutation();
+	const { mutateAsync: testConnection, isLoading } =
+		api.github.testConnection.useMutation();
+	const form = useForm<Schema>({
+		defaultValues: {
+			name: "",
+		},
+		resolver: zodResolver(Schema),
+	});
+
+	useEffect(() => {
+		form.reset({
+			name: github?.gitProvider.name || "",
+		});
+	}, [form, isOpen]);
+
+	const onSubmit = async (data: Schema) => {
+		await mutateAsync({
+			githubId,
+			name: data.name || "",
+			gitProviderId: github?.gitProviderId || "",
+		})
+			.then(async () => {
+				await utils.gitProvider.getAll.invalidate();
+				toast.success("Github updated successfully");
+				setIsOpen(false);
+			})
+			.catch(() => {
+				toast.error("Error to update Github");
+			});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="ghost">
+					<Edit className="size-4" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-2xl  overflow-y-auto max-h-screen">
+				<DialogHeader>
+					<DialogTitle className="flex items-center gap-2">
+						Update Github Provider <GithubIcon className="size-5" />
+					</DialogTitle>
+				</DialogHeader>
+
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				<Form {...form}>
+					<form
+						id="hook-form-add-github"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-1"
+					>
+						<CardContent className="p-0">
+							<div className="flex flex-col gap-4">
+								<FormField
+									control={form.control}
+									name="name"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Name</FormLabel>
+											<FormControl>
+												<Input
+													placeholder="Random Name eg(my-personal-account)"
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<div className="flex w-full justify-end gap-4 mt-4">
+									<Button
+										type="button"
+										variant={"secondary"}
+										isLoading={isLoading}
+										onClick={async () => {
+											await testConnection({
+												githubId,
+											})
+												.then(async (message) => {
+													toast.info(`Message: ${message}`);
+												})
+												.catch((error) => {
+													toast.error(`Error: ${error.message}`);
+												});
+										}}
+									>
+										Test Connection
+									</Button>
+									<Button type="submit" isLoading={form.formState.isSubmitting}>
+										Update
+									</Button>
+								</div>
+							</div>
+						</CardContent>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};