Restore '>>' in MC panel's counterexample to navigate to the linked action (#481)

* Restore '>>' in MC panel's counterexample to navigate to the linked action

Signed-off-by: Federico Ponzi <[email protected]>

* Add a regression test

Signed-off-by: Federico Ponzi <[email protected]>

---------

Signed-off-by: Federico Ponzi <[email protected]>

Author: FedericoPonzi

package-lock.json

@@ -21,15 +21,18 @@ const tableCellClass = (alignRight: boolean) =>
 
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-export const VSCodeLink = React.memo(({children, style, className, ...rest}: ButtonProps) => (
-    <button
-        type="button"
-        className={className}
-        style={{...baseLinkStyle, ...style}}
-        {...rest}>
-        {children}
-    </button>
-));
+export const VSCodeLink = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({children, style, className, ...rest}: ButtonProps, ref) => (
+        <button
+            ref={ref}
+            type="button"
+            className={className}
+            style={{...baseLinkStyle, ...style}}
+            {...rest}>
+            {children}
+        </button>
+    )
+);
 
 export const EmptyLine = () => <div style={{marginTop: '1em'}}/>;
 
@@ -47,33 +50,35 @@ export const CodePositionLink = React.memo(({line, filepath, position}: CodePosi
     }
 
     const location = {'line': position.line, 'character': position.character};
-    const stopEvent = (event: React.MouseEvent<HTMLButtonElement>) => {
-        event.preventDefault();
-        event.stopPropagation();
-        const nativeEvent = event.nativeEvent as {stopImmediatePropagation?: () => void};
-        nativeEvent.stopImmediatePropagation?.();
-    };
-
-    const openFileAtLocation = (event: React.MouseEvent<HTMLButtonElement>) => {
-        stopEvent(event);
-        const treeItem = event.currentTarget.closest('vscode-tree-item') as HTMLElement & {open?: boolean} | null;
-        if (treeItem) {
-            if (typeof treeItem.open === 'boolean') {
-                treeItem.open = true;
-            } else {
-                treeItem.setAttribute('open', '');
-            }
+    const buttonRef = React.useRef<HTMLButtonElement>(null);
+
+    React.useEffect(() => {
+        const button = buttonRef.current;
+        if (!button) {
+            return;
         }
-        vscode.openFile(filepath, location);
-    };
-    const handleMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => stopEvent(event);
-    const handleClickCapture = (event: React.MouseEvent<HTMLButtonElement>) => stopEvent(event);
+
+        const handleNativeClick = (event: MouseEvent) => {
+            event.preventDefault();
+            event.stopPropagation();
+
+            const treeItem = button.closest('vscode-tree-item') as HTMLElement & {open?: boolean} | null;
+            if (treeItem) {
+                if (typeof treeItem.open === 'boolean') {
+                    treeItem.open = true;
+                } else {
+                    treeItem.setAttribute('open', '');
+                }
+            }
+            vscode.openFile(filepath, location);
+        };
+
+        button.addEventListener('click', handleNativeClick, true);
+        return () => button.removeEventListener('click', handleNativeClick, true);
+    }, [filepath, position.line, position.character]);
+
     return (
-        <VSCodeLink
-            onClick={openFileAtLocation}
-            onClickCapture={handleClickCapture}
-            onMouseDown={handleMouseDown}
-            onPointerDown={handleMouseDown}>
+        <VSCodeLink ref={buttonRef}>
             {line}
         </VSCodeLink>
     );

src/webview/checkResultView/common.tsx

@@ -36,6 +36,7 @@
   <script>
     (function () {
       const messages = [];
+      window.__testMessages = messages; // Expose for Playwright tests
       let state = undefined;
       window.acquireVsCodeApi = function () {
         return {

tests/fixtures/playwright/public/index.html

@@ -18,6 +18,41 @@ const test = base.extend<Fixtures>({
 });
 
 test.describe('Check Result webview fixture', () => {
+    test('action link click posts openFile message without toggling tree-item', async ({ page, fixtureServer }) => {
+        await page.goto(fixtureServer.endpoint, { waitUntil: 'networkidle' });
+        await page.addStyleTag({
+            content: '* { transition-duration: 0s !important; animation-duration: 0s !important; }'
+        });
+
+        const state = page.locator('vscode-tree-item#state-1');
+        await state.waitFor({ state: 'visible' });
+
+        // Clear any existing messages and record the initial state
+        await page.evaluate(() => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (window as any).__testMessages.length = 0;
+        });
+        const openBefore = await state.evaluate((el: Element) => el.hasAttribute('open'));
+        expect(openBefore).toBe(true);
+
+        // Click the action link (">>" button)
+        const actionLink = page.locator('vscode-tree-item#state-1 .error-trace-title button');
+        await expect(actionLink).toHaveCount(1);
+        await actionLink.click();
+
+        // Verify: openFile message was posted
+        const messages = await page.evaluate(() => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return (window as any).__testMessages as Array<{ command: string }>;
+        });
+        const openFileMsg = messages.find((m: { command: string }) => m.command === 'openFile');
+        expect(openFileMsg).toBeDefined();
+
+        // Verify: Tree-item should still be open (not toggled/collapsed)
+        const openAfter = await state.evaluate((el: Element) => el.hasAttribute('open'));
+        expect(openAfter).toBe(openBefore);
+    });
+
     test('error trace tree wraps text and link does not collapse state', async ({ page, fixtureServer }) => {
         page.on('console', msg => {
             if (msg.type() === 'error') {