Feat/workflow guided canvas#2603
Open
simlarsen wants to merge 3 commits into
Open
Conversation
Configuring workflow components is hard, and the JSON-typed arguments are
the sharpest edge: request bodies, headers, DB queries and payloads all
rendered as a bare Monaco editor with no validation. A syntax slip (a
trailing comma, a missing quote) was only discovered when the workflow ran
and threw a cryptic "Invalid JSON provided for argument …" (see
App/FeatureSet/Workflow/Services/RunWorkflow.ts). Template tokens made it
worse — {{ variable }} references are not literal JSON, so the editor
offered no help distinguishing "not valid yet" from "actually broken".
This makes the JSON editing experience validate-as-you-type and blocks
saving broken config, while keeping the on-disk format byte-identical
(values are still stored as JSON strings and parsed at runtime, so existing
workflows are unaffected).
- New JSONArgumentInput: a token-aware JSON editor with live validation, a
clear inline "Invalid JSON" message, and a one-click Format button. It
understands {{ tokens }} (masking them before parsing), single-token
variable references, and {{#each}} template blocks, so variable usage no
longer reads as an error.
- Pure validation logic extracted to JSONArgumentInputUtils (React-free) and
covered by unit tests.
- ArgumentsForm now routes JSON / JSONArray / BaseModel / BaseModelArray /
Query / StringDictionary args (and Select without a tableName) through the
validating editor, and lifts each field's validity into the form so an
invalid JSON body disables Save.
- Honor the previously-unused Argument.isAdvanced flag: advanced fields
collapse behind a "Show advanced settings" toggle, so the common path is a
couple of fields. Auto-expands when an advanced field is required or
already set, so nothing important is hidden.
- Fix a validation-key collision: argument-form errors were reported under
the same "id" key as the identifier field and could clobber it; use
distinct "arguments" / "json:<argId>" keys.
- Replace the misused error-style empty state ("This step does not need any
settings") with a neutral note.
- Make the component value picker search case-insensitive.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…r, self-documenting nodes
Continues making the workflow builder simpler to understand. Three changes,
all in Common/UI/Components/Workflow/*, with a new pure-logic GraphUtils.ts
(unit-tested) and no storage/executor changes.
1. Upstream-only data picker. When inserting "a value from another step", the
picker now offers only steps that actually run BEFORE the current one
(computed by walking the graph backwards from the selected node), so you
can no longer reference data that won't exist at runtime. A "Show all
steps" escape covers loops / fan-out, and a helpful empty state guides you
when the step isn't connected yet. The picker title/description are now
plain-language.
2. Self-documenting node faces. Each node shows a short summary of what it is
actually configured to do (e.g. "Channel: #alerts · Message: …") instead
of the same static description on every node. Secret-safe by construction:
values are shown only for a small allowlist of safe input types; URLs have
their credentials and query string stripped; JSON / headers / queries and
secret-named/typed fields are redacted to ••••; {{ tokens }} are humanized
to friendly names like {title}.
3. Tidier config. The technical "Identifier" field is tucked behind an
"Advanced" disclosure so the settings panel stays focused.
Hardening from an adversarial review pass:
- Redact structured/URL values on the node face so secrets (basic-auth URLs,
Authorization headers) can't leak onto the shareable canvas.
- Compute the picker's filtered list during render instead of via
useState+useEffect — removes a blank first frame and redundant recomputes.
- Exclude the empty-id placeholder trigger from the picker and guard the
search loop against missing returnValues (prevents a crash under "Show all
steps").
- Wrap long unbroken summary values and skip whitespace-only values.
Tests: 12 GraphUtils cases (graph traversal + redaction/masking/humanizing) +
existing JSON tests, 21 total passing. tsc + eslint clean.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
Author
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
…the canvas
Configuring a step used to open a full-screen modal that hid the whole graph.
This replaces that modal with a docked inspector panel on the right edge of
the canvas, so you can see the graph and the step's settings at the same time.
- New ComponentSettingsPanel (renamed/reshaped from ComponentSettingsModal):
same sections + ArgumentsForm, but rendered as a panel with its own header
(title + close) and footer (Delete + Save, Save disabled on validation
errors) instead of a <Modal>.
- Workflow.tsx renders it as an absolute overlay on the canvas's right edge,
so React Flow's own layout is untouched (no canvas-sizing regression). Full
width on narrow viewports.
- Remount the panel via key={internalId} when the selected node changes —
because the canvas stays clickable behind the panel, selecting another node
must re-initialise the form to that step.
Verified by rendering the panel directly with React Testing Library (jsdom):
5 tests covering render, Save/Close/Delete callbacks, delete-needs-confirm,
and the Advanced-identifier disclosure. tsc + eslint clean; 26 workflow tests
pass.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Title of this pull request?
Small Description?
Pull Request Checklist:
closes #XXXXin your comment to auto-close the issue that your PR fixes (if such).Related Issue?
Screenshots (if appropriate):