diff --git a/src/components/GeneralInfo/GeneralInformation/ConversionAlert.js b/src/components/GeneralInfo/GeneralInformation/ConversionAlert.js new file mode 100644 index 000000000..82c6e4591 --- /dev/null +++ b/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 ( + + + + 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. + + + 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 here. + + + + navigate('/available#pre-conversion-analysis')}> + Run a Pre-conversion analysis of this system + + + + + ); +}; + +export { ConversionAlert }; diff --git a/src/components/GeneralInfo/GeneralInformation/GeneralInformation.js b/src/components/GeneralInfo/GeneralInformation/GeneralInformation.js index d7ce13cee..b7c2cd47a 100644 --- a/src/components/GeneralInfo/GeneralInformation/GeneralInformation.js +++ b/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 ( + {entity?.system_profile?.operating_system?.name === 'CentOS Linux' && ( + + )}
@@ -172,9 +180,7 @@ class GeneralInformation extends Component { )} @@ -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, diff --git a/src/components/GeneralInfo/GeneralInformation/GeneralInformation.test.js b/src/components/GeneralInfo/GeneralInformation/GeneralInformation.test.js index 2ddd4d96c..d0c89d962 100644 --- a/src/components/GeneralInfo/GeneralInformation/GeneralInformation.test.js +++ b/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( + + + + ); + + 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( + + + + ); + + 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( + + + + ); + + expect( + screen.queryByRole('heading', { + name: /convert this centos system to rhel/i, + }) + ).not.toBeInTheDocument(); + }); + }); });