feat: add alert when db is detected and allow to split into dedicated db service

apps/dokploy/components/dashboard/compose/delete-compose.tsx

@@ -9,6 +9,7 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import {
 	Form,
 	FormControl,
@@ -76,10 +77,14 @@ export const DeleteCompose = ({ composeId }: Props) => {
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
-				<Button variant="ghost" isLoading={isLoading}>
+			<DialogTrigger className="w-full">
+				<DropdownMenuItem
+					className="w-full cursor-pointer space-x-3"
+					onSelect={(e) => e.preventDefault()}
+				>
 					<TrashIcon className="size-4 text-muted-foreground" />
-				</Button>
+					<span>Delete</span>
+				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
 				<DialogHeader>

apps/dokploy/components/dashboard/compose/update-compose.tsx

@@ -9,6 +9,7 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import {
 	Form,
 	FormControl,
@@ -90,10 +91,14 @@ export const UpdateCompose = ({ composeId }: Props) => {
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
-				<Button variant="ghost">
+			<DialogTrigger className="w-full">
+				<DropdownMenuItem
+					className="w-full cursor-pointer space-x-3"
+					onSelect={(e) => e.preventDefault()}
+				>
 					<SquarePen className="size-4 text-muted-foreground" />
-				</Button>
+					<span>Edit</span>
+				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
 				<DialogHeader>

apps/dokploy/components/dashboard/project/add-database.tsx

@@ -149,9 +149,14 @@ type AddDatabase = z.infer<typeof mySchema>;
 interface Props {
 	projectId: string;
 	projectName?: string;
+	dropdownItemName?: string;
 }
 
-export const AddDatabase = ({ projectId, projectName }: Props) => {
+export const AddDatabase = ({
+	projectId,
+	projectName,
+	dropdownItemName,
+}: Props) => {
 	const utils = api.useUtils();
 	const [visible, setVisible] = useState(false);
 	const slug = slugify(projectName);
@@ -278,7 +283,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 					onSelect={(e) => e.preventDefault()}
 				>
 					<Database className="size-4 text-muted-foreground" />
-					<span>Database</span>
+					<span>{dropdownItemName ?? "Database"}</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen md:max-h-[90vh]  overflow-y-auto sm:max-w-2xl">

apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx

@@ -8,14 +8,24 @@ import { ShowGeneralCompose } from "@/components/dashboard/compose/general/show"
 import { ShowDockerLogsCompose } from "@/components/dashboard/compose/logs/show";
 import { ShowMonitoringCompose } from "@/components/dashboard/compose/monitoring/show";
 import { UpdateCompose } from "@/components/dashboard/compose/update-compose";
+import { AddDatabase } from "@/components/dashboard/project/add-database";
 import { ProjectLayout } from "@/components/layouts/project-layout";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import {
 	Breadcrumb,
 	BreadcrumbItem,
 	BreadcrumbLink,
 } from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
@@ -29,16 +39,21 @@ import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
-import { CircuitBoard, ServerOff } from "lucide-react";
-import { HelpCircle } from "lucide-react";
+import {
+	CircuitBoard,
+	Database,
+	HelpCircle,
+	ServerOff,
+	Settings,
+} from "lucide-react";
 import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
 } from "next";
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useState, useEffect, type ReactElement } from "react";
+import { type ReactElement, useEffect, useState } from "react";
 import superjson from "superjson";
 
 type TabState =
@@ -56,6 +71,7 @@ const Service = (
 	const router = useRouter();
 	const { projectId } = router.query;
 	const [tab, setTab] = useState<TabState>(activeTab);
+	const databaseKeywords = ["mysql", "mariadb", "postgres", "mongodb", "redis"];
 
 	useEffect(() => {
 		if (router.query.tab) {
@@ -70,6 +86,10 @@ const Service = (
 		},
 	);
 
+	const hasDatabaseService = databaseKeywords.some((db) =>
+		data?.composeFile.toLowerCase().includes(db),
+	);
+
 	const { data: auth } = api.auth.get.useQuery();
 	const { data: user } = api.user.byAuthId.useQuery(
 		{
@@ -102,6 +122,18 @@ const Service = (
 						<BreadcrumbLink>{data?.name}</BreadcrumbLink>
 					</BreadcrumbItem>
 				</Breadcrumb>
+				{hasDatabaseService && (
+					<Alert>
+						<Database className="size-4" />
+						<AlertTitle>Heads up!</AlertTitle>
+						<AlertDescription>
+							It looks like this compose file contains a database service. If
+							you want to use features like data persistence, backups, and
+							security, we recommend you to create a dedicated database service.
+						</AlertDescription>
+					</Alert>
+				)}
+
 				<Head>
 					<title>
 						Compose: {data?.name} - {data?.project.name} | Dokploy
@@ -218,12 +250,35 @@ const Service = (
 							<TabsTrigger value="domains">Domains</TabsTrigger>
 							<TabsTrigger value="advanced">Advanced</TabsTrigger>
 						</TabsList>
-						<div className="flex flex-row gap-2">
-							<UpdateCompose composeId={composeId} />
-
-							{(auth?.rol === "admin" || user?.canDeleteServices) && (
-								<DeleteCompose composeId={composeId} />
-							)}
+						<div className="flex flex-row gap-4 flex-wrap">
+							<DropdownMenu>
+								<DropdownMenuTrigger asChild>
+									<Button>
+										<Settings className="h-4 w-4" />
+										Edit
+									</Button>
+								</DropdownMenuTrigger>
+								<DropdownMenuContent
+									className="w-[200px] space-y-2"
+									align="end"
+								>
+									<DropdownMenuLabel className="text-sm font-normal ">
+										Actions
+									</DropdownMenuLabel>
+									<DropdownMenuSeparator />
+									<UpdateCompose composeId={composeId} />
+									{(auth?.rol === "admin" || user?.canDeleteServices) && (
+										<DeleteCompose composeId={composeId} />
+									)}
+									{hasDatabaseService && (
+										<AddDatabase
+											projectId={data!.projectId}
+											projectName={data!.project.name}
+											dropdownItemName="Add Database"
+										/>
+									)}
+								</DropdownMenuContent>
+							</DropdownMenu>
 						</div>
 					</div>