diff --git a/src/components/HelpPanel/HelpPanelTabs/APIPanel.test.tsx b/src/components/HelpPanel/HelpPanelTabs/APIPanel.test.tsx index 2c4716f2..f1d75c77 100644 --- a/src/components/HelpPanel/HelpPanelTabs/APIPanel.test.tsx +++ b/src/components/HelpPanel/HelpPanelTabs/APIPanel.test.tsx @@ -36,6 +36,7 @@ jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({ getBundleData: () => ({ bundleId: 'insights' }), getAvailableBundles: () => [{ id: 'insights', title: 'RHEL' }], chromeHistory: { push: jest.fn(), replace: jest.fn() }, + drawerActions: { setDrawerPanelContent: jest.fn() }, getEnvironment: () => 'prod', }), })); diff --git a/src/components/HelpPanel/HelpPanelTabs/APIPanel.tsx b/src/components/HelpPanel/HelpPanelTabs/APIPanel.tsx index 24543023..a72e1032 100644 --- a/src/components/HelpPanel/HelpPanelTabs/APIPanel.tsx +++ b/src/components/HelpPanel/HelpPanelTabs/APIPanel.tsx @@ -31,6 +31,7 @@ import { fetchBundles, } from '../../../utils/fetchBundleInfoAPI'; import { getBundleDisplayName } from '../../../utils/bundleUtils'; +import useNavigateKeepPanel from '../../../hooks/useNavigateKeepPanel'; interface APIDoc { name: string; @@ -252,10 +253,37 @@ const mapBundleInfoWithTitles = async (): Promise => { const APIResourceItem: React.FC<{ resource: APIDoc }> = ({ resource }) => { const chrome = useChrome(); + const navigateKeepPanel = useNavigateKeepPanel(); - const getConsoleDocsUrl = () => { - const environment = chrome.getEnvironment(); - return convertToConsoleDocsUrl(resource.name, resource.url, environment); + const environment = chrome.getEnvironment(); + const fullUrl = convertToConsoleDocsUrl( + resource.name, + resource.url, + environment + ); + + const path = (() => { + try { + const url = new URL(fullUrl); + return `${url.pathname}${url.search}${url.hash}`; + } catch { + return fullUrl; + } + })(); + + const handleClick = (event: React.MouseEvent) => { + if ( + event.button !== 0 || + event.metaKey || + event.ctrlKey || + event.shiftKey || + event.altKey + ) { + return; + } + + event.preventDefault(); + navigateKeepPanel(path); }; return ( @@ -274,7 +302,8 @@ const APIResourceItem: React.FC<{ resource: APIDoc }> = ({ resource }) => {