Migrate EdgeInspector to editable form with TanStack Form

[theroinaochieng]

User story

As a workflow developer, I want to click on edges to configure their properties, so that I can control conditional execution flow.

Details

Current Implementation (Hybrid):

• Edge selection works in React (assets/js/collaborative-editor/components/diagram/WorkflowDiagram.tsx:390-396)
• Updates URL with ?s=edge-id
• LiveView renders EdgeInspector panel (lib/lightning_web/live/workflow_live/edit.ex:679-746)
• LiveView edge_form component (components.ex:511-622)

React Implementation:

• EdgeInspector component exists but is READ-ONLY (assets/js/collaborative-editor/components/inspector/EdgeInspector.tsx)
• Only displays edge properties, no editing

Target Implementation (React):

• Convert EdgeInspector to editable form with TanStack Form
• Add all fields from LiveView version

Current EdgeInspector.tsx shows:

• Source (job or trigger ID)
• Target (job ID)
• Condition (display only)
• Edge ID

Need to add editable fields:

• Label/name field (condition_label)
• Condition type dropdown (on_job_success, on_job_failure, always, js_expression)
• JS expression code editor (conditional, when js_expression selected)
• Enabled toggle
• Delete button

Follow JobInspector pattern with TanStack Form and real-time updates.

Implementation notes

• Convert read-only component to TanStack Form
• Add form fields matching LiveView edge_form
• Implement auto-save to Y.js store (like JobInspector)
• Handle conditional rendering (JS expression editor)
• Wire to workflow store updateEdge action
• Ensure visual parity with LiveView version

Release notes

Migrate edge configuration panel from LiveView to React.

User acceptance criteria

• EdgeInspector shows editable form fields
• Label field works
• Condition type dropdown with 4 options
• JS expression editor appears when selected
• Enabled toggle works
• Changes auto-save to Y.js store
• Visual parity with LiveView version

[theroinaochieng]

Part of epic #3720