Merge pull request #343 from Tuluobo/bugfix/delete_service_with_container

fix(ui): close dialog after templete selected & add config editor line wrapping

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

@@ -46,6 +46,7 @@ export const ShowTraefikConfig = ({ applicationId }: Props) => {
 					<div className="flex flex-col pt-2 relative">
 						<div className="flex flex-col gap-6 max-h-[35rem] min-h-[10rem] overflow-y-auto">
 							<CodeEditor
+								lineWrapping
 								value={data || "Empty"}
 								disabled
 								className="font-mono"

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

@@ -144,6 +144,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
 											<CodeEditor
+												lineWrapping
 												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`http:
 routers:

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

@@ -104,6 +104,7 @@ export const ShowTraefikFile = ({ path }: Props) => {
 									</FormDescription>
 									<FormControl>
 										<CodeEditor
+											lineWrapping
 											wrapperClassName="h-[35rem] font-mono"
 											placeholder={`http:
 routers:

apps/dokploy/components/dashboard/project/add-template.tsx

@@ -55,6 +55,7 @@ interface Props {
 
 export const AddTemplate = ({ projectId }: Props) => {
 	const [query, setQuery] = useState("");
+	const [open, setOpen] = useState(false);
 	const { data } = api.compose.templates.useQuery();
 	const [selectedTags, setSelectedTags] = useState<string[]>([]);
 	const { data: tags, isLoading: isLoadingTags } =
@@ -75,7 +76,7 @@ export const AddTemplate = ({ projectId }: Props) => {
 		}) || [];
 
 	return (
-		<Dialog>
+		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger className="w-full">
 				<DropdownMenuItem
 					className="w-full cursor-pointer space-x-3"
@@ -283,6 +284,7 @@ export const AddTemplate = ({ projectId }: Props) => {
 																				utils.project.one.invalidate({
 																					projectId,
 																				});
+																				setOpen(false);
 																			})
 																			.catch(() => {
 																				toast.error(

apps/dokploy/components/dashboard/settings/web-server/show-main-traefik-config.tsx

@@ -106,6 +106,7 @@ export const ShowMainTraefikConfig = ({ children }: Props) => {
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
 											<CodeEditor
+												lineWrapping
 												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`providers:
     docker:

apps/dokploy/components/dashboard/settings/web-server/show-server-traefik-config.tsx

@@ -109,6 +109,7 @@ export const ShowServerTraefikConfig = ({ children }: Props) => {
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
 											<CodeEditor
+												lineWrapping
 												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`http:
 routers:

apps/dokploy/components/shared/code-editor.tsx

@@ -3,6 +3,7 @@ import { json } from "@codemirror/lang-json";
 import { yaml } from "@codemirror/lang-yaml";
 import { StreamLanguage } from "@codemirror/language";
 import { properties } from "@codemirror/legacy-modes/mode/properties";
+import { EditorView } from "@codemirror/view";
 import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
 import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
 import { useTheme } from "next-themes";
@@ -10,6 +11,7 @@ interface Props extends ReactCodeMirrorProps {
 	wrapperClassName?: string;
 	disabled?: boolean;
 	language?: "yaml" | "json" | "properties";
+	lineWrapping?: boolean;
 }
 
 export const CodeEditor = ({
@@ -36,6 +38,7 @@ export const CodeEditor = ({
 						: language === "json"
 							? json()
 							: StreamLanguage.define(properties),
+					props.lineWrapping ? EditorView.lineWrapping : [],
 				]}
 				{...props}
 				editable={!props.disabled}

apps/dokploy/package.json

@@ -39,6 +39,7 @@
 		"@codemirror/lang-yaml": "^6.1.1",
 		"@codemirror/language": "^6.10.1",
 		"@codemirror/legacy-modes": "6.4.0",
+		"@codemirror/view": "6.29.0",
 		"@dokploy/trpc-openapi": "0.0.4",
 		"@faker-js/faker": "^8.4.1",
 		"@hookform/resolvers": "^3.3.4",

pnpm-lock.yaml

@@ -114,6 +114,9 @@ importers:
       '@codemirror/legacy-modes':
         specifier: 6.4.0
         version: 6.4.0
+      '@codemirror/view':
+        specifier: 6.29.0
+        version: 6.29.0
       '@dokploy/trpc-openapi':
         specifier: 0.0.4
         version: 0.0.4(@trpc/server@10.45.2)(zod@3.23.8)