feat(TitleColumn): RHINENG-3112 - Allow passing in a link via href pr…

…op (#2087) * feat(TitleColumn): RHINENG-3112 - Allow passing in a link via href prop * fix(TitleColumn): Use react router Link InsightsLink is not fully working in scenarios where the Link is in another applications.
RedHatInsights · Nov 23, 2023 · f4a9b0d · f4a9b0d
1 parent 36d8403
commit f4a9b0d
Show file tree

Hide file tree

Showing 13 changed files with 308 additions and 238 deletions.
diff --git a/src/components/ImmutableDevices/ImmutableDevices.cy.js b/src/components/ImmutableDevices/ImmutableDevices.cy.js
@@ -174,8 +174,8 @@ describe('ImmutableDevices', () => {
 
     cy.get('td[data-label="Name"]')
       .first()
-      .find('.ins-composed-col > :nth-child(2) > a')
-      .trigger('click');
+      .find('.ins-composed-col > div > a')
+      .click();
 
     cy.get('#mock-detail-page');
   });

diff --git a/src/components/ImmutableDevices/ImmutableDevices.js b/src/components/ImmutableDevices/ImmutableDevices.js
@@ -4,7 +4,6 @@ import React, { useEffect } from 'react';
 import { TableVariant } from '@patternfly/react-table';
 import { InventoryTable } from '../InventoryTable';
 import useFeatureFlag from '../../Utilities/useFeatureFlag';
-import { useNavigate } from 'react-router-dom';
 import { edgeColumns } from './columns';
 
 const ImmutableDevices = ({
@@ -22,7 +21,6 @@ const ImmutableDevices = ({
   ...props
 }) => {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
   const inventoryGroupsEnabled = useFeatureFlag('hbi.ui.inventory-groups');
 
   const totalItems = useSelector(({ entities }) => entities?.total);
@@ -44,10 +42,6 @@ const ImmutableDevices = ({
     return [...mergeAppColumns(filteredColumns), ...edgeColumns];
   };
 
-  const onRowClick = (_key, systemId) => {
-    navigate(`/insights/inventory/${systemId}?appName=vulnerabilities`);
-  };
-
   return (
     <InventoryTable
       initialLoading
@@ -73,7 +67,6 @@ const ImmutableDevices = ({
       getEntities={getEntities}
       filterConfig={filterConfig}
       activeFiltersConfig={activeFiltersConfig}
-      onRowClick={onRowClick}
       showTags
       onRefresh={onRefresh}
       actionsConfig={actionsConfig}

diff --git a/src/components/InventoryTable/EntityTable.js b/src/components/InventoryTable/EntityTable.js
@@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { selectEntity, setSort } from '../../store/actions';
 import { useDispatch, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
 import {
   Table as PfTable,
   TableBody,
@@ -15,7 +14,7 @@ import { SkeletonTable } from '@redhat-cloud-services/frontend-components/Skelet
 import NoEntitiesFound from './NoEntitiesFound';
 import { createColumns, createRows } from './helpers';
 import useColumns from './hooks/useColumns';
-import useInsightsNavigate from '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate/useInsightsNavigate';
+
 /**
  * The actual (PF)table component. It calculates each cell and every table property.
  * It uses rows, columns and loaded from redux to show correct data.
@@ -43,15 +42,13 @@ const EntityTable = ({
   columnsCounter,
 }) => {
   const dispatch = useDispatch();
-  const location = useLocation();
   const columns = useColumns(
     columnsProp,
     disableDefaultColumns,
     showTags,
     columnsCounter
   );
   const rows = useSelector(({ entities: { rows } }) => rows);
-  const navigate = useInsightsNavigate();
   const onItemSelect = (_event, checked, rowId) => {
     const row = isExpandable ? rows[rowId / 2] : rows[rowId];
     dispatch(selectEntity(rowId === -1 ? 0 : row.id, checked));
@@ -70,14 +67,6 @@ const EntityTable = ({
     [loaded, columns, hasItems, rows, isExpandable]
   );
 
-  const defaultRowClick = (_event, key) => {
-    navigate(
-      `${location.pathname}${
-        location.pathname.slice(-1) === '/' ? '' : '/'
-      }${key}`
-    );
-  };
-
   const tableSortBy = {
     index:
       columns?.findIndex(
@@ -110,7 +99,7 @@ const EntityTable = ({
               actions,
               expandable,
               loaded,
-              onRowClick: onRowClick || defaultRowClick,
+              onRowClick,
               noDetail,
               sortBy,
               noSystemsTable,

diff --git a/src/components/InventoryTable/EntityTable.test.js b/src/components/InventoryTable/EntityTable.test.js
@@ -2,6 +2,10 @@
 /* eslint-disable camelcase */
 /* eslint-disable react/display-name */
 import React from 'react';
+import {
+  fireEvent,
+  render as rederWithTestingLibrary,
+} from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import EntityTable from './EntityTable';
 import { mount, render } from 'enzyme';
@@ -34,7 +38,16 @@ describe('EntityTable', () => {
           },
         ],
         columns: [
-          { key: 'one', sortKey: 'one', title: 'One', renderFunc: TitleColumn },
+          {
+            key: 'one',
+            sortKey: 'one',
+            title: 'One',
+            renderFunc: (display_name, id, item, props) => (
+              <TitleColumn {...{ ...props, id, item }}>
+                {display_name}
+              </TitleColumn>
+            ),
+          },
         ],
         page: 1,
         perPage: 50,
@@ -636,31 +649,23 @@ describe('EntityTable', () => {
 
   describe('API', () => {
     jest.mock('../../Utilities/useFeatureFlag');
-    it('should call default onRowClick', () => {
-      // const history = createMemoryHistory();
-      // const store = mockStore(initialState);
-      // const wrapper = mount(
-      //   <MemoryRouter history={history}>
-      //     <Provider store={store}>
-      //       <EntityTable loaded disableDefaultColumns />
-      //     </Provider>
-      //   </MemoryRouter>
-      // );
-      // wrapper.find('table tbody tr a[widget="col"]').first().simulate('click');
-      // expect(history.location.pathname).toBe('/testing-id');
-    });
 
     it('should call onRowClick', () => {
       const onRowClick = jest.fn();
       const store = mockStore(initialState);
-      const wrapper = mount(
+      const { container } = rederWithTestingLibrary(
         <MemoryRouter>
           <Provider store={store}>
             <EntityTable loaded disableDefaultColumns onRowClick={onRowClick} />
           </Provider>
         </MemoryRouter>
       );
-      wrapper.find('table tbody tr a[widget="col"]').first().simulate('click');
+
+      const link = container.querySelector('table tbody tr a');
+      act(() => {
+        fireEvent.click(link);
+      });
+
       expect(onRowClick).toHaveBeenCalled();
     });
 

diff --git a/src/components/InventoryTable/EntityTableToolbar.test.js b/src/components/InventoryTable/EntityTableToolbar.test.js
@@ -42,7 +42,17 @@ describe('EntityTableToolbar', () => {
             one: 'data',
           },
         ],
-        columns: [{ key: 'one', title: 'One', renderFunc: TitleColumn }],
+        columns: [
+          {
+            key: 'one',
+            title: 'One',
+            renderFunc: (display_name, id, item, props) => (
+              <TitleColumn {...{ ...props, id, item }}>
+                {display_name}
+              </TitleColumn>
+            ),
+          },
+        ],
         page: 1,
         perPage: 50,
         total: 500,

diff --git a/src/components/InventoryTable/InventoryTable.js b/src/components/InventoryTable/InventoryTable.js
@@ -82,7 +82,6 @@ const InventoryTable = forwardRef(
       tableProps,
       isRbacEnabled,
       hasCheckbox,
-      onRowClick,
       abortOnUnmount = true,
       showCentosVersions = false,
       ...props
@@ -281,7 +280,6 @@ const InventoryTable = forwardRef(
         <InventoryList
           {...props}
           hasCheckbox={hasCheckbox}
-          onRowClick={onRowClick}
           tableProps={tableProps}
           customFilters={customFilters}
           hasAccess={hasAccess}
@@ -343,7 +341,6 @@ InventoryTable.propTypes = {
   tableProps: PropTypes.object,
   isRbacEnabled: PropTypes.bool,
   hasCheckbox: PropTypes.bool,
-  onRowClick: PropTypes.func,
   abortOnUnmount: PropTypes.bool,
   showCentosVersions: PropTypes.bool,
 };

diff --git a/src/components/InventoryTable/TitleColumn.js b/src/components/InventoryTable/TitleColumn.js
@@ -1,6 +1,6 @@
-/* eslint-disable camelcase */
 /* eslint-disable react/prop-types */
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 /**
  * Helper function to proprly calculate what to do when user clicks on first cell.
@@ -9,13 +9,13 @@ import React from 'react';
  * @param {*} key inventory UUID.
  * @param {*} props additional props from `EntityTable` - loaded, onRowClick and noDetail.
  */
-const onRowClick = (event, key, { loaded, onRowClick: rowClick, noDetail }) => {
+const onRowClick = (event, id, { loaded, onRowClick: rowClick, noDetail }) => {
   if (loaded && !noDetail) {
     const isMetaKey = event.ctrlKey || event.metaKey || event.which === 2;
     if (isMetaKey) {
       return;
     } else if (rowClick) {
-      rowClick(event, key, isMetaKey);
+      rowClick(event, id, isMetaKey);
     }
   }
 
@@ -24,32 +24,34 @@ const onRowClick = (event, key, { loaded, onRowClick: rowClick, noDetail }) => {
 };
 
 /**
- * Helper function to generate first cell in plain inventory either with clickable detail or just data from attribut.
+ * Helper component to generate first cell in plain inventory either with clickable detail or just data from attribut.
  * This is later on used in redux in `renderFunc`.
- * @param {React.node} data React node with information that will be shown to user as column title.
+ * @param {React.node} children React node with information that will be shown to user as column title.
  * @param {string} id inventory UUID, used to navigate to correct URL.
  * @param {*} item row data, holds every information from redux store for currecnt row.
  * @param {*} props additional props passed from `EntityTable` - holds any props passed to inventory table.
  */
-const TitleColumn = (data, id, item, props) => (
+const TitleColumn = ({ children, id, item, ...props }) => (
   <div className="ins-composed-col sentry-mask data-hj-suppress">
-    <div key="os_release">{item?.os_release}</div>
+    {item?.os_release && <div key="os_release">{item?.os_release}</div>}
     <div key="data" className={props?.noDetail ? 'ins-m-nodetail' : ''}>
       {props?.noDetail ? (
-        data
+        children
       ) : (
-        <a
-          // eslint-disable-next-line react/no-unknown-property
-          widget="col"
-          href={`${location.pathname}${
-            location.pathname.substr(-1) === '/' ? '' : '/'
-          }${id}`}
-          onClick={(event) => {
-            onRowClick(event, id, props);
+        <Link
+          to={item?.href || item?.to || id}
+          {...{
+            ...(props?.onRowClick
+              ? {
+                  onClick: (event) => {
+                    onRowClick(event, id, props);
+                  },
+                }
+              : {}),
           }}
         >
-          {data}
-        </a>
+          {children}
+        </Link>
       )}
     </div>
   </div>