Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: support code editor (#105)

Browse Source 
* feat: support code editor

* Update codeblock

* refactor: remove unused class

---------

Co-authored-by: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
This commit is contained in:
木头981
2024-05-27 05:32:24 +08:00
committed by GitHub
parent ed6e4e8e73
commit 4d3e3426ca
12 changed files with 349 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/dashboard/application/advanced/traefik/show-traefik-config.tsx
View File

@@ -9,6 +9,7 @@ import {
import { api } from "@/utils/api";
import { File } from "lucide-react";
import { UpdateTraefikConfig } from "./update-traefik-config";
import { CodeEditor } from "@/components/shared/code-editor";
interface Props {
applicationId: string;
}
@@ -43,11 +44,13 @@ export const ShowTraefikConfig = ({ applicationId }: Props) => {
</div>
) : (
<div className="flex flex-col pt-2 relative">
<div className="flex flex-col gap-6 bg-input p-4 rounded-md max-h-[35rem] min-h-[10rem] overflow-y-auto">
<div>
<pre className="font-sans">{data || "Empty"}</pre>
</div>
<div className="flex justify-end absolute z-50 right-6">
<div className="flex flex-col gap-6 max-h-[35rem] min-h-[10rem] overflow-y-auto">
<CodeEditor
value={data || "Empty"}
disabled
className="font-mono"
/>
<div className="flex justify-end absolute z-50 right-6 top-6">
<UpdateTraefikConfig applicationId={applicationId} />
</div>
</div>

8
components/dashboard/application/advanced/traefik/update-traefik-config.tsx
View File

@@ -16,7 +16,6 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
import { api } from "@/utils/api";
import { AlertBlock } from "@/components/shared/alert-block";
import { zodResolver } from "@hookform/resolvers/zod";
@@ -25,6 +24,7 @@ import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import jsyaml from "js-yaml";
import { CodeEditor } from "@/components/shared/code-editor";
const UpdateTraefikConfigSchema = z.object({
traefikConfig: z.string(),
@@ -122,7 +122,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
<form
id="hook-form-update-traefik-config"
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full py-4"
className="grid w-full py-4 overflow-auto"
>
<div className="flex flex-col">
<FormField
@@ -132,8 +132,8 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
<FormItem>
<FormLabel>Traefik config</FormLabel>
<FormControl>
<Textarea
className="h-[35rem] font-mono"
<CodeEditor
wrapperClassName="h-[35rem] font-mono"
placeholder={`http:
routers:
router-name:

12
components/dashboard/file-system/show-traefik-file.tsx
View File

@@ -9,16 +9,15 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
import { api } from "@/utils/api";
import { AlertBlock } from "@/components/shared/alert-block";
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";
import { CodeEditor } from "@/components/shared/code-editor";
const UpdateServerMiddlewareConfigSchema = z.object({
traefikConfig: z.string(),
@@ -88,13 +87,12 @@ export const ShowTraefikFile = ({ path }: Props) => {
return (
<div>
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full relative"
className="grid w-full relative z-[5]"
>
<div className="flex flex-col">
<div className="flex flex-col overflow-auto">
<FormField
control={form.control}
name="traefikConfig"
@@ -105,8 +103,8 @@ export const ShowTraefikFile = ({ path }: Props) => {
{path}
</FormDescription>
<FormControl>
<Textarea
className="h-[35rem] font-mono"
<CodeEditor
wrapperClassName="h-[35rem] font-mono"
placeholder={`http:
routers:
router-name:

4
components/dashboard/file-system/show-traefik-system.tsx
View File

@@ -14,7 +14,7 @@ export const ShowTraefikSystem = () => {
return (
<div className={cn("mt-6 md:grid gap-4")}>
<div className="flex flex-col md:flex-row gap-4 md:gap-10 w-full">
<div className="flex flex-col lg: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">
@@ -27,7 +27,7 @@ export const ShowTraefikSystem = () => {
<>
<Tree
data={directories}
className="md:max-w-[19rem] w-full md:h-[660px] border rounded-lg"
className="lg:max-w-[19rem] w-full lg:h-[660px] border rounded-lg"
onSelectChange={(item) => setFile(item?.id || null)}
folderIcon={Folder}
itemIcon={Workflow}

6
components/dashboard/settings/web-server/show-main-traefik-config.tsx
View File

@@ -16,7 +16,6 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
import { api } from "@/utils/api";
import { AlertBlock } from "@/components/shared/alert-block";
import { zodResolver } from "@hookform/resolvers/zod";
@@ -24,6 +23,7 @@ import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import { CodeEditor } from "@/components/shared/code-editor";
import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
const UpdateMainTraefikConfigSchema = z.object({
@@ -105,8 +105,8 @@ export const ShowMainTraefikConfig = ({ children }: Props) => {
<FormItem className="relative">
<FormLabel>Traefik config</FormLabel>
<FormControl>
<Textarea
className="h-[35rem] font-mono"
<CodeEditor
wrapperClassName="h-[35rem] font-mono"
placeholder={`providers:
docker:
defaultRule: 'Host('dokploy.com')'

8
components/dashboard/settings/web-server/show-server-middleware-config.tsx
View File

@@ -16,7 +16,6 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
import { api } from "@/utils/api";
import { AlertBlock } from "@/components/shared/alert-block";
import { zodResolver } from "@hookform/resolvers/zod";
@@ -24,6 +23,7 @@ import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import { CodeEditor } from "@/components/shared/code-editor";
import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
const UpdateServerMiddlewareConfigSchema = z.object({
@@ -98,7 +98,7 @@ export const ShowServerMiddlewareConfig = ({ children }: Props) => {
<form
id="hook-form-update-server-traefik-config"
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full py-4 relative"
className="grid w-full py-4 relative overflow-auto"
>
<div className="flex flex-col">
<FormField
@@ -108,8 +108,8 @@ export const ShowServerMiddlewareConfig = ({ children }: Props) => {
<FormItem className="relative">
<FormLabel>Traefik config</FormLabel>
<FormControl>
<Textarea
className="h-[35rem] font-mono"
<CodeEditor
wrapperClassName="h-[35rem] font-mono"
placeholder={`http:
routers:
router-name:

8
components/dashboard/settings/web-server/show-server-traefik-config.tsx
View File

@@ -16,7 +16,6 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
import { api } from "@/utils/api";
import { AlertBlock } from "@/components/shared/alert-block";
import { zodResolver } from "@hookform/resolvers/zod";
@@ -24,6 +23,7 @@ import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import { CodeEditor } from "@/components/shared/code-editor";
import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
const UpdateServerTraefikConfigSchema = z.object({
@@ -98,7 +98,7 @@ export const ShowServerTraefikConfig = ({ children }: Props) => {
<form
id="hook-form-update-server-traefik-config"
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full py-4 relative"
className="grid w-full py-4 relative overflow-auto"
>
<div className="flex flex-col">
<FormField
@@ -108,8 +108,8 @@ export const ShowServerTraefikConfig = ({ children }: Props) => {
<FormItem className="relative">
<FormLabel>Traefik config</FormLabel>
<FormControl>
<Textarea
className="h-[35rem] font-mono"
<CodeEditor
wrapperClassName="h-[35rem] font-mono"
placeholder={`http:
routers:
router-name:

2
components/dashboard/settings/web-server/terminal-modal.tsx
View File

@@ -1,4 +1,4 @@
import React from "react";
import type React from "react";
import {
Dialog,
DialogContent,

45
components/shared/code-editor.tsx Normal file
View File

@@ -0,0 +1,45 @@
import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
import { yaml } from "@codemirror/lang-yaml";
import { json } from "@codemirror/lang-json";
import { githubLight, githubDark } from "@uiw/codemirror-theme-github";
import { cn } from "@/lib/utils";
import { useTheme } from "next-themes";
interface Props extends ReactCodeMirrorProps {
wrapperClassName?: string;
disabled?: boolean;
}
export const CodeEditor = ({
className,
wrapperClassName,
...props
}: Props) => {
const { resolvedTheme } = useTheme();
return (
<div className={cn("relative overflow-auto", wrapperClassName)}>
<CodeMirror
basicSetup={{
lineNumbers: true,
foldGutter: true,
highlightSelectionMatches: true,
highlightActiveLine: !props.disabled,
allowMultipleSelections: true,
}}
theme={resolvedTheme === "dark" ? githubDark : githubLight}
extensions={[yaml(), json()]}
{...props}
editable={!props.disabled}
className={cn(
"w-full h-full text-sm leading-relaxed",
`cm-theme-${resolvedTheme}`,
className,
)}
/>
{props.disabled && (
<div className="absolute top-0 left-0 w-full h-full flex items-center justify-center z-[10] [background:var(--overlay)]" />
)}
</div>
);
};