feat(vscode): Add draft workflow system for Designer V2

[Elaina-Lee]

Commit Type

• feature - New functionality

Risk Level

• Medium - Moderate changes, some user impact

What & Why

Adds a full draft/publish workflow system to the VS Code Designer V2, matching the portal's implementation. Users can now make changes that are auto-saved as drafts every 5 seconds, then explicitly "Publish" when ready. This prevents accidental loss of in-progress work and provides a clear separation between draft and published workflow states.

Key capabilities:

• Draft files on disk (workflow.draft.json, connections.draft.json, parameters.draft.json) per workflow directory
• Auto-save with 5-second throttle using useThrottledEffect + useChangeCount
• Dual-state management: draft connections and parameters flow into BJSWorkflowProvider independently
• Mode switching between draft and published views (published is read-only)
• Discard session changes or discard entire draft (revert to published)
• Draft save notification with "Saving...", "Autosaved X ago", and error states
• All user-facing strings internationalized via designerMessages

Impact of Change

• Users: VS Code Designer V2 users get auto-save draft experience. Changes are preserved across designer open/close. Publish button replaces Save for explicit publishing.
• Developers: New DraftManager utility for draft file I/O. New draft-related Redux reducers and extension commands. Command bar V2 has new props for draft state.
• System: Draft files stored per-workflow directory (not at project root) to avoid conflicts with shared connections.json/parameters.json. Draft files cleaned up on publish or discard.

Test Plan

• Unit tests added/updated
• E2E tests added/updated
• Manual testing completed
• Tested in: VS Code local project with Designer V2 enabled

Unit tests (36 total):

• draftManager.test.ts (18 tests) - path helpers, hasDraft, saveDraft, loadDraft, discardDraft
• DesignerSlice.test.ts (18 tests) - all draft-related Redux reducers

Manual testing:

1. Open workflow in VS Code with Designer V2 → make a change → verify workflow.draft.json appears after ~5 seconds
2. Close and reopen designer → verify draft is loaded
3. Click "Publish" → verify workflow.json is updated and draft files are deleted
4. Make changes → use "Discard draft" → verify draft files deleted and published workflow restored
5. Switch between draft and published views → verify published is read-only
6. Verify monitoring view still works with draft mode

Contributors

@hyehwalee

Screenshots/Videos

Recording.2026-02-17.153240.mp4

[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(vscode): Add draft workflow system for Designer V2
• Issue: None — the title is concise, follows conventional commit style, and communicates the scope and intent.
• Recommendation: (Optional) You could expand to explicitly mention "draft/publish workflow" to make the user-facing intent even clearer, e.g. feat(vscode): add draft/publish workflow system for Designer V2 — but current title is good.

---

✅ Commit Type

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

---

✅ Risk Level

• The PR body marks Medium and the PR has the label risk:medium. These match.
• Advised risk from code diff: risk:medium. (Note: the change is substantial across extension + front-end + state + tests, but does not appear to introduce high-risk infra changes such as auth or production DB migrations.)

---

✅ What & Why

• Current: Adds a full draft/publish workflow system for Designer V2 with auto-save, draft files per workflow directory, draft UI flows, Redux state, extension commands, and tests.
• Issue: None — the section is clear and concise and covers why the change was needed.
• Recommendation: (Optional) Add a one-line sentence stating why synchronous filesystem I/O was chosen (see note below in Recommendations on using async APIs).

---

✅ Impact of Change

• Impact is described for Users, Developers, and System.
• Recommendation: Ensure that the docs/README for the VS Code Designer (or extension release notes) mention the new draft files and their locations so users are not surprised by new files appearing in project folders.
  • Users: VS Code Designer V2 users get auto-save draft experience and clearer publish flow.
  • Developers: New DraftManager, Redux additions, extension commands, and CommandBar changes — ensure extension-side message handlers are tested and reviewed.
  • System: Draft files are stored next to workflow files — verify CI/packaging ignores these (if applicable) and confirm no unwanted uploads/sync to remote stores.

---

✅ Test Plan

• Unit tests added/updated and many new tests are present in the diff (draftManager tests, DesignerCommandBar tests, appV2 tests, DesignerSlice tests, intl tests, etc.). This matches the PR body claim of unit tests added.
• E2E tests were not added — the PR marks E2E as not added and provides manual testing steps which are reasonable for this feature. Consider adding an integration/E2E test that verifies the extension/webview messaging for saveDraft/discardDraft and that draft files are created/removed on disk in a CI-friendly mock environment.

---

⚠️ Contributors

• Current: @hyehwalee is listed.
• Assessment: OK. (Optional) Remember to add any PMs/designers/other reviewers who contributed to the feature decisions if applicable.

---

⚠️ Screenshots/Videos

• Current: A link to an attachment is present.
• Assessment: OK. Visual changes were supplemented with a media link; keep it if it demonstrates the UX.

---

Summary Table

Section	Status	Recommendation
Title	✅	Title is good; optionally expand to draft/publish wording.
Commit Type	✅	Keep as feature.
Risk Level	✅	risk:medium is appropriate given the cross-cutting changes.
What & Why	✅	Good description; consider noting reason for sync fs usage.
Impact of Change	✅	Document new files in user docs / gitignore guidance if needed.
Test Plan	✅	Unit tests present. Consider adding an integration/E2E test for messaging and disk I/O.
Contributors	⚠️	OK; consider adding other contributors if applicable.
Screenshots/Videos	⚠️	OK; keep or update if visuals change during reviews.

---

Final Notes & Actionable Recommendations

• Overall: This PR passes the PR-title and PR-body checks. The PR description and body follow the required template and are coherent and complete. Unit tests exist and align with the claimed tests in the PR body. Labels include risk:medium and match the body.

• Important engineering suggestions (please consider addressing):

  1. DraftManager uses synchronous fs calls (mkdirSync, writeFileSync, readFileSync, unlinkSync). In VS Code extension environments, blocking the event loop can be problematic for large files or slow I/O. Consider using the async fs APIs (fs.promises) or offloading to a background worker to avoid blocking the extension host. If sync usage is intentional (simplicity / atomicity), add a code comment explaining the rationale and any mitigations.
  2. Ensure the extension-side implementation (the native extension process that receives messages) has handlers for the new commands (SaveDraft, DraftLoaded, DraftSaveResult, DiscardDraft). From the diff I see ExtensionCommand entries added — double-check the counterpart in the extension host code is present and handles errors and telemetry.
  3. Add an integration/E2E test that simulates the webview <-> extension messaging cycle for saveDraft and discardDraft and verifies draft files are created and removed. This will help catch issues that unit tests (with many mocks) may not surface.
  4. Consider CI/packaging implications: because the change writes new files to workflow directories, confirm whether those new files should be git-ignored in certain templates or referenced in docs to avoid user confusion.
  5. Validate permission/security: ensure that saving draft files cannot accidentally write outside the intended workflow directory. The current use of path.dirname(workflowFilePath) seems OK but it is worth adding a small sanity check or unit test for path traversal edge cases.

Please update the PR if you want to address any of the recommendations above. If you do make modifications (for example switching to async fs APIs), mention them in the PR body so reviewers know the risk/behavior changes.

Thank you for a comprehensive PR with tests and good documentation in the body — this made review straightforward.

---

Last updated: Tue, 17 Feb 2026 23:33:36 GMT

[github-actions]

📊 Coverage check completed. See workflow run for details.

[Copilot]

Pull request overview

This PR implements a comprehensive draft/publish workflow system for the VS Code Designer V2, matching the Azure portal's implementation. It allows users to make changes that are auto-saved as drafts every 5 seconds, with an explicit "Publish" action to commit changes to the published workflow state.

Changes:

• Draft file management system with per-workflow directory storage (workflow.draft.json, connections.draft.json, parameters.draft.json)
• Auto-save mechanism using useThrottledEffect with 5-second throttle and useChangeCount for change detection
• Redux state management for draft artifacts with dual-state support (draft vs. published)
• UI enhancements including draft/publish mode switching, discard options, and save status notifications
• Full internationalization of user-facing strings via designerMessages

Reviewed changes

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

Show a summary per file

File	Description
libs/vscode-extension/src/lib/models/extensioncommand.ts	Added 4 new extension commands for draft operations
apps/vs-code-react/src/webviewCommunication.tsx	Added message handlers for draft loaded and save result events
apps/vs-code-react/src/state/test/DesignerSlice.test.ts	Comprehensive unit tests (18 tests) for all draft-related Redux reducers
apps/vs-code-react/src/state/DesignerSlice.ts	Added draft state properties and 8 new reducers for draft management
apps/vs-code-react/src/run-service/types.ts	Added TypeScript interfaces for draft message types
apps/vs-code-react/src/intl/messages.ts	Added 15 internationalized messages for draft UI elements
apps/vs-code-react/src/app/designer/appV2.tsx	Integrated draft workflow logic, mode switching, and draft state handling
apps/vs-code-react/src/app/designer/DesignerCommandBar/indexV2.tsx	Implemented auto-save UI, draft notifications, and publish/discard controls
apps/vs-code-designer/src/constants.ts	Defined draft file name constants
apps/vs-code-designer/src/app/utils/codeless/draftManager.ts	Core draft file I/O utilities (save, load, discard, path helpers)
apps/vs-code-designer/src/app/utils/codeless/test/draftManager.test.ts	Comprehensive unit tests (18 tests) for draft manager utilities
apps/vs-code-designer/src/app/commands/workflows/openDesigner/openDesignerForLocalProject.ts	Extension-side draft handling, initialization with draft data, and publish workflow

[github-actions]

❌ PR Validation Error

An error occurred while validating your PR. Please try again later or contact the maintainers.

Error: Bad escaped character in JSON at position 5810

[github-actions]

📊 Coverage check completed. See workflow run for details.

[github-actions]

📊 Coverage check completed. See workflow run for details.

[github-actions]

📊 Coverage check completed. See workflow run for details.

[github-actions]

📊 Coverage check completed. See workflow run for details.

[github-actions]

📊 Coverage Check

The following changed files need attention:

⚠️ apps/vs-code-designer/src/app/commands/workflows/openDesigner/openDesignerForLocalProject.ts - 7% covered (needs improvement)
⚠️ apps/vs-code-react/src/app/designer/DesignerCommandBar/indexV2.tsx - 70% covered (needs improvement)
⚠️ apps/vs-code-react/src/app/designer/appV2.tsx - 65% covered (needs improvement)

Please add tests for the uncovered files before merging.