fix(help-panel): use client-side nav for internal links

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',
   }),
 }));

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<APIDoc[]> => {
 
 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<HTMLAnchorElement>) => {
+    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 }) => {
             <Button
               variant="link"
               component="a"
-              href={getConsoleDocsUrl()}
+              href={path}
+              onClick={handleClick}
               isInline
               className="pf-v6-u-text-align-left pf-v6-u-p-0"
             >
@@ -303,6 +332,7 @@ const APIPanelContent: React.FC<{
 }> = ({ setNewActionTitle }) => {
   const intl = useIntl();
   const chrome = useChrome();
+  const navigateKeepPanel = useNavigateKeepPanel();
   const [activeToggle, setActiveToggle] = useState<string>('all');
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(10);
@@ -436,6 +466,19 @@ const APIPanelContent: React.FC<{
             variant="link"
             component="a"
             href="/docs/api"
+            onClick={(event: React.MouseEvent<HTMLAnchorElement>) => {
+              if (
+                event.button !== 0 ||
+                event.metaKey ||
+                event.ctrlKey ||
+                event.shiftKey ||
+                event.altKey
+              ) {
+                return;
+              }
+              event.preventDefault();
+              navigateKeepPanel('/docs/api');
+            }}
             data-ouia-component-id="help-panel-api-docs-link"
             isInline
           >

src/components/HelpPanel/HelpPanelTabs/LearnPanel.tsx

@@ -30,6 +30,7 @@ import {
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
 import { suspenseLoader as useSuspenseLoader } from '@redhat-cloud-services/frontend-components-utilities/useSuspenseLoader';
 import fetchAllData from '../../../utils/fetchAllData';
+import useNavigateKeepPanel from '../../../hooks/useNavigateKeepPanel';
 import { ExtendedQuickstart } from '../../../utils/fetchQuickstarts';
 import {
   BookmarkedIcon,
@@ -176,6 +177,7 @@ const LearnPanelContent: React.FC<{
 }) => {
   const intl = useIntl();
   const chrome = useChrome();
+  const navigateKeepPanel = useNavigateKeepPanel();
   const { loader, purgeCache } = useSuspenseLoader(fetchAllData);
 
   const CONTENT_TYPE_OPTIONS = [
@@ -655,6 +657,19 @@ const LearnPanelContent: React.FC<{
                 variant="link"
                 component="a"
                 href="/learning-resources?tab=all"
+                onClick={(event: React.MouseEvent<HTMLAnchorElement>) => {
+                  if (
+                    event.button !== 0 ||
+                    event.metaKey ||
+                    event.ctrlKey ||
+                    event.shiftKey ||
+                    event.altKey
+                  ) {
+                    return;
+                  }
+                  event.preventDefault();
+                  navigateKeepPanel('/learning-resources?tab=all');
+                }}
                 isInline
                 iconPosition="end"
               >