feat: link field with application

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

@@ -1,13 +1,5 @@
+import { AddSSHKey } from "@/components/dashboard/settings/ssh-keys/add-ssh-key";
 import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
 import {
 	Form,
 	FormControl,
@@ -17,12 +9,24 @@ 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 { SelectSeparator } from "@radix-ui/react-select";
+import { KeyRoundIcon, LockIcon } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
 import { useEffect } from "react";
+import { flushSync } from "react-dom";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -33,6 +37,7 @@ const GitProviderSchema = z.object({
 	}),
 	branch: z.string().min(1, "Branch required"),
 	buildPath: z.string().min(1, "Build Path required"),
+	sshKey: z.string(),
 });
 
 type GitProvider = z.infer<typeof GitProviderSchema>;
@@ -43,19 +48,22 @@ interface Props {
 
 export const SaveGitProvider = ({ applicationId }: Props) => {
 	const { data, refetch } = api.application.one.useQuery({ applicationId });
+	const { data: sshKeys } = api.sshKey.all.useQuery();
+	const router = useRouter();
 
 	const { mutateAsync, isLoading } =
 		api.application.saveGitProdiver.useMutation();
-	const { mutateAsync: generateSSHKey, isLoading: isGeneratingSSHKey } =
-		api.application.generateSSHKey.useMutation();
+	// const { mutateAsync: generateSSHKey, isLoading: isGeneratingSSHKey } =
+	// 	api.application.generateSSHKey.useMutation();
 
-	const { mutateAsync: removeSSHKey, isLoading: isRemovingSSHKey } =
-		api.application.removeSSHKey.useMutation();
+	// const { mutateAsync: removeSSHKey, isLoading: isRemovingSSHKey } =
+	// 	api.application.removeSSHKey.useMutation();
 	const form = useForm<GitProvider>({
 		defaultValues: {
 			branch: "",
 			buildPath: "/",
 			repositoryURL: "",
+			sshKey: "",
 		},
 		resolver: zodResolver(GitProviderSchema),
 	});
@@ -63,6 +71,7 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 	useEffect(() => {
 		if (data) {
 			form.reset({
+				sshKey: data.customGitSSHKeyId || "",
 				branch: data.customGitBranch || "",
 				buildPath: data.customGitBuildPath || "/",
 				repositoryURL: data.customGitUrl || "",
@@ -75,6 +84,7 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 			customGitBranch: values.branch,
 			customGitBuildPath: values.buildPath,
 			customGitUrl: values.repositoryURL,
+			customGitSSHKeyId: values.sshKey,
 			applicationId,
 		})
 			.then(async () => {
@@ -92,160 +102,103 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 				onSubmit={form.handleSubmit(onSubmit)}
 				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="grid md:grid-cols-2 gap-4">
+					<div className="flex items-end col-span-2 gap-4">
+						<div className="grow">
+							<FormField
+								control={form.control}
+								name="repositoryURL"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>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({
-																			applicationId,
-																		})
-																			.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({
-																		applicationId,
-																	})
-																		.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>
-							)}
-						/>
-					</div>
-					<div className="space-y-4">
-						<FormField
-							control={form.control}
-							name="branch"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>Branch</FormLabel>
-									<FormControl>
-										<Input placeholder="Branch" {...field} />
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-					</div>
-					<div className="space-y-4">
-						<FormField
-							control={form.control}
-							name="buildPath"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>Build Path</FormLabel>
-									<FormControl>
-										<Input placeholder="/" {...field} />
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
+																{sshKey.name}
+															</SelectItem>
+														))}
+														<SelectLabel>Keys ({sshKeys?.length})</SelectLabel>
+													</SelectGroup>
+													<SelectSeparator />
+												</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>
+					<FormField
+						control={form.control}
+						name="branch"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Branch</FormLabel>
+								<FormControl>
+									<Input placeholder="Branch" {...field} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<FormField
+						control={form.control}
+						name="buildPath"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Build Path</FormLabel>
+								<FormControl>
+									<Input placeholder="/" {...field} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
 				</div>
 
 				<div className="flex flex-row justify-end">
 					<Button type="submit" className="w-fit" isLoading={isLoading}>
-						Save{" "}
+						Save
 					</Button>
 				</div>
 			</form>

components/dashboard/settings/ssh-keys/add-ssh-key.tsx

@@ -127,6 +127,7 @@ export const AddSSHKey = ({ children }: Props) => {
 									<FormControl>
 										<Textarea
 											placeholder={"-----BEGIN RSA PRIVATE KEY-----"}
+											rows={5}
 											{...field}
 										/>
 									</FormControl>
@@ -143,16 +144,13 @@ export const AddSSHKey = ({ children }: Props) => {
 										<FormLabel>Public Key</FormLabel>
 									</div>
 									<FormControl>
-										<Textarea
-											placeholder={"ssh-rsa AAAAB3NzaC1yc2E"}
-											{...field}
-										/>
+										<Input placeholder={"ssh-rsa AAAAB3NzaC1yc2E"} {...field} />
 									</FormControl>
 									<FormMessage />
 								</FormItem>
 							)}
 						/>
-						<DialogFooter className="flex w-full flex-row !justify-between pt-3">
+						<DialogFooter>
 							<Button isLoading={isLoading} type="submit">
 								Create
 							</Button>

components/dashboard/settings/ssh-keys/show-ssh-keys.tsx

@@ -39,54 +39,54 @@ export const ShowDestinations = () => {
 							</AddSSHKey>
 						</div>
 					) : (
-						<div className="flex flex-col gap-4">
-							<div className="flex gap-4 text-xs px-3.5">
-								<div className="col-span-2 basis-4/12">Key</div>
-								<div className="basis-3/12">Added</div>
-								<div>Last Used</div>
-							</div>
-							{data?.map((sshKey) => (
-								<div
-									key={sshKey.sshKeyId}
-									className="flex gap-4 items-center border p-3.5 rounded-lg text-sm"
-								>
-									<div className="flex flex-col basis-4/12">
-										<span>{sshKey.name}</span>
-										{sshKey.description && (
-											<span className="text-xs text-muted-foreground">
-												{sshKey.description}
-											</span>
-										)}
-									</div>
-									<div className="basis-3/12">
-										{formatDistanceToNow(new Date(sshKey.createdAt), {
-											addSuffix: true,
-										})}
-									</div>
-									<div className="grow">
-										{sshKey.lastUsedAt
-											? formatDistanceToNow(new Date(sshKey.lastUsedAt), {
-													addSuffix: true,
-												})
-											: "Never"}
-									</div>
-									<div className="flex flex-row gap-1">
-										<UpdateSSHKey sshKeyId={sshKey.sshKeyId}>
-											<Button variant="ghost">
-												<PenBoxIcon className="size-4 text-muted-foreground" />
-											</Button>
-										</UpdateSSHKey>
-										<DeleteSSHKey sshKeyId={sshKey.sshKeyId} />
-									</div>
+						<div className="space-y-8">
+							<div className="flex flex-col gap-4">
+								<div className="flex gap-4 text-xs px-3.5">
+									<div className="col-span-2 basis-4/12">Key</div>
+									<div className="basis-3/12">Added</div>
+									<div>Last Used</div>
 								</div>
-							))}
-							<div>
-								<AddSSHKey>
-									<Button>
-										<KeyRoundIcon className="size-4" /> Add SSH Key
-									</Button>
-								</AddSSHKey>
+								{data?.map((sshKey) => (
+									<div
+										key={sshKey.sshKeyId}
+										className="flex gap-4 items-center border p-3.5 rounded-lg text-sm"
+									>
+										<div className="flex flex-col basis-4/12">
+											<span>{sshKey.name}</span>
+											{sshKey.description && (
+												<span className="text-xs text-muted-foreground">
+													{sshKey.description}
+												</span>
+											)}
+										</div>
+										<div className="basis-3/12">
+											{formatDistanceToNow(new Date(sshKey.createdAt), {
+												addSuffix: true,
+											})}
+										</div>
+										<div className="grow">
+											{sshKey.lastUsedAt
+												? formatDistanceToNow(new Date(sshKey.lastUsedAt), {
+														addSuffix: true,
+													})
+												: "Never"}
+										</div>
+										<div className="flex flex-row gap-1">
+											<UpdateSSHKey sshKeyId={sshKey.sshKeyId}>
+												<Button variant="ghost">
+													<PenBoxIcon className="size-4 text-muted-foreground" />
+												</Button>
+											</UpdateSSHKey>
+											<DeleteSSHKey sshKeyId={sshKey.sshKeyId} />
+										</div>
+									</div>
+								))}
 							</div>
+							<AddSSHKey>
+								<Button>
+									<KeyRoundIcon className="size-4" /> Add SSH Key
+								</Button>
+							</AddSSHKey>
 						</div>
 					)}
 				</CardContent>

components/dashboard/settings/ssh-keys/update-ssh-key.tsx

@@ -1,3 +1,4 @@
+import { DeleteSSHKey } from "@/components/dashboard/settings/ssh-keys/delete-ssh-key";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -135,7 +136,7 @@ export const UpdateSSHKey = ({ children, sshKeyId = "" }: Props) => {
 							<FormMessage />
 						</FormItem>
 
-						<DialogFooter className="flex w-full flex-row !justify-between pt-3">
+						<DialogFooter>
 							<Button isLoading={isLoading} type="submit">
 								Update
 							</Button>