Add links to component view and genral ones

Author: edriouk

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

@@ -18,14 +18,16 @@ import '../../../common/style/antd-overrides.css';
 import './component-pack-manager.css';
 import * as React from 'react';
 import { initialState, componentsReducer as componentsReducer } from '../state/reducer';
-import { ConfigProvider, theme, Row, Col, Button, Segmented } from 'antd';
+import { ConfigProvider, theme, Row, Col, Button, Segmented, Space } from 'antd';
 import { ComponentRowDataType, ComponentScope } from '../../data/component-tools';
 import { ComponentProps } from './component-props';
 import { filterTree } from '../helpers/components-packs-helpers';
 import { flatTree } from '../../data/component-tree';
 import { ComponentsView } from './components-view';
 import { PacksView } from './packs-view';
 import { useVSCodeTheme } from '../../../hooks/use-vscode-theme';
+import { CmsisCodicon } from '../../../common/components/cmsis-codicon';
+import { packURL } from '../../../../packs/pack-urls';
 
 // Import the necessary components and types from Ant Design
 
@@ -105,6 +107,8 @@ export const ComponentPackManager = (props: ComponentProps) => {
         messageHandler.push({ type: 'APPLY_COMPONENT_SET' });
     };
 
+    const packsUrl = packURL(undefined);
+
     return (
         <React.StrictMode>
             <div className='components-packs-view-root'>
@@ -132,6 +136,20 @@ export const ComponentPackManager = (props: ComponentProps) => {
                                     options={[{ label: 'Components', value: 'components' }, { label: 'Software packs', value: 'packs' }]}
                                     value={activeView}
                                     onChange={onChangeActiveView} />
+                                <Space align='baseline'>
+                                    <div> </div>
+                                    <a
+                                        title='View list of software packs'
+                                        href={packsUrl}
+                                        onClick={(event) => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            openFile(packsUrl, true);
+                                        }}
+                                    >
+                                        <CmsisCodicon name='link-external' style={{ fontSize: '1em' }} />
+                                    </a>
+                                </Space>
                             </Col>
                             <Col flex={'auto'}>
                                 <Segmented

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

@@ -77,18 +77,17 @@ export const PacksView: React.FC<PacksProps> = ({ state, openFile, messageHandle
             const pack = parsePackId(record.packId);
             const packUrl = packURL(record.packId);
             const packTitle = (
-                <span>
-                    {record.name}
-                    <a title='Open Pack URL' onClick={(e) => {
+                <>
+                    {record.name}{' '}
+                    <a title='Open software pack overview' onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
                         openFile(packUrl, true);
                     }} href={packUrl}>
-                        <CmsisCodicon name='link-external' />
+                        <CmsisCodicon name='link-external' style={{ fontSize: '1em', display: 'inline' }} />
                     </a>
-                </span>
+                </>
             );
-
             const referencedFrom = [
                 <div key='pack-name'>{packTitle}</div>,
                 ...(record.references?.map((ref, index) => {

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

@@ -19,6 +19,8 @@ import { ComponentRowDataType } from '../../../data/component-tools';
 import { Tooltip } from 'antd';
 import { validationIds } from './render-warning-cell';
 import { EditFilled } from '@ant-design/icons';
+import { CmsisCodicon } from '../../../../common/components/cmsis-codicon';
+import { packURL } from '../../../../../packs/pack-urls';
 
 /**
  * Renders the name cell with a tooltip that shows additional information about the component.
@@ -43,12 +45,25 @@ export const renderNameCell = (value: string, record: ComponentRowDataType, open
             : '';
 
     const vids = validationIds(record, undefined, 'name-col');
+    const packUrl = packURL(record.data.pack);
+    const packTitle = (
+        <>
+            {record.data.pack}{' '}
+            <a title='Open software pack overview' onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                openFile(packUrl, true);
+            }} href={packUrl}>
+                <CmsisCodicon name='link-external' style={{ fontSize: '1em', display: 'inline' }} />
+            </a>
+        </>
+    );
 
     const tooltTipContent = (
         <div>
             <ul style={{ paddingLeft: '30px' }}>
                 <li>{record.api ? 'API' : 'component'}: {record.data.id}</li>
-                {record.data.pack && <li>from pack: {record.data.pack}</li>}
+                {record.data.pack && <li>from pack: {packTitle} </li>}
                 {allLeafs !== 0 && <li>selected: {selectedLeafs} of {allLeafs}</li>}
                 {selectedCount > 0 && (<li>in: <a title='Edit File' onClick={() => openFile(record.aggregate.options?.layer || '', false, 'components:')} ><EditFilled /></a> ./{record.aggregate.options?.layer}</li>)}
                 {vids.length > 0 && (