Canvas: Update edges on port removal
Change-Id: I5f550f0511257207db4a2f0469957cc4449514bd
diff --git a/apps/canvas/front/src/components/node-app.tsx b/apps/canvas/front/src/components/node-app.tsx
index 9bc5f92..a445c72 100644
--- a/apps/canvas/front/src/components/node-app.tsx
+++ b/apps/canvas/front/src/components/node-app.tsx
@@ -10,7 +10,7 @@
import { Button } from './ui/button';
import { Handle, Position } from "@xyflow/react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
-import { EditIcon } from "lucide-react";
+import { PencilIcon, XIcon } from "lucide-react";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
export function NodeApp(node: ServiceNode) {
@@ -79,15 +79,17 @@
}
});
const onSubmit = useCallback((values: z.infer<typeof portSchema>) => {
+ const portId = uuidv4();
store.updateNodeData<"app">(id, {
ports: (data.ports || []).concat({
- id: uuidv4(),
+ id: portId,
name: values.name,
value: values.value,
}),
envVars: (data.envVars || []).concat({
id: uuidv4(),
source: null,
+ portId,
name: `DODO_PORT_${values.name.toUpperCase()}`,
}),
});
@@ -201,6 +203,43 @@
saveAlias(e, event.currentTarget.value, store);
}
}, [id, data, store]);
+ const removePort = useCallback((portId: string) => {
+ store.setEdges(store.edges.filter((e) => {
+ if (e.source !== id || e.sourceHandle !== "ports") {
+ return true;
+ }
+ if (e.targetHandle === "https") {
+ return false;
+ }
+ if (e.targetHandle === "env_var") {
+ const tn = store.nodes.find((n) => n.type === "app" && n.id == e.target);
+ console.log("111", tn!.data.envVars);
+ if (tn && (tn.data.envVars || []).find((ev) => ev.source === id && "portId" in ev && ev.portId === portId)) {
+ return false;
+ }
+ }
+ return true;
+ }));
+ store.nodes.filter((n) => n.type === "gateway-https" && n.data.https && n.data.https.serviceId === id && n.data.https.portId === portId).forEach((n) => {
+ store.updateNodeData<"gateway-https">(n.id, {
+ https: undefined,
+ });
+ });
+ store.nodes.filter((n) => n.type === "app" && n.data.envVars).forEach((n) => {
+ store.updateNodeData<"app">(n.id, {
+ envVars: n.data.envVars.filter((ev) => {
+ if (ev.source === id && "portId" in ev && ev.portId === portId) {
+ return false;
+ }
+ return true;
+ })
+ });
+ })
+ store.updateNodeData<"app">(id, {
+ ports: (data.ports || []).filter((p) => p.id !== portId),
+ envVars: (data.envVars || []).filter((ev) => !(ev.source === null && "portId" in ev && ev.portId === portId)),
+ });
+ }, [id, data, store]);
return (
<>
<Form {...form}>
@@ -242,7 +281,7 @@
</Form>
Ports
<ul>
- {data && data.ports && data.ports.map((p) => (<li key={p.id}>{p.name} - {p.value}</li>))}
+ {data && data.ports && data.ports.map((p) => (<li key={p.id}><Button size={"icon"} variant={"ghost"} onClick={() => removePort(p.id)}><XIcon /></Button> {p.name} - {p.value}</li>))}
</ul>
<Form {...portForm}>
<form className="flex flex-row space-x-1" onSubmit={portForm.handleSubmit(onSubmit)}>
@@ -286,7 +325,7 @@
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
- <Button size={"icon"} variant={"ghost"}><EditIcon /></Button>
+ <Button size={"icon"} variant={"ghost"}><PencilIcon /></Button>
{value}
</TooltipTrigger>
<TooltipContent>