From 0a826fbf1c0b73b8c2538792ce4324b152c4fe46 Mon Sep 17 00:00:00 2001
From: vishalkadam47 <vishal@jeevops.com>
Date: Fri, 24 Jan 2025 06:13:54 +0530
Subject: [PATCH] feat: add dropdown menu for service domains and add download
 functionality for SSH keys

---
 .../components/dashboard/projects/show.tsx    | 100 ++++++++++++++++--
 .../settings/ssh-keys/handle-ssh-keys.tsx     |  58 +++++++++-
 2 files changed, 147 insertions(+), 11 deletions(-)

diff --git a/apps/dokploy/components/dashboard/projects/show.tsx b/apps/dokploy/components/dashboard/projects/show.tsx
index afeabf309..ca83b5889 100644
--- a/apps/dokploy/components/dashboard/projects/show.tsx
+++ b/apps/dokploy/components/dashboard/projects/show.tsx
@@ -23,8 +23,10 @@ import {
 import {
 	DropdownMenu,
 	DropdownMenuContent,
+	DropdownMenuGroup,
 	DropdownMenuItem,
 	DropdownMenuLabel,
+	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
@@ -149,14 +151,91 @@ export const ShowProjects = () => {
 														href={`/dashboard/project/${project.projectId}`}
 													>
 														<Card className="group relative w-full h-full bg-transparent transition-colors hover:bg-border">
-															<Button
-																className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
-																size="sm"
-																variant="default"
-															>
-																<ExternalLinkIcon className="size-3.5" />
-															</Button>
-
+															{project.applications.length > 0 ||
+															project.compose.length > 0 ? (
+																<DropdownMenu>
+																	<DropdownMenuTrigger asChild>
+																		<Button
+																			className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
+																			size="sm"
+																			variant="default"
+																		>
+																			<ExternalLinkIcon className="size-3.5" />
+																		</Button>
+																	</DropdownMenuTrigger>
+																	<DropdownMenuContent
+																		className="w-[200px] space-y-2 overflow-y-auto max-h-[400px]"
+																		onClick={(e) => e.stopPropagation()}
+																	>
+																		{project.applications.length > 0 && (
+																			<DropdownMenuGroup>
+																				<DropdownMenuLabel>
+																					Applications
+																				</DropdownMenuLabel>
+																				{project.applications.map((app) => (
+																					<div key={app.applicationId}>
+																						<DropdownMenuSeparator />
+																						<DropdownMenuGroup>
+																							<DropdownMenuLabel className="font-normal capitalize text-xs">
+																								{app.name}
+																							</DropdownMenuLabel>
+																							<DropdownMenuSeparator />
+																							{app.domains.map((domain) => (
+																								<DropdownMenuItem
+																									key={domain.domainId}
+																									asChild
+																								>
+																									<Link
+																										className="space-x-4 text-xs cursor-pointer justify-between"
+																										target="_blank"
+																										href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
+																									>
+																										<span>{domain.host}</span>
+																										<ExternalLinkIcon className="size-4 shrink-0" />
+																									</Link>
+																								</DropdownMenuItem>
+																							))}
+																						</DropdownMenuGroup>
+																					</div>
+																				))}
+																			</DropdownMenuGroup>
+																		)}
+																		{project.compose.length > 0 && (
+																			<DropdownMenuGroup>
+																				<DropdownMenuLabel>
+																					Compose
+																				</DropdownMenuLabel>
+																				{project.compose.map((comp) => (
+																					<div key={comp.composeId}>
+																						<DropdownMenuSeparator />
+																						<DropdownMenuGroup>
+																							<DropdownMenuLabel className="font-normal capitalize text-xs">
+																								{comp.name}
+																							</DropdownMenuLabel>
+																							<DropdownMenuSeparator />
+																							{comp.domains.map((domain) => (
+																								<DropdownMenuItem
+																									key={domain.domainId}
+																									asChild
+																								>
+																									<Link
+																										className="space-x-4 text-xs cursor-pointer justify-between"
+																										target="_blank"
+																										href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
+																									>
+																										<span>{domain.host}</span>
+																										<ExternalLinkIcon className="size-4 shrink-0" />
+																									</Link>
+																								</DropdownMenuItem>
+																							))}
+																						</DropdownMenuGroup>
+																					</div>
+																				))}
+																			</DropdownMenuGroup>
+																		)}
+																	</DropdownMenuContent>
+																</DropdownMenu>
+															) : null}
 															<CardHeader>
 																<CardTitle className="flex items-center justify-between gap-2">
 																	<span className="flex flex-col gap-1.5">
@@ -182,7 +261,10 @@ export const ShowProjects = () => {
 																					<MoreHorizontalIcon className="size-5" />
 																				</Button>
 																			</DropdownMenuTrigger>
-																			<DropdownMenuContent className="w-[200px] space-y-2">
+																			<DropdownMenuContent
+																				className="w-[200px] space-y-2 overflow-y-auto max-h-[280px]"
+																				onClick={(e) => e.stopPropagation()}
+																			>
 																				<DropdownMenuLabel className="font-normal">
 																					Actions
 																				</DropdownMenuLabel>
diff --git a/apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx b/apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx
index f100979e3..fc48134a2 100644
--- a/apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx
+++ b/apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx
@@ -22,7 +22,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { sshKeyCreate, type sshKeyType } from "@/server/db/validations";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon, PlusIcon } from "lucide-react";
+import { DownloadIcon, PenBoxIcon, PlusIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -111,6 +111,26 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
 				toast.error("Error generating the SSH Key");
 			});
 
+	const downloadKey = (
+		content: string,
+		defaultFilename: string,
+		keyType: "private" | "public",
+	) => {
+		const keyName = form.watch("name");
+		const filename = keyName
+			? `${keyName}${sshKeyId ? `_${sshKeyId}` : ""}_${keyType}_${defaultFilename}`
+			: `${keyType}_${defaultFilename}`;
+		const blob = new Blob([content], { type: "text/plain" });
+		const url = window.URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = filename;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		window.URL.revokeObjectURL(url);
+	};
+
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger className="" asChild>
@@ -245,7 +265,41 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
 								</FormItem>
 							)}
 						/>
-						<DialogFooter>
+						<DialogFooter className="flex items-center justify-between">
+							<div className="flex items-center gap-4">
+								{form.watch("privateKey") && (
+									<Button
+										type="button"
+										variant="outline"
+										size="default"
+										onClick={() =>
+											downloadKey(form.watch("privateKey"), "id_rsa", "private")
+										}
+										className="flex items-center gap-2"
+									>
+										<DownloadIcon className="h-4 w-4" />
+										Private Key
+									</Button>
+								)}
+								{form.watch("publicKey") && (
+									<Button
+										type="button"
+										variant="outline"
+										size="default"
+										onClick={() =>
+											downloadKey(
+												form.watch("publicKey"),
+												"id_rsa.pub",
+												"public",
+											)
+										}
+										className="flex items-center gap-2"
+									>
+										<DownloadIcon className="h-4 w-4" />
+										Public Key
+									</Button>
+								)}
+							</div>
 							<Button isLoading={isLoading} type="submit">
 								{sshKeyId ? "Update" : "Create"}
 							</Button>