Fix/replace deprecated UI toolkit#134
Merged
Merged
Conversation
…olkit dependencies; update tests accordingly
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.Snapshot WarningsEnsure that dependencies are being submitted on PR branches and consider enabling retry-on-snapshot-warnings. See the documentation for more information and troubleshooting advice. Scanned Files
|
|
Coverage Impact ⬆️ Merging this pull request will increase total coverage on Modified Files with Diff Coverage (8)
🤖 Increase coverage with AI coding...🚦 See full report on Qlty Cloud » 🛟 Help
|
Contributor
There was a problem hiding this comment.
Pull request overview
Migrates webview UIs away from the deprecated @vscode/webview-ui-toolkit to Ant Design components, updating affected views and tests accordingly.
Changes:
- Removed
@vscode/webview-ui-toolkitdependency and related asset copying. - Replaced toolkit-based UI controls with Ant Design controls across multiple webviews.
- Updated
CompactDropdownusage/behavior and adjusted related unit tests.
Reviewed changes
Copilot reviewed 20 out of 21 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| webpack.config.js | Stops copying the deprecated toolkit script into webview bundles. |
| src/views/manage-solution/manage-solution-webview-view.ts | Uses acquireVsCodeApi from vscode-messenger-webview for bootstrapping. |
| src/views/manage-layers/view/components/manage-layers.tsx | Migrates buttons to Ant Design and adds theming via ConfigProvider. |
| src/views/manage-layers/view/components/create-layer.tsx | Replaces toolkit button with Ant Design Button. |
| src/views/manage-layers/manage-layers-webview-view.ts | Uses acquireVsCodeApi from vscode-messenger-webview. |
| src/views/manage-components-packs/components-packs-webview-view.ts | Uses acquireVsCodeApi from vscode-messenger-webview. |
| src/views/create-solutions/view/components/project-configuration.tsx | Replaces toolkit dropdowns/buttons with CompactDropdown + Ant Design Button. |
| src/views/create-solutions/view/components/project-configuration.test.tsx | Updates tests to reflect CompactDropdown option rendering and interaction. |
| src/views/create-solutions/view/components/hardware-panel.tsx | Replaces toolkit button/progress ring with Ant Design Button/Spin. |
| src/views/create-solutions/view/components/hardware-panel.test.tsx | Updates DOM selectors for Ant Design rendered elements. |
| src/views/create-solutions/view/components/create-solution.tsx | Replaces toolkit buttons/checkboxes with Ant Design equivalents and wraps with ConfigProvider. |
| src/views/create-solutions/view/components/create-solution.test.tsx | Updates selectors to target Ant Design buttons; adjusts interaction tests. |
| src/views/create-solutions/create-solution-webview-view.ts | Uses acquireVsCodeApi from vscode-messenger-webview. |
| src/views/config-wizard/confwiz-webview-view-component.tsx | Migrates Config Wizard inputs/dropdowns/checkboxes to Ant Design + CompactDropdown. |
| src/views/config-wizard/confwiz-webview-view-component.test.tsx | Updates mocks and assertions for new UI component structure. |
| src/views/common/components/file-path-picker.tsx | Replaces toolkit browse button with Ant Design Button. |
| src/views/common/components/file-path-picker.test.tsx | Updates selector for Ant Design browse button and hardens test failure messaging. |
| src/views/common/components/compact-dropdown.tsx | Adds role="combobox" to the dropdown trigger element. |
| package.json | Removes deprecated toolkit dependency and updates Jest ignore patterns. |
| package-lock.json | Removes toolkit and its transitive dependencies from lockfile. |
| docs/third-party-licenses.json | Removes toolkit entry from third-party license list. |
Comments suppressed due to low confidence (2)
webpack.config.js:92
toolkit.min.jsis no longer copied intodist/views, but the Config Wizard webview HTML still loadsdist/views/toolkit.min.js(seesrc/views/config-wizard/confwiz-webview-main.ts). This will break the Config Wizard at runtime. Either remove the toolkit script reference from the Config Wizard webview HTML or reintroduce a copy step for the required asset.
plugins: [
new copy({
patterns: [
{
from: 'node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css',
to: 'css'
},
src/views/config-wizard/confwiz-webview-view-component.tsx:561
antdCheckboxonClickdoes not guaranteeevent.currentTargetis the underlying<input>, so casting it toHTMLInputElementand reading.checkedis unreliable and can prevent toggling/saving from working on mouse clicks. UseonChange(ande.target.checked) or otherwise obtain the real input element before callingtoggleChecked.
<Checkbox
className={isInconsistent ? 'checkbox-inconsistent' : undefined}
disabled={element.value.readOnly || shouldDisable}
onClick={(event) => {
const inputElement = event.currentTarget as HTMLInputElement;
this.toggleChecked(inputElement, element);
}}
…InputElement and improve formatting
…ity attributes, and improve state management
…al implementation and enhance state management
edriouk
approved these changes
Apr 15, 2026
edriouk
left a comment
edriouk
left a comment
Collaborator
There was a problem hiding this comment.
LGTM,
locally tested on Windows
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.
Fixes
Changes
Affected areas which require a deeper look:
Screenshots
Checklist