mirror of
https://github.com/Dokploy/dokploy.git
synced 2026-07-21 05:45:23 +02:00
refactor: remove EnvironmentManagement component and related environment selector from project dashboard; update environment page to use Badge component for production label
This commit is contained in:
Mauricio Siu
@@ -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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -79,16 +79,6 @@ const Project = (
|
|||||||
<Button variant="outline">Project Environment</Button>
|
<Button variant="outline">Project Environment</Button>
|
||||||
</ProjectEnvironment>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -96,6 +96,7 @@ import {
|
|||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { appRouter } from "@/server/api/root";
|
import { appRouter } from "@/server/api/root";
|
||||||
import { api } from "@/utils/api";
|
import { api } from "@/utils/api";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
|
||||||
export type Services = {
|
export type Services = {
|
||||||
appName: string;
|
appName: string;
|
||||||
@@ -752,9 +753,9 @@ const EnvironmentPage = (
|
|||||||
<FolderInput className="size-6 text-muted-foreground self-center" />
|
<FolderInput className="size-6 text-muted-foreground self-center" />
|
||||||
{currentEnvironment.name}
|
{currentEnvironment.name}
|
||||||
{currentEnvironment.name === "production" && (
|
{currentEnvironment.name === "production" && (
|
||||||
<span className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">
|
<Badge >
|
||||||
Production
|
Production
|
||||||
</span>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription>
|
<CardDescription>
|
||||||
|
|||||||
@@ -91,7 +91,6 @@ export const applicationRouter = createTRPCRouter({
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("newApplication", input);
|
|
||||||
const newApplication = await createApplication(input);
|
const newApplication = await createApplication(input);
|
||||||
|
|
||||||
if (ctx.user.role === "member") {
|
if (ctx.user.role === "member") {
|
||||||
|
|||||||
@@ -76,7 +76,6 @@ export const createApplication = async (
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("input", input);
|
|
||||||
return await db.transaction(async (tx) => {
|
return await db.transaction(async (tx) => {
|
||||||
const newApplication = await tx
|
const newApplication = await tx
|
||||||
.insert(applications)
|
.insert(applications)
|
||||||
@@ -87,7 +86,6 @@ export const createApplication = async (
|
|||||||
.returning()
|
.returning()
|
||||||
.then((value) => value[0]);
|
.then((value) => value[0]);
|
||||||
|
|
||||||
console.log("newApplication", newApplication);
|
|
||||||
|
|
||||||
if (!newApplication) {
|
if (!newApplication) {
|
||||||
throw new TRPCError({
|
throw new TRPCError({
|
||||||
|
|||||||
Reference in New Issue
Block a user