refactor: add dialog close on submit success

apps/dokploy/components/dashboard/application/advanced/ports/add-port.tsx

@@ -28,7 +28,7 @@ import {
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PlusIcon } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -52,6 +52,7 @@ export const AddPort = ({
 	applicationId,
 	children = <PlusIcon className="h-4 w-4" />,
 }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
 
 	const { mutateAsync, isLoading, error, isError } =
@@ -82,6 +83,7 @@ export const AddPort = ({
 				await utils.application.one.invalidate({
 					applicationId,
 				});
+				setIsOpen(false);
 			})
 			.catch(() => {
 				toast.error("Error to create the port");
@@ -89,7 +91,7 @@ export const AddPort = ({
 	};
 
 	return (
-		<Dialog>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
 				<Button>{children}</Button>
 			</DialogTrigger>

apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx

@@ -28,7 +28,7 @@ import {
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PenBoxIcon, Pencil } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -49,6 +49,7 @@ interface Props {
 }
 
 export const UpdatePort = ({ portId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
 	const { data } = api.port.one.useQuery(
 		{
@@ -89,6 +90,7 @@ export const UpdatePort = ({ portId }: Props) => {
 				await utils.application.one.invalidate({
 					applicationId: response?.applicationId,
 				});
+				setIsOpen(false);
 			})
 			.catch(() => {
 				toast.error("Error to update the port");
@@ -96,7 +98,7 @@ export const UpdatePort = ({ portId }: Props) => {
 	};
 
 	return (
-		<Dialog>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
 					<PenBoxIcon className="size-4 text-muted-foreground" />

apps/dokploy/components/dashboard/application/advanced/redirects/add-redirect.tsx

@@ -23,7 +23,7 @@ import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PlusIcon } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -45,6 +45,7 @@ export const AddRedirect = ({
 	applicationId,
 	children = <PlusIcon className="h-4 w-4" />,
 }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
 
 	const { mutateAsync, isLoading, error, isError } =
@@ -80,6 +81,7 @@ export const AddRedirect = ({
 				await utils.application.readTraefikConfig.invalidate({
 					applicationId,
 				});
+				setIsOpen(false);
 			})
 			.catch(() => {
 				toast.error("Error to create the redirect");
@@ -87,7 +89,7 @@ export const AddRedirect = ({
 	};
 
 	return (
-		<Dialog>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
 				<Button>{children}</Button>
 			</DialogTrigger>

apps/dokploy/components/dashboard/application/advanced/redirects/update-redirect.tsx

@@ -23,7 +23,7 @@ import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PenBoxIcon, Pencil } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -41,6 +41,7 @@ interface Props {
 
 export const UpdateRedirect = ({ redirectId }: Props) => {
 	const utils = api.useUtils();
+	const [isOpen, setIsOpen] = useState(false);
 	const { data } = api.redirects.one.useQuery(
 		{
 			redirectId,
@@ -84,6 +85,7 @@ export const UpdateRedirect = ({ redirectId }: Props) => {
 				await utils.application.one.invalidate({
 					applicationId: response?.applicationId,
 				});
+				setIsOpen(false);
 			})
 			.catch(() => {
 				toast.error("Error to update the redirect");
@@ -91,7 +93,7 @@ export const UpdateRedirect = ({ redirectId }: Props) => {
 	};
 
 	return (
-		<Dialog>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
 					<PenBoxIcon className="size-4  text-muted-foreground" />

apps/dokploy/components/dashboard/application/advanced/security/add-security.tsx

@@ -21,7 +21,7 @@ import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PlusIcon } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -43,7 +43,7 @@ export const AddSecurity = ({
 	children = <PlusIcon className="h-4 w-4" />,
 }: Props) => {
 	const utils = api.useUtils();
-
+	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync, isLoading, error, isError } =
 		api.security.create.useMutation();
 
@@ -72,6 +72,7 @@ export const AddSecurity = ({
 				await utils.application.readTraefikConfig.invalidate({
 					applicationId,
 				});
+				setIsOpen(false);
 			})
 			.catch(() => {
 				toast.error("Error to create the security");
@@ -79,7 +80,7 @@ export const AddSecurity = ({
 	};
 
 	return (
-		<Dialog>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
 				<Button>{children}</Button>
 			</DialogTrigger>

apps/dokploy/components/dashboard/application/advanced/security/update-security.tsx

@@ -21,7 +21,7 @@ import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PenBoxIcon, Pencil } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -38,6 +38,7 @@ interface Props {
 }
 
 export const UpdateSecurity = ({ securityId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
 	const { data } = api.security.one.useQuery(
 		{
@@ -79,6 +80,7 @@ export const UpdateSecurity = ({ securityId }: Props) => {
 				await utils.application.one.invalidate({
 					applicationId: response?.applicationId,
 				});
+				setIsOpen(false);
 			})
 			.catch(() => {
 				toast.error("Error to update the security");
@@ -86,7 +88,7 @@ export const UpdateSecurity = ({ securityId }: Props) => {
 	};
 
 	return (
-		<Dialog>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
 					<PenBoxIcon className="size-4  text-muted-foreground" />

apps/dokploy/components/dashboard/application/advanced/volumes/add-volumes.tsx

@@ -24,7 +24,7 @@ import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PlusIcon } from "lucide-react";
 import type React from "react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -77,6 +77,7 @@ export const AddVolumes = ({
 	refetch,
 	children = <PlusIcon className="h-4 w-4" />,
 }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync } = api.mounts.create.useMutation();
 	const form = useForm<AddMount>({
 		defaultValues: {
@@ -103,6 +104,7 @@ export const AddVolumes = ({
 			})
 				.then(() => {
 					toast.success("Mount Created");
+					setIsOpen(false);
 				})
 				.catch(() => {
 					toast.error("Error to create the Bind mount");
@@ -117,6 +119,7 @@ export const AddVolumes = ({
 			})
 				.then(() => {
 					toast.success("Mount Created");
+					setIsOpen(false);
 				})
 				.catch(() => {
 					toast.error("Error to create the Volume mount");
@@ -132,6 +135,7 @@ export const AddVolumes = ({
 			})
 				.then(() => {
 					toast.success("Mount Created");
+					setIsOpen(false);
 				})
 				.catch(() => {
 					toast.error("Error to create the File mount");
@@ -142,7 +146,7 @@ export const AddVolumes = ({
 	};
 
 	return (
-		<Dialog>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger className="" asChild>
 				<Button>{children}</Button>
 			</DialogTrigger>

apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx

@@ -2,6 +2,7 @@ import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
+	DialogClose,
 	DialogContent,
 	DialogDescription,
 	DialogFooter,
@@ -22,7 +23,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Pencil } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -76,6 +77,7 @@ export const UpdateVolume = ({
 	refetch,
 	serviceType,
 }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
 	const { data } = api.mounts.one.useQuery(
 		{
@@ -135,6 +137,7 @@ export const UpdateVolume = ({
 			})
 				.then(() => {
 					toast.success("Mount Update");
+					setIsOpen(false);
 				})
 				.catch(() => {
 					toast.error("Error to update the Bind mount");
@@ -148,6 +151,7 @@ export const UpdateVolume = ({
 			})
 				.then(() => {
 					toast.success("Mount Update");
+					setIsOpen(false);
 				})
 				.catch(() => {
 					toast.error("Error to update the Volume mount");
@@ -162,6 +166,7 @@ export const UpdateVolume = ({
 			})
 				.then(() => {
 					toast.success("Mount Update");
+					setIsOpen(false);
 				})
 				.catch(() => {
 					toast.error("Error to update the File mount");
@@ -171,7 +176,7 @@ export const UpdateVolume = ({
 	};
 
 	return (
-		<Dialog>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
 					<Pencil className="size-4  text-muted-foreground" />
@@ -291,13 +296,15 @@ export const UpdateVolume = ({
 							)}
 						</div>
 						<DialogFooter>
-							<Button
-								isLoading={isLoading}
-								form="hook-form-update-volume"
-								type="submit"
-							>
-								Update
-							</Button>
+							<DialogClose>
+								<Button
+									isLoading={isLoading}
+									form="hook-form-update-volume"
+									type="submit"
+								>
+									Update
+								</Button>
+							</DialogClose>
 						</DialogFooter>
 					</form>
 				</Form>