Pouzor
2058e453ff
Dropping a top-level node over any container_mode node (proxmox, docker_host, ...) now pops a confirm modal that nests it as a child (sets parentId), mirroring the existing drop-onto-group flow. - store: addToContainer(containerId, childId) - CanvasContainer: detect container_mode intersection on drag stop (group still wins if both intersect) - generalize ConfirmAddToGroupModal with a container variant ha-relevant: yes
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import { Layers } from 'lucide-react'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
} from '@/components/ui/dialog'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
interface ConfirmAddToGroupModalProps {
|
|
open: boolean
|
|
nodeLabel: string
|
|
/** Label of the destination group/container. */
|
|
targetLabel: string
|
|
/** Destination kind — drives the wording. Defaults to 'group'. */
|
|
variant?: 'group' | 'container'
|
|
onConfirm: () => void
|
|
onCancel: () => void
|
|
}
|
|
|
|
export function ConfirmAddToGroupModal({
|
|
open,
|
|
nodeLabel,
|
|
targetLabel,
|
|
variant = 'group',
|
|
onConfirm,
|
|
onCancel,
|
|
}: ConfirmAddToGroupModalProps) {
|
|
const action = variant === 'container' ? 'Add to container' : 'Add to group'
|
|
const noun = variant === 'container' ? 'container' : 'group'
|
|
return (
|
|
<Dialog open={open} onOpenChange={(o) => { if (!o) onCancel() }}>
|
|
<DialogContent className="max-w-sm">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<Layers size={16} className="text-[#00d4ff]" />
|
|
{action}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
Add <span className="font-medium text-foreground">{nodeLabel}</span> to the {noun}{' '}
|
|
<span className="font-medium text-foreground">{targetLabel}</span>?
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button variant="ghost" size="sm" onClick={onCancel}>Cancel</Button>
|
|
<Button
|
|
size="sm"
|
|
className="bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90"
|
|
onClick={onConfirm}
|
|
>
|
|
{action}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|