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

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>