Skip to content

Commit ed9919b

Browse files
edrioukedriouk
committed
Address review comments
1 parent d36b18a commit ed9919b

6 files changed

Lines changed: 117 additions & 38 deletions

File tree

‎src/views/manage-components-packs/view/components/component-pack-manager.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,10 +136,10 @@ export const ComponentPackManager = (props: ComponentProps) => {
136136
options={[{ label: 'Components', value: 'components' }, { label: 'Software packs', value: 'packs' }]}
137137
value={activeView}
138138
onChange={onChangeActiveView} />
139-
<Space align='baseline'>
140-
<div> </div>
139+
<Space align='baseline' style={{ marginLeft: '8px' }}>
141140
<a
142141
title='View list of software packs'
142+
aria-label='View list of software packs'
143143
href={packsUrl}
144144
onClick={(event) => {
145145
event.preventDefault();

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/**
2+
* Copyright 2026 Arm Limited
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import React from 'react';
18+
import { render, fireEvent } from '@testing-library/react';
19+
import '@testing-library/jest-dom';
20+
import { PackTitleLink } from './pack-title-link';
21+
22+
describe('PackTitleLink', () => {
23+
const packId = 'Arm::CMSIS@5.9.0';
24+
const packName = 'Arm::CMSIS';
25+
const packUrl = 'https://www.keil.arm.com/packs/cmsis-arm/';
26+
let openFile: jest.Mock;
27+
28+
beforeEach(() => {
29+
openFile = jest.fn();
30+
});
31+
32+
it('renders the pack name', () => {
33+
const { getByText } = render(
34+
<PackTitleLink packId={packId} packName={packName} openFile={openFile} />
35+
);
36+
expect(getByText(packName)).toBeInTheDocument();
37+
});
38+
39+
it('renders the link with the correct href', () => {
40+
const { getByRole } = render(
41+
<PackTitleLink packId={packId} packName={packName} openFile={openFile} />
42+
);
43+
expect(getByRole('link', { name: 'Open software pack overview' })).toHaveAttribute('href', packUrl);
44+
});
45+
46+
it('calls openFile with the pack URL and external=true on click', () => {
47+
const { getByRole } = render(
48+
<PackTitleLink packId={packId} packName={packName} openFile={openFile} />
49+
);
50+
fireEvent.click(getByRole('link', { name: 'Open software pack overview' }));
51+
expect(openFile).toHaveBeenCalledTimes(1);
52+
expect(openFile).toHaveBeenCalledWith(packUrl, true);
53+
});
54+
55+
it('prevents default navigation on click', () => {
56+
const { getByRole } = render(
57+
<PackTitleLink packId={packId} packName={packName} openFile={openFile} />
58+
);
59+
const link = getByRole('link', { name: 'Open software pack overview' });
60+
const event = fireEvent.click(link);
61+
expect(event).toBe(false); // fireEvent.click returns false when preventDefault is called
62+
});
63+
});

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
* Copyright 2026 Arm Limited
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import React from 'react';
18+
import { CmsisCodicon } from '../../../common/components/cmsis-codicon';
19+
import { packURL } from '../../../../packs/pack-urls';
20+
21+
interface PackTitleLinkProps {
22+
packId: string;
23+
packName: string;
24+
openFile: (link: string, external?: boolean) => void;
25+
}
26+
27+
export const PackTitleLink: React.FC<PackTitleLinkProps> = ({ packId, packName, openFile }) => {
28+
const packUrl = packURL(packId);
29+
return (
30+
<>
31+
{packName}{' '}
32+
<a
33+
title='Open software pack overview'
34+
aria-label='Open software pack overview'
35+
onClick={(e) => {
36+
e.preventDefault();
37+
e.stopPropagation();
38+
openFile(packUrl, true);
39+
}}
40+
href={packUrl}
41+
>
42+
<CmsisCodicon name='link-external' style={{ fontSize: '1em', display: 'inline' }} />
43+
</a>
44+
</>
45+
);
46+
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ describe('PacksView', () => {
206206
);
207207
});
208208

209-
const packLink = localContainer.querySelector("a[title='Open Pack URL']") as HTMLAnchorElement | null;
209+
const packLink = localContainer.querySelector("a[title='Open software pack overview']") as HTMLAnchorElement | null;
210210
expect(packLink).not.toBeNull();
211211

212212
if (packLink) {

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

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@ import { parsePackId } from '../../data/pack-parse';
2525
import { MessageHandler } from '../../../message-handler';
2626
import { IncomingMessage, OutgoingMessage } from '../../messages';
2727
import { PackPropertiesDialog } from './pack-properties';
28-
import { CmsisCodicon } from '../../../common/components/cmsis-codicon';
28+
import { PackTitleLink } from './pack-title-link';
2929
import { ComponentPackTargetSelect } from './component-pack-target-select';
3030
import { buildAllOrigins } from '../helpers/components-packs-helpers';
31-
import { packURL } from '../../../../packs/pack-urls';
31+
3232

3333
const { Search } = Input;
3434

@@ -75,24 +75,7 @@ export const PacksView: React.FC<PacksProps> = ({ state, openFile, messageHandle
7575

7676
const renderPackColumn = (_value: string, record: PackRowDataType) => {
7777
const pack = parsePackId(record.packId);
78-
const packUrl = packURL(record.packId);
79-
const packTitle = (
80-
<>
81-
{record.name}{' '}
82-
<a
83-
title='Open software pack overview'
84-
aria-label='Open software pack overview'
85-
onClick={(e) => {
86-
e.preventDefault();
87-
e.stopPropagation();
88-
openFile(packUrl, true);
89-
}}
90-
href={packUrl}
91-
>
92-
<CmsisCodicon name='link-external' style={{ fontSize: '1em', display: 'inline' }} />
93-
</a>
94-
</>
95-
);
78+
const packTitle = <PackTitleLink packId={record.packId} packName={record.name} openFile={openFile} />;
9679
const referencedFrom = [
9780
<div key='pack-name'>{packTitle}</div>,
9881
...(record.references?.map((ref, index) => {

‎src/views/manage-components-packs/view/components/table-renderers/render-name-cell.tsx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@ import { ComponentRowDataType } from '../../../data/component-tools';
1919
import { Tooltip } from 'antd';
2020
import { validationIds } from './render-warning-cell';
2121
import { EditFilled } from '@ant-design/icons';
22-
import { CmsisCodicon } from '../../../../common/components/cmsis-codicon';
23-
import { packURL } from '../../../../../packs/pack-urls';
22+
import { PackTitleLink } from '../pack-title-link';
2423

2524
/**
2625
* Renders the name cell with a tooltip that shows additional information about the component.
@@ -45,19 +44,7 @@ export const renderNameCell = (value: string, record: ComponentRowDataType, open
4544
: '';
4645

4746
const vids = validationIds(record, undefined, 'name-col');
48-
const packUrl = packURL(record.data.pack);
49-
const packTitle = (
50-
<>
51-
{record.data.pack}{' '}
52-
<a title='Open software pack overview' onClick={(e) => {
53-
e.preventDefault();
54-
e.stopPropagation();
55-
openFile(packUrl, true);
56-
}} href={packUrl}>
57-
<CmsisCodicon name='link-external' style={{ fontSize: '1em', display: 'inline' }} />
58-
</a>
59-
</>
60-
);
47+
const packTitle = <PackTitleLink packId={record.data.pack} packName={record.data.pack} openFile={openFile} />;
6148

6249
const tooltTipContent = (
6350
<div>

0 commit comments

Comments
 (0)