Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1438 from Dokploy/558-cancel-button-when-editing-environment-settings-and-other-text

Browse Source 
feat(environment): add unsaved changes handling for environment settings
This commit is contained in:
Mauricio Siu 2025-03-08 19:18:36 -06:00 committed by GitHub
commit 55bab4bba4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 85 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
apps/dokploy/components/dashboard/application/environment/show-enviroment.tsx
View File

@ -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>

59
apps/dokploy/components/dashboard/application/environment/show.tsx
View File

@ -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>