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

[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 — title is descriptive, follows conventional-commit style and clearly summarizes the feature and scope (VS Code Designer V2).
• Recommendation: Keep as-is.

---

✅ Commit Type

• Properly selected (feature).
• Note: Only one commit type selected which is correct for this change.

---

✅ Risk Level

• Assessment: The PR is labelled risk:medium and the body selects Medium. The code diff introduces new on-disk draft files, extension commands, and UI autosave behavior. That surface area justifies a Medium risk classification.
• Note: I agree with the submitter's Medium risk label given file I/O + publish flow changes.

---

✅ What & Why

• Current: Clearly described: adds draft/publish workflow with autosave, draft files, mode switching, discard/publish flows, and i18n strings.
• Issue: None — concise and correct.
• Recommendation: None.

---

✅ Impact of Change

• Impact section exists and is aligned with changes in the diff.
• Recommendation: Good. Optionally call out that draft files are written to user disk and advise whether these artifacts should be mentioned in docs or excluded from common repo-level tooling (e.g. .gitignore advice for user projects) to avoid confusion for end users.
  • Users: VS Code Designer V2 users get autosave/draft behavior.
  • Developers: New DraftManager, new Redux slice fields and actions, new extension commands.
  • System: Per-workflow draft files on disk; cleaned up on publish/discard.

---

✅ Test Plan

• Assessment: The PR claims unit tests added and manual testing completed. I verified the diff contains new unit test files (draftManager.test.ts, DesignerSlice.test.ts, getRelativeTimeString.test.ts) and comprehensive reducer/unit tests — matching the claim.
• Recommendation: Consider adding one or two E2E/integration tests or a small integration smoke test that exercises the full flow (open designer -> autosave draft -> close & reopen -> publish -> verify draft removed). Because this feature uses file I/O and inter-process messages (extension <-> webview), an E2E test would increase confidence.

---

⚠️ Contributors

• Current: @hyehwalee listed.
• Assessment: Fine — not required to have more entries. Optional suggestion: mention reviewers / PMs / designers if they contributed to UX decisions.

---

⚠️ Screenshots/Videos

• Assessment: Not applicable — UI changes exist but not strictly required to block. If there are UX/visual changes (badges, draft indicators), consider adding 1-2 screenshots for reviewers to quickly see the new state.

---

Summary Table

Section	Status	Recommendation
Title	✅	Keep the current title.
Commit Type	✅	Correctly selected (feature).
Risk Level	✅	risk:medium appropriate for file I/O + publish flows.
What & Why	✅	Good, concise explanation.
Impact of Change	✅	Good; consider documenting draft file implications for end users.
Test Plan	✅	Unit tests present; consider adding E2E/integration test(s).
Contributors	⚠️	Optional: add other contributors (PM/design) if applicable.
Screenshots/Videos	⚠️	Optional: add screenshots of draft badge/notification for reviewer convenience.

---

Final notes & recommendations

• Overall: This PR passes the PR title/body checks. The PR body follows the required template and the label risk:medium matches the code changes.
• Suggestions to improve safety and reviewer confidence before merge:
  1. Add at least one E2E/integration/automation test that runs the full lifecycle (autosave -> load draft -> publish -> discard) to validate the file I/O and message plumbing between extension and webview.
  2. Consider adding defensive error handling in draftManager functions (saveDraft/loadDraft/discardDraft). Right now the extension catches errors when calling saveDraft, but the draftManager APIs themselves use synchronous fs calls without try/catch. Add defensive try/catch for JSON parsing and fs ops or clearly document that callers must handle exceptions.
  3. Consider atomic file writes (write to tmp file + rename) to avoid partial writes if the process is interrupted during writeFileSync.
  4. Confirm and document whether draft files should be ignored by git (user-level guidance). Since drafts are per-workflow and on-disk, a short note in README or docs would help users avoid accidentally committing drafts.
  5. Add small inline comments in code where you intentionally use synchronous fs operations (explain rationale — extension host vs. worker) for future maintainers.
  6. Optional UX suggestion: capture/emit the reason for autosave failures with more context (e.g., permission error) so the Badge tooltip shows helpful guidance.

Please update if you plan to add any E2E tests or additional error handling — otherwise this PR is ready from a PR title/body/template perspective. Thank you for the thorough description and unit tests — excellent work!

Please update the PR if you want me to re-check after you add any recommended tests or doc changes. Thanks!

---

Last updated: Fri, 13 Feb 2026 21:18:07 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.