Merge pull request #5250 from Dokploy/feat/vault-bulk-import

feat: bulk import secrets from vault providers

apps/dokploy/__test__/traefik/write-app-traefik-config.test.ts

@@ -6,6 +6,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 const mocks = vi.hoisted(() => ({
 	execAsyncRemote: vi.fn(),
+	writeFileRemote: vi.fn(),
 }));
 
 vi.mock("@dokploy/server/utils/process/execAsync", async (importOriginal) => {
@@ -16,6 +17,7 @@ vi.mock("@dokploy/server/utils/process/execAsync", async (importOriginal) => {
 	return {
 		...actual,
 		execAsyncRemote: mocks.execAsyncRemote,
+		writeFileRemote: mocks.writeFileRemote,
 	};
 });
 
@@ -91,7 +93,7 @@ describe("writeAppTraefikConfig", () => {
 	});
 
 	it("writes the remote file when routers/services are present", async () => {
-		mocks.execAsyncRemote.mockResolvedValue({ stdout: "", stderr: "" });
+		mocks.writeFileRemote.mockResolvedValue(undefined);
 
 		await writeAppTraefikConfig(
 			{
@@ -109,8 +111,11 @@ describe("writeAppTraefikConfig", () => {
 			"server-id",
 		);
 
-		expect(mocks.execAsyncRemote).toHaveBeenCalledOnce();
-		const [, command] = mocks.execAsyncRemote.mock.calls[0] ?? [];
-		expect(command).toMatch(/^echo /);
+		expect(mocks.writeFileRemote).toHaveBeenCalledOnce();
+		const [serverId, remotePath, content] =
+			mocks.writeFileRemote.mock.calls[0] ?? [];
+		expect(serverId).toBe("server-id");
+		expect(remotePath).toContain("with-domain-app.yml");
+		expect(content).toContain("with-domain-app-router-1");
 	});
 });

apps/dokploy/components/dashboard/application/environment/show-environment.tsx

@@ -6,6 +6,7 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { useEnvCompletionSource } from "@/components/shared/env-autocomplete";
+import { VaultImportDialog } from "@/components/shared/vault-import-dialog";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -197,6 +198,18 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 								name="environment"
 								render={({ field }) => (
 									<FormItem>
+										<div className="flex justify-end">
+											<VaultImportDialog
+												projectId={data?.environment?.projectId}
+												environmentId={data?.environment?.environmentId}
+												currentEnv={field.value ?? ""}
+												onImport={(next) =>
+													form.setValue("environment", next, {
+														shouldDirty: true,
+													})
+												}
+											/>
+										</div>
 										<FormControl className="">
 											<CodeEditor
 												style={

apps/dokploy/components/dashboard/application/environment/show.tsx

@@ -151,6 +151,8 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 						}
 						placeholder={["NODE_ENV=production", "PORT=3000"].join("\n")}
 						completionSource={completionSource}
+						projectId={data?.environment?.projectId}
+						environmentId={data?.environment?.environmentId}
 					/>
 					{data?.buildType === "dockerfile" && (
 						<Secrets

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

@@ -7,6 +7,7 @@ import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { useEnvCompletionSource } from "@/components/shared/env-autocomplete";
+import { VaultImportDialog } from "@/components/shared/vault-import-dialog";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -156,7 +157,17 @@ export const EnvironmentVariables = ({ environmentId, children }: Props) => {
 									name="env"
 									render={({ field }) => (
 										<FormItem>
-											<FormLabel>Environment variables</FormLabel>
+											<div className="flex items-center justify-between">
+												<FormLabel>Environment variables</FormLabel>
+												<VaultImportDialog
+													projectId={data?.projectId}
+													environmentId={environmentId}
+													currentEnv={field.value ?? ""}
+													onImport={(next) =>
+														form.setValue("env", next, { shouldDirty: true })
+													}
+												/>
+											</div>
 											<FormControl>
 												<CodeEditor
 													completionSource={completionSource}

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

@@ -7,6 +7,7 @@ import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { useEnvCompletionSource } from "@/components/shared/env-autocomplete";
+import { VaultImportDialog } from "@/components/shared/vault-import-dialog";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -152,7 +153,16 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
 									name="env"
 									render={({ field }) => (
 										<FormItem>
-											<FormLabel>Environment variables</FormLabel>
+											<div className="flex items-center justify-between">
+												<FormLabel>Environment variables</FormLabel>
+												<VaultImportDialog
+													projectId={projectId}
+													currentEnv={field.value ?? ""}
+													onImport={(next) =>
+														form.setValue("env", next, { shouldDirty: true })
+													}
+												/>
+											</div>
 											<FormControl>
 												<CodeEditor
 													completionSource={completionSource}

apps/dokploy/components/dashboard/settings/vault/handle-vault-provider.tsx

@@ -1129,7 +1129,29 @@ export const HandleVaultProvider = ({ vaultProviderId }: Props) => {
 						)}
 
 						<div className="flex flex-col gap-2 rounded-lg border p-3">
-							<FormLabel>Access</FormLabel>
+							<div className="flex flex-row items-center justify-between">
+								<FormLabel>Access</FormLabel>
+								<Button
+									type="button"
+									variant="ghost"
+									size="sm"
+									className="h-7 px-2 text-xs"
+									onClick={() =>
+										setAssignments(
+											assignments.length === orgProjects?.length
+												? []
+												: (orgProjects ?? []).map((project) => ({
+														projectId: project.projectId,
+														environmentIds: [],
+													})),
+										)
+									}
+								>
+									{assignments.length === orgProjects?.length
+										? "Clear all"
+										: "Access all"}
+								</Button>
+							</div>
 							<FormDescription>
 								This provider can only be referenced from the selected projects.
 								Pick environments to narrow it further — none selected means all

apps/dokploy/components/shared/vault-import-dialog.tsx

@@ -0,0 +1,307 @@
+import { DownloadIcon, Loader2 } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+
+interface Props {
+	projectId?: string;
+	environmentId?: string;
+	currentEnv: string;
+	onImport: (nextEnv: string) => void;
+}
+
+const normalizeSecretName = (secretName: string) => {
+	const normalized = secretName
+		.replace(/[^a-zA-Z0-9]+/g, "_")
+		.replace(/^_+|_+$/g, "")
+		.toUpperCase();
+	return /^[0-9]/.test(normalized) ? `_${normalized}` : normalized || "SECRET";
+};
+
+const parseEnvKeys = (env: string) => {
+	const keys = new Set<string>();
+	for (const line of env.split("\n")) {
+		const trimmed = line.trim();
+		if (!trimmed || trimmed.startsWith("#") || !trimmed.includes("=")) continue;
+		keys.add(trimmed.slice(0, trimmed.indexOf("=")).trim());
+	}
+	return keys;
+};
+
+const setEnvValue = (env: string, key: string, ref: string) => {
+	const lines = env.split("\n");
+	const line = `${key}=${ref}`;
+	const index = lines.findIndex((l) => {
+		const trimmed = l.trim();
+		return (
+			trimmed &&
+			!trimmed.startsWith("#") &&
+			trimmed.includes("=") &&
+			trimmed.slice(0, trimmed.indexOf("=")).trim() === key
+		);
+	});
+	if (index >= 0) {
+		lines[index] = line;
+		return lines.join("\n");
+	}
+	const withTrailingNewline = env.length > 0 && !env.endsWith("\n") ? "\n" : "";
+	return `${env}${withTrailingNewline}${line}\n`;
+};
+
+export const VaultImportDialog = ({
+	projectId,
+	environmentId,
+	currentEnv,
+	onImport,
+}: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [vaultProviderId, setVaultProviderId] = useState<string | undefined>();
+	const [selected, setSelected] = useState<Set<string>>(new Set());
+	const [keyOverrides, setKeyOverrides] = useState<Record<string, string>>({});
+
+	const { data: allProviders } = api.vaultProvider.all.useQuery();
+	const providers = useMemo(
+		() =>
+			(allProviders ?? []).filter((provider) =>
+				provider.assignments?.some(
+					(assignment) =>
+						assignment.projectId === projectId &&
+						(assignment.environmentIds.length === 0 ||
+							!environmentId ||
+							assignment.environmentIds.includes(environmentId)),
+				),
+			),
+		[allProviders, projectId, environmentId],
+	);
+
+	const activeProviderId = vaultProviderId ?? providers[0]?.vaultProviderId;
+	const activeProvider = providers.find(
+		(p) => p.vaultProviderId === activeProviderId,
+	);
+
+	const { data: secretNames, isLoading } =
+		api.vaultProvider.listSecretNames.useQuery(
+			{
+				vaultProviderId: activeProviderId!,
+				projectId: projectId!,
+				environmentId,
+			},
+			{ enabled: isOpen && !!activeProviderId && !!projectId },
+		);
+
+	const existingKeys = useMemo(() => parseEnvKeys(currentEnv), [currentEnv]);
+
+	const rows = useMemo(
+		() =>
+			(secretNames ?? []).map((secretName) => {
+				const defaultKey = normalizeSecretName(secretName);
+				const key = keyOverrides[secretName] ?? defaultKey;
+				return {
+					secretName,
+					key,
+					conflict: existingKeys.has(key),
+				};
+			}),
+		[secretNames, keyOverrides, existingKeys],
+	);
+
+	const resetState = () => {
+		setSelected(new Set());
+		setKeyOverrides({});
+	};
+
+	const handleOpenChange = (open: boolean) => {
+		setIsOpen(open);
+		if (!open) {
+			setVaultProviderId(undefined);
+			resetState();
+		}
+	};
+
+	const toggleRow = (secretName: string, checked: boolean) => {
+		setSelected((prev) => {
+			const next = new Set(prev);
+			if (checked) next.add(secretName);
+			else next.delete(secretName);
+			return next;
+		});
+	};
+
+	const toggleAll = () => {
+		const selectableNonConflicting = rows.filter((r) => !r.conflict);
+		const allSelected =
+			selectableNonConflicting.length > 0 &&
+			selectableNonConflicting.every((r) => selected.has(r.secretName));
+		setSelected(
+			allSelected
+				? new Set()
+				: new Set(selectableNonConflicting.map((r) => r.secretName)),
+		);
+	};
+
+	const handleImport = () => {
+		if (!activeProvider) return;
+		let next = currentEnv;
+		for (const row of rows) {
+			if (!selected.has(row.secretName)) continue;
+			const ref = `\${{vault.${activeProvider.name}.${row.secretName}}}`;
+			next = setEnvValue(next, row.key, ref);
+		}
+		onImport(next);
+		setIsOpen(false);
+		setVaultProviderId(undefined);
+		resetState();
+	};
+
+	if (!projectId || providers.length === 0) {
+		return null;
+	}
+
+	return (
+		<Dialog open={isOpen} onOpenChange={handleOpenChange}>
+			<DialogTrigger asChild>
+				<Button type="button" variant="outline" size="sm">
+					<DownloadIcon className="mr-2 size-4" />
+					Import from Vault
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>Import secrets from vault</DialogTitle>
+					<DialogDescription>
+						Select the secrets to import as{" "}
+						<code>{"${{vault.<provider>.<secret>}}"}</code> references. Secrets
+						already defined below are skipped unless you check them explicitly.
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="flex flex-col gap-4">
+					<div className="flex flex-col gap-2">
+						<Label>Vault provider</Label>
+						<Select
+							value={activeProviderId}
+							onValueChange={(value) => {
+								setVaultProviderId(value);
+								resetState();
+							}}
+						>
+							<SelectTrigger>
+								<SelectValue placeholder="Select a provider" />
+							</SelectTrigger>
+							<SelectContent>
+								{providers.map((provider) => (
+									<SelectItem
+										key={provider.vaultProviderId}
+										value={provider.vaultProviderId}
+									>
+										{provider.name} ({provider.providerType})
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
+
+					{isLoading ? (
+						<div className="flex items-center justify-center gap-2 py-8 text-muted-foreground text-sm">
+							<Loader2 className="size-4 animate-spin" />
+							Loading secrets...
+						</div>
+					) : rows.length === 0 ? (
+						<div className="py-8 text-center text-muted-foreground text-sm">
+							No secrets found for this provider.
+						</div>
+					) : (
+						<>
+							<div className="flex items-center justify-between">
+								<Label className="flex items-center gap-2">
+									<Checkbox
+										checked={
+											rows.some((r) => !r.conflict) &&
+											rows
+												.filter((r) => !r.conflict)
+												.every((r) => selected.has(r.secretName))
+										}
+										onCheckedChange={toggleAll}
+									/>
+									Select all
+								</Label>
+								<span className="text-muted-foreground text-sm">
+									{selected.size} selected
+								</span>
+							</div>
+							<ScrollArea className="h-80 rounded-md border">
+								<div className="flex flex-col divide-y">
+									{rows.map((row) => (
+										<div
+											key={row.secretName}
+											className="flex items-center gap-3 p-3"
+										>
+											<Checkbox
+												checked={selected.has(row.secretName)}
+												onCheckedChange={(checked) =>
+													toggleRow(row.secretName, checked === true)
+												}
+											/>
+											<div className="flex min-w-0 flex-1 flex-col gap-1">
+												<span className="truncate font-mono text-muted-foreground text-xs">
+													{row.secretName}
+												</span>
+												<Input
+													value={row.key}
+													onChange={(e) =>
+														setKeyOverrides((prev) => ({
+															...prev,
+															[row.secretName]: e.target.value
+																.toUpperCase()
+																.replace(/[^A-Z0-9_]/g, "_"),
+														}))
+													}
+													className="h-8 font-mono text-sm"
+												/>
+											</div>
+											{row.conflict && (
+												<Badge variant="secondary">already exists</Badge>
+											)}
+										</div>
+									))}
+								</div>
+							</ScrollArea>
+						</>
+					)}
+				</div>
+
+				<DialogFooter>
+					<Button
+						type="button"
+						onClick={handleImport}
+						disabled={selected.size === 0}
+					>
+						Import {selected.size > 0 ? selected.size : ""} secret
+						{selected.size === 1 ? "" : "s"}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/ui/secrets.tsx

@@ -3,6 +3,7 @@ import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { type CSSProperties, type ReactNode, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import { CodeEditor } from "@/components/shared/code-editor";
+import { VaultImportDialog } from "@/components/shared/vault-import-dialog";
 import {
 	CardContent,
 	CardDescription,
@@ -23,6 +24,8 @@ interface Props {
 	description: ReactNode;
 	placeholder: string;
 	completionSource?: CompletionSource;
+	projectId?: string;
+	environmentId?: string;
 }
 
 export const Secrets = (props: Props) => {
@@ -37,17 +40,27 @@ export const Secrets = (props: Props) => {
 					<CardDescription>{props.description}</CardDescription>
 				</div>
 
-				<Toggle
-					aria-label="Toggle bold"
-					pressed={isVisible}
-					onPressedChange={setIsVisible}
-				>
-					{isVisible ? (
-						<EyeOffIcon className="h-4 w-4 text-muted-foreground" />
-					) : (
-						<EyeIcon className="h-4 w-4 text-muted-foreground" />
-					)}
-				</Toggle>
+				<div className="flex items-center gap-2">
+					<VaultImportDialog
+						projectId={props.projectId}
+						environmentId={props.environmentId}
+						currentEnv={form.watch(props.name) ?? ""}
+						onImport={(next) =>
+							form.setValue(props.name, next, { shouldDirty: true })
+						}
+					/>
+					<Toggle
+						aria-label="Toggle bold"
+						pressed={isVisible}
+						onPressedChange={setIsVisible}
+					>
+						{isVisible ? (
+							<EyeOffIcon className="h-4 w-4 text-muted-foreground" />
+						) : (
+							<EyeIcon className="h-4 w-4 text-muted-foreground" />
+						)}
+					</Toggle>
+				</div>
 			</CardHeader>
 			<CardContent className="w-full space-y-4 p-0">
 				<FormField