Fix/replace deprecated UI toolkit

docs/third-party-licenses.json

@@ -27,13 +27,6 @@
         "url": "https://github.com/microsoft/vscode-codicons",
         "license": "https://github.com/microsoft/vscode-codicons/blob/main/LICENSE"
     },
-    {
-        "name": "@vscode/webview-ui-toolkit",
-        "version": "1.4.0",
-        "spdx": "MIT",
-        "url": "https://github.com/microsoft/vscode-webview-ui-toolkit",
-        "license": "https://github.com/microsoft/vscode-webview-ui-toolkit/blob/main/LICENSE"
-    },
     {
         "name": "async-mutex",
         "version": "0.5.0",

package.json

@@ -79,7 +79,6 @@
     "@lydell/node-pty": "^1.1.0",
     "@microsoft/vscode-serial-monitor-api": "^0.1.7",
     "@vscode/codicons": "^0.0.44",
-    "@vscode/webview-ui-toolkit": "^1.4.0",
     "antd": "^5.29.3",
     "async-mutex": "^0.5.0",
     "eta": "^4.5.1",
@@ -1553,7 +1552,7 @@
       ]
     },
     "transformIgnorePatterns": [
-      "/node_modules/(?!(@vscode/webview-ui-toolkit|@microsoft|exenv-es6|yaml)/)"
+      "/node_modules/(?!(@microsoft|yaml)/)"
     ],
     "testPathIgnorePatterns": [
       "/node_modules/",

src/views/common/components/compact-dropdown.tsx

@@ -115,7 +115,7 @@ export const CompactDropdown = (props: CompactDropdownProps) => {
         <div className={expanded ? `${props.className} compact-dropdown expanded` : `${props.className} compact-dropdown`} style={props.style} ref={rootRef}>
             <div className='compact-dropdown-inner'>
                 {props.addonBefore && <div className="compact-dropdown-addon-before">{props.addonBefore}</div>}
-                <div className={`compact-dropdown-trigger ${props.disabled ? ' disabled' : ''}`} onClick={toggleDropdown} ref={triggerRef} title={toolTip(props.selected)} tabIndex={0}>
+                <div className={`compact-dropdown-trigger ${props.disabled ? ' disabled' : ''}`} onClick={toggleDropdown} ref={triggerRef} title={toolTip(props.selected)} tabIndex={0} role='combobox' aria-haspopup='listbox' aria-expanded={expanded} aria-controls='compact-dropdown-popover'>
                     {props.displayText ? props.displayText(props.selected) : props.selected || props.unselectedLabel} {props.tag}
                     {props.warning && <span className="codicon codicon-warning compact-dropdown-warn" title={typeof props.warning === 'string' ? props.warning : ''} />}
                     {props.available.length > 1 && <span className="fa-solid fa-angle-down compact-dropdown-caret" />}

src/views/common/components/file-path-picker.test.tsx

@@ -45,12 +45,15 @@ describe('FileLocationPicker', () => {
                 openFilePicker={mockOpenFilePicker}
             />);
         });
-        const browseBtn = container.querySelector('.file-location-picker vscode-button') as HTMLButtonElement;
+        const browseBtn = container.querySelector('.file-location-picker button') as HTMLButtonElement;
 
         expect(mockOpenFilePicker).toHaveBeenCalledTimes(0);
 
         React.act(() => {
-            browseBtn!.click();
+            if (!browseBtn) {
+                throw new Error('Browse button not found. Check the selector or component rendering.');
+            }
+            browseBtn.click();
         });
 
         expect(mockOpenFilePicker).toHaveBeenCalledTimes(1);
@@ -76,6 +79,6 @@ describe('FileLocationPicker', () => {
         simulateChangeEvent(inputBox, 'my-location');
 
         expect(dispatch).toHaveBeenCalledTimes(1);
-        expect(dispatch).toHaveBeenCalledWith({ type: 'SET_SOLUTION_LOCATION' , solutionLocation: 'my-location' });
+        expect(dispatch).toHaveBeenCalledWith({ type: 'SET_SOLUTION_LOCATION', solutionLocation: 'my-location' });
     });
 });

src/views/common/components/file-path-picker.tsx

@@ -16,8 +16,8 @@
 
 import './file-path-picker.css';
 import * as React from 'react';
-import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
 import { CreateSolutionAction } from '../../create-solutions/view/state/reducer';
+import { Button } from 'antd';
 
 export interface FileLocationPickerProps {
     disabled: boolean;
@@ -41,12 +41,13 @@ export const FileLocationPicker = ({ id, disabled, location, dispatch, openFileP
             })}
             value={location}
             disabled={disabled} />
-        <VSCodeButton
+        <Button
             title='Browse'
             disabled={disabled}
+            style={{ height: 'var(--arm-input-height)' }}
             onClick={() => openFilePicker()}
         >
             Browse
-        </VSCodeButton>
+        </Button>
     </div>
 );

src/views/config-wizard/confwiz-webview-main.ts

@@ -152,13 +152,6 @@ export class ConfWizWebview implements vscode.CustomTextEditorProvider {
     }
 
     protected _getWebviewContent(webview: vscode.Webview, extensionUri: vscode.Uri): string {
-        const toolkitUri = webview.asWebviewUri(vscode.Uri.joinPath(
-            extensionUri,
-            'dist',
-            'views',
-            'toolkit.min.js'
-        ));
-
         const mainUri = webview.asWebviewUri(vscode.Uri.joinPath(
             extensionUri,
             'dist',
@@ -194,7 +187,6 @@ export class ConfWizWebview implements vscode.CustomTextEditorProvider {
                     <meta charset='UTF-8'>
                     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
                     <meta http-equiv='Content-Security-Policy' content="default-src 'none'; script-src ${cspSource}; style-src ${cspSource} 'unsafe-inline'; font-src ${cspSource};">
-                    <script type='module' src='${toolkitUri}'></script>
                     <script type='module' src='${mainUri}'></script>
                     <link rel='preload' as='style' href='${fontAwesomeUri}' >
                     <link rel='preload' as='style' href='${fontAwesomeStyleUri}' >

src/views/config-wizard/confwiz-webview-view-component.test.tsx

@@ -29,6 +29,12 @@ import {
 
 const sendNotificationMock = jest.fn();
 const notificationHandlers = new Map<string, (data: unknown) => void>();
+const mockVsCodeApi = {
+    postMessage: jest.fn(),
+    setState: jest.fn(),
+    getState: jest.fn(),
+};
+const acquireVsCodeApiMock = jest.fn(() => mockVsCodeApi);
 
 const getNotificationKey = (type: unknown): string => {
     if (typeof type === 'string') {
@@ -42,13 +48,6 @@ const getNotificationKey = (type: unknown): string => {
     return String(type);
 };
 
-// Mock acquireVsCodeApi
-global.acquireVsCodeApi = jest.fn(() => ({
-    postMessage: jest.fn(),
-    setState: jest.fn(),
-    getState: jest.fn(),
-}));
-
 jest.mock('vscode-messenger-webview', () => ({
     Messenger: jest.fn().mockImplementation(() => ({
         start: jest.fn(),
@@ -59,22 +58,11 @@ jest.mock('vscode-messenger-webview', () => ({
     }))
 }));
 
-jest.mock('@vscode/webview-ui-toolkit/react', () => ({
-    VSCodeTextField: ({ children: _children, ...props }: React.InputHTMLAttributes<HTMLInputElement>) => (
-        <input role="textbox" {...props} />
-    ),
-    VSCodeCheckbox: ({ onChange, onClick, ...props }: React.InputHTMLAttributes<HTMLInputElement>) => (
-        <input type="checkbox" onChange={onChange ?? (() => undefined)} onClick={onClick} {...props} />
-    ),
-    VSCodeDropdown: (props: React.SelectHTMLAttributes<HTMLSelectElement>) => <select {...props} />,
-    VSCodeOption: (props: React.OptionHTMLAttributes<HTMLOptionElement>) => <option {...props} />,
-}));
-
 jest.mock('primereact/treetable', () => ({
     TreeTable: ({ value, header, children }: { value: unknown[]; header: React.ReactNode; children: React.ReactNode }) => {
         const columns = React.Children.toArray(children) as React.ReactElement[];
         return (
-            <div>
+            <>
                 {header}
                 {value?.map((node: unknown, index: number) => (
                     <div key={index} data-testid={`row-${index}`}>
@@ -83,7 +71,7 @@ jest.mock('primereact/treetable', () => ({
                         ))}
                     </div>
                 ))}
-            </div>
+            </>
         );
     },
 }));
@@ -130,10 +118,19 @@ const makeRoot = (children: TreeNodeElement[]): TreeNodeElement => ({
 
 describe('ConfWiz functional component', () => {
     beforeEach(() => {
+        (globalThis as { acquireVsCodeApi?: () => unknown }).acquireVsCodeApi = acquireVsCodeApiMock;
+        acquireVsCodeApiMock.mockClear();
         sendNotificationMock.mockClear();
+        mockVsCodeApi.postMessage.mockClear();
+        mockVsCodeApi.setState.mockClear();
+        mockVsCodeApi.getState.mockClear();
         notificationHandlers.clear();
     });
 
+    afterEach(() => {
+        delete (globalThis as { acquireVsCodeApi?: () => unknown }).acquireVsCodeApi;
+    });
+
     it('marks dirty on first edit and saves on blur', () => {
         const editElement: TreeNodeElement = {
             guiId: 1,
@@ -175,8 +172,8 @@ describe('ConfWiz functional component', () => {
         render(<ConfWiz />);
         emitWizardData({ element: makeRoot([checkboxElement]), documentPath: 'test.c', noAnnotationsFound: false });
 
-        const checkbox = document.querySelector('input[type="checkbox"]') as HTMLInputElement;
-        expect(checkbox.className).toContain('checkbox-inconsistent');
+        const checkbox = document.querySelector('input[type="checkbox"]')?.parentElement as HTMLInputElement;
+        expect(checkbox.parentElement?.className).toContain('checkbox-inconsistent');
         expect(checkbox.getAttribute('title')).toContain('Inconsistent comment state detected');
         expect(checkbox.getAttribute('title')).toContain('Original tooltip info');
     });
@@ -270,8 +267,8 @@ describe('ConfWiz dropdown overflow tooltips', () => {
         const { getByRole } = render(confWiz.getCreateCombobox(element));
         const dropdown = getByRole('combobox') as HTMLSelectElement;
 
-        expect(dropdown.title).toBe("Value '256' overflows 8 bits");
-        expect(dropdown.className).toContain('dropdown-invalid');
+        expect(dropdown.title).toBe('Value \'256\' overflows 8 bits');
+        expect(dropdown.className).toContain('compact-dropdown-trigger');
     });
 
     it('should show not-in-list tooltip when value is missing and no overflow', () => {
@@ -295,6 +292,6 @@ describe('ConfWiz dropdown overflow tooltips', () => {
         const dropdown = getByRole('combobox') as HTMLSelectElement;
 
         expect(dropdown.title).toBe("Value '0' is not in the list");
-        expect(dropdown.className).toContain('dropdown-invalid');
+        expect(dropdown.className).toContain('compact-dropdown-trigger');
     });
 });