Skip to content

Commit

Permalink
feat: support code editor (#105)
Browse files Browse the repository at this point in the history 
* feat: support code editor

* Update codeblock

* refactor: remove unused class

---------

Co-authored-by: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
  • Loading branch information
@hehehai @Siumauricio
hehehai and Siumauricio committed May 26, 2024
1 parent ed6e4e8 commit 4d3e342
Show file tree
Hide file tree
Showing 12 changed files with 349 additions and 48 deletions.
13 changes: 8 additions & 5 deletions components/dashboard/application/advanced/traefik/show-traefik-config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions components/dashboard/application/advanced/traefik/update-traefik-config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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(),
Expand Down Expand Up @@ -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
Expand All @@ -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:
Expand Down
12 changes: 5 additions & 7 deletions components/dashboard/file-system/show-traefik-file.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down Expand Up @@ -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"
Expand All @@ -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:
Expand Down
4 changes: 2 additions & 2 deletions components/dashboard/file-system/show-traefik-system.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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}
Expand Down
6 changes: 3 additions & 3 deletions components/dashboard/settings/web-server/show-main-traefik-config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ 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 { 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({
Expand Down Expand Up @@ -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')'
Expand Down
8 changes: 4 additions & 4 deletions components/dashboard/settings/web-server/show-server-middleware-config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ 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 { 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({
Expand Down Expand Up @@ -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
Expand All @@ -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:
Expand Down
8 changes: 4 additions & 4 deletions components/dashboard/settings/web-server/show-server-traefik-config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ 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 { 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({
Expand Down Expand Up @@ -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
Expand All @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/settings/web-server/terminal-modal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import type React from "react";
import {
Dialog,
DialogContent,
Expand Down
45 changes: 45 additions & 0 deletions components/shared/code-editor.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
};
4 changes: 4 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@
},
"dependencies": {
"@aws-sdk/client-s3": "3.515.0",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/lang-yaml": "^6.1.1",
"@faker-js/faker": "^8.4.1",
"@hookform/resolvers": "^3.3.4",
"@lucia-auth/adapter-drizzle": "1.0.7",
Expand Down Expand Up @@ -59,6 +61,8 @@
"@trpc/next": "^10.43.6",
"@trpc/react-query": "^10.43.6",
"@trpc/server": "^10.43.6",
"@uiw/codemirror-theme-github": "^4.22.1",
"@uiw/react-codemirror": "^4.22.1",
"@xterm/addon-attach": "0.10.0",
"@xterm/xterm": "^5.4.0",
"bcrypt": "5.1.1",
Expand Down
Loading

0 comments on commit 4d3e342

Please sign in to comment.