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>
diff --git a/apps/canvas/front/src/lib/state.ts b/apps/canvas/front/src/lib/state.ts
index 94bc77a..55fbc5d 100644
--- a/apps/canvas/front/src/lib/state.ts
+++ b/apps/canvas/front/src/lib/state.ts
@@ -195,6 +195,13 @@
name: string;
alias: string;
isEditting: boolean;
+} | {
+ id: string;
+ source: string | null;
+ portId: string;
+ name: string;
+ alias: string;
+ isEditting: boolean;
};
export type EnvVar = {
@@ -202,11 +209,15 @@
value: string;
};
+export function nodeEnvVarNamePort(n: AppNode, portName: string): string {
+ return `DODO_SERVICE_${n.data.label.toUpperCase()}_ADDRESS_${portName.toUpperCase()}`;
+}
+
export function nodeEnvVarNames(n: AppNode): string[] {
switch (n.type) {
case "app": return [
`DODO_SERVICE_${n.data.label.toUpperCase()}_ADDRESS`,
- ...(n.data.ports || []).map((p) => `DODO_SERVICE_${n.data.label.toUpperCase()}_ADDRESS_${p.name.toUpperCase()}`),
+ ...(n.data.ports || []).map((p) => nodeEnvVarNamePort(n, p.name)),
];
case "github": return [];
case "gateway-https": return [];
@@ -421,6 +432,28 @@
});
}
}
+ if (c.sourceHandle === "ports" && c.targetHandle === "env_var") {
+ const sourcePorts = sn.data.ports || [];
+ const id = uuidv4();
+ if (sourcePorts.length === 1) {
+ updateNode(c.target, {
+ ...tn,
+ data: {
+ ...tn.data,
+ envVars: [
+ ...(tn.data.envVars || []),
+ {
+ id: id,
+ source: c.source,
+ name: nodeEnvVarNamePort(sn, sourcePorts[0].name),
+ portId: sourcePorts[0].id,
+ isEditting: false,
+ },
+ ],
+ },
+ });
+ }
+ }
if (c.sourceHandle === "volume") {
updateNodeData<"volume">(c.source, {
attachedTo: ((sn as VolumeNode).data.attachedTo || []).concat(c.source),