feat(vscode): Add Designer V2 support+toggle, and version notification

[Elaina-Lee]

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

• Add Designer V2 toggle for VS Code - Allow users to switch between Designer V1 and V2 experiences
• Fix Chat iframe not loading for Azure workflows - The Chat popup was empty for Azure remote workflows because the iframe URL was incorrectly constructed using the Azure Management API URL instead of the app's actual hostname
• Add version notification popup - Show users a notification when opening the designer to try the preview (V1→V2) or go back (V2→V1)
• TODO: support draft version

Designer V2 Toggle

• Added azureLogicAppsStandard.designerVersion setting (default: 1, options: 1 or 2)
• Extension sends version to webview via ExtensionCommand.getDesignerVersion
• Webview conditionally renders DesignerAppV1 or DesignerAppV2 based on setting

Version Notification

• Shows "A new Logic Apps experience is available for preview!" with "Enable preview" button when on V1
• Shows "You are previewing the new Logic Apps experience." with "Go back to previous version" button when on V2
• Clicking updates the setting and prompts user to close/reopen the workflow

Impact of Change

• Users: VS Code extension users can now toggle between Designer V1 and V2, and the Chat iframe loads correctly for Azure workflows
• Developers: New designerVersion setting and getDesignerVersion extension command added
• System: No performance or architecture impact

Test Plan

• Unit tests added/updated
• E2E tests added/updated
• Manual testing completed
• Tested in:
  • Open VS Code extension in debug mode (F5)
  • Open Settings → search "designerVersion"
  • Set to 1, open a local workflow → verify V1 designer loads with notification
  • Click "Enable preview" → verify setting changes to 2 and close prompt appears
  • Reopen workflow → verify V2 designer loads with "Go back" notification
  • Connect to Azure and open an Agent workflow → verify Chat button works and iframe loads content
  • Run pnpm run test:extension-unit → verify all tests pass

Contributors

Screenshots/Videos

Recording.2026-02-10.130617.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 Designer V2 support+toggle, and version notification
• Issue: None critical. Title is descriptive and follows conventional commit style. Small nit: using a plus sign (+) inside the title is a little informal; consider and or & for clarity.
• Recommendation: (optional) feat(vscode): add Designer V2 support and toggle, with version notification

---

✅ Commit Type

• Properly selected (feature). Only one box is checked which is correct.
• Note: If this PR included multiple unrelated change types (feature + refactor etc.) consider splitting into separate PRs. Your PR is primarily a feature, so this is fine.

---

✅ Risk Level

• The PR body selected Medium and the repository labels include risk:medium — they match.
• Advised risk (based on the code diff and scope): risk:medium. The changes touch both the VS Code extension host and the webview/react app, modify agent/chat URL construction for Azure vs local, and add a new setting + cross-process messaging. Unit tests were added which lowers risk, so Medium is appropriate.

---

✅ What & Why

• Current: The body explains this adds a Designer V2 toggle and notification, fixes chat iframe URL construction for Azure, and describes the new setting and flow. There is also a TODO for draft support.
• Issue: None blocking. The TODO is acceptable but call it out if it's expected to be implemented before mainline shipping.
• Recommendation: Keep the What & Why concise; consider adding a single sentence about the UX flow for existing users (i.e., default remains V1 and users are prompted to opt-in to V2).

---

✅ Impact of Change

• Impact section is present and describes Users, Developers, and System effects.
• Recommendation additions: briefly call out that fetchAgentUrl behavior changed for Azure remote workflows (uses app defaultHostName for HTTPS agent/chat URLs) which could affect Chat/iframe behavior in production scenarios. Suggest adding a short note about backwards compatibility and migration testing for Azure-hosted workflows in the PR body or release notes.
  • Users: VS Code users can toggle designer version; Chat iframe loads correctly for Azure workflows. Consider adding a short note that the default remains the previous experience (designerVersion = 1).
  • Developers: New designerVersion setting, getDesignerVersion extension command, and new message handling on the webview side.
  • System: No major perf/arch changes expected, but the agent URL logic changes could affect network calls to agent/chat endpoints. Recommend verifying network/auth behavior on Azure-hosted workflows.

---

✅ Test Plan

• Unit tests: ✅ Many unit tests were added across the extension and react app (several new test files). This matches the PR's "Unit tests added/updated" claim.
• E2E tests: none added. Not strictly required, but because this change adds webview <-> host messaging and modifies network URL construction for Azure, an E2E or integration smoke test would be valuable. At minimum, include a short explanation in the Test Plan why E2E isn't present and how manual verification exercises cover the main surface area (you have manual steps documented, which helps).
• Manual testing: ✅ The PR includes manual steps to validate behavior — good.

---

⚠️ Contributors

• Assessment: Section is empty.
• Recommendation: (optional) Add contributors (PMs, Designers, reviewers) if others contributed. This is not required but it helps track credit.

---

⚠️ Screenshots/Videos

• Assessment: The PR includes an assets link. If the notification or designer visual changes are significant, consider adding a screenshot or two showing the version notification flows (V1->V2 prompt and V2 "Go back" prompt) to make it easier for reviewers to verify UX.

---

Summary Table

Section	Status	Recommendation
Title	✅	Small nit: replace + with and for clarity.
Commit Type	✅	No change needed.
Risk Level	✅	Medium is appropriate; tests added reduce risk.
What & Why	✅	Consider noting default remains V1 and any migration notes.
Impact of Change	✅	Add brief note about agent URL change and compatibility testing.
Test Plan	✅	Good — unit tests added. Consider E2E or explain why not.
Contributors	⚠️	Optional: add contributors if applicable.
Screenshots/Videos	⚠️	Recommend screenshots for notification UX.

---

Final Notes & Actionable Recommendations

1. Title: optional tidy-up — replace + with and for readability.
2. Test Coverage: unit tests were added and look comprehensive. Still consider adding a minimal integration/E2E test or a CI smoke job that exercises webview messaging and the chat iframe flow for an Azure workflow to catch regressions in the agent/chat URL behavior.
3. Release/Docs: Add a short CHANGELOG entry and a small docs note for the new setting azureLogicAppsStandard.designerVersion (what values mean, default=1, and how users can enable V2). Also mention the version notification behavior.
4. Localization: You used localize() for strings in the extension. Ensure the localization files are updated if your repo requires adding the keys to a source locale resource (if applicable to your pipeline).
5. Manual Test Steps: Keep the manual verification steps in the PR description. Consider adding a short checklist for reviewers to follow when validating the chat iframe scenario on Azure-hosted workflows.
6. Contributors: If other team members contributed reviews or design, add them to the Contributors section for visibility.

Please update the PR with any optional changes above (screenshots, CHANGELOG, small title tweak) if you want—but the PR body is compliant with the required template and the code changes are accompanied by unit tests. Great work!

Please update the PR title/body if you want to incorporate the small recommendations above, then re-run CI. Thank you for the thorough PR and the added unit tests!

---

Last updated: Wed, 11 Feb 2026 22:22:09 GMT

[github-actions]

📊 Coverage check completed. See workflow run for details.

[Copilot]

Pull request overview

This pull request adds three main features to the VS Code extension: a Designer V2 toggle following the established Data Mapper version switching pattern, a fix for the Chat iframe not loading for Azure workflows, and a version notification popup to guide users between designer versions.

Changes:

• Adds designerVersion setting (default: 1) with command handlers to communicate the version between extension and webview
• Fixes Chat iframe URL construction for Azure workflows by using the app's defaultHostName with HTTPS instead of the management.azure.com URL
• Implements notification popups when opening workflows to promote Designer V2 preview or allow users to revert to V1

Reviewed changes

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

Show a summary per file

File	Description
libs/vscode-extension/src/lib/models/workflow.ts	Added defaultHostName field to AzureConnectorDetails interface for Azure app hostname
libs/vscode-extension/src/lib/models/extensioncommand.ts	Added getDesignerVersion command for version communication
apps/vs-code-react/src/webviewCommunication.tsx	Added handler for getDesignerVersion command to update Redux state
apps/vs-code-react/src/state/projectSlice.ts	Added designerVersion state and changeDesignerVersion action to project slice
apps/vs-code-react/src/run-service/types.ts	Added GetDesignerVersionMessage interface for type safety
apps/vs-code-react/src/app/designer/servicesHelper.ts	Passed defaultHostName to fetchAgentUrl for Azure workflows
apps/vs-code-react/src/app/designer/services/workflowService.ts	Updated fetchAgentUrl to construct HTTPS URLs using defaultHostName for Azure workflows
apps/vs-code-react/src/app/designer/services/__test__/workflowService.test.ts	Added unit tests for URL construction logic with local and Azure scenarios
apps/vs-code-react/src/app/designer/app.tsx	Refactored to conditionally render V1 or V2 designer based on version setting
apps/vs-code-designer/src/package.json	Added azureLogicAppsStandard.designerVersion configuration setting
apps/vs-code-designer/src/constants.ts	Added designerVersionSetting and defaultDesignerVersion constants
apps/vs-code-designer/src/app/commands/workflows/openMonitoringView/openMonitoringViewForLocal.ts	Added getDesignerVersion command handler
apps/vs-code-designer/src/app/commands/workflows/openMonitoringView/openMonitoringViewForAzureResource.ts	Added getDesignerVersion command handler and passed defaultHostName to metadata
apps/vs-code-designer/src/app/commands/workflows/openDesigner/openDesignerForLocalProject.ts	Added getDesignerVersion command handler and version notification
apps/vs-code-designer/src/app/commands/workflows/openDesigner/openDesignerForAzureResource.ts	Added getDesignerVersion command handler, version notification, and passed defaultHostName
apps/vs-code-designer/src/app/commands/workflows/openDesigner/openDesignerBase.ts	Implemented getDesignerVersion() and showDesignerVersionNotification() methods
apps/vs-code-designer/src/app/commands/workflows/openDesigner/__test__/openDesignerBase.test.ts	Added comprehensive unit tests for designer version logic and notifications

[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 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 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.