Fixing techdocs linking issue during dom link overwrites.

Signed-off-by: Aramis Sennyey <sennyeya@amazon.com>

plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx

@@ -18,7 +18,11 @@ import { act } from '@testing-library/react';
 import { scmIntegrationsApiRef } from '@backstage/integration-react';
 
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
-import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
+import {
+  MockConfigApi,
+  renderInTestApp,
+  TestApiProvider,
+} from '@backstage/test-utils';
 
 import { techdocsApiRef, techdocsStorageApiRef } from '../../../api';
 
@@ -31,6 +35,7 @@ import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
 import { FlatRoutes } from '@backstage/core-app-api';
 
 import { Page } from '@backstage/core-components';
+import { configApiRef } from '@backstage/core-plugin-api';
 
 const mockEntityMetadata = {
   locationMetadata: {
@@ -80,11 +85,18 @@ jest.mock('@backstage/core-components', () => ({
   Page: jest.fn(),
 }));
 
+const configApi = new MockConfigApi({
+  app: {
+    baseUrl: 'http://localhost:3000',
+  },
+});
+
 const Wrapper = ({ children }: { children: React.ReactNode }) => {
   return (
     <TestApiProvider
       apis={[
         [scmIntegrationsApiRef, {}],
+        [configApiRef, configApi],
         [techdocsApiRef, techdocsApiMock],
         [techdocsStorageApiRef, techdocsStorageApiMock],
       ]}

plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx

@@ -15,7 +15,6 @@
  */
 
 import { useCallback, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import { useTheme, useMediaQuery } from '@material-ui/core';
 
@@ -47,6 +46,7 @@ import {
   useSanitizerTransformer,
   useStylesTransformer,
 } from '../../transformers';
+import { useNavigateUrl } from '@backstage/core-app-api';
 
 const MOBILE_MEDIA_QUERY = 'screen and (max-width: 76.1875em)';
 
@@ -58,7 +58,7 @@ const MOBILE_MEDIA_QUERY = 'screen and (max-width: 76.1875em)';
 export const useTechDocsReaderDom = (
   entityRef: CompoundEntityRef,
 ): Element | null => {
-  const navigate = useNavigate();
+  const navigate = useNavigateUrl();
   const theme = useTheme<BackstageTheme>();
   const isMobileMedia = useMediaQuery(MOBILE_MEDIA_QUERY);
   const sanitizerTransformer = useSanitizerTransformer();
@@ -176,7 +176,6 @@ export const useTechDocsReaderDom = (
             // detect if CTRL or META keys are pressed so that links can be opened in a new tab with `window.open`
             const modifierActive = event.ctrlKey || event.metaKey;
             const parsedUrl = new URL(url);
-            const fullPath = `${parsedUrl.pathname}${parsedUrl.search}${parsedUrl.hash}`;
 
             // capture link clicks within documentation
             const linkText =
@@ -187,9 +186,9 @@ export const useTechDocsReaderDom = (
             // hash exists when anchor is clicked on secondary sidebar
             if (parsedUrl.hash) {
               if (modifierActive) {
-                window.open(fullPath, '_blank');
+                window.open(url, '_blank');
               } else {
-                navigate(fullPath);
+                navigate(url);
                 // Scroll to hash if it's on the current page
                 transformedElement
                   ?.querySelector(`[id="${parsedUrl.hash.slice(1)}"]`)
@@ -197,9 +196,9 @@ export const useTechDocsReaderDom = (
               }
             } else {
               if (modifierActive) {
-                window.open(fullPath, '_blank');
+                window.open(url, '_blank');
               } else {
-                navigate(fullPath);
+                navigate(url);
               }
             }
           },