mirror of
https://github.com/Dokploy/dokploy.git
synced 2026-07-16 11:25:24 +02:00
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:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user