feat(RHINENG-8561): Mark CentOS systems and provide more details (#2160)

* feat(RHINENG-8561): Show conversion label for CentOS systems

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

This adds a conversion label for CentOS systems in Inventory table page.

* feat(RHINENG-8561): Show CentOS label for appropriate systems

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

This make the CentOS label appear at the host details page when viewing a CentOS system.

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 = ({
             ) && <InsightsDisconnected />}
         </FlexItem>
       </Flex>
+      {loaded &&
+        entity?.system_profile?.operating_system?.name === 'CentOS Linux' && (
+          <div>
+            <Label color="cyan">CentOS Linux system</Label>
+          </div>
+        )}
     </GridItem>
   </Grid>
 );

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(
+      <FactsInfo
+        loaded
+        entity={{
+          system_profile: {
+            operating_system: {
+              name: 'CentOS Linux',
+            },
+          },
+        }}
+      />
+    );
+
+    expect(screen.getByText(/centos linux system/i)).toBeVisible();
+  });
+});

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); }
     }
   }
 

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 (
+    <Popover
+      hasAutoWidth
+      aria-label="CentOS conversion alert popover"
+      headerContent={'Convert this system to RHEL'}
+      bodyContent={
+        <TextContent>
+          <Text style={{ maxWidth: '380px' }}>
+            On June 30, 2024, CentOS Linux 7 will reach End of Life (EOL).
+          </Text>
+          <Text style={{ maxWidth: '380px' }}>
+            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.
+          </Text>
+          <Text>
+            <a
+              href="https://www.redhat.com/en/technologies/linux-platforms/enterprise-linux/centos-migration"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Learn more about CentOS Migration
+            </a>
+          </Text>
+        </TextContent>
+      }
+      footerContent={
+        <Button
+          variant="secondary"
+          onClick={() => navigate('/available#pre-conversion-analysis')}
+        >
+          Run a pre-conversion analysis of this system
+        </Button>
+      }
+    >
+      <Label isCompact color="cyan">
+        Convert system to RHEL
+      </Label>
+    </Popover>
+  );
+};
+
+export { ConversionPopover };

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
       ) : (
-        <Link
-          to={item?.href || item?.to || id}
-          {...{
-            ...(props?.onRowClick
-              ? {
-                  onClick: (event) => {
-                    onRowClick(event, id, props);
-                  },
-                }
-              : {}),
-          }}
-        >
-          {children}
-        </Link>
+        <span>
+          <Link
+            to={item?.href || item?.to || id}
+            {...{
+              ...(props?.onRowClick
+                ? {
+                    onClick: (event) => {
+                      onRowClick(event, id, props);
+                    },
+                  }
+                : {}),
+            }}
+          >
+            {children}
+          </Link>
+          {item?.system_profile?.operating_system?.name === 'CentOS Linux' && (
+            <div>
+              <ConversionPopover />
+            </div>
+          )}
+        </span>
       )}
     </div>
   </div>

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(
+      <TestWrapper>
+        <TitleColumn
+          id="testId"
+          item={{
+            system_profile: { operating_system: { name: 'CentOS Linux' } },
+          }}
+        >
+          something
+        </TitleColumn>
+      </TestWrapper>
+    );
+
+    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();

src/components/InventoryTable/__snapshots__/TitleColumn.test.js.snap

@@ -25,9 +25,11 @@ exports[`TitleColumn should render correctly with NO data 1`] = `
     <div
       class=""
     >
-      <a
-        class="fakeLink"
-      />
+      <span>
+        <a
+          class="fakeLink"
+        />
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -41,12 +43,14 @@ exports[`TitleColumn should render correctly with data 1`] = `
     <div
       class=""
     >
-      <a
-        class="fakeLink"
-        to="testId"
-      >
-        something
-      </a>
+      <span>
+        <a
+          class="fakeLink"
+          to="testId"
+        >
+          something
+        </a>
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -60,12 +64,14 @@ exports[`TitleColumn should render correctly with href 1`] = `
     <div
       class=""
     >
-      <a
-        class="fakeLink"
-        to="/link/to/item"
-      >
-        something
-      </a>
+      <span>
+        <a
+          class="fakeLink"
+          to="/link/to/item"
+        >
+          something
+        </a>
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -82,12 +88,14 @@ exports[`TitleColumn should render correctly with os_release 1`] = `
     <div
       class=""
     >
-      <a
-        class="fakeLink"
-        to="testId"
-      >
-        something
-      </a>
+      <span>
+        <a
+          class="fakeLink"
+          to="testId"
+        >
+          something
+        </a>
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -101,12 +109,14 @@ exports[`TitleColumn should render correctly with to 1`] = `
     <div
       class=""
     >
-      <a
-        class="fakeLink"
-        to="[object Object]"
-      >
-        something
-      </a>
+      <span>
+        <a
+          class="fakeLink"
+          to="[object Object]"
+        >
+          something
+        </a>
+      </span>
     </div>
   </div>
 </DocumentFragment>