fix(vscode): Add new V2 designer panels, address V2 designer bugs#9416
Open
andrew-eldridge wants to merge 22 commits into
Open
fix(vscode): Add new V2 designer panels, address V2 designer bugs#9416andrew-eldridge wants to merge 22 commits into
andrew-eldridge wants to merge 22 commits into
Conversation
…delessTestCleanup
…delessTestCleanup
…ds, fix type errors
…codeDesignerRefactor
…up, otherwise dispose cached panel and re-init
…codeDesignerRefactor
andrew-eldridge
added
VSCode
Contributor
🤖 AI PR Validation ReportPR Review ResultsThank you for your submission! Here's detailed feedback on your PR title and body compliance:✅ PR Title
✅ Commit Type
✅ Risk Level
✅ What & Why
✅ Impact of Change
✅ Test Plan
✅ Contributors
|
| Section | Status | Recommendation |
|---|---|---|
| Title | ✅ | No change needed |
| Commit Type | ✅ | No change needed |
| Risk Level | ✅ | Medium is correct |
| What & Why | ✅ | No change needed |
| Impact of Change | ✅ | No change needed |
| Test Plan | ✅ | Unit tests present |
| Contributors | ✅ | No change needed |
| Screenshots/Videos | Optionally add a clip of the UI changes |
All required checks pass — this PR is compliant with the team template and cleared to merge. Nice, thorough test coverage.
Powered by: Copilot CLI (claude-opus-4.8) | Last updated: Fri, 17 Jul 2026 20:49:11 GMT
…-designer-refactor
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the VS Code extension + webview code to better support the V2 designer by introducing V2-specific panel classes and fixing monitoring/designer behaviors (run selection, runtime availability handling) that were previously tied to V1 panel implementations.
Changes:
- Add new V2 designer panel infrastructure (panel base classes + V2 panel implementations) and route monitoring/designer opens to V2 when selected.
- Introduce a
SelectRunwebview command + Redux action so V2 monitoring view can switch to the correct run. - Add an Overview webview/panel implementation (including codeful workflow helpers) and refactor various panel implementations to share a common base.
Reviewed changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| libs/vscode-extension/src/lib/models/workflow.ts | Rename panel metadata model export used by webview/extension messaging. |
| libs/vscode-extension/src/lib/models/index.ts | Re-export new codeful model types. |
| libs/vscode-extension/src/lib/models/extensioncommand.ts | Add selectRun command constant. |
| libs/vscode-extension/src/lib/models/connection.ts | Add ConnectionPanelMetadata model for connection webview initialization. |
| libs/vscode-extension/src/lib/models/codeful.ts | Add CodeSelection model used by connection insertion flows. |
| apps/vs-code-react/src/webviewCommunication.tsx | Handle SelectRun messages from the extension and dispatch Redux updates. |
| apps/vs-code-react/src/state/LanguageServerSlice.ts | Update panel metadata type import to new name. |
| apps/vs-code-react/src/state/DesignerSlice.ts | Update panel metadata type + add selectRun reducer/action. |
| apps/vs-code-react/src/state/test/DesignerSlice.test.ts | Unit tests for new selectRun behavior. |
| apps/vs-code-react/src/run-service/types.ts | Add SelectRunMessage and update panel metadata type. |
| apps/vs-code-react/src/intl/messages.ts | Add runtime-unavailable tooltip string. |
| apps/vs-code-react/src/app/designer/servicesHelper.ts | Update panel metadata type used when building designer services. |
| apps/vs-code-react/src/app/designer/CodeViewEditor/index.tsx | Add readOnly support for code view editor. |
| apps/vs-code-react/src/app/designer/appV2.tsx | Update V2 designer app to support run selection + runtime-disabled run button + read-only code view. |
| apps/vs-code-designer/src/extensionVariables.ts | Add V2 designer webview keys + add selectRun command constant. |
| apps/vs-code-designer/src/app/commands/workflows/overview/utils/types.ts | New types for overview workflow properties + codeful workflow data. |
| apps/vs-code-designer/src/app/commands/workflows/overview/utils/overviewHelpers.ts | New helpers for overview workflow property shaping and normalization. |
| apps/vs-code-designer/src/app/commands/workflows/overview/utils/codefulHelpers.ts | New helpers for discovering/representing codeful workflows and callback info. |
| apps/vs-code-designer/src/app/commands/workflows/overview/panels/remoteOverviewPanel.ts | New remote overview panel implementation. |
| apps/vs-code-designer/src/app/commands/workflows/overview/panels/overviewPanel.ts | New shared overview panel base + polling behaviors. |
| apps/vs-code-designer/src/app/commands/workflows/overview/panels/localOverviewPanel.ts | New local overview panel implementation. |
| apps/vs-code-designer/src/app/commands/workflows/overview/panels/localCodefulOverviewPanel.ts | New local codeful overview panel implementation. |
| apps/vs-code-designer/src/app/commands/workflows/overview/panels/test/remoteOverviewPanel.test.ts | Tests for remote overview panel initialization + routing. |
| apps/vs-code-designer/src/app/commands/workflows/overview/panels/test/overviewPanel.test.ts | Tests for overview panel base behaviors (polling, messaging, disposal). |
| apps/vs-code-designer/src/app/commands/workflows/overview/panels/test/localOverviewPanel.test.ts | Tests for local overview callback URL behavior + initialization. |
| apps/vs-code-designer/src/app/commands/workflows/overview/openOverview.ts | New openOverview entry point + routing between local/remote/codeful panels. |
| apps/vs-code-designer/src/app/commands/workflows/overview/test/openOverview.test.ts | Tests for openOverview routing. |
| apps/vs-code-designer/src/app/commands/workflows/openMonitoringView/openMonitoringView.ts | Remove old monitoring open entry point (replaced by monitoringView module). |
| apps/vs-code-designer/src/app/commands/workflows/openDesigner/openDesigner.ts | Remove old designer open entry point (replaced by designer module). |
| apps/vs-code-designer/src/app/commands/workflows/monitoringView/panels/remoteMonitoringPanel.ts | Refactor remote monitoring panel to use new base panel classes. |
| apps/vs-code-designer/src/app/commands/workflows/monitoringView/panels/monitoringPanel.ts | Introduce monitoring panel base derived from shared designer panel base. |
| apps/vs-code-designer/src/app/commands/workflows/monitoringView/panels/localMonitoringPanel.ts | Refactor local monitoring panel to use new base panel classes + adjust metadata loading. |
| apps/vs-code-designer/src/app/commands/workflows/monitoringView/panels/test/remoteMonitoringPanel.test.ts | Update tests for renamed/relocated remote monitoring panel. |
| apps/vs-code-designer/src/app/commands/workflows/monitoringView/panels/test/localMonitoringPanel.test.ts | Update tests for renamed/relocated local monitoring panel + messaging. |
| apps/vs-code-designer/src/app/commands/workflows/monitoringView/openMonitoringView.ts | New monitoring open entry point (routes to V2 when selected). |
| apps/vs-code-designer/src/app/commands/workflows/monitoringView/test/openMonitoringView.test.ts | Tests for monitoring open routing (V2 vs V1). |
| apps/vs-code-designer/src/app/commands/workflows/designer/panels/remoteDesignerPanel.ts | Refactor remote designer panel to use new base panel classes. |
| apps/vs-code-designer/src/app/commands/workflows/designer/panels/localDesignerPanel.ts | Refactor local designer panel to use new base panel classes + improve null-safety in save/validate. |
| apps/vs-code-designer/src/app/commands/workflows/designer/panels/designerPanel.ts | New shared base class for designer/monitoring/connection panels (webview content + connection interpolation). |
| apps/vs-code-designer/src/app/commands/workflows/designer/panels/test/remoteDesignerPanel.test.ts | Update tests for renamed/relocated remote designer panel. |
| apps/vs-code-designer/src/app/commands/workflows/designer/panels/test/localDesignerPanel.test.ts | Update tests for renamed/relocated local designer panel + messaging. |
| apps/vs-code-designer/src/app/commands/workflows/designer/panels/test/designerPanel.test.ts | Update tests for new base class name/signature. |
| apps/vs-code-designer/src/app/commands/workflows/designer/openDesigner.ts | New designer open entry point (routes to V2 when selected). |
| apps/vs-code-designer/src/app/commands/workflows/designer/test/openDesigner.test.ts | Tests for designer open routing. |
| apps/vs-code-designer/src/app/commands/workflows/designer-v2/panels/remoteDesignerV2Panel.ts | New remote V2 designer panel implementation. |
| apps/vs-code-designer/src/app/commands/workflows/designer-v2/panels/designerV2Panel.ts | New base for V2 panels (selectRun + openContent behavior). |
| apps/vs-code-designer/src/app/commands/workflows/designer-v2/panels/test/localDesignerV2Panel.test.ts | Tests for local V2 designer panel behavior (including selectRun). |
| apps/vs-code-designer/src/app/commands/workflows/designer-v2/openDesignerV2.ts | New V2 designer open entry point + routing local vs remote. |
| apps/vs-code-designer/src/app/commands/workflows/connectionView/panels/connectionPanel.ts | Refactor connection view to use shared panel base + typed range model + metadata loader rename. |
| apps/vs-code-designer/src/app/commands/workflows/connectionView/panels/test/connectionPanelRace.test.ts | Update tests for renamed connection panel module + message handler name. |
| apps/vs-code-designer/src/app/commands/workflows/connectionView/panels/test/connectionPanel.test.ts | Update tests to import renamed connection panel module. |
| apps/vs-code-designer/src/app/commands/workflows/connectionView/openConnectionView.ts | New command entry point for opening the connection view panel. |
| apps/vs-code-designer/src/app/commands/registerCommands.ts | Update command registrations to new module locations and new connection view entry point. |
| apps/vs-code-designer/src/app/commands/dataMapper/DataMapperPanel.ts | Remove wrapper sendMsgToWebview and call panel.webview.postMessage directly. |
Comments suppressed due to low confidence (1)
apps/vs-code-designer/src/app/commands/workflows/monitoringView/openMonitoringView.ts:21
openMonitoringViewcurrently requiresworkflowFilePath: string, but callers (e.g.OverviewPanel) passstring | undefinedand remote overview doesn’t always have a local file path. This will fail TypeScript compilation and can also break remote runs. Make the parameter optional and guard the local-panel path case.
export async function openMonitoringView(
context: IActionContext,
node: Uri | RemoteWorkflowTreeItem | undefined,
runId: string,
workflowFilePath: string
): Promise<void> {
Contributor
📊 Coverage CheckThe following changed files need attention: ❌
Please add tests for the uncovered files before merging. |
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
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.
Commit Type
Risk Level
What & Why
The webview panel classes for designer and monitoring view panels were originally created for the V1 designer, causing multiple issues for the V2 designer in both designer and monitoring view. For example, opening monitoring view with V2 designer would navigate to "Run history" tab with incomplete run history (only current run) and navigating to "Workflow" or "Code" view would show an empty workflow. Additionally, selecting open raw inputs/outputs on a run action in the V2 designer would do nothing because handlers for openContent were missing on old designer panel classes.
Added new panels specifically for V2 designer to address these issues. The panels are used in place of existing designer and monitoring view panels when V2 designer is selected.
Impact of Change
Test Plan
Contributors
@andrew-eldridge