fix(TitleColumn): Use react router Link

InsightsLink is not fully working in scenarios where the Link is in another applications.
RedHatInsights · Nov 23, 2023 · 0664aba · 0664aba
1 parent 228d183
commit 0664aba
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/src/components/InventoryTable/TitleColumn.js b/src/components/InventoryTable/TitleColumn.js
@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import Link from '@redhat-cloud-services/frontend-components/InsightsLink';
+import { Link } from 'react-router-dom';
 
 /**
  * Helper function to proprly calculate what to do when user clicks on first cell.
@@ -39,9 +39,8 @@ const TitleColumn = ({ children, id, item, ...props }) => (
         children
       ) : (
         <Link
-          to={item?.href || id}
+          to={item?.href || item?.to || id}
           {...{
-            ...(!item?.href ? { app: 'inventory' } : {}),
             ...(props?.onRowClick
               ? {
                   onClick: (event) => {

diff --git a/src/components/InventoryTable/TitleColumn.test.js b/src/components/InventoryTable/TitleColumn.test.js
@@ -4,7 +4,7 @@ import { act, fireEvent, render } from '@testing-library/react';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
-  Link: ({ children, ...props }) => <a {...props}>{children}</a>, // eslint-disable-line
+  Link: ({ children, ...props }) => <a class="fakeLink" {...props}>{children}</a>, // eslint-disable-line
 }));
 
 describe('TitleColumn', () => {
@@ -40,6 +40,16 @@ describe('TitleColumn', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  it('should render correctly with to', () => {
+    const { asFragment } = render(
+      <TitleColumn id="testId" item={{ to: { pathname: '/link/to/item' } }}>
+        something
+      </TitleColumn>
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   it('should render correctly no detail with data', () => {
     const { asFragment } = render(
       <TitleColumn

diff --git a/src/components/InventoryTable/__snapshots__/TitleColumn.test.js.snap b/src/components/InventoryTable/__snapshots__/TitleColumn.test.js.snap
@@ -26,7 +26,7 @@ exports[`TitleColumn should render correctly with NO data 1`] = `
       class=""
     >
       <a
-        to=""
+        class="fakeLink"
       />
     </div>
   </div>
@@ -42,6 +42,7 @@ exports[`TitleColumn should render correctly with data 1`] = `
       class=""
     >
       <a
+        class="fakeLink"
         to="testId"
       >
         something
@@ -60,7 +61,8 @@ exports[`TitleColumn should render correctly with href 1`] = `
       class=""
     >
       <a
-        to="///link/to/item"
+        class="fakeLink"
+        to="/link/to/item"
       >
         something
       </a>
@@ -81,6 +83,7 @@ exports[`TitleColumn should render correctly with os_release 1`] = `
       class=""
     >
       <a
+        class="fakeLink"
         to="testId"
       >
         something
@@ -89,3 +92,22 @@ exports[`TitleColumn should render correctly with os_release 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`TitleColumn should render correctly with to 1`] = `
+<DocumentFragment>
+  <div
+    class="ins-composed-col sentry-mask data-hj-suppress"
+  >
+    <div
+      class=""
+    >
+      <a
+        class="fakeLink"
+        to="[object Object]"
+      >
+        something
+      </a>
+    </div>
+  </div>
+</DocumentFragment>
+`;