From 7123b9b109df2388ce36dda76f23e3c6425370dd Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Tue, 18 Mar 2025 21:17:11 -0600
Subject: [PATCH] feat(cluster): add error handling in AddManager and AddWorker
 components

- Integrated error handling in AddManager and AddWorker components to display error messages using AlertBlock when data fetching fails.
- Updated API query hooks to include error and isError states for improved user feedback during data operations.
---
 .../settings/cluster/nodes/manager/add-manager.tsx          | 6 +++++-
 .../dashboard/settings/cluster/nodes/workers/add-worker.tsx | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/cluster/nodes/manager/add-manager.tsx b/apps/dokploy/components/dashboard/settings/cluster/nodes/manager/add-manager.tsx
index 6cb8f257..bb2064d4 100644
--- a/apps/dokploy/components/dashboard/settings/cluster/nodes/manager/add-manager.tsx
+++ b/apps/dokploy/components/dashboard/settings/cluster/nodes/manager/add-manager.tsx
@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { CardContent } from "@/components/ui/card";
 import {
 	DialogDescription,
@@ -14,7 +15,9 @@ interface Props {
 }
 
 export const AddManager = ({ serverId }: Props) => {
-	const { data, isLoading } = api.cluster.addManager.useQuery({ serverId });
+	const { data, isLoading, error, isError } = api.cluster.addManager.useQuery({
+		serverId,
+	});
 
 	return (
 		<>
@@ -23,6 +26,7 @@ export const AddManager = ({ serverId }: Props) => {
 					<DialogTitle>Add a new manager</DialogTitle>
 					<DialogDescription>Add a new manager</DialogDescription>
 				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 				{isLoading ? (
 					<Loader2 className="w-full animate-spin text-muted-foreground" />
 				) : (
diff --git a/apps/dokploy/components/dashboard/settings/cluster/nodes/workers/add-worker.tsx b/apps/dokploy/components/dashboard/settings/cluster/nodes/workers/add-worker.tsx
index 3dec559e..2623081b 100644
--- a/apps/dokploy/components/dashboard/settings/cluster/nodes/workers/add-worker.tsx
+++ b/apps/dokploy/components/dashboard/settings/cluster/nodes/workers/add-worker.tsx
@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { CardContent } from "@/components/ui/card";
 import {
 	DialogDescription,
@@ -14,7 +15,9 @@ interface Props {
 }
 
 export const AddWorker = ({ serverId }: Props) => {
-	const { data, isLoading } = api.cluster.addWorker.useQuery({ serverId });
+	const { data, isLoading, error, isError } = api.cluster.addWorker.useQuery({
+		serverId,
+	});
 
 	return (
 		<CardContent className="sm:max-w-4xl   flex flex-col gap-4 px-0">
@@ -22,6 +25,7 @@ export const AddWorker = ({ serverId }: Props) => {
 				<DialogTitle>Add a new worker</DialogTitle>
 				<DialogDescription>Add a new worker</DialogDescription>
 			</DialogHeader>
+			{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 			{isLoading ? (
 				<Loader2 className="w-full animate-spin text-muted-foreground" />
 			) : (