Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy.git synced 2026-06-16 04:35:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: remove EnvironmentManagement component and related environment selector from project dashboard; update environment page to use Badge component for production label

Browse Source
This commit is contained in:
Mauricio Siu
2025-09-01 19:52:30 -06:00
parent 72f8a28f4f
commit 52d2bd2114
5 changed files with 3 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

387
apps/dokploy/components/dashboard/project/environment-management.tsx
View File

@@ -1,387 +0,0 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { Copy, Plus, Settings, Trash2 } from "lucide-react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import { DateTooltip } from "@/components/shared/date-tooltip";
import { DialogAction } from "@/components/shared/dialog-action";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { api } from "@/utils/api";
const createEnvironmentSchema = z.object({
name: z.string().min(1, "Environment name is required"),
description: z.string().optional(),
});
const duplicateEnvironmentSchema = z.object({
name: z.string().min(1, "Environment name is required"),
description: z.string().optional(),
});
type CreateEnvironment = z.infer<typeof createEnvironmentSchema>;
type DuplicateEnvironment = z.infer<typeof duplicateEnvironmentSchema>;
interface Props {
projectId: string;
children?: React.ReactNode;
}
export const EnvironmentManagement = ({ projectId, children }: Props) => {
const [isOpen, setIsOpen] = useState(false);
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
const [isDuplicateDialogOpen, setIsDuplicateDialogOpen] = useState(false);
const [selectedEnvironmentId, setSelectedEnvironmentId] =
useState<string>("");
const utils = api.useUtils();
// Queries
const { data: environments, isLoading: environmentsLoading } =
api.environment.byProjectId.useQuery(
{ projectId },
{ enabled: !!projectId },
);
// Mutations
const createEnvironmentMutation = api.environment.create.useMutation();
const duplicateEnvironmentMutation = api.environment.duplicate.useMutation();
const deleteEnvironmentMutation = api.environment.remove.useMutation();
// Forms
const createForm = useForm<CreateEnvironment>({
defaultValues: {
name: "",
description: "",
},
resolver: zodResolver(createEnvironmentSchema),
});
const duplicateForm = useForm<DuplicateEnvironment>({
defaultValues: {
name: "",
description: "",
},
resolver: zodResolver(duplicateEnvironmentSchema),
});
const onCreateSubmit = async (formData: CreateEnvironment) => {
try {
await createEnvironmentMutation.mutateAsync({
...formData,
projectId,
});
toast.success("Environment created successfully");
utils.environment.byProjectId.invalidate({ projectId });
setIsCreateDialogOpen(false);
createForm.reset();
} catch (error) {
toast.error("Error creating environment");
}
};
const onDuplicateSubmit = async (formData: DuplicateEnvironment) => {
if (!selectedEnvironmentId) return;
try {
await duplicateEnvironmentMutation.mutateAsync({
environmentId: selectedEnvironmentId,
name: formData.name,
description: formData.description,
});
toast.success("Environment duplicated successfully");
utils.environment.byProjectId.invalidate({ projectId });
setIsDuplicateDialogOpen(false);
duplicateForm.reset();
setSelectedEnvironmentId("");
} catch (error) {
toast.error("Error duplicating environment");
}
};
const handleDeleteEnvironment = async (environmentId: string) => {
try {
await deleteEnvironmentMutation.mutateAsync({ environmentId });
toast.success("Environment deleted successfully");
utils.environment.byProjectId.invalidate({ projectId });
} catch (error) {
toast.error("Error deleting environment");
}
};
const handleDuplicateClick = (
environmentId: string,
environmentName: string,
) => {
setSelectedEnvironmentId(environmentId);
duplicateForm.setValue("name", `${environmentName} (copy)`);
setIsDuplicateDialogOpen(true);
};
return (
<>
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
{children ?? (
<Button variant="outline">
<Settings className="h-4 w-4 mr-2" />
Environments
</Button>
)}
</DialogTrigger>
<DialogContent className="sm:max-w-4xl">
<DialogHeader>
<DialogTitle>Environment Management</DialogTitle>
<DialogDescription>
Manage project environments. Each environment can have its own
configuration and settings.
</DialogDescription>
</DialogHeader>
<div className="space-y-4">
<div className="flex justify-between items-center">
<h3 className="text-lg font-medium">Project Environments</h3>
<Button
onClick={() => setIsCreateDialogOpen(true)}
className="flex items-center gap-2"
>
<Plus className="h-4 w-4" />
Create Environment
</Button>
</div>
{environmentsLoading ? (
<div className="flex justify-center py-8">
<div className="text-sm text-muted-foreground">
Loading environments...
</div>
</div>
) : environments && environments.length > 0 ? (
<div className="space-y-3">
{environments.map((env) => (
<div
key={env.environmentId}
className="flex items-center justify-between p-4 border rounded-lg"
>
<div className="space-y-1">
<div className="flex items-center gap-2">
<h4 className="font-medium">{env.name}</h4>
{env.name === "production" && (
<Badge variant="default">Default</Badge>
)}
</div>
{env.description && (
<p className="text-sm text-muted-foreground">
{env.description}
</p>
)}
<DateTooltip date={env.createdAt}>
<span className="text-xs text-muted-foreground">
Created
</span>
</DateTooltip>
</div>
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
onClick={() =>
handleDuplicateClick(env.environmentId, env.name)
}
>
<Copy className="h-4 w-4" />
</Button>
{env.name !== "production" && (
<DialogAction
title="Delete Environment"
description={`Are you sure you want to delete the "${env.name}" environment? This action cannot be undone.`}
type="destructive"
onClick={() =>
handleDeleteEnvironment(env.environmentId)
}
>
<Button variant="outline" size="sm">
<Trash2 className="h-4 w-4" />
</Button>
</DialogAction>
)}
</div>
</div>
))}
</div>
) : (
<div className="text-center py-8">
<div className="text-sm text-muted-foreground">
No environments found. The production environment should be
created automatically.
</div>
</div>
)}
</div>
</DialogContent>
</Dialog>
{/* Create Environment Dialog */}
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Create New Environment</DialogTitle>
<DialogDescription>
Create a new environment for this project.
</DialogDescription>
</DialogHeader>
<Form {...createForm}>
<form
onSubmit={createForm.handleSubmit(onCreateSubmit)}
className="space-y-4"
>
<FormField
control={createForm.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Environment Name</FormLabel>
<FormControl>
<Input
placeholder="e.g., staging, development"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={createForm.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>Description (Optional)</FormLabel>
<FormControl>
<Textarea
placeholder="Describe this environment..."
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<DialogFooter>
<Button
type="button"
variant="outline"
onClick={() => setIsCreateDialogOpen(false)}
>
Cancel
</Button>
<Button
type="submit"
isLoading={createEnvironmentMutation.isLoading}
>
Create Environment
</Button>
</DialogFooter>
</form>
</Form>
</DialogContent>
</Dialog>
{/* Duplicate Environment Dialog */}
<Dialog
open={isDuplicateDialogOpen}
onOpenChange={setIsDuplicateDialogOpen}
>
<DialogContent>
<DialogHeader>
<DialogTitle>Duplicate Environment</DialogTitle>
<DialogDescription>
Create a copy of the selected environment.
</DialogDescription>
</DialogHeader>
<Form {...duplicateForm}>
<form
onSubmit={duplicateForm.handleSubmit(onDuplicateSubmit)}
className="space-y-4"
>
<FormField
control={duplicateForm.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>New Environment Name</FormLabel>
<FormControl>
<Input placeholder="e.g., staging-copy" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={duplicateForm.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>Description (Optional)</FormLabel>
<FormControl>
<Textarea
placeholder="Describe this environment..."
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<DialogFooter>
<Button
type="button"
variant="outline"
onClick={() => {
setIsDuplicateDialogOpen(false);
setSelectedEnvironmentId("");
duplicateForm.reset();
}}
>
Cancel
</Button>
<Button
type="submit"
isLoading={duplicateEnvironmentMutation.isLoading}
>
Duplicate Environment
</Button>
</DialogFooter>
</form>
</Form>
</DialogContent>
</Dialog>
</>
);
};

10
apps/dokploy/pages/dashboard/project/[projectId].tsx
View File

@@ -79,16 +79,6 @@ const Project = (
<Button variant="outline">Project Environment</Button>
</ProjectEnvironment>
{/* Selector Avanzado de Ambientes */}
{!emptyEnvironments && (
<AdvancedEnvironmentSelector
projectId={projectId}
environments={data?.environments || []}
currentEnvironmentId={undefined} // En la página principal no hay ambiente actual
/>
)}
</div>
</div>
</div>

5
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx
View File

@@ -96,6 +96,7 @@ import {
import { cn } from "@/lib/utils";
import { appRouter } from "@/server/api/root";
import { api } from "@/utils/api";
import { Badge } from "@/components/ui/badge";
export type Services = {
appName: string;
@@ -752,9 +753,9 @@ const EnvironmentPage = (
<FolderInput className="size-6 text-muted-foreground self-center" />
{currentEnvironment.name}
{currentEnvironment.name === "production" && (
<span className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">
<Badge >
Production
</span>
</Badge>
)}
</CardTitle>
<CardDescription>

1
apps/dokploy/server/api/routers/application.ts
View File

@@ -91,7 +91,6 @@ export const applicationRouter = createTRPCRouter({
});
}
console.log("newApplication", input);
const newApplication = await createApplication(input);
if (ctx.user.role === "member") {

2
packages/server/src/services/application.ts
View File

@@ -76,7 +76,6 @@ export const createApplication = async (
});
}
console.log("input", input);
return await db.transaction(async (tx) => {
const newApplication = await tx
.insert(applications)
@@ -87,7 +86,6 @@ export const createApplication = async (
.returning()
.then((value) => value[0]);
console.log("newApplication", newApplication);
if (!newApplication) {
throw new TRPCError({