From 4f13c25ca2ae424baccf19b38c54e65302514c22 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Fri, 6 Feb 2026 00:19:18 -0600
Subject: [PATCH] refactor(network-form): clean up DriverOptsEntries rendering
 logic

- Simplified the rendering of DriverOptsEntries in the network form by consolidating the mapping logic.
- Improved formatting of example driver options in the form description for better readability.
- Ensured consistent handling of adding and removing driver options within the form.
---
 .../cluster/swarm-forms/network-form.tsx      | 139 +++++++++---------
 1 file changed, 69 insertions(+), 70 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/network-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/network-form.tsx
index 43a816dfc..f2c640cfe 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/network-form.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/network-form.tsx
@@ -104,10 +104,9 @@ export const NetworkForm = ({ id, type }: NetworkFormProps) => {
 				formData.networks
 					?.filter((network) => network.Target)
 					.map((network) => {
-						const entries =
-							(network.DriverOptsEntries ?? []).filter(
-								(e) => e.key.trim() !== "",
-							);
+						const entries = (network.DriverOptsEntries ?? []).filter(
+							(e) => e.key.trim() !== "",
+						);
 						const driverOpts =
 							entries.length > 0
 								? Object.fromEntries(
@@ -194,74 +193,74 @@ export const NetworkForm = ({ id, type }: NetworkFormProps) => {
 								<div className="space-y-2">
 									<FormLabel>Driver options (optional)</FormLabel>
 									<FormDescription>
-										e.g. com.docker.network.driver.mtu, com.docker.network.driver.host_binding
+										e.g. com.docker.network.driver.mtu,
+										com.docker.network.driver.host_binding
 									</FormDescription>
-									{(form.watch(`networks.${index}.DriverOptsEntries`) ?? []).map(
-										(_, optIndex) => (
-											<div
-												key={optIndex}
-												className="flex gap-2 items-end flex-wrap"
-											>
-												<FormField
-													control={form.control}
-													name={`networks.${index}.DriverOptsEntries.${optIndex}.key`}
-													render={({ field }) => (
-														<FormItem className="flex-1 min-w-[140px]">
-															<FormControl>
-																<Input
-																	{...field}
-																	placeholder="com.docker.network.driver.mtu"
-																/>
-															</FormControl>
-															<FormMessage />
-														</FormItem>
-													)}
-												/>
-												<FormField
-													control={form.control}
-													name={`networks.${index}.DriverOptsEntries.${optIndex}.value`}
-													render={({ field }) => (
-														<FormItem className="flex-1 min-w-[100px]">
-															<FormControl>
-																<Input {...field} placeholder="1500" />
-															</FormControl>
-															<FormMessage />
-														</FormItem>
-													)}
-												/>
-												<Button
-													type="button"
-													variant="ghost"
-													size="sm"
-													onClick={() => {
-														const entries =
-															form.getValues(
-																`networks.${index}.DriverOptsEntries`,
-															) ?? [];
-														form.setValue(
+									{(
+										form.watch(`networks.${index}.DriverOptsEntries`) ?? []
+									).map((_, optIndex) => (
+										<div
+											key={optIndex}
+											className="flex gap-2 items-end flex-wrap"
+										>
+											<FormField
+												control={form.control}
+												name={`networks.${index}.DriverOptsEntries.${optIndex}.key`}
+												render={({ field }) => (
+													<FormItem className="flex-1 min-w-[140px]">
+														<FormControl>
+															<Input
+																{...field}
+																placeholder="com.docker.network.driver.mtu"
+															/>
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												)}
+											/>
+											<FormField
+												control={form.control}
+												name={`networks.${index}.DriverOptsEntries.${optIndex}.value`}
+												render={({ field }) => (
+													<FormItem className="flex-1 min-w-[100px]">
+														<FormControl>
+															<Input {...field} placeholder="1500" />
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												)}
+											/>
+											<Button
+												type="button"
+												variant="ghost"
+												size="sm"
+												onClick={() => {
+													const entries =
+														form.getValues(
 															`networks.${index}.DriverOptsEntries`,
-															entries.filter((_, i) => i !== optIndex),
-														);
-													}}
-												>
-													Remove
-												</Button>
-											</div>
-										),
-									)}
+														) ?? [];
+													form.setValue(
+														`networks.${index}.DriverOptsEntries`,
+														entries.filter((_, i) => i !== optIndex),
+													);
+												}}
+											>
+												Remove
+											</Button>
+										</div>
+									))}
 									<Button
 										type="button"
 										variant="outline"
 										size="sm"
 										onClick={() => {
 											const entries =
-												form.getValues(
-													`networks.${index}.DriverOptsEntries`,
-												) ?? [];
-											form.setValue(
-												`networks.${index}.DriverOptsEntries`,
-												[...entries, { key: "", value: "" }],
-											);
+												form.getValues(`networks.${index}.DriverOptsEntries`) ??
+												[];
+											form.setValue(`networks.${index}.DriverOptsEntries`, [
+												...entries,
+												{ key: "", value: "" },
+											]);
 										}}
 									>
 										Add driver option
@@ -282,12 +281,12 @@ export const NetworkForm = ({ id, type }: NetworkFormProps) => {
 							variant="outline"
 							size="sm"
 							onClick={() =>
-							append({
-								Target: "",
-								Aliases: "",
-								DriverOptsEntries: [],
-							})
-						}
+								append({
+									Target: "",
+									Aliases: "",
+									DriverOptsEntries: [],
+								})
+							}
 						>
 							Add Network
 						</Button>