Added delete option for edge between two nodes

This commit is contained in:
XI 2026-05-23 13:01:06 +01:00
parent 4ff1f576f0
commit bb4f85c253
3 changed files with 71 additions and 12 deletions

20
bash.exe.stackdump Normal file
View file

@ -0,0 +1,20 @@
Stack trace:
Frame Function Args
000005FF0E0 00210062B0E (00210298702, 00210275E3E, 000000002F8, 000005FAC40)
000005FF0E0 0021004846A (00000000000, 00000000000, 00000000000, 00000001000)
000005FF0E0 002100484A2 (00000000000, 00000000096, 000000002F8, 00000000000)
000005FF0E0 002100DA818 (00000000000, 00200000000, 002102759F2, 000005FBD8C)
000005FF0E0 002101334F7 (00000000000, 0021022B1A0, 0021022B190, 000005FDDE0)
000005FF0E0 002100488B4 (00000000002, 00210317960, 000005FC0F8, 00000000000)
000005FF0E0 0021004A01F (002100DB7A0, 00000000000, 00000000000, 00000000000)
000005FF0E0 002100DB858 (00000070000, 00000000002, 00000000000, 00000000000)
000005FF5D0 7FFB9279F98A (00000000000, 00000000000, 00000000004, 000005FF200)
000005FF5D0 7FFB92652D23 (000000005DE, 00000000000, 00000000000, 7FFB927BB348)
000005FF5D0 7FFB926AFC9C (FB5581E80900, 7FFB00000000, 00000678620, 000005FF5D6)
000005FF5D0 7FFB92645B0A (00000673060, 00000673090, 7FFB928126D0, 00000000040)
000005FF5D0 7FFB92645B36 (7FFB927DB048, 7FFB927B85E0, 00000336000, 7FFB927DB3C0)
00000000000 7FFB926A88DD (00000000000, 00000000000, 00000336000, 00000000000)
00000000000 7FFB926A6A70 (7FFB92640000, 00000336000, 00000337000, 7FFB92640000)
00000000000 7FFB926A685A (00000000000, 00000000000, 00000000000, 00000000000)
00000000000 7FFB926D73CE (00000000000, 00000000000, 00000000000, 00000000000)
End of stack trace

4
ui/package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "ui",
"version": "1.28.0",
"version": "1.29.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "ui",
"version": "1.28.0",
"version": "1.29.0",
"dependencies": {
"@dagrejs/dagre": "^1.1.4",
"@nangohq/frontend": "^0.69.47",

View file

@ -1,12 +1,12 @@
import { BaseEdge, type Edge, EdgeLabelRenderer, type EdgeProps, getSmoothStepPath, useReactFlow } from '@xyflow/react';
import { AlertCircle, Pencil } from 'lucide-react';
import { AlertCircle, Pencil, Trash2 } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';
import { useWorkflow, useWorkflowOptional } from "@/app/workflow/[workflowId]/contexts/WorkflowContext";
import { useWorkflowStore } from "@/app/workflow/[workflowId]/stores/workflowStore";
import { TextOrAudioInput } from "@/components/flow/TextOrAudioInput";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from '@/components/ui/textarea';
@ -157,8 +157,11 @@ export default function CustomEdge(props: CustomEdgeProps) {
const { getEdges, setNodes } = useReactFlow<FlowNode, FlowEdge>();
const { saveWorkflow } = useWorkflow();
const readOnly = useWorkflowOptional()?.readOnly ?? false;
const updateEdge = useWorkflowStore((state) => state.updateEdge);
const deleteEdge = useWorkflowStore((state) => state.deleteEdge);
const [open, setOpen] = useState(false);
const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
const [isHovered, setIsHovered] = useState(false);
const parallel = getEdges().filter(
@ -259,6 +262,12 @@ export default function CustomEdge(props: CustomEdgeProps) {
await saveWorkflow();
}, [id, updateEdge, saveWorkflow]);
const handleDeleteEdge = useCallback(async () => {
deleteEdge(id);
setConfirmDeleteOpen(false);
await saveWorkflow();
}, [id, deleteEdge, saveWorkflow]);
return (
<>
<g
@ -321,14 +330,26 @@ export default function CustomEdge(props: CustomEdgeProps) {
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
Condition
</span>
<Button
variant="ghost"
size="icon"
className="h-6 w-6 p-0 hover:bg-muted text-muted-foreground"
onClick={() => setOpen(true)}
>
<Pencil className="h-3 w-3" />
</Button>
{!readOnly && (
<>
<Button
variant="ghost"
size="icon"
className="h-6 w-6 p-0 hover:bg-destructive/10 hover:text-destructive text-muted-foreground"
onClick={() => setConfirmDeleteOpen(true)}
>
<Trash2 className="h-3 w-3" />
</Button>
<Button
variant="ghost"
size="icon"
className="h-6 w-6 p-0 hover:bg-muted text-muted-foreground"
onClick={() => setOpen(true)}
>
<Pencil className="h-3 w-3" />
</Button>
</>
)}
</div>
{/* Content */}
<div className="px-3 pb-3">
@ -357,6 +378,24 @@ export default function CustomEdge(props: CustomEdgeProps) {
data={data}
onSave={handleSaveEdgeData}
/>
<Dialog open={confirmDeleteOpen} onOpenChange={setConfirmDeleteOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Delete Connection</DialogTitle>
<DialogDescription>
Are you sure you want to delete this connection?
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline" onClick={() => setConfirmDeleteOpen(false)}>
Cancel
</Button>
<Button variant="destructive" onClick={handleDeleteEdge}>
Delete
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</>
);
}