Merge pull request #782 from Dokploy/733-project-env-ux-improvements

refactor: apply suggested changes

apps/dokploy/components/dashboard/projects/project-enviroment.tsx

@@ -19,11 +19,9 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, FileIcon, SquarePen } from "lucide-react";
+import { FileIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -37,9 +35,10 @@ type UpdateProject = z.infer<typeof updateProjectSchema>;
 
 interface Props {
 	projectId: string;
+	children?: React.ReactNode;
 }
 
-export const AddEnv = ({ projectId }: Props) => {
+export const ProjectEnviroment = ({ projectId, children }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
 	const { mutateAsync, error, isError, isLoading } =
@@ -53,7 +52,6 @@ export const AddEnv = ({ projectId }: Props) => {
 		},
 	);
 
-	console.log(data);
 	const form = useForm<UpdateProject>({
 		defaultValues: {
 			env: data?.env ?? "",
@@ -86,34 +84,29 @@ export const AddEnv = ({ projectId }: Props) => {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<DropdownMenuItem
-					className="w-full cursor-pointer space-x-3"
-					onSelect={(e) => e.preventDefault()}
-				>
-					<FileIcon className="size-4" />
-					<span>Add Env</span>
-				</DropdownMenuItem>
+				{children ?? (
+					<DropdownMenuItem
+						className="w-full cursor-pointer space-x-3"
+						onSelect={(e) => e.preventDefault()}
+					>
+						<FileIcon className="size-4" />
+						<span>Project Enviroment</span>
+					</DropdownMenuItem>
+				)}
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-6xl">
 				<DialogHeader>
-					<DialogTitle>Modify Shared Env</DialogTitle>
-					<DialogDescription>Update the env variables</DialogDescription>
+					<DialogTitle>Project Enviroment</DialogTitle>
+					<DialogDescription>
+						Update the env Environment variables that are accessible to all
+						services of this project. Use this syntax to reference project-level
+						variables in your service environments:
+					</DialogDescription>
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 				<AlertBlock type="info">
-					To use a shared env, in one of your services, you need to use like
-					this: Let's say you have a shared env ENVIROMENT="development" and you
-					want to use it in your service, you need to use like this:
-					<ul>
-						<li>
-							<code>ENVIRONMENT=${"{{project.ENVIRONMENT}}"}</code>
-						</li>
-						<li>
-							<code>DATABASE_URL=${"{{project.DATABASE_URL}}"}</code>
-						</li>
-					</ul>{" "}
-					This allows the service to inherit and use the shared variables from
-					the project level, ensuring consistency across services.
+					Use this syntax to reference project-level variables in your service
+					environments: <code>DATABASE_URL=${"{{project.DATABASE_URL}}"}</code>
 				</AlertBlock>
 				<div className="grid gap-4">
 					<div className="grid items-center gap-4">

apps/dokploy/components/dashboard/projects/show.tsx

@@ -25,7 +25,6 @@ import { api } from "@/utils/api";
 import {
 	AlertTriangle,
 	BookIcon,
-	CircuitBoard,
 	ExternalLink,
 	ExternalLinkIcon,
 	FolderInput,
@@ -35,7 +34,7 @@ import {
 import Link from "next/link";
 import { Fragment } from "react";
 import { toast } from "sonner";
-import { AddEnv } from "./add-env";
+import { ProjectEnviroment } from "./project-enviroment";
 import { UpdateProject } from "./update";
 
 export const ShowProjects = () => {
@@ -192,7 +191,9 @@ export const ShowProjects = () => {
 															Actions
 														</DropdownMenuLabel>
 														<div onClick={(e) => e.stopPropagation()}>
-															<AddEnv projectId={project.projectId} />
+															<ProjectEnviroment
+																projectId={project.projectId}
+															/>
 														</div>
 														<div onClick={(e) => e.stopPropagation()}>
 															<UpdateProject projectId={project.projectId} />

apps/dokploy/components/dashboard/settings/servers/show-servers.tsx

@@ -98,7 +98,7 @@ export const ShowServers = () => {
 					)
 				)}
 				{data && data?.length > 0 && (
-					<div className="flex flex-col gap-6">
+					<div className="flex flex-col gap-6 overflow-auto">
 						<Table>
 							<TableCaption>See all servers</TableCaption>
 							<TableHeader>

apps/dokploy/pages/dashboard/project/[projectId].tsx

@@ -2,6 +2,7 @@ import { AddApplication } from "@/components/dashboard/project/add-application";
 import { AddCompose } from "@/components/dashboard/project/add-compose";
 import { AddDatabase } from "@/components/dashboard/project/add-database";
 import { AddTemplate } from "@/components/dashboard/project/add-template";
+import { ProjectEnviroment } from "@/components/dashboard/projects/project-enviroment";
 import {
 	MariadbIcon,
 	MongodbIcon,
@@ -198,27 +199,35 @@ const Project = (
 					</div>
 
 					{(auth?.rol === "admin" || user?.canCreateServices) && (
-						<DropdownMenu>
-							<DropdownMenuTrigger asChild>
-								<Button>
-									<PlusIcon className="h-4 w-4" />
-									Create Service
-								</Button>
-							</DropdownMenuTrigger>
-							<DropdownMenuContent className="w-[200px] space-y-2" align="end">
-								<DropdownMenuLabel className="text-sm font-normal ">
-									Actions
-								</DropdownMenuLabel>
-								<DropdownMenuSeparator />
-								<AddApplication
-									projectId={projectId}
-									projectName={data?.name}
-								/>
-								<AddDatabase projectId={projectId} projectName={data?.name} />
-								<AddCompose projectId={projectId} projectName={data?.name} />
-								<AddTemplate projectId={projectId} />
-							</DropdownMenuContent>
-						</DropdownMenu>
+						<div className="flex flex-row gap-4 flex-wrap">
+							<ProjectEnviroment projectId={projectId}>
+								<Button variant="outline">Project Enviroment</Button>
+							</ProjectEnviroment>
+							<DropdownMenu>
+								<DropdownMenuTrigger asChild>
+									<Button>
+										<PlusIcon className="h-4 w-4" />
+										Create Service
+									</Button>
+								</DropdownMenuTrigger>
+								<DropdownMenuContent
+									className="w-[200px] space-y-2"
+									align="end"
+								>
+									<DropdownMenuLabel className="text-sm font-normal ">
+										Actions
+									</DropdownMenuLabel>
+									<DropdownMenuSeparator />
+									<AddApplication
+										projectId={projectId}
+										projectName={data?.name}
+									/>
+									<AddDatabase projectId={projectId} projectName={data?.name} />
+									<AddCompose projectId={projectId} projectName={data?.name} />
+									<AddTemplate projectId={projectId} />
+								</DropdownMenuContent>
+							</DropdownMenu>
+						</div>
 					)}
 				</header>
 			</div>