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

fix: env editor width overflow

Browse Source
This commit is contained in:
hehehai
2024-06-13 20:42:46 +08:00
parent a57a776500
commit 3c00937b94
18 changed files with 35 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,7 @@ import {
import { api } from "@/utils/api";
import { AlertBlock } from "@/components/shared/alert-block";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect } from "react";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
@@ -58,6 +58,7 @@ export const validateAndFormatYAML = (yamlText: string) => {
};
export const UpdateTraefikConfig = ({ applicationId }: Props) => {
const [open, setOpen] = useState(false);
const { data, refetch } = api.application.readTraefikConfig.useQuery(
{
applicationId,
@@ -81,7 +82,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
traefikConfig: data || "",
});
}
}, [form, form.reset, data]);
}, [data]);
const onSubmit = async (data: UpdateTraefikConfig) => {
const { valid, error } = validateAndFormatYAML(data.traefikConfig);
@@ -100,6 +101,8 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
.then(async () => {
toast.success("Traefik config Updated");
refetch();
setOpen(false);
form.reset();
})
.catch(() => {
toast.error("Error to update the traefik config");
@@ -107,7 +110,12 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
};
return (
<Dialog>
<Dialog open={open} onOpenChange={(open) => {
setOpen(open)
if (!open) {
form.reset();
}
}}>
<DialogTrigger asChild>
<Button isLoading={isLoading}>Modify</Button>
</DialogTrigger>
@@ -122,7 +130,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
<form
id="hook-form-update-traefik-config"
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full py-4 overflow-auto"
className="w-full space-y-4 overflow-auto"
>
<div className="flex flex-col">
<FormField

6
components/dashboard/application/advanced/volumes/add-volumes.tsx
View File

@@ -189,7 +189,7 @@ export const AddVolumes = ({
/>
<Label
htmlFor="bind"
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
>
Bind Mount
</Label>
@@ -209,7 +209,7 @@ export const AddVolumes = ({
/>
<Label
htmlFor="volume"
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
>
Volume Mount
</Label>
@@ -233,7 +233,7 @@ export const AddVolumes = ({
/>
<Label
htmlFor="file"
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
>
File Mount
</Label>

2
components/dashboard/application/environment/show.tsx
View File

@@ -124,7 +124,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
<form
id="hook-form"
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full gap-4 "
className="w-full space-y-4"
>
<FormField
control={form.control}

2
components/dashboard/compose/enviroment/show.tsx
View File

@@ -124,7 +124,7 @@ export const ShowEnvironmentCompose = ({ composeId }: Props) => {
<form
id="hook-form"
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full gap-4 "
className="w-full space-y-4"
>
<FormField
control={form.control}

6
components/dashboard/compose/general/compose-file-editor.tsx
View File

@@ -87,7 +87,7 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full relative gap-4"
className="w-full relative space-y-4"
>
<FormField
control={form.control}
@@ -99,8 +99,8 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
<CodeEditor
// disabled
value={field.value}
className="font-mono min-h-[20rem] compose-file-editor"
wrapperClassName="min-h-[20rem]"
className="font-mono"
wrapperClassName="compose-file-editor"
placeholder={`version: '3'
services:
web:

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

@@ -90,7 +90,7 @@ export const ShowTraefikFile = ({ path }: Props) => {
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full relative z-[5]"
className="w-full relative z-[5]"
>
<div className="flex flex-col overflow-auto">
<FormField

2
components/dashboard/mariadb/environment/show-mariadb-environment.tsx
View File

@@ -85,7 +85,7 @@ export const ShowMariadbEnvironment = ({ mariadbId }: Props) => {
<form
id="hook-form"
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full gap-4 "
className="w-full space-y-4"
>
<FormField
control={form.control}

2
components/dashboard/mongo/environment/show-mongo-environment.tsx
View File

@@ -85,7 +85,7 @@ export const ShowMongoEnvironment = ({ mongoId }: Props) => {
<form
id="hook-form"
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full gap-4 "
className="w-full space-y-4"
>
<FormField
control={form.control}

2
components/dashboard/mysql/environment/show-mysql-environment.tsx
View File

@@ -85,7 +85,7 @@ export const ShowMysqlEnvironment = ({ mysqlId }: Props) => {
<form
id="hook-form"
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full gap-4 "
className="w-full space-y-4"
>
<FormField
control={form.control}

2
components/dashboard/postgres/environment/show-postgres-environment.tsx
View File

@@ -85,7 +85,7 @@ export const ShowPostgresEnvironment = ({ postgresId }: Props) => {
<form
id="hook-form"
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full gap-4 "
className="w-full space-y-4"
>
<FormField
control={form.control}

2
components/dashboard/redis/environment/show-redis-environment.tsx
View File

@@ -85,7 +85,7 @@ export const ShowRedisEnvironment = ({ redisId }: Props) => {
<form
id="hook-form"
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full gap-4 "
className="w-full space-y-4"
>
<FormField
control={form.control}

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

@@ -194,7 +194,7 @@ export const WebServer = () => {
Space
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="start">
<DropdownMenuContent className="w-64" align="start">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>

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

@@ -95,7 +95,7 @@ export const ShowMainTraefikConfig = ({ children }: Props) => {
<form
id="hook-form-update-main-traefik-config"
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full py-4 relative"
className="w-full space-y-4 relative"
>
<div className="flex flex-col">
<FormField

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

@@ -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 overflow-auto"
className="w-full space-y-4 relative overflow-auto"
>
<div className="flex flex-col">
<FormField

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

@@ -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 overflow-auto"
className="w-full space-y-4 relative overflow-auto"
>
<div className="flex flex-col">
<FormField

2
components/shared/code-editor.tsx
View File

@@ -46,7 +46,7 @@ export const CodeEditor = ({
)}
/>
{props.disabled && (
<div className="absolute top-0 left-0 w-full h-full flex items-center justify-center z-[10] [background:var(--overlay)]" />
<div className="absolute top-0 rounded-md left-0 w-full h-full flex items-center justify-center z-[10] [background:var(--overlay)]" />
)}
</div>
);

6
components/ui/dialog.tsx
View File

@@ -36,12 +36,14 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
"fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className,
)}
{...props}
>
{children}
<div className="space-y-4 w-full">
{children}
</div>
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>

2
styles/globals.css
View File

@@ -127,10 +127,8 @@
background-color: transparent;
}
.compose-file-editor .cm-editor {
@apply min-h-[25rem];
}