Merge pull request #2407 from Dokploy/feat/prevent-delete-service-while-build-is-running

feat(ui): add alert blocks for running services in delete confirmatio…

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

@@ -7,6 +7,7 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -114,6 +115,12 @@ export const DeleteService = ({ id, type }: Props) => {
 		}
 	};
 
+	const isDisabled =
+		(data &&
+			"applicationStatus" in data &&
+			data?.applicationStatus === "running") ||
+		(data && "composeStatus" in data && data?.composeStatus === "running");
+
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
@@ -202,6 +209,12 @@ export const DeleteService = ({ id, type }: Props) => {
 						</form>
 					</Form>
 				</div>
+				{isDisabled && (
+					<AlertBlock type="warning" className="w-full mt-5">
+						Cannot delete the service while it is running. Please wait for the
+						build to finish and then try again.
+					</AlertBlock>
+				)}
 				<DialogFooter>
 					<Button
 						variant="secondary"
@@ -211,8 +224,10 @@ export const DeleteService = ({ id, type }: Props) => {
 					>
 						Cancel
 					</Button>
+
 					<Button
 						isLoading={isLoading}
+						disabled={isDisabled}
 						form="hook-form-delete-compose"
 						type="submit"
 						variant="destructive"

apps/dokploy/pages/dashboard/project/[projectId].tsx

@@ -40,6 +40,7 @@ import {
 	RedisIcon,
 } from "@/components/icons/data-tools-icons";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import { DialogAction } from "@/components/shared/dialog-action";
@@ -598,6 +599,13 @@ const Project = (
 		return sortServices(filtered);
 	}, [applications, searchQuery, selectedTypes, sortBy]);
 
+	const selectedServicesWithRunningStatus = useMemo(() => {
+		return filteredServices.filter(
+			(service) =>
+				selectedServices.includes(service.id) && service.status === "running",
+		);
+	}, [filteredServices, selectedServices]);
+
 	return (
 		<div>
 			<BreadcrumbSidebar
@@ -740,8 +748,34 @@ const Project = (
 														<>
 															<DialogAction
 																title="Delete Services"
-																description={`Are you sure you want to delete ${selectedServices.length} services? This action cannot be undone.`}
+																description={
+																	<div className="space-y-3">
+																		<p>
+																			Are you sure you want to delete{" "}
+																			{selectedServices.length} services? This
+																			action cannot be undone.
+																		</p>
+																		{selectedServicesWithRunningStatus.length >
+																			0 && (
+																			<AlertBlock type="warning">
+																				Warning:{" "}
+																				{
+																					selectedServicesWithRunningStatus.length
+																				}{" "}
+																				of the selected services are currently
+																				running. Please stop these services
+																				first before deleting:{" "}
+																				{selectedServicesWithRunningStatus
+																					.map((s) => s.name)
+																					.join(", ")}
+																			</AlertBlock>
+																		)}
+																	</div>
+																}
 																type="destructive"
+																disabled={
+																	selectedServicesWithRunningStatus.length > 0
+																}
 																onClick={handleBulkDelete}
 															>
 																<Button