Merge branch 'main' into fix/compact-dropdown-anchor-hidden-in-cell

Author: arneschmid

src/views/manage-components-packs/view/components/pack-title-link.test.tsx

@@ -36,13 +36,6 @@ describe('PackTitleLink', () => {
         expect(getByText(packName)).toBeInTheDocument();
     });
 
-    it('renders the link with the correct href', () => {
-        const { getByRole } = render(
-            <PackTitleLink packId={packId} packName={packName} openFile={openFile} />
-        );
-        expect(getByRole('link', { name: 'Open pack URL' })).toHaveAttribute('href', packUrl);
-    });
-
     it('calls openFile with the pack URL and external=true on click', () => {
         const { getByRole } = render(
             <PackTitleLink packId={packId} packName={packName} openFile={openFile} />
@@ -51,13 +44,4 @@ describe('PackTitleLink', () => {
         expect(openFile).toHaveBeenCalledTimes(1);
         expect(openFile).toHaveBeenCalledWith(packUrl, true);
     });
-
-    it('prevents default navigation on click', () => {
-        const { getByRole } = render(
-            <PackTitleLink packId={packId} packName={packName} openFile={openFile} />
-        );
-        const link = getByRole('link', { name: 'Open pack URL' });
-        const event = fireEvent.click(link);
-        expect(event).toBe(false); // fireEvent.click returns false when preventDefault is called
-    });
 });

src/views/manage-components-packs/view/components/pack-title-link.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Space } from 'antd';
+import { Button, Space } from 'antd';
 import { CmsisCodicon } from '../../../common/components/cmsis-codicon';
 import { packURL } from '../../../../packs/pack-urls';
 
@@ -35,18 +35,20 @@ export const PackTitleLink: React.FC<PackTitleLinkProps> = ({
         <>
             {packName ?? ''}
             <Space align='baseline' style={{ marginLeft: '8px' }}>
-                <a
+                <Button
+                    color="default"
+                    variant="link"
+                    role="link"
+                    style={{ padding: '0px 12px' }}
                     title={packUrl}
                     aria-label='Open pack URL'
                     onClick={(e) => {
-                        e.preventDefault();
                         e.stopPropagation();
                         openFile(packUrl, true);
                     }}
-                    href={packUrl}
                 >
                     <CmsisCodicon name='link-external' style={{ fontSize: '1em', display: 'inline' }} />
-                </a>
+                </Button>
             </Space>
         </>
     );

src/views/manage-components-packs/view/components/packs-view.test.tsx

@@ -206,7 +206,7 @@ describe('PacksView', () => {
                 );
             });
 
-            const packLink = localContainer.querySelector("a[aria-label='Open pack URL']") as HTMLAnchorElement | null;
+            const packLink = localContainer.querySelector("button[aria-label='Open pack URL']") as HTMLButtonElement | null;
             expect(packLink).not.toBeNull();
 
             if (packLink) {

src/views/manage-solution/manage-solution-webview-main.ts

@@ -218,7 +218,7 @@ export class ManageSolutionWebviewMain {
 
     private async openFile(filePath: string, openExternal?: boolean): Promise<void> {
         const solutionDir = this.getSolutionDir();
-        const resolvedPath = !path.isAbsolute(filePath) && solutionDir
+        const resolvedPath = (!path.isAbsolute(filePath) && solutionDir) && !filePath.match(/^http.:\/\//)
             ? path.join(solutionDir, filePath)
             : filePath;
         if (openExternal) {
@@ -234,7 +234,7 @@ export class ManageSolutionWebviewMain {
                 await this.sendContextData();
                 break;
             case 'OPEN_FILE':
-                await this.openFile(message.path);
+                await this.openFile(message.path, message.external);
                 break;
             case 'SET_SELECTED_CONTEXTS':
                 await this.setSelectedContexts(message.data);

src/views/manage-solution/messages.ts

@@ -24,7 +24,7 @@ import { ActiveTargetSet, SolutionData } from './view/state/manage-solution-stat
 export type OutgoingMessage
     = { type: 'GET_CONTEXT_SELECTION_DATA' }
     | { type: 'SET_SELECTED_TARGET', target: string, set: string | undefined }
-    | { type: 'OPEN_FILE', path: string }
+    | { type: 'OPEN_FILE', path: string, external?: boolean }
     | { type: 'SET_SELECTED_CONTEXTS', data: SolutionData }
     | { type: 'GET_DEBUG_ADAPTERS' }
     | { type: 'SET_DEBUGGER', name: string }

src/views/manage-solution/view/components/manage-solution.test.tsx

@@ -181,10 +181,10 @@ describe('ContextSelection', () => {
 
         postGenericDataContext();
 
-        const selectors = ['a[title="Active Target"]',
+        const selectors = ['button[aria-label="Active Target"]',
             '.open-csolution-yml',
-            'a[title="Configure Related Projects"]',
-            'a[title="Debugger Configuration"]'];
+            'button[aria-label="Configure Related Projects"]',
+            'button[aria-label="Debug Adapter Configuration"]'];
 
         React.act(() => {
             for (const selector of selectors) {
@@ -194,7 +194,7 @@ describe('ContextSelection', () => {
                 }
             }
 
-            expect(listener).toHaveBeenCalledTimes(4);
+            expect(listener).toHaveBeenCalledTimes(6);
             expect(listener).toHaveBeenCalledWith({ type: 'OPEN_HELP' });
             expect(listener).toHaveBeenCalledWith({ type: 'GET_CONTEXT_SELECTION_DATA' });
             expect(listener).toHaveBeenCalledWith({ type: 'GET_DEBUG_ADAPTERS' });

src/views/manage-solution/view/components/manage-solution.tsx

@@ -84,7 +84,7 @@ export const ManageSolution = (props: ManageSolutionProps) => {
     }, [props.messageHandler]);
 
     const openFile = React.useCallback(
-        (path: string) => props.messageHandler.push({ type: 'OPEN_FILE', path }),
+        (path: string, external?: boolean) => props.messageHandler.push({ type: 'OPEN_FILE', path, external }),
         [props.messageHandler]
     );
 
@@ -280,6 +280,23 @@ export const ManageSolution = (props: ManageSolutionProps) => {
 
     const showCoreSelector = state.solutionData.availableCoreNames !== undefined && state.solutionData.availableCoreNames.length > 1;
 
+    const externalLink = (link: string, title: string, external?: boolean): React.JSX.Element => {
+        return (<Button
+            color="default"
+            variant="link"
+            style={{ padding: '0px 12px' }}
+            title={title}
+            aria-label={title}
+            onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                openFile(link, external);
+            }}
+        >
+            <CmsisCodicon name='link-external' style={{ fontSize: '1em', display: 'inline' }} />
+        </Button>);
+    };
+
     return (
         <React.StrictMode>
             <div className="manage-solution-frame">
@@ -302,7 +319,16 @@ export const ManageSolution = (props: ManageSolutionProps) => {
                             <section className="targets-section">
                                 <div className='manage-solution-header'>
                                     <h3>Active Target</h3>
-                                    <a onClick={() => openHelp()} title="Active Target" className="codicon codicon-link-external codicon-fix-size-sub"></a>
+                                    <Button
+                                        color="default"
+                                        variant="link"
+                                        style={{ padding: '0px 12px' }}
+                                        title="Active Target"
+                                        aria-label='Active Target'
+                                        onClick={() => openHelp()}
+                                    >
+                                        <CmsisCodicon name='link-external' style={{ fontSize: '1em', display: 'inline' }} />
+                                    </Button>
                                 </div>
                                 <div>
                                     Select target for build, load, and debug. The Target
@@ -319,7 +345,7 @@ export const ManageSolution = (props: ManageSolutionProps) => {
                             <section className="projects-section">
                                 <div className='manage-solution-header'>
                                     <h3>Projects and Images for Target {state.solutionData.selectedTarget?.name}{state.solutionData.selectedTarget?.selectedSet && `@${state.solutionData.selectedTarget?.selectedSet}`}</h3>
-                                    <a title="Configure Related Projects" href="https://open-cmsis-pack.github.io/cmsis-toolbox/build-overview/#configure-related-projects" className="codicon codicon-link-external codicon-fix-size-sub"></a>
+                                    {externalLink('https://open-cmsis-pack.github.io/cmsis-toolbox/build-overview/#configure-related-projects', 'Configure Related Projects', true)}
                                 </div>
                                 <ProjectsTable
                                     projects={state.solutionData.projects}
@@ -336,7 +362,7 @@ export const ManageSolution = (props: ManageSolutionProps) => {
                             <section className="debug-adapter">
                                 <div className='manage-solution-header'>
                                     <h3>Debug Adapter for Target {state.solutionData.selectedTarget?.name}{state.solutionData.selectedTarget?.selectedSet && `@${state.solutionData.selectedTarget?.selectedSet}`}</h3>
-                                    <a title="Debugger Configuration" href="https://open-cmsis-pack.github.io/cmsis-toolbox/YML-Input-Format/#debugger-configuration" className="codicon codicon-link-external codicon-fix-size-sub"></a>
+                                    {externalLink('https://open-cmsis-pack.github.io/cmsis-toolbox/debugging/#debug-adapter-configuration', 'Debug Adapter Configuration', true)}
                                 </div>
 
                                 <table>