feat(RHINENG-8562): Show conversion alert for CentOS systems (#2159)

Implements https://issues.redhat.com/browse/RHINENG-8562.

src/components/GeneralInfo/GeneralInformation/ConversionAlert.js

@@ -0,0 +1,45 @@
+import { Alert, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import useInsightsNavigate from '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate';
+import React from 'react';
+
+const ConversionAlert = (props) => {
+  const navigate = useInsightsNavigate('tasks');
+
+  return (
+    <Alert
+      variant="custom"
+      isInline
+      title="Convert this CentOS system to RHEL"
+      {...props}
+    >
+      <TextContent>
+        <Text component={TextVariants.p}>
+          On June 30, 2024, CentOS Linux 7 will reach End of Life (EOL). Convert
+          your system to RHEL using the Convert2RHEL tool to migrate your system
+          to a fully supported production-grade operating system while
+          maintaining existing OS customizations, configurations, and
+          preferences.
+        </Text>
+        <Text component={TextVariants.p}>
+          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.{' '}
+          <a
+            href="https://www.redhat.com/en/technologies/linux-platforms/enterprise-linux/centos-migration"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Learn more about CentOS Migration here.
+          </a>
+        </Text>
+        <Text component={TextVariants.p}>
+          <a onClick={() => navigate('/available#pre-conversion-analysis')}>
+            Run a Pre-conversion analysis of this system
+          </a>
+        </Text>
+      </TextContent>
+    </Alert>
+  );
+};
+
+export { ConversionAlert };

src/components/GeneralInfo/GeneralInformation/GeneralInformation.js

@@ -19,6 +19,7 @@ import { Provider } from 'react-redux';
 import useInsightsNavigate from '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate/useInsightsNavigate';
 
 import './general-information.scss';
+import { ConversionAlert } from './ConversionAlert';
 
 class GeneralInformation extends Component {
   state = {
@@ -97,10 +98,17 @@ class GeneralInformation extends Component {
       DataCollectorsCardWrapper,
       CollectionCardWrapper,
       children,
+      entity,
     } = this.props;
     const Wrapper = store ? Provider : Fragment;
+
     return (
       <Wrapper {...(store && { store })}>
+        {entity?.system_profile?.operating_system?.name === 'CentOS Linux' && (
+          <ConversionAlert
+            style={{ marginBottom: 'var(--pf-v5-global--spacer--md)' }}
+          />
+        )}
         <div className="ins-c-general-information">
           <Grid hasGutter>
             <GridItem md={6} sm={12}>
@@ -172,9 +180,7 @@ class GeneralInformation extends Component {
                     <AsyncComponent
                       appName="edge"
                       module="./ImagesInformationCard"
-                      deviceIdProps={
-                        this.props.inventoryId || this.props.entity.id
-                      }
+                      deviceIdProps={this.props.inventoryId || entity.id}
                     />
                   </GridItem>
                 )}
@@ -207,6 +213,11 @@ class GeneralInformation extends Component {
 GeneralInformation.propTypes = {
   entity: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    system_profile: PropTypes.shape({
+      operating_system: PropTypes.shape({
+        name: PropTypes.string,
+      }),
+    }),
   }),
   openedModal: PropTypes.string,
   loadSystemDetail: PropTypes.func,

src/components/GeneralInfo/GeneralInformation/GeneralInformation.test.js

@@ -19,6 +19,9 @@ import userEvent from '@testing-library/user-event';
 import MockAdapter from 'axios-mock-adapter';
 import mockedData from '../../../__mocks__/mockedData.json';
 import { hosts } from '../../../api/api';
+import { cloneDeep } from 'lodash';
+import { TestWrapper } from '../../../Utilities/TestingUtilities';
+import useInsightsNavigate from '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate';
 
 const mock = new MockAdapter(hosts.axios, { onNoMatch: 'throwException' });
 
@@ -29,6 +32,9 @@ jest.mock(
     usePermissionsWithContext: () => ({ hasAccess: true }),
   })
 );
+jest.mock(
+  '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate'
+);
 
 const expectCardsToExist = (
   titles = [
@@ -238,4 +244,74 @@ describe('GeneralInformation', () => {
       });
     });
   });
+
+  describe('conversion alert', () => {
+    let state = {};
+
+    beforeEach(() => {
+      state = cloneDeep(initialState);
+      state.entityDetails.entity.system_profile = {
+        operating_system: {
+          name: 'CentOS Linux',
+          major: '7',
+          minor: '9',
+        },
+      };
+    });
+
+    it('shows alert for CentOS system', () => {
+      render(
+        <TestWrapper store={mockStore(state)}>
+          <GeneralInformation inventoryId={'test-id'} />
+        </TestWrapper>
+      );
+
+      expect(
+        screen.getByRole('heading', {
+          name: /convert this centos system to rhel/i,
+        })
+      ).toBeVisible();
+      expect(
+        screen.getByRole('link', {
+          name: /learn more about centos migration here\./i,
+        })
+      ).toHaveAttribute(
+        'href',
+        'https://www.redhat.com/en/technologies/linux-platforms/enterprise-linux/centos-migration'
+      );
+    });
+
+    it('redirect to pre-conversion task', async () => {
+      const navigate = jest.fn();
+      useInsightsNavigate.mockReturnValue(navigate);
+      render(
+        <TestWrapper store={mockStore(state)}>
+          <GeneralInformation inventoryId={'test-id'} />
+        </TestWrapper>
+      );
+
+      await userEvent.click(
+        screen.getByText(/run a pre-conversion analysis of this system/i)
+      );
+
+      await waitFor(() => {
+        expect(navigate).toBeCalledWith('/available#pre-conversion-analysis');
+      });
+    });
+
+    it('not shown for RHEL systems', () => {
+      const store = mockStore(initialState);
+      render(
+        <TestWrapper store={store}>
+          <GeneralInformation inventoryId={'test-id'} />
+        </TestWrapper>
+      );
+
+      expect(
+        screen.queryByRole('heading', {
+          name: /convert this centos system to rhel/i,
+        })
+      ).not.toBeInTheDocument();
+    });
+  });
 });