Wiring Panel

Field mapping is workflow-level configuration, not a canvas step. The Wiring toolbar button opens a WiringPanel Drawer where users map upstream node outputs to fixed backend process fields.

On this page

Overview Toolbar button Panel anatomy Field row states Required vs optional Progress and validity Save behaviour Stale mappings Unsaved changes flow End node summary wiringConfig reference Props

Overview

Live demo. The toolbar button reflects current validity. Click it to open the WiringPanel Drawer. The demo starts with one healthy mapping (first_name) and one stale mapping (old_field → dob). Expand a row to re-map or remove it, then click Save.

Click the button above to open the WiringPanel Drawer

The Wiring button lives in the workflow editor header. It shows Wiring valid (green, check icon) when all required fields are mapped and no stale mappings exist. Otherwise it shows Wiring incomplete (amber, warning icon). Clicking it opens the WiringPanel Drawer — it is not tied to a canvas node selection.

Panel anatomy

Element	Component	Notes
Drawer	Drawer anchor=right	`variant=temporary, width 360px`
Header	Stack	`Field Wiring label + validity Chip + close IconButton`
Validity badge	Chip	`Valid / Invalid, 20px height, no border`
Close button	IconButton CloseIcon	`top-right of header, calls onClose`
Progress bar	LinearProgress	`determinate, h6, radiusFull, green/amber fill`
Section label	Typography overline	`REQUIRED / OPTIONAL`
Field row	Box	`1px solid border, radiusMd, collapsed/expanded`
State dot	Box circle 8px	`ok success / warn warning / stale danger / none gray300`
Search input	TextField	`size small, visible only in expanded row`
Option list	Box	`maxHeight 140px, overflowY auto, flat key rows`
Remove button	Button color=error	`visible only when row is currently mapped`
Footer status	Stack	`icon + one-line message, priority: stale > warn > ok`
Save button	Button contained	`fullWidth, always enabled, calls onSave then onClose`

Field row states

State	Dot color	Condition
ok	`tokens.color.success`	Mapped and source key exists in workflowVariables
warn	`tokens.color.warning`	Required and not mapped
stale	`tokens.color.danger`	Mapped but source key no longer in workflowVariables
none	`tokens.color.gray300`	Optional and not mapped

Required vs optional

Fields are split into two sections: Required and Optional. Required unmapped fields show an amber dot and contribute to the Invalid badge. Optional unmapped fields show a gray dot and do not affect validity. Both sections only render if they contain at least one field.

Progress and validity

The progress bar counts fields in the ok state (mapped and source key still present). When all fields are ok, the bar turns tokens.color.success; otherwise tokens.color.warning.

The Valid badge requires: all required fields in the ok state, and no stale mappings. Any other condition shows Invalid.

Save behaviour

Open panel

User clicks the Wiring toolbar button (shows Valid or Incomplete state). The WiringPanel Drawer opens from the right.

Expand row

User clicks a field row. It expands to show a search input and the full list of available workflow variables.

Select variable

User selects a variable from the list. The row collapses and its dot turns green. Only one row is expanded at a time.

Review status

Footer updates to name any remaining unmapped required fields. Validity badge switches to Invalid/Valid.

Save

User clicks Save. onSave(mappings) is called, then the Drawer closes. The toolbar button updates to reflect the new validity state.

Navigate away

User clicks the Processes breadcrumb link. UnsavedWiringModal opens with a wiring summary.

Confirm discard

User clicks 'Discard changes'. DiscardModal opens showing the last-saved wiring status that will appear on the Processes page.

Discard and leave

User clicks 'Discard and leave'. Changes are discarded and the editor returns to the previous state.

Selecting a variable immediately updates local state inside the Drawer. The Save button is always enabled. Changes are batched — onSave is only called on Save click, not on each selection. Local state resets each time the Drawer opens.

Stale mappings

A mapping is stale when its sourcekey is no longer present in any upstream node's outputs[]. Stale rows show a red dot and a “(broken)” suffix. The footer status bar prioritises the stale message over unmapped-required messages. Re-map or remove the row to clear it.

Unsaved changes flow

When the user navigates away with unsaved changes, a two-step modal flow intercepts navigation. Click the button below to preview the first modal.

Navigate away

User tries to leave the editor with unsaved changes → UnsavedWiringModal opens with a wiring summary.

Save as draft

Saves current state (partial wiring accepted) and closes the modal.

Save & continue wiring

Saves current state and reopens WiringPanel so the user can finish mapping.

Discard changes

Opens DiscardModal showing the last-saved wiring status that the Processes page will display.

Discard and leave

Discards all unsaved changes and navigates away.

End node summary

The End node is permanent (non-deletable) and has no configurable fields. It is placed automatically when a new workflow is created, alongside the Start node. Clicking it shows a read-only validity summary of the workflow's wiring state — node configuration count, wiring status, and whether the workflow is ready to activate.

Invalid state

Workflow status

2 of 2 nodes configured

2 required fields unmapped

Cannot activate yet

Valid state

Workflow status

2 of 2 nodes configured

All fields mapped

Ready to activate

EndNodeSummary props:

Property

Value

canvasNodes

array (required)

·Full canvas node list

wireMappings

array (required)

·Current saved { source, target } pairs

processOutputs

array (required)

·Backend fields to evaluate against

workflowVariables

array (required)

·Frontend fields — { nodeLabel, outputs: string[] }[]

wiringConfig reference

Property

Value

File

lib/workflow/wiringConfig.js

Exports

PROCESS_OUTPUTS

Usage

Import from this file only — do not redefine locally or import from the deleted WiringModal.js

Props

WiringPanel

Property

Value

open

bool

·Controls Drawer visibility

onClose

function

·Called when Drawer closes (close button or backdrop click)

mappings

array

·{ source, target }[] — current saved mappings at workflow level

processOutputs

array

·{ key, label, required }[] — use PROCESS_OUTPUTS from wiringConfig

workflowVariables

array

·{ nodeLabel, outputs: [{ key, label }] }[] — upstream node outputs

onSave

function

·Called with updated mappings[] when Save is clicked, before onClose

UnsavedWiringModal

Property

Value

open

bool (required)

·Controls modal visibility

wireMappings

array (required)

·Current (unsaved) mappings

processOutputs

array (required)

·Backend fields

workflowVariables

array (required)

·Frontend fields — { nodeLabel, outputs: string[] }[]

onSaveAndContinue

func (required)

·Save + reopen WiringPanel

onSaveDraft

func (required)

·Save and leave

onDiscard

func (required)

·Open DiscardModal

DiscardModal

Property

Value

open

bool (required)

·Controls modal visibility

lastSavedWiringStatus

object (required)

·{ valid, unmappedRequired[], staleMappings[] } — shown on Processes page

onConfirm

func (required)

·Discard and navigate away

onBack

func (required)

·Return to UnsavedWiringModal

Workflow Editor Processes