feat: compose app

components/dashboard/compose/general/generic/save-git-provider-compose.tsx

@@ -1,13 +1,4 @@
 import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
 import {
 	Form,
 	FormControl,
@@ -17,11 +8,19 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import copy from "copy-to-clipboard";
-import { CopyIcon, LockIcon } from "lucide-react";
+import { KeyRoundIcon, LockIcon } from "lucide-react";
+import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -33,6 +32,7 @@ const GitProviderSchema = z.object({
 		message: "Repository URL is required",
 	}),
 	branch: z.string().min(1, "Branch required"),
+	sshKey: z.string().optional(),
 });
 
 type GitProvider = z.infer<typeof GitProviderSchema>;
@@ -43,19 +43,17 @@ interface Props {
 
 export const SaveGitProviderCompose = ({ composeId }: Props) => {
 	const { data, refetch } = api.compose.one.useQuery({ composeId });
+	const { data: sshKeys } = api.sshKey.all.useQuery();
+	const router = useRouter();
 
 	const { mutateAsync, isLoading } = api.compose.update.useMutation();
 
-	const { mutateAsync: generateSSHKey, isLoading: isGeneratingSSHKey } =
-		api.compose.generateSSHKey.useMutation();
-
-	const { mutateAsync: removeSSHKey, isLoading: isRemovingSSHKey } =
-		api.compose.removeSSHKey.useMutation();
 	const form = useForm<GitProvider>({
 		defaultValues: {
 			branch: "",
 			repositoryURL: "",
 			composePath: "./docker-compose.yml",
+			sshKey: undefined,
 		},
 		resolver: zodResolver(GitProviderSchema),
 	});
@@ -63,6 +61,7 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 	useEffect(() => {
 		if (data) {
 			form.reset({
+				sshKey: data.customGitSSHKeyId || undefined,
 				branch: data.customGitBranch || "",
 				repositoryURL: data.customGitUrl || "",
 				composePath: data.composePath,
@@ -74,6 +73,7 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 		await mutateAsync({
 			customGitBranch: values.branch,
 			customGitUrl: values.repositoryURL,
+			customGitSSHKeyId: values.sshKey === "none" ? null : values.sshKey,
 			composeId,
 			sourceType: "git",
 			composePath: values.composePath,
@@ -94,123 +94,72 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 				className="flex flex-col gap-4"
 			>
 				<div className="grid md:grid-cols-2 gap-4 ">
-					<div className="md:col-span-2 space-y-4">
-						<FormField
-							control={form.control}
-							name="repositoryURL"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel className="flex flex-row justify-between">
-										Repository URL
-										<div className="flex gap-2">
-											<Dialog>
-												<DialogTrigger className="flex flex-row gap-2">
-													<LockIcon className="size-4 text-muted-foreground" />?
-												</DialogTrigger>
-												<DialogContent className="sm:max-w-[425px]">
-													<DialogHeader>
-														<DialogTitle>Private Repository</DialogTitle>
-														<DialogDescription>
-															If your repository is private is necessary to
-															generate SSH Keys to add to your git provider.
-														</DialogDescription>
-													</DialogHeader>
-													<div className="grid gap-4 py-4">
-														<div className="relative">
-															<Textarea
-																placeholder="Please click on Generate SSH Key"
-																className="no-scrollbar h-64 text-muted-foreground"
-																disabled={!data?.customGitSSHKey}
-																contentEditable={false}
-																value={
-																	data?.customGitSSHKey ||
-																	"Please click on Generate SSH Key"
-																}
-															/>
-															<button
-																type="button"
-																className="absolute right-2 top-2"
-																onClick={() => {
-																	copy(
-																		data?.customGitSSHKey ||
-																			"Generate a SSH Key",
-																	);
-																	toast.success("SSH Copied to clipboard");
-																}}
+					<div className="flex items-end col-span-2 gap-4">
+						<div className="grow">
+							<FormField
+								control={form.control}
+								name="repositoryURL"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel className="flex flex-row justify-between">
+											Repository URL
+										</FormLabel>
+										<FormControl>
+											<Input placeholder="git@bitbucket.org" {...field} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						{sshKeys && sshKeys.length > 0 ? (
+							<FormField
+								control={form.control}
+								name="sshKey"
+								render={({ field }) => (
+									<FormItem className="basis-40">
+										<FormLabel className="w-full inline-flex justify-between">
+											SSH Key
+											<LockIcon className="size-4 text-muted-foreground" />
+										</FormLabel>
+										<FormControl>
+											<Select
+												key={field.value}
+												onValueChange={field.onChange}
+												defaultValue={field.value}
+												value={field.value}
+											>
+												<SelectTrigger>
+													<SelectValue placeholder="Select a key" />
+												</SelectTrigger>
+												<SelectContent>
+													<SelectGroup>
+														{sshKeys?.map((sshKey) => (
+															<SelectItem
+																key={sshKey.sshKeyId}
+																value={sshKey.sshKeyId}
 															>
-																<CopyIcon className="size-4" />
-															</button>
-														</div>
-													</div>
-													<DialogFooter className="flex sm:justify-between gap-3.5 flex-col sm:flex-col w-full">
-														<div className="flex flex-row gap-2 w-full justify-between flex-wrap">
-															{data?.customGitSSHKey && (
-																<Button
-																	variant="destructive"
-																	isLoading={
-																		isGeneratingSSHKey || isRemovingSSHKey
-																	}
-																	className="max-sm:w-full"
-																	onClick={async () => {
-																		await removeSSHKey({
-																			composeId,
-																		})
-																			.then(async () => {
-																				toast.success("SSH Key Removed");
-																				await refetch();
-																			})
-																			.catch(() => {
-																				toast.error(
-																					"Error to remove the SSH Key",
-																				);
-																			});
-																	}}
-																	type="button"
-																>
-																	Remove SSH Key
-																</Button>
-															)}
-
-															<Button
-																isLoading={
-																	isGeneratingSSHKey || isRemovingSSHKey
-																}
-																className="max-sm:w-full"
-																onClick={async () => {
-																	await generateSSHKey({
-																		composeId,
-																	})
-																		.then(async () => {
-																			toast.success("SSH Key Generated");
-																			await refetch();
-																		})
-																		.catch(() => {
-																			toast.error(
-																				"Error to generate the SSH Key",
-																			);
-																		});
-																}}
-																type="button"
-															>
-																Generate SSH Key
-															</Button>
-														</div>
-														<span className="text-sm text-muted-foreground">
-															Is recommended to remove the SSH Key if you want
-															to deploy a public repository.
-														</span>
-													</DialogFooter>
-												</DialogContent>
-											</Dialog>
-										</div>
-									</FormLabel>
-									<FormControl>
-										<Input placeholder="git@bitbucket.org" {...field} />
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
+																{sshKey.name}
+															</SelectItem>
+														))}
+														<SelectItem value="none">None</SelectItem>
+														<SelectLabel>Keys ({sshKeys?.length})</SelectLabel>
+													</SelectGroup>
+												</SelectContent>
+											</Select>
+										</FormControl>
+									</FormItem>
+								)}
+							/>
+						) : (
+							<Button
+								variant="secondary"
+								onClick={() => router.push("/dashboard/settings/ssh-keys")}
+								type="button"
+							>
+								<KeyRoundIcon className="size-4" /> Add SSH Key
+							</Button>
+						)}
 					</div>
 					<div className="space-y-4">
 						<FormField