feat: add EnvironmentVariables component for managing environment variables, enhancing project configuration capabilities

apps/dokploy/__test__/drop/drop.test.ts

@@ -57,6 +57,7 @@ const baseApp: ApplicationNested = {
 	previewLimit: 0,
 	previewWildcard: "",
 	environment: {
+		env: "",
 		environmentId: "",
 		name: "",
 		createdAt: "",

apps/dokploy/__test__/traefik/traefik.test.ts

@@ -38,6 +38,7 @@ const baseApp: ApplicationNested = {
 	previewWildcard: "",
 	environmentId: "",
 	environment: {
+		env: "",
 		environmentId: "",
 		name: "",
 		createdAt: "",

apps/dokploy/components/dashboard/project/advanced-environment-selector.tsx

@@ -9,6 +9,7 @@ import {
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { toast } from "sonner";
+import { EnvironmentVariables } from "@/components/dashboard/project/environment-variables";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -241,16 +242,20 @@ export const AdvancedEnvironmentSelector = ({
 									>
 										<PencilIcon className="h-3 w-3" />
 									</Button>
-									<Button
+									<EnvironmentVariables
-										variant="ghost"
+										environmentId={environment.environmentId}
-										size="sm"
-										className="h-6 w-6 p-0"
-										onClick={(e) => {
-											e.stopPropagation();
-										}}
 									>
-										<Terminal className="h-3 w-3" />
+										<Button
-									</Button>
+											variant="ghost"
+											size="sm"
+											className="h-6 w-6 p-0"
+											onClick={(e) => {
+												e.stopPropagation();
+											}}
+										>
+											<Terminal className="h-3 w-3" />
+										</Button>
+									</EnvironmentVariables>
 									<Button
 										variant="ghost"
 										size="sm"

apps/dokploy/components/dashboard/project/environment-variables.tsx

@@ -0,0 +1,157 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Terminal } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { api } from "@/utils/api";
+
+const updateEnvironmentSchema = z.object({
+	env: z.string().optional(),
+});
+
+type UpdateEnvironment = z.infer<typeof updateEnvironmentSchema>;
+
+interface Props {
+	environmentId: string;
+	children?: React.ReactNode;
+}
+
+export const EnvironmentVariables = ({ environmentId, children }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const utils = api.useUtils();
+	const { mutateAsync, error, isError, isLoading } =
+		api.environment.update.useMutation();
+	const { data } = api.environment.one.useQuery(
+		{
+			environmentId,
+		},
+		{
+			enabled: !!environmentId,
+		},
+	);
+
+	const form = useForm<UpdateEnvironment>({
+		defaultValues: {
+			env: data?.env ?? "",
+		},
+		resolver: zodResolver(updateEnvironmentSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				env: data.env ?? "",
+			});
+		}
+	}, [data, form, form.reset]);
+
+	const onSubmit = async (formData: UpdateEnvironment) => {
+		await mutateAsync({
+			env: formData.env || "",
+			environmentId: environmentId,
+		})
+			.then(() => {
+				toast.success("Environment variables updated successfully");
+				utils.environment.one.invalidate({ environmentId });
+			})
+			.catch(() => {
+				toast.error("Error updating the environment variables");
+			})
+			.finally(() => {});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				{children ?? (
+					<DropdownMenuItem
+						className="w-full cursor-pointer space-x-3"
+						onSelect={(e) => e.preventDefault()}
+					>
+						<Terminal className="size-4" />
+						<span>Environment Variables</span>
+					</DropdownMenuItem>
+				)}
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-6xl">
+				<DialogHeader>
+					<DialogTitle>Environment Variables</DialogTitle>
+					<DialogDescription>
+						Update the environment variables that are accessible to all services
+						in this environment.
+					</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				<AlertBlock type="info">
+					Use this syntax to reference environment-level variables in your
+					service environments:{" "}
+					<code>API_URL=${"{{environment.API_URL}}"}</code>
+				</AlertBlock>
+				<div className="grid gap-4">
+					<div className="grid items-center gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								className="grid w-full gap-4 "
+							>
+								<FormField
+									control={form.control}
+									name="env"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Environment variables</FormLabel>
+											<FormControl>
+												<CodeEditor
+													lineWrapping
+													language="properties"
+													wrapperClassName="h-[35rem] font-mono"
+													placeholder={`NODE_ENV=development
+DATABASE_URL=postgresql://localhost:5432/mydb
+API_KEY=your-api-key-here
+
+                                                    `}
+													{...field}
+												/>
+											</FormControl>
+
+											<pre>
+												<FormMessage />
+											</pre>
+										</FormItem>
+									)}
+								/>
+								<DialogFooter>
+									<Button isLoading={isLoading} type="submit">
+										Update
+									</Button>
+								</DialogFooter>
+							</form>
+						</Form>
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};