fix(ImmutableDevices): image name should take to image details page (#…

…2088)
RedHatInsights · Nov 14, 2023 · 180f925 · 180f925
1 parent 910cb2c
commit 180f925
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 6 deletions.
diff --git a/config/cypress.webpack.config.js b/config/cypress.webpack.config.js
@@ -34,6 +34,7 @@ webpackConfig.module.rules.push({
         __dirname,
         './overrideChrome.js'
       ),
+      '../useChrome': resolve(__dirname, './overrideChrome.js'),
     },
   },
 });

diff --git a/config/overrideChrome.js b/config/overrideChrome.js
@@ -5,7 +5,7 @@ const chromeMock = {
   appObjectId: () => {},
   on: () => {},
   getApp: () => 'inventory',
-  getBundle: () => 'rhel',
+  getBundle: () => 'insights',
   getUserPermissions: () => [{ permission: 'inventory:*:*' }],
   auth: {
     getUser: () =>

diff --git a/cypress/support/interceptors.js b/cypress/support/interceptors.js
@@ -211,7 +211,7 @@ export const hostsInterceptors = {
               page: 1,
               per_page: DEFAULT_ROW_COUNT,
               total: 1,
-              results: ['some-edge-device'],
+              results: [{ ImageName: 'some-edge-device', ImageSetID: '00000' }],
             },
           });
         } else {

diff --git a/src/components/ImmutableDevices/ImmutableDevices.cy.js b/src/components/ImmutableDevices/ImmutableDevices.cy.js
@@ -14,7 +14,14 @@ const defaultProps = {
 const MockRouter = ({ path = '/insights/inventory', ...props }) => (
   <Routes>
     <Route path={path} element={<ImmutableDevices {...props} />} />
-    <Route path={'*'} element={<div id="mock-detail-page" />} />
+    <Route
+      path={'/insights/image-builder/manage-edge-images/00000'}
+      element={<div id="mock-image-detail-page">Image detail</div>}
+    />
+    <Route
+      path={'*'}
+      element={<div id="mock-detail-page">Device detail</div>}
+    />
   </Routes>
 );
 
@@ -171,4 +178,19 @@ describe('ImmutableDevices', () => {
 
     cy.get('#mock-detail-page');
   });
+
+  it('Should take to image details page in image-builder app on system name click', () => {
+    const getEntitiesProp = getEntities((row, index) => {
+      row.ImageName = `Test-image-${index}`;
+      row.ImageSetID = '00000';
+      return row;
+    });
+
+    mountWithProps({ ...defaultProps, getEntities: getEntitiesProp });
+
+    cy.get('table[aria-label="Host inventory"]').should('be.visible');
+
+    cy.get('a[aria-label="image-name-link"]').first().click();
+    cy.get('#mock-image-detail-page');
+  });
 });
diff --git a/src/components/ImmutableDevices/columns.js b/src/components/ImmutableDevices/columns.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import Status from './Status';
 import { getDeviceStatus } from './helpers';
+import InsightsLink from '@redhat-cloud-services/frontend-components/InsightsLink';
+
+const ImageNameCell = (imageName, __uuid, { ImageSetID }) => {
+  return (
+    <InsightsLink
+      aria-label="image-name-link"
+      to={`/manage-edge-images/${ImageSetID}`}
+      app="image-builder"
+    >
+      {imageName}
+    </InsightsLink>
+  );
+};
 
 export const edgeColumns = [
   {
     key: 'ImageName',
     title: 'Image',
-    renderFunc: (imageName, uuid) => {
-      return <a href={`/edge/inventory/${uuid}`}>{imageName}</a>;
-    },
+    renderFunc: ImageNameCell,
     props: { isStatic: true },
   },
   {