diff --git a/src/components/InventoryDetail/FactsInfo.js b/src/components/InventoryDetail/FactsInfo.js
index dcffb6cb2..4a2fbca9e 100644
--- a/src/components/InventoryDetail/FactsInfo.js
+++ b/src/components/InventoryDetail/FactsInfo.js
@@ -1,6 +1,6 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
-import { Flex, FlexItem, Grid, GridItem } from '@patternfly/react-core';
+import { Flex, FlexItem, Grid, GridItem, Label } from '@patternfly/react-core';
import {
Skeleton,
SkeletonSize,
@@ -63,6 +63,12 @@ const FactsInfo = ({
) && }
+ {loaded &&
+ entity?.system_profile?.operating_system?.name === 'CentOS Linux' && (
+
+
+
+ )}
);
diff --git a/src/components/InventoryDetail/FactsInfo.test.js b/src/components/InventoryDetail/FactsInfo.test.js
new file mode 100644
index 000000000..eb4abc4e8
--- /dev/null
+++ b/src/components/InventoryDetail/FactsInfo.test.js
@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import FactsInfo from './FactsInfo';
+
+describe('FactsInfo', () => {
+ it('should render extra label for CentOS system', () => {
+ render(
+
+ );
+
+ expect(screen.getByText(/centos linux system/i)).toBeVisible();
+ });
+});
diff --git a/src/components/InventoryDetail/InventoryDetail.scss b/src/components/InventoryDetail/InventoryDetail.scss
index de17f9718..be66f30bb 100644
--- a/src/components/InventoryDetail/InventoryDetail.scss
+++ b/src/components/InventoryDetail/InventoryDetail.scss
@@ -39,8 +39,6 @@
div {
@include rem('margin', 5px);
margin-left: 0;
-
- span:first-child { @include rem('margin-right', 5px); }
}
}
diff --git a/src/components/InventoryTable/ConversionPopover/ConversionPopover.js b/src/components/InventoryTable/ConversionPopover/ConversionPopover.js
new file mode 100644
index 000000000..a1f4c474b
--- /dev/null
+++ b/src/components/InventoryTable/ConversionPopover/ConversionPopover.js
@@ -0,0 +1,56 @@
+import {
+ Button,
+ Label,
+ Popover,
+ Text,
+ TextContent,
+} from '@patternfly/react-core';
+import useInsightsNavigate from '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate';
+import React from 'react';
+
+const ConversionPopover = () => {
+ const navigate = useInsightsNavigate('tasks');
+
+ return (
+
+
+ On June 30, 2024, CentOS Linux 7 will reach End of Life (EOL).
+
+
+ Red Hat can help migrate CentOS Linux 7 users to maintain continuity
+ in their environment after the EOL date, whether they’re on premise
+ or in the cloud.
+
+
+
+ Learn more about CentOS Migration
+
+
+
+ }
+ footerContent={
+
+ }
+ >
+
+
+ );
+};
+
+export { ConversionPopover };
diff --git a/src/components/InventoryTable/TitleColumn.js b/src/components/InventoryTable/TitleColumn.js
index 83e956a9f..7bd087886 100644
--- a/src/components/InventoryTable/TitleColumn.js
+++ b/src/components/InventoryTable/TitleColumn.js
@@ -1,6 +1,7 @@
/* eslint-disable react/prop-types */
import React from 'react';
import { Link } from 'react-router-dom';
+import { ConversionPopover } from './ConversionPopover/ConversionPopover';
/**
* Helper function to proprly calculate what to do when user clicks on first cell.
@@ -38,20 +39,27 @@ const TitleColumn = ({ children, id, item, ...props }) => (
{props?.noDetail ? (
children
) : (
- {
- onRowClick(event, id, props);
- },
- }
- : {}),
- }}
- >
- {children}
-
+
+ {
+ onRowClick(event, id, props);
+ },
+ }
+ : {}),
+ }}
+ >
+ {children}
+
+ {item?.system_profile?.operating_system?.name === 'CentOS Linux' && (
+
+
+
+ )}
+
)}
diff --git a/src/components/InventoryTable/TitleColumn.test.js b/src/components/InventoryTable/TitleColumn.test.js
index 683ea881c..5dab0a071 100644
--- a/src/components/InventoryTable/TitleColumn.test.js
+++ b/src/components/InventoryTable/TitleColumn.test.js
@@ -1,8 +1,14 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import TitleColumn from './TitleColumn';
+import { TestWrapper } from '../../Utilities/TestingUtilities';
+import '@testing-library/jest-dom';
+import useInsightsNavigate from '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate';
+jest.mock(
+ '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate'
+);
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
// eslint-disable-next-line react/prop-types
@@ -69,6 +75,34 @@ describe('TitleColumn', () => {
expect(asFragment()).toMatchSnapshot();
});
+ it('should render conversion label for CentOS system', async () => {
+ const navigate = jest.fn();
+ useInsightsNavigate.mockReturnValue(navigate);
+ render(
+
+
+ something
+
+
+ );
+
+ expect(screen.getByText(/convert system to rhel/i)).toBeVisible();
+ await userEvent.click(screen.getByText(/convert system to rhel/i));
+ await userEvent.click(
+ screen.getByRole('button', {
+ name: /run a pre-conversion analysis of this system/i,
+ })
+ );
+ await waitFor(() => {
+ expect(navigate).toBeCalledWith('/available#pre-conversion-analysis');
+ });
+ });
+
describe('API', () => {
it('should call onClick', async () => {
const onClick = jest.fn();
diff --git a/src/components/InventoryTable/__snapshots__/TitleColumn.test.js.snap b/src/components/InventoryTable/__snapshots__/TitleColumn.test.js.snap
index 9356f9657..ccd77ce55 100644
--- a/src/components/InventoryTable/__snapshots__/TitleColumn.test.js.snap
+++ b/src/components/InventoryTable/__snapshots__/TitleColumn.test.js.snap
@@ -25,9 +25,11 @@ exports[`TitleColumn should render correctly with NO data 1`] = `
@@ -41,12 +43,14 @@ exports[`TitleColumn should render correctly with data 1`] = `
@@ -60,12 +64,14 @@ exports[`TitleColumn should render correctly with href 1`] = `
@@ -82,12 +88,14 @@ exports[`TitleColumn should render correctly with os_release 1`] = `
@@ -101,12 +109,14 @@ exports[`TitleColumn should render correctly with to 1`] = `