From 6afd1bf531be7c050bb4b27e4c66569dc4df2048 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sat, 8 Mar 2025 19:17:59 -0600
Subject: [PATCH] feat(environment): add unsaved changes handling for
 environment settings

- Implement form change tracking for environment variables
- Add cancel and save buttons with conditional rendering
- Disable save button when no changes are detected
- Show unsaved changes warning in description
- Improve user experience with form state management
---
 .../environment/show-enviroment.tsx           | 39 ++++++++++--
 .../application/environment/show.tsx          | 59 ++++++++++++++++---
 2 files changed, 85 insertions(+), 13 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/environment/show-enviroment.tsx b/apps/dokploy/components/dashboard/application/environment/show-enviroment.tsx
index cc208d9bf..8a78c2745 100644
--- a/apps/dokploy/components/dashboard/application/environment/show-enviroment.tsx
+++ b/apps/dokploy/components/dashboard/application/environment/show-enviroment.tsx
@@ -71,15 +71,19 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 		resolver: zodResolver(addEnvironmentSchema),
 	});
 
+	// Watch form value
+	const currentEnvironment = form.watch("environment");
+	const hasChanges = currentEnvironment !== (data?.env || "");
+
 	useEffect(() => {
 		if (data) {
 			form.reset({
 				environment: data.env || "",
 			});
 		}
-	}, [form.reset, data, form]);
+	}, [data, form]);
 
-	const onSubmit = async (data: EnvironmentSchema) => {
+	const onSubmit = async (formData: EnvironmentSchema) => {
 		mutateAsync({
 			mongoId: id || "",
 			postgresId: id || "",
@@ -87,7 +91,7 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 			mysqlId: id || "",
 			mariadbId: id || "",
 			composeId: id || "",
-			env: data.environment,
+			env: formData.environment,
 		})
 			.then(async () => {
 				toast.success("Environments Added");
@@ -98,6 +102,12 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 			});
 	};
 
+	const handleCancel = () => {
+		form.reset({
+			environment: data?.env || "",
+		});
+	};
+
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
@@ -106,6 +116,11 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 						<CardTitle className="text-xl">Environment Settings</CardTitle>
 						<CardDescription>
 							You can add environment variables to your resource.
+							{hasChanges && (
+								<span className="text-yellow-500 ml-2">
+									(You have unsaved changes)
+								</span>
+							)}
 						</CardDescription>
 					</div>
 
@@ -155,8 +170,22 @@ PORT=3000
 								)}
 							/>
 
-							<div className="flex flex-row justify-end">
-								<Button isLoading={isLoading} className="w-fit" type="submit">
+							<div className="flex flex-row justify-end gap-2">
+								{hasChanges && (
+									<Button
+										type="button"
+										variant="outline"
+										onClick={handleCancel}
+									>
+										Cancel
+									</Button>
+								)}
+								<Button
+									isLoading={isLoading}
+									className="w-fit"
+									type="submit"
+									disabled={!hasChanges}
+								>
 									Save
 								</Button>
 							</div>
diff --git a/apps/dokploy/components/dashboard/application/environment/show.tsx b/apps/dokploy/components/dashboard/application/environment/show.tsx
index d97c39e2f..b574ce092 100644
--- a/apps/dokploy/components/dashboard/application/environment/show.tsx
+++ b/apps/dokploy/components/dashboard/application/environment/show.tsx
@@ -7,6 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { useEffect } from "react";
 
 const addEnvironmentSchema = z.object({
 	env: z.string(),
@@ -34,16 +35,32 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 
 	const form = useForm<EnvironmentSchema>({
 		defaultValues: {
-			env: data?.env || "",
-			buildArgs: data?.buildArgs || "",
+			env: "",
+			buildArgs: "",
 		},
 		resolver: zodResolver(addEnvironmentSchema),
 	});
 
-	const onSubmit = async (data: EnvironmentSchema) => {
+	// Watch form values
+	const currentEnv = form.watch("env");
+	const currentBuildArgs = form.watch("buildArgs");
+	const hasChanges =
+		currentEnv !== (data?.env || "") ||
+		currentBuildArgs !== (data?.buildArgs || "");
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				env: data.env || "",
+				buildArgs: data.buildArgs || "",
+			});
+		}
+	}, [data, form]);
+
+	const onSubmit = async (formData: EnvironmentSchema) => {
 		mutateAsync({
-			env: data.env,
-			buildArgs: data.buildArgs,
+			env: formData.env,
+			buildArgs: formData.buildArgs,
 			applicationId,
 		})
 			.then(async () => {
@@ -55,6 +72,13 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 			});
 	};
 
+	const handleCancel = () => {
+		form.reset({
+			env: data?.env || "",
+			buildArgs: data?.buildArgs || "",
+		});
+	};
+
 	return (
 		<Card className="bg-background px-6 pb-6">
 			<Form {...form}>
@@ -65,7 +89,16 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 					<Secrets
 						name="env"
 						title="Environment Settings"
-						description="You can add environment variables to your resource."
+						description={
+							<span>
+								You can add environment variables to your resource.
+								{hasChanges && (
+									<span className="text-yellow-500 ml-2">
+										(You have unsaved changes)
+									</span>
+								)}
+							</span>
+						}
 						placeholder={["NODE_ENV=production", "PORT=3000"].join("\n")}
 					/>
 					{data?.buildType === "dockerfile" && (
@@ -89,8 +122,18 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 							placeholder="NPM_TOKEN=xyz"
 						/>
 					)}
-					<div className="flex flex-row justify-end">
-						<Button isLoading={isLoading} className="w-fit" type="submit">
+					<div className="flex flex-row justify-end gap-2">
+						{hasChanges && (
+							<Button type="button" variant="outline" onClick={handleCancel}>
+								Cancel
+							</Button>
+						)}
+						<Button
+							isLoading={isLoading}
+							className="w-fit"
+							type="submit"
+							disabled={!hasChanges}
+						>
 							Save
 						</Button>
 					</div>