Merge pull request #3627 from Dokploy/3583-dokploy-traefik-config-editor-does-not-allow-valid-traefik-config-to-be-saved

feat(traefik): add option to skip YAML validation for Go templating

Author: Siumauricio

apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx

@@ -24,6 +24,8 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 
 const UpdateTraefikConfigSchema = z.object({
@@ -59,6 +61,7 @@ export const validateAndFormatYAML = (yamlText: string) => {
 
 export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 	const [open, setOpen] = useState(false);
+	const [skipYamlValidation, setSkipYamlValidation] = useState(false);
 	const { data, refetch } = api.application.readTraefikConfig.useQuery(
 		{
 			applicationId,
@@ -85,13 +88,15 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 	}, [data]);
 
 	const onSubmit = async (data: UpdateTraefikConfig) => {
-		const { valid, error } = validateAndFormatYAML(data.traefikConfig);
-		if (!valid) {
-			form.setError("traefikConfig", {
-				type: "manual",
-				message: (error as string) || "Invalid YAML",
-			});
-			return;
+		if (!skipYamlValidation) {
+			const { valid, error } = validateAndFormatYAML(data.traefikConfig);
+			if (!valid) {
+				form.setError("traefikConfig", {
+					type: "manual",
+					message: (error as string) || "Invalid YAML",
+				});
+				return;
+			}
 		}
 		form.clearErrors("traefikConfig");
 		await mutateAsync({
@@ -116,6 +121,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 				setOpen(open);
 				if (!open) {
 					form.reset();
+					setSkipYamlValidation(false);
 				}
 			}}
 		>
@@ -169,7 +175,28 @@ routers:
 						</div>
 					</form>
 
-					<DialogFooter>
+					<DialogFooter className="flex-col sm:flex-row gap-4">
+						<div className="flex flex-col gap-1 w-full sm:w-auto sm:mr-auto">
+							<div className="flex items-center space-x-2">
+								<Checkbox
+									id="skip-yaml-validation-app"
+									checked={skipYamlValidation}
+									onCheckedChange={(checked) =>
+										setSkipYamlValidation(checked === true)
+									}
+								/>
+								<Label
+									htmlFor="skip-yaml-validation-app"
+									className="text-sm font-normal cursor-pointer"
+								>
+									Skip YAML validation (for Go templating)
+								</Label>
+							</div>
+							<p className="text-sm text-muted-foreground">
+								Check to save configs with Go templating (e.g.{" "}
+								<code className="text-xs">{"{{range}}"}</code>).
+							</p>
+						</div>
 						<Button
 							isLoading={isLoading}
 							form="hook-form-update-traefik-config"

apps/dokploy/components/dashboard/file-system/show-traefik-file.tsx

@@ -7,6 +7,7 @@ import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
 	Form,
 	FormControl,
@@ -16,6 +17,7 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
+import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { validateAndFormatYAML } from "../application/advanced/traefik/update-traefik-config";
 
@@ -47,6 +49,7 @@ export const ShowTraefikFile = ({ path, serverId }: Props) => {
 		},
 	);
 	const [canEdit, setCanEdit] = useState(true);
+	const [skipYamlValidation, setSkipYamlValidation] = useState(false);
 
 	const { mutateAsync, isLoading, error, isError } =
 		api.settings.updateTraefikFile.useMutation();
@@ -66,13 +69,15 @@ export const ShowTraefikFile = ({ path, serverId }: Props) => {
 	}, [form, form.reset, data]);
 
 	const onSubmit = async (data: UpdateServerMiddlewareConfig) => {
-		const { valid, error } = validateAndFormatYAML(data.traefikConfig);
-		if (!valid) {
-			form.setError("traefikConfig", {
-				type: "manual",
-				message: error || "Invalid YAML",
-			});
-			return;
+		if (!skipYamlValidation) {
+			const { valid, error } = validateAndFormatYAML(data.traefikConfig);
+			if (!valid) {
+				form.setError("traefikConfig", {
+					type: "manual",
+					message: error || "Invalid YAML",
+				});
+				return;
+			}
 		}
 		form.clearErrors("traefikConfig");
 		await mutateAsync({
@@ -153,14 +158,37 @@ routers:
 							/>
 						)}
 					</div>
-					<div className="flex justify-end">
-						<Button
-							isLoading={isLoading}
-							disabled={canEdit || isLoading}
-							type="submit"
-						>
-							Update
-						</Button>
+					<div className="flex flex-col gap-4">
+						<div className="flex items-center space-x-2">
+							<Checkbox
+								id="skip-yaml-validation"
+								checked={skipYamlValidation}
+								onCheckedChange={(checked) =>
+									setSkipYamlValidation(checked === true)
+								}
+							/>
+							<Label
+								htmlFor="skip-yaml-validation"
+								className="text-sm font-normal cursor-pointer"
+							>
+								Skip YAML validation (for Go templating)
+							</Label>
+						</div>
+						<p className="text-sm text-muted-foreground -mt-2">
+							Traefik supports Go templating in dynamic configs (e.g.{" "}
+							<code className="text-xs">{"{{range}}"}</code>). Configs using
+							templates will fail standard YAML validation. Check this to save
+							without validation.
+						</p>
+						<div className="flex justify-end">
+							<Button
+								isLoading={isLoading}
+								disabled={canEdit || isLoading}
+								type="submit"
+							>
+								Update
+							</Button>
+						</div>
 					</div>
 				</form>
 			</Form>