ui(web): refine workflow editor components

Author: leonardcser

apps/web/src/components/workflow/input-edit-popover.tsx

@@ -50,7 +50,7 @@ export function InputEditPopover({
   readonly,
   anchorElement,
 }: InputEditPopoverProps) {
-  const { updateNodeData } = useWorkflow();
+  const { updateNodeData, edges, deleteEdge } = useWorkflow();
   const [inputValue, setInputValue] = useState("");
   const { secrets, isSecretsLoading } = useSecrets();
   const { uploadBinaryData, createObjectUrl } = useObjectService();
@@ -113,7 +113,15 @@ export function InputEditPopover({
     // Debounce the actual node data update
     debounceTimeoutRef.current = window.setTimeout(() => {
       const typedValue = convertValueByType(value, input.type);
-      updateNodeInput(nodeId, input.id, typedValue, nodeInputs, updateNodeData);
+      updateNodeInput(
+        nodeId,
+        input.id,
+        typedValue,
+        nodeInputs,
+        updateNodeData,
+        edges,
+        deleteEdge
+      );
       debounceTimeoutRef.current = null;
     }, 300);
   };
@@ -129,7 +137,15 @@ export function InputEditPopover({
     if (!input || readonly || !updateNodeData) return;
 
     setInputValue(secretName);
-    updateNodeInput(nodeId, input.id, secretName, nodeInputs, updateNodeData);
+    updateNodeInput(
+      nodeId,
+      input.id,
+      secretName,
+      nodeInputs,
+      updateNodeData,
+      edges,
+      deleteEdge
+    );
   };
 
   const handleImageUpload = async (
@@ -149,7 +165,15 @@ export function InputEditPopover({
 
       const arrayBuffer = await file.arrayBuffer();
       const reference = await uploadBinaryData(arrayBuffer, file.type);
-      updateNodeInput(nodeId, input.id, reference, nodeInputs, updateNodeData);
+      updateNodeInput(
+        nodeId,
+        input.id,
+        reference,
+        nodeInputs,
+        updateNodeData,
+        edges,
+        deleteEdge
+      );
       setInputValue(file.name);
       setIsUploading(false);
     } catch (err) {
@@ -181,7 +205,15 @@ export function InputEditPopover({
 
       const arrayBuffer = await file.arrayBuffer();
       const reference = await uploadBinaryData(arrayBuffer, mimeType);
-      updateNodeInput(nodeId, input.id, reference, nodeInputs, updateNodeData);
+      updateNodeInput(
+        nodeId,
+        input.id,
+        reference,
+        nodeInputs,
+        updateNodeData,
+        edges,
+        deleteEdge
+      );
       setInputValue(file.name);
       setIsUploading(false);
     } catch (err) {
@@ -209,7 +241,15 @@ export function InputEditPopover({
 
       const arrayBuffer = await file.arrayBuffer();
       const reference = await uploadBinaryData(arrayBuffer, file.type);
-      updateNodeInput(nodeId, input.id, reference, nodeInputs, updateNodeData);
+      updateNodeInput(
+        nodeId,
+        input.id,
+        reference,
+        nodeInputs,
+        updateNodeData,
+        edges,
+        deleteEdge
+      );
       setInputValue(file.name);
       setIsUploading(false);
     } catch (err) {
@@ -242,7 +282,15 @@ export function InputEditPopover({
 
       const arrayBuffer = await file.arrayBuffer();
       const reference = await uploadBinaryData(arrayBuffer, mimeType);
-      updateNodeInput(nodeId, input.id, reference, nodeInputs, updateNodeData);
+      updateNodeInput(
+        nodeId,
+        input.id,
+        reference,
+        nodeInputs,
+        updateNodeData,
+        edges,
+        deleteEdge
+      );
       setInputValue(file.name);
       setIsUploading(false);
     } catch (err) {
@@ -336,6 +384,7 @@ export function InputEditPopover({
                 placeholder="Enter number"
                 disabled={readonly}
                 className="h-8 text-sm"
+                autoFocus
               />
             ) : input.type === "string" ? (
               <Textarea
@@ -350,6 +399,7 @@ export function InputEditPopover({
                 placeholder="Enter text"
                 className="min-h-[80px] resize-none text-sm"
                 disabled={readonly}
+                autoFocus
               />
             ) : input.type === "json" ? (
               <Textarea
@@ -364,6 +414,7 @@ export function InputEditPopover({
                 placeholder="Enter JSON"
                 className="min-h-[80px] resize-none text-sm"
                 disabled={readonly}
+                autoFocus
               />
             ) : input.type === "secret" ? (
               <Select

apps/web/src/components/workflow/workflow-builder.tsx

@@ -124,6 +124,7 @@ export function WorkflowBuilder({
     isValidConnection,
     updateNodeData,
     updateEdgeData,
+    deleteEdge,
     deleteSelected,
     duplicateSelected,
     isEditNodeNameDialogOpen,
@@ -411,6 +412,8 @@ export function WorkflowBuilder({
       <WorkflowProvider
         updateNodeData={readonly ? undefined : updateNodeData}
         updateEdgeData={readonly ? undefined : updateEdgeData}
+        deleteEdge={readonly ? undefined : deleteEdge}
+        edges={edges}
         readonly={readonly}
         expandedOutputs={currentExpandedOutputs}
       >

apps/web/src/components/workflow/workflow-context.tsx

@@ -1,3 +1,4 @@
+import type { Edge as ReactFlowEdge } from "@xyflow/react";
 import { createContext, ReactNode, useContext } from "react";
 
 import {
@@ -8,10 +9,13 @@ import {
 
 type UpdateNodeFn = (nodeId: string, data: Partial<WorkflowNodeType>) => void;
 type UpdateEdgeFn = (edgeId: string, data: Partial<WorkflowEdgeType>) => void;
+type DeleteEdgeFn = (edgeId: string) => void;
 
 export interface WorkflowContextProps {
   updateNodeData?: UpdateNodeFn;
   updateEdgeData?: UpdateEdgeFn;
+  deleteEdge?: DeleteEdgeFn;
+  edges?: ReactFlowEdge<WorkflowEdgeType>[];
   readonly?: boolean;
   expandedOutputs?: boolean;
 }
@@ -20,6 +24,8 @@ export interface WorkflowContextProps {
 const WorkflowContext = createContext<WorkflowContextProps>({
   updateNodeData: () => {},
   updateEdgeData: () => {},
+  deleteEdge: () => {},
+  edges: [],
   readonly: false,
 });
 
@@ -30,6 +36,8 @@ export interface WorkflowProviderProps {
   readonly children: ReactNode;
   readonly updateNodeData?: UpdateNodeFn;
   readonly updateEdgeData?: UpdateEdgeFn;
+  readonly deleteEdge?: DeleteEdgeFn;
+  readonly edges?: ReactFlowEdge<WorkflowEdgeType>[];
   readonly readonly?: boolean;
   readonly expandedOutputs?: boolean;
 }
@@ -38,12 +46,16 @@ export function WorkflowProvider({
   children,
   updateNodeData = () => {},
   updateEdgeData = () => {},
+  deleteEdge = () => {},
+  edges = [],
   readonly = false,
   expandedOutputs = false,
 }: WorkflowProviderProps) {
   const workflowContextValue = {
     updateNodeData,
     updateEdgeData,
+    deleteEdge,
+    edges,
     readonly,
     expandedOutputs,
   };
@@ -77,12 +89,22 @@ export const updateNodeInput = (
   inputId: string,
   value: unknown,
   inputs: readonly WorkflowParameter[],
-  updateNodeData?: UpdateNodeFn
+  updateNodeData?: UpdateNodeFn,
+  edges?: ReactFlowEdge<WorkflowEdgeType>[],
+  deleteEdge?: DeleteEdgeFn
 ): readonly WorkflowParameter[] => {
   const updatedInputs = inputs.map((input) =>
     input.id === inputId ? { ...input, value } : input
   );
 
+  // Delete any edges connected to this input when manually setting a value
+  if (edges && deleteEdge) {
+    const connectedEdges = edges.filter(
+      (edge) => edge.target === nodeId && edge.targetHandle === inputId
+    );
+    connectedEdges.forEach((edge) => deleteEdge(edge.id));
+  }
+
   updateNodeData?.(nodeId, { inputs: updatedInputs });
   return updatedInputs;
 };