feat(designer-v2): Make per-action code view editable

[rllyy97]

Commit Type

• feature - New functionality
• fix - Bug fix
• refactor - Code restructuring without behavior change
• perf - Performance improvement
• docs - Documentation update
• test - Test-related changes
• chore - Maintenance/tooling

Risk Level

• Low - Minor changes, limited scope
• Medium - Moderate changes, some user impact
• High - Major changes, significant user/system impact

What & Why

Resolves #9293. The per-action Code view tab in the node-details panel was
read-only, so editing an action's inputs/expressions inline was impossible —
users had to drop into the whole-workflow code view to make small JSON edits.

This makes the per-action Code view editable: you can edit an action's JSON
in place, with live JSON validation, then Save to apply it (or Discard
to revert) without leaving the action panel. On save, only the edited node is
re-initialized and merged back into state, so other nodes' unsaved edits are
preserved. Editing an action's runAfter in this view also repositions the
node in the graph to match the new run-after dependencies.

Note: this lands in the designer-v2 library and is opt-in. Hosts must
set hostOptions.enableEditableCodeView: true (default false) to turn the
editable code view on — the Azure portal and other consumers keep the existing
read-only behavior until they enable it.

Impact of Change

• Users: The action panel's Code view tab is now editable when the host
  enables it (hostOptions.enableEditableCodeView); by default it stays
  read-only exactly as before. When enabled, the tab gains Save/Discard buttons +
  inline JSON validation. Invalid JSON blocks save with a clear
  message. Read-only hosts are unaffected — the tab still renders the existing
  read-only viewer. Editing runAfter re-draws the node's graph edges (parent
  dependencies, re-attaching to the trigger when run-after is cleared on a
  top-level action, or to the scope header inside a scope). Still out of scope
  for inline edits: renaming the action key, re-nesting into a different scope,
  and adding/removing child actions — those continue to require the
  whole-workflow code view.
• Developers: New EditableCodeView presentational component in
  designer-ui; new updateNodeFromCodeView thunk and replaceOperationDefinition
  reducer in designer-v2; four helpers in operationdeserializer.ts are now
  exported for single-node re-initialization. New opt-in
  hostOptions.enableEditableCodeView flag (surfaced via the
  useEditableCodeViewEnabled selector) gates the editable UI. codeViewTab is
  now a stateful container that reads useStore().getState() in its serialize
  query so the post-save refetch reflects fresh committed state.
  replaceOperationDefinition diffs old vs. new runAfter and reconciles the
  scope's graph edges (mirroring the BJS deserializer), then re-syncs isRoot
  metadata via applyIsRootNode.
• System: No new dependencies. Re-initialization is scoped to a single node
  (manifest/swagger/connector/managed-MCP path) and merges via
  initializeNodes({ clearExisting: false }) rather than re-deserializing the
  whole workflow, keeping the save path cheap and avoiding clobbering other nodes.

Test Plan

• Unit tests added/updated:
  • workflowSlice.spec.ts — replaceOperationDefinition reducer plus runAfter
    graph-reconciliation tests (remove runAfter → re-attach to trigger; change
    parent → edge moves; status-only change → edges untouched)
  • updateNodeFromCodeView.spec.ts (10 tests) — thunk driven against a real store
    with the heavy single-node initializers mocked: persist + graph reconcile,
    re-init only the edited node while preserving other nodes, variable
    clear/re-init, manifest/swagger/connector/managed-MCP branch selection, and the
    no-op guard when the node is missing
  • codeViewTab.spec.tsx (7 tests) — container: seeding, read-only peek,
    read-only when the enableEditableCodeView host option is off, dirty
    tracking, JSON validation, discard revert, and save dispatch
  • editableCodeView.spec.tsx (8 tests, designer-ui) — dirty/saving/error/
    read-only states and Save/Discard callback wiring
• E2E tests added/updated
• Manual testing completed
• Tested in: Standalone designer-v2 (/v2):
  • Editable editor renders with Save/Discard (disabled until dirty)
  • Invalid JSON → validation message + Save disabled
  • Discard reverts to original
  • Parameter/expression edits (e.g. InitializeVariable rename, Query/Filter
    from expression) → Save → persist to Redux and round-trip in the editor and
    Parameters tab; no console errors
  • "General Run After" workflow: removing one run-after parent removes its edge
    and re-lays out the graph; clearing all run-after on a top-level action
    re-attaches it to the trigger
  • designer-v2 and designer-ui type-check clean; Biome/eslint clean

Contributors

@rllyy97

Screenshots/Videos

[github-actions]

🤖 AI PR Validation Report

PR Review Results

Thank you for your submission! Here's detailed feedback on your PR title and body compliance:

✅ PR Title

• Current: feat(designer-v2): Make per-action code view editable
• Issue: None — this is a clear, high-quality title that accurately describes the change.
• Recommendation: No change needed.

---

✅ Commit Type

• Properly selected (feature).
• Only one commit type is checked, which is correct.

---

✅ Risk Level

• Properly selected as Medium, and this matches the scope of the code changes and the risk:medium label.
• Advised risk is medium, which is the same as the submitter’s choice.

---

✅ What & Why

• Current: Detailed and sufficiently explains the motivation, opt-in behavior, and user impact.
• Issue: None.
• Recommendation: No change needed.

---

✅ Impact of Change

• The section is well filled out and clearly describes user, developer, and system impact.
• Recommendation:
  • Users: Good as written.
  • Developers: Good as written.
  • System: Good as written.

---

✅ Test Plan

• Unit tests were added/updated in the diff, which satisfies the test plan requirement.
• Manual testing is also documented, which is great.

---

✅ Contributors

• Contributor credit is present.
• No action needed.

---

⚠️ Screenshots/Videos

• Current: Screenshots are included, but the body still contains a TODO requesting a short clip of editing JSON and saving.
• Issue: Since this is a visual/UI change, a short screenshot/video showing the editable code view flow would be even better than static images alone.
• Recommendation: Add the requested short clip if available, especially demonstrating edit → validation → save/discard.

---

Summary Table

Section	Status	Recommendation
Title	✅	No change needed
Commit Type	✅	No change needed
Risk Level	✅	Keep Medium
What & Why	✅	No change needed
Impact of Change	✅	No change needed
Test Plan	✅	No change needed
Contributors	✅	No change needed
Screenshots/Videos	⚠️	Add a short clip if possible

---

Overall: this PR passes. The advised risk level matches the submitter’s risk level (medium). The only recommendation is optional: add a short video/GIF for the UI workflow to complement the screenshots.

---

Last updated: Wed, 01 Jul 2026 21:43:38 GMT

[Copilot]

Pull request overview

This PR adds an editable per-action Code view experience in the node-details panel, allowing users to edit an action’s JSON inline with validation and Save/Discard controls, and then re-initializing only the edited node to avoid clobbering other unsaved node edits.

Changes:

• Introduces an EditableCodeView presentational component (Monaco-based) with Save/Discard, validation messaging, and saving state.
• Updates the designer’s Code view tab to be stateful (dirty tracking, JSON validation, save/discard wiring) and to re-serialize from the latest store state on refetch.
• Adds a new updateNodeFromCodeView thunk plus a replaceOperationDefinition reducer to persist the edited operation definition and re-initialize metadata/tokens for just that node.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
Localize/lang/strings.json	Adds new localized strings for invalid JSON + Save/Discard/Saving labels.
libs/designer/src/lib/ui/panel/nodeDetailsPanel/tabs/codeViewTab.tsx	Switches Code view tab to editable mode (when not read-only), adds validation + Save/Discard and post-save refetch.
libs/designer/src/lib/core/state/workflow/workflowSlice.ts	Adds replaceOperationDefinition reducer to update a single operation definition in-state.
libs/designer/src/lib/core/state/workflow/test/workflowSlice.spec.ts	Adds unit tests for replaceOperationDefinition.
libs/designer/src/lib/core/actions/bjsworkflow/updateNodeFromCodeView.ts	Adds thunk to apply edited per-node JSON and re-initialize node metadata/tokens without full workflow re-deserialization.
libs/designer/src/lib/core/actions/bjsworkflow/operationdeserializer.ts	Exports helper functions needed for single-node re-initialization.
libs/designer-ui/src/lib/peek/index.tsx	Re-exports the new EditableCodeView component.
libs/designer-ui/src/lib/peek/editableCodeView.tsx	New presentational editable code editor with toolbar and error surface.

[github-actions]

📊 Coverage Check

The following changed files need attention:

⚠️ libs/designer-v2/src/lib/core/actions/bjsworkflow/operationdeserializer.ts - 17% covered (needs improvement)
⚠️ libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsSelectors.ts - 49% covered (needs improvement)
⚠️ libs/designer-v2/src/lib/core/state/workflow/workflowSlice.ts - 32% covered (needs improvement)

Please add tests for the uncovered files before merging.