feat: initial commit

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

@@ -0,0 +1,155 @@
+import { Button } from "@/components/ui/button";
+
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { validateAndFormatYAML } from "../application/advanced/traefik/update-traefik-config";
+
+const UpdateServerMiddlewareConfigSchema = z.object({
+	traefikConfig: z.string(),
+});
+
+type UpdateServerMiddlewareConfig = z.infer<
+	typeof UpdateServerMiddlewareConfigSchema
+>;
+
+interface Props {
+	path: string;
+}
+
+export const ShowTraefikFile = ({ path }: Props) => {
+	const { data, refetch } = api.settings.readTraefikFile.useQuery(
+		{
+			path,
+		},
+		{
+			enabled: !!path,
+		},
+	);
+	const [canEdit, setCanEdit] = useState(true);
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.settings.updateTraefikFile.useMutation();
+
+	const form = useForm<UpdateServerMiddlewareConfig>({
+		defaultValues: {
+			traefikConfig: "",
+		},
+		disabled: canEdit,
+		resolver: zodResolver(UpdateServerMiddlewareConfigSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				traefikConfig: data || "",
+			});
+		}
+	}, [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;
+		}
+		form.clearErrors("traefikConfig");
+		await mutateAsync({
+			traefikConfig: data.traefikConfig,
+			path,
+		})
+			.then(async () => {
+				toast.success("Traefik config Updated");
+				refetch();
+			})
+			.catch(() => {
+				toast.error("Error to update the traefik config");
+			});
+	};
+
+	return (
+		<div>
+			{isError && (
+				<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+					<AlertTriangle className="text-red-600 dark:text-red-400" />
+					<span className="text-sm text-red-600 dark:text-red-400">
+						{error?.message}
+					</span>
+				</div>
+			)}
+
+			<Form {...form}>
+				<form
+					onSubmit={form.handleSubmit(onSubmit)}
+					className="grid w-full py-4 relative"
+				>
+					<div className="flex flex-col">
+						<FormField
+							control={form.control}
+							name="traefikConfig"
+							render={({ field }) => (
+								<FormItem className="relative">
+									<FormLabel>Traefik config</FormLabel>
+									<FormDescription>{path}</FormDescription>
+									<FormControl>
+										<Textarea
+											className="h-[35rem]"
+											placeholder={`http:
+routers:
+    router-name:
+        rule: Host('domain.com')
+        service: container-name
+        entryPoints:
+            - web
+        tls: false
+        middlewares: []
+                                                    `}
+											{...field}
+										/>
+									</FormControl>
+
+									<pre>
+										<FormMessage />
+									</pre>
+									<div className="flex justify-end absolute z-50 right-6 top-10">
+										<Button
+											variant="secondary"
+											type="button"
+											onClick={async () => {
+												setCanEdit(!canEdit);
+											}}
+										>
+											{canEdit ? "Unlock" : "Lock"}
+										</Button>
+									</div>
+								</FormItem>
+							)}
+						/>
+					</div>
+					<div className="flex justify-end">
+						<Button isLoading={isLoading} disabled={canEdit} type="submit">
+							Update
+						</Button>
+					</div>
+				</form>
+			</Form>
+		</div>
+	);
+};

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

@@ -0,0 +1,52 @@
+import React from "react";
+
+import { api } from "@/utils/api";
+import { Workflow, Folder, FileIcon } from "lucide-react";
+import { Tree } from "@/components/ui/file-tree";
+
+import { cn } from "@/lib/utils";
+import { ShowTraefikFile } from "./show-traefik-file";
+
+export const ShowTraefikSystem = () => {
+	const [file, setFile] = React.useState<null | string>(null);
+
+	const { data: directories } = api.settings.readDirectories.useQuery();
+
+	return (
+		<div className={cn("mt-6 grid gap-4 pb-20")}>
+			<div className="flex flex-col md:flex-row gap-4 md:gap-10 w-full">
+				{directories?.length === 0 && (
+					<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+						<span className="text-muted-foreground text-lg font-medium">
+							No directories or files detected in {"'/etc/dokploy/traefik'"}
+						</span>
+						<Folder className="size-8 text-muted-foreground" />
+					</div>
+				)}
+				{directories && directories?.length > 0 && (
+					<>
+						<Tree
+							data={directories}
+							className="md:max-w-[19rem] w-full md:h-[660px] border rounded-lg"
+							onSelectChange={(item) => setFile(item?.id || null)}
+							folderIcon={Folder}
+							itemIcon={Workflow}
+						/>
+						<div className="w-full">
+							{file ? (
+								<ShowTraefikFile path={file} />
+							) : (
+								<div className="h-full w-full flex-col gap-2 flex items-center justify-center">
+									<span className="text-muted-foreground text-lg font-medium">
+										No file selected
+									</span>
+									<FileIcon className="size-8 text-muted-foreground" />
+								</div>
+							)}
+						</div>
+					</>
+				)}
+			</div>
+		</div>
+	);
+};