refactor: streamline environment selector by utilizing findEnvironmentById for type definition; enhance service presence checks and UI layout for improved clarity

This commit is contained in:
Mauricio Siu
2025-09-01 21:33:13 -06:00
parent 1a9f131d39
commit 766890192d

View File

@@ -22,17 +22,13 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { toast } from "sonner"; import { toast } from "sonner";
import { ChevronDownIcon, PlusIcon, PencilIcon, TrashIcon } from "lucide-react"; import { ChevronDownIcon, PlusIcon, PencilIcon, TrashIcon, CopyIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { AlertBlock } from "@/components/shared/alert-block"; import { AlertBlock } from "@/components/shared/alert-block";
import { findEnvironmentById } from "@dokploy/server";
interface Environment {
environmentId: string;
name: string;
description?: string | null;
createdAt: string;
}
type Environment = Awaited<ReturnType<typeof findEnvironmentById>>;
interface AdvancedEnvironmentSelectorProps { interface AdvancedEnvironmentSelectorProps {
projectId: string; projectId: string;
environments: Environment[]; environments: Environment[];
@@ -59,7 +55,16 @@ export const AdvancedEnvironmentSelector = ({
enabled: !!currentEnvironmentId, enabled: !!currentEnvironmentId,
}); });
const haveServices = environment && (environment?.mariadb?.length > 0 || environment?.mongo?.length > 0 || environment?.mysql?.length > 0 || environment?.postgres?.length > 0 || environment?.redis?.length > 0 || environment?.applications?.length > 0 || environment?.compose?.length > 0);
const haveServices = selectedEnvironment && (
(selectedEnvironment?.mariadb?.length || 0) > 0 ||
(selectedEnvironment?.mongo?.length || 0) > 0 ||
(selectedEnvironment?.mysql?.length || 0) > 0 ||
(selectedEnvironment?.postgres?.length || 0) > 0 ||
(selectedEnvironment?.redis?.length || 0) > 0 ||
(selectedEnvironment?.applications?.length || 0) > 0 ||
(selectedEnvironment?.compose?.length || 0) > 0
);
const createEnvironment = api.environment.create.useMutation(); const createEnvironment = api.environment.create.useMutation();
const updateEnvironment = api.environment.update.useMutation(); const updateEnvironment = api.environment.update.useMutation();
const deleteEnvironment = api.environment.remove.useMutation(); const deleteEnvironment = api.environment.remove.useMutation();
@@ -221,6 +226,17 @@ export const AdvancedEnvironmentSelector = ({
> >
<PencilIcon className="h-3 w-3" /> <PencilIcon className="h-3 w-3" />
</Button> </Button>
{/* <Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0"
onClick={(e) => {
e.stopPropagation();
handleDuplicateEnvironment(environment);
}}
>
<CopyIcon className="h-3 w-3" />
</Button> */}
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
@@ -258,7 +274,7 @@ export const AdvancedEnvironmentSelector = ({
</DialogHeader> </DialogHeader>
<div className="space-y-4"> <div className="space-y-4">
<div> <div className="space-y-1">
<Label htmlFor="name">Name</Label> <Label htmlFor="name">Name</Label>
<Input <Input
id="name" id="name"
@@ -267,7 +283,7 @@ export const AdvancedEnvironmentSelector = ({
placeholder="Environment name" placeholder="Environment name"
/> />
</div> </div>
<div> <div className="space-y-1">
<Label htmlFor="description">Description (optional)</Label> <Label htmlFor="description">Description (optional)</Label>
<Textarea <Textarea
id="description" id="description"
@@ -310,7 +326,7 @@ export const AdvancedEnvironmentSelector = ({
</DialogHeader> </DialogHeader>
<div className="space-y-4"> <div className="space-y-4">
<div> <div className="space-y-1">
<Label htmlFor="edit-name">Name</Label> <Label htmlFor="edit-name">Name</Label>
<Input <Input
id="edit-name" id="edit-name"
@@ -319,7 +335,7 @@ export const AdvancedEnvironmentSelector = ({
placeholder="Environment name" placeholder="Environment name"
/> />
</div> </div>
<div> <div className="space-y-1">
<Label htmlFor="edit-description">Description (optional)</Label> <Label htmlFor="edit-description">Description (optional)</Label>
<Textarea <Textarea
id="edit-description" id="edit-description"
@@ -382,7 +398,7 @@ export const AdvancedEnvironmentSelector = ({
<Button <Button
variant="destructive" variant="destructive"
onClick={handleDeleteEnvironment} onClick={handleDeleteEnvironment}
disabled={deleteEnvironment.isLoading || haveServices} disabled={deleteEnvironment.isLoading || haveServices || !selectedEnvironment}
> >
{deleteEnvironment.isLoading ? "Deleting..." : "Delete"} {deleteEnvironment.isLoading ? "Deleting..." : "Delete"}
</Button> </Button>