From 180f925b5b8fc38a8357e0ed59670e5237da3337 Mon Sep 17 00:00:00 2001
From: Muslimjon <59481011+mkholjuraev@users.noreply.github.com>
Date: Tue, 14 Nov 2023 12:32:49 +0100
Subject: [PATCH] fix(ImmutableDevices): image name should take to image
 details page (#2088)

---
 config/cypress.webpack.config.js              |  1 +
 config/overrideChrome.js                      |  2 +-
 cypress/support/interceptors.js               |  2 +-
 .../ImmutableDevices/ImmutableDevices.cy.js   | 24 ++++++++++++++++++-
 src/components/ImmutableDevices/columns.js    | 17 ++++++++++---
 5 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/config/cypress.webpack.config.js b/config/cypress.webpack.config.js
index 30e26b7d7..f542db9d2 100644
--- 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
index 952c79952..3040a159a 100644
--- 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
index 7e4a94982..2db7a58b0 100644
--- 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
index 1bedc6d5f..199870717 100644
--- 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
index 2f1021550..0b10c6d79 100644
--- 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 },
   },
   {