foreman_rh_cloud 14.1.3 → 14.2.1

data/webpack/ForemanInventoryUpload/Components/PageHeader/__tests__/PageTitle.test.js

@@ -1,19 +1,123 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import PropTypes from 'prop-types';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import PageTitle from '../PageTitle';
 
-jest.mock('../components/CloudPingModal', () => () => (
-  <div data-testid="cloud-ping-modal">CloudPingModal</div>
-));
+let mockIopMode = false;
+
+jest.mock('foremanReact/Root/Context/ForemanContext', () => ({
+  useForemanContext: () => ({
+    metadata: {
+      foreman_rh_cloud: {
+        iop: mockIopMode,
+      },
+    },
+    UI: {},
+  }),
+}));
+
+jest.mock('../components/CloudPingModal', () => {
+  const React = require('react');
+  const PropTypes = require('prop-types');
+
+  const MockCloudPingModal = ({ isOpen, title }) =>
+    isOpen ? (
+      <div role="dialog" aria-label={title}>
+        Organization status
+      </div>
+    ) : null;
+
+  MockCloudPingModal.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    title: PropTypes.string.isRequired,
+  };
+
+  return {
+    __esModule: true,
+    default: MockCloudPingModal,
+  };
+});
+jest.mock('foremanReact/common/helpers', () => ({
+  getDocsURL: () => '/links/manual/test',
+}));
 
 describe('PageTitle', () => {
+  afterEach(() => {
+    mockIopMode = false;
+  });
+
   it('renders the page title', () => {
     render(<PageTitle />);
     expect(screen.getByText('Red Hat Inventory')).toBeTruthy();
   });
 
   it('renders the kebab dropdown', () => {
-    const { container } = render(<PageTitle />);
-    expect(container.querySelector('.title-dropdown')).toBeTruthy();
+    render(<PageTitle />);
+    expect(screen.getByLabelText('Actions')).toBeTruthy();
+  });
+
+  it('renders cloud-ping dropdown item when not in IoP mode', async () => {
+    mockIopMode = false;
+    render(<PageTitle />);
+
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText('Actions'));
+    });
+
+    // Verify all dropdown items are present
+    const connectivityItem = screen.getByText('Connectivity test');
+    expect(connectivityItem).toBeTruthy();
+
+    const tasksHistoryLink = screen.getByRole('menuitem', {
+      name: 'Actions history',
+    });
+    const inventoryDocsLink = screen.getByRole('menuitem', {
+      name: 'Documentation',
+    });
+
+    expect(tasksHistoryLink).toBeTruthy();
+    expect(inventoryDocsLink).toBeTruthy();
+
+    // Verify links open in a new tab
+    expect(tasksHistoryLink).toHaveAttribute('target', '_blank');
+    expect(inventoryDocsLink).toHaveAttribute('target', '_blank');
+
+    // Verify links have the expected URL patterns
+    expect(tasksHistoryLink.getAttribute('href')).toContain(
+      '/foreman_tasks/tasks'
+    );
+    expect(inventoryDocsLink.getAttribute('href')).toContain('/links/manual/');
+  });
+
+  it('opens CloudPingModal when clicking Connectivity test', async () => {
+    mockIopMode = false;
+    render(<PageTitle />);
+
+    // Modal should not be visible initially
+    expect(screen.queryByRole('dialog')).toBeNull();
+
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText('Actions'));
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('Connectivity test'));
+    });
+
+    // Modal should now be visible
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toBeTruthy();
+    expect(dialog).toHaveTextContent('Organization status');
+  });
+
+  it('does not render cloud-ping dropdown item when in IoP mode', async () => {
+    mockIopMode = true;
+    render(<PageTitle />);
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText('Actions'));
+    });
+    expect(screen.queryByText('Connectivity test')).toBeNull();
+    mockIopMode = false;
   });
 });

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudPingModal/index.js

@@ -2,11 +2,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
-import {
-  Table,
-  TableBody,
-  TableHeader,
-} from '@patternfly/react-table/deprecated';
+import { Table, Tbody, Tr, Td } from '@patternfly/react-table';
 import {
   Card,
   CardTitle,
@@ -21,6 +17,10 @@ import {
   CheckCircleIcon,
   ExclamationCircleIcon,
 } from '@patternfly/react-icons';
+import {
+  global_danger_color_200 as dangerColor,
+  global_success_color_100 as successColor,
+} from '@patternfly/react-tokens';
 import { get } from 'foremanReact/redux/API';
 import { translate as __, sprintf } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
@@ -30,34 +30,20 @@ import { inventoryUrl } from '../../../../ForemanInventoryHelpers';
 export const API_KEY = 'CLOUD_PING';
 
 const CloudPingModal = ({ title, isOpen, toggle }) => {
-  const [rows, setRows] = useState([]);
+  const [certAuths, setCertAuths] = useState([]);
   const dispatch = useDispatch();
+  const status = useSelector(state => selectAPIStatus(state, API_KEY));
+  const isPending = status === STATUS.PENDING;
+
   const handleSuccess = useCallback(
     ({
       data: {
         ping: { cert_auth = [] },
       },
     }) => {
-      cert_auth.length &&
-        setRows(
-          cert_auth.map(cert => ({
-            cells: [
-              {
-                title: (
-                  <>
-                    <StatusIcon
-                      isPending={status === STATUS.PENDING}
-                      authStatus={cert}
-                    />{' '}
-                    {cert.org_name} {cert.error}
-                  </>
-                ),
-              },
-            ],
-          }))
-        );
+      setCertAuths(cert_auth);
     },
-    [status]
+    []
   );
 
   useEffect(() => {
@@ -71,10 +57,6 @@ const CloudPingModal = ({ title, isOpen, toggle }) => {
       );
   }, [isOpen, dispatch, handleSuccess]);
 
-  const status = useSelector(state => selectAPIStatus(state, API_KEY));
-  const isPending = status === STATUS.PENDING;
-  // const error = useSelector(state => selectAPIErrorMessage(state, API_KEY));
-
   return (
     <>
       <Modal
@@ -97,17 +79,28 @@ const CloudPingModal = ({ title, isOpen, toggle }) => {
             ) : (
               <>
                 <Text className="pull-right" ouiaId="text-org-count">
-                  {sprintf(__('%s organizations'), rows.length)}
+                  {sprintf(__('%s organizations'), certAuths.length)}
                 </Text>
                 <Table
-                  aria-label="Simple Table"
+                  aria-label="Organization status"
                   ouiaId="simple-table"
-                  cells={['']}
-                  rows={rows}
+                  variant="compact"
+                  borders={false}
                 >
-                  <TableHeader />
-                  <TableBody />
-                </Table>{' '}
+                  <Tbody>
+                    {certAuths.map((cert, idx) => (
+                      <Tr
+                        key={cert.org_name || idx}
+                        ouiaId={`org-status-row-${idx}`}
+                      >
+                        <Td dataLabel={__('Organization')}>
+                          <StatusIcon isPending={isPending} authStatus={cert} />{' '}
+                          {cert.org_name} {cert.error}
+                        </Td>
+                      </Tr>
+                    ))}
+                  </Tbody>
+                </Table>
               </>
             )}
           </CardBody>
@@ -121,13 +114,13 @@ const StatusIcon = ({ isPending, authStatus }) => {
   if (isPending) return <Spinner size="sm" />;
   if (authStatus.success)
     return (
-      <Icon color="green">
+      <Icon color={successColor.value}>
         <CheckCircleIcon />
       </Icon>
     );
   if (authStatus.error)
     return (
-      <Icon color="red">
+      <Icon color={dangerColor.value}>
         <ExclamationCircleIcon />
       </Icon>
     );

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/SyncButton/__tests__/SyncButton.test.js

@@ -5,7 +5,9 @@ import SyncButton from '../SyncButton';
 describe('SyncButton', () => {
   it('renders the sync button text', () => {
     render(<SyncButton handleSync={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /Sync all inventory status/ })).toBeTruthy();
+    expect(
+      screen.getByRole('button', { name: /Sync all inventory status/ })
+    ).toBeTruthy();
   });
 
   it('calls handleSync on click', () => {

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/ToolbarButtons/ToolbarButtons.js

@@ -1,16 +1,13 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import SyncButton from '../SyncButton';
-import CloudConnectorButton from '../CloudConnectorButton';
 import './toolbarButtons.scss';
 import { selectSubscriptionConnectionEnabled } from '../../../InventorySettings/InventorySettingsSelectors';
-import { useIopConfig } from '../../../../../common/Hooks/ConfigHooks';
 
 const ToolbarButtons = () => {
   const subscriptionConnectionEnabled = useSelector(
     selectSubscriptionConnectionEnabled
   );
-  const isIop = useIopConfig();
 
   if (!subscriptionConnectionEnabled) {
     return null;
@@ -18,7 +15,6 @@ const ToolbarButtons = () => {
 
   return (
     <div className="inventory_toolbar_buttons">
-      {!isIop && <CloudConnectorButton />}
       <SyncButton />
     </div>
   );

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/ToolbarButtons/__tests__/ToolbarButtons.test.js

@@ -1,21 +1,13 @@
 import React from 'react';
-import { screen } from '@testing-library/react';
-import { rtlHelpers } from 'foremanReact/common/rtlTestHelpers';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import * as reactRedux from 'react-redux';
 import ToolbarButtons from '../ToolbarButtons';
-import { useIopConfig } from '../../../../../../common/Hooks/ConfigHooks';
-import { selectSubscriptionConnectionEnabled } from '../../../../InventorySettings/InventorySettingsSelectors';
 
-// Mock the config hook
-jest.mock('../../../../../../common/Hooks/ConfigHooks', () => ({
-  useIopConfig: jest.fn(),
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
 }));
 
-// Mock the selector
-jest.mock('../../../../InventorySettings/InventorySettingsSelectors', () => ({
-  selectSubscriptionConnectionEnabled: jest.fn(),
-}));
-
-// Mock child components to isolate ToolbarButtons testing
 jest.mock(
   '../../SyncButton',
   () =>
@@ -23,56 +15,35 @@ jest.mock(
       return <div data-testid="sync-button">Sync all inventory status</div>;
     }
 );
-jest.mock(
-  '../../CloudConnectorButton',
-  () =>
-    function MockCloudConnectorButton() {
-      return (
-        <div data-testid="cloud-connector-button">
-          Configure cloud connector
-        </div>
-      );
-    }
-);
-
-const { renderWithStore } = rtlHelpers;
 
 describe('ToolbarButtons', () => {
-  test('renders both buttons when subscription connection is enabled and not in IOP mode', () => {
-    useIopConfig.mockReturnValue(false);
-    selectSubscriptionConnectionEnabled.mockReturnValue(true);
-
-    renderWithStore(<ToolbarButtons />);
-
-    expect(screen.getByTestId('cloud-connector-button')).toBeTruthy();
-    expect(screen.getByTestId('sync-button')).toBeTruthy();
+  afterEach(() => {
+    jest.clearAllMocks();
   });
 
-  test('renders only sync button when in IOP mode', () => {
-    useIopConfig.mockReturnValue(true);
-    selectSubscriptionConnectionEnabled.mockReturnValue(true);
+  test('renders sync button when subscription connection is enabled', () => {
+    reactRedux.useSelector.mockReturnValue(true);
 
-    renderWithStore(<ToolbarButtons />);
+    render(<ToolbarButtons />);
 
-    expect(screen.queryByTestId('cloud-connector-button')).toBeNull();
-    expect(screen.getByTestId('sync-button')).toBeTruthy();
+    expect(screen.getByTestId('sync-button')).toBeInTheDocument();
   });
 
   test('renders nothing when subscription connection is not enabled', () => {
-    useIopConfig.mockReturnValue(false);
-    selectSubscriptionConnectionEnabled.mockReturnValue(false);
+    reactRedux.useSelector.mockReturnValue(false);
 
-    const { container } = renderWithStore(<ToolbarButtons />);
+    const { container } = render(<ToolbarButtons />);
 
     expect(container.firstChild).toBeNull();
   });
 
   test('renders toolbar buttons container with correct className when enabled', () => {
-    useIopConfig.mockReturnValue(false);
-    selectSubscriptionConnectionEnabled.mockReturnValue(true);
+    reactRedux.useSelector.mockReturnValue(true);
 
-    const { container } = renderWithStore(<ToolbarButtons />);
+    const { container } = render(<ToolbarButtons />);
 
-    expect(container.querySelector('.inventory_toolbar_buttons')).toBeTruthy();
+    expect(
+      container.querySelector('.inventory_toolbar_buttons')
+    ).toBeInTheDocument();
   });
 });

data/webpack/ForemanInventoryUpload/ForemanInventoryHelpers.js

@@ -1,14 +1,14 @@
 import URI from 'urijs';
+import { getDocsURL } from 'foremanReact/common/helpers';
 import { foremanUrl } from '../ForemanRhCloudHelpers';
 
 export const inventoryUrl = path =>
   foremanUrl(`/foreman_inventory_upload/${path}`);
 
 export const getInventoryDocsUrl = () =>
-  foremanUrl(
-    `/links/manual/?root_url=${URI.encode(
-      'https://docs.redhat.com/en/documentation/red_hat_lightspeed/1-latest/html-single/red_hat_lightspeed_remediations_guide/index'
-    )}`
+  getDocsURL(
+    'Managing_Hosts',
+    'configuring-foreman-server-for-cloud-connection'
   );
 
 export const getSubscriptionServiceDocsUrl = () =>

data/webpack/ForemanInventoryUpload/SubscriptionsPageExtension/InventoryAutoUpload/InventoryAutoUpload.js

@@ -1,11 +1,18 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Text, TextVariants, Popover, Button } from '@patternfly/react-core';
+import {
+  Text,
+  TextVariants,
+  Popover,
+  Button,
+  FormGroup,
+  Grid,
+  GridItem,
+} from '@patternfly/react-core';
 import { InfoAltIcon, CaretRightIcon } from '@patternfly/react-icons';
-import { FormGroup, Grid } from 'patternfly-react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from '../../../ForemanRhCloudHelpers';
-import Switcher from '../../../common/Switcher';
+import SwitcherPF4 from '../../../common/Switcher/SwitcherPF4';
 import { settingsDict } from '../../Components/InventorySettings/AdvancedSetting/AdvancedSettingsConstants';
 import InventorySettings from '../../Components/InventorySettings/InventorySettings';
 
@@ -27,19 +34,19 @@ const InventoryAutoUploadSwitcher = ({
       <Grid>
         <h3>{__('Red Hat Cloud Inventory')}</h3>
         <hr />
-        <Grid.Row>
-          <Switcher
-            id="auto-upload"
-            label={__('Inventory Auto Upload')}
-            tooltip={__(
-              'Enable automatic upload of your hosts inventory to the Red Hat cloud'
-            )}
-            isChecked={autoUploadEnabled}
-            onChange={handleToggle}
-            labelCol={5}
-          />
-
-          <Grid.Col sm={5}>
+        <Grid hasGutter>
+          <GridItem span={7}>
+            <SwitcherPF4
+              id="auto-upload"
+              label={__('Inventory Auto Upload')}
+              tooltip={__(
+                'Enable automatic upload of your hosts inventory to the Red Hat cloud'
+              )}
+              isChecked={autoUploadEnabled}
+              onChange={handleToggle}
+            />
+          </GridItem>
+          <GridItem span={5}>
             <Popover
               headerContent={
                 <strong>{__('Advanced Inventory Settings')}</strong>
@@ -55,11 +62,11 @@ const InventoryAutoUploadSwitcher = ({
                 {__('Show Advanced Settings')} <CaretRightIcon />
               </Button>
             </Popover>
-          </Grid.Col>
-        </Grid.Row>
+          </GridItem>
+        </Grid>
         <br />
-        <Grid.Row>
-          <Grid.Col sm={12}>
+        <Grid>
+          <GridItem span={12}>
             <Text component={TextVariants.p} ouiaId="text-more-details">
               <InfoAltIcon /> {__('More details can be found in')}{' '}
               <Text
@@ -76,8 +83,8 @@ const InventoryAutoUploadSwitcher = ({
                 </strong>
               </Text>
             </Text>
-          </Grid.Col>
-        </Grid.Row>
+          </GridItem>
+        </Grid>
       </Grid>
     </FormGroup>
   );

data/webpack/ForemanInventoryUpload/SubscriptionsPageExtension/InventoryAutoUpload/__tests__/InventoryAutoUpload.test.js

@@ -22,12 +22,16 @@ describe('InventoryAutoUpload', () => {
 
   it('renders the auto upload switcher', () => {
     render(<InventoryAutoUpload {...buildProps()} />);
-    expect(screen.getByText('Inventory Auto Upload')).toBeTruthy();
+    expect(
+      screen.getByRole('checkbox', { name: /Inventory Auto Upload/ })
+    ).toBeTruthy();
   });
 
   it('renders the advanced settings button', () => {
     render(<InventoryAutoUpload {...buildProps()} />);
-    expect(screen.getByRole('button', { name: /Show Advanced Settings/ })).toBeTruthy();
+    expect(
+      screen.getByRole('button', { name: /Show Advanced Settings/ })
+    ).toBeTruthy();
   });
 
   it('calls getSettings on mount', () => {

data/webpack/ForemanInventoryUpload/__tests__/ForemanInventoryHelpers.test.js

@@ -1,6 +1,24 @@
-import { isExitCodeLoading } from '../ForemanInventoryHelpers';
+import { getDocsURL } from 'foremanReact/common/helpers';
+import {
+  getInventoryDocsUrl,
+  isExitCodeLoading,
+} from '../ForemanInventoryHelpers';
+
+jest.mock('foremanReact/common/helpers', () => ({
+  getDocsURL: jest.fn(),
+}));
 
 describe('ForemanInventoryUpload helpers', () => {
+  describe('getInventoryDocsUrl', () => {
+    it('requests the Managing Hosts guide at the cloud connection chapter', () => {
+      getInventoryDocsUrl();
+      expect(getDocsURL).toHaveBeenCalledWith(
+        'Managing_Hosts',
+        'configuring-foreman-server-for-cloud-connection'
+      );
+    });
+  });
+
   describe('isExitCodeLoading', () => {
     it('returns true when exit code contains "running"', () => {
       expect(isExitCodeLoading('currently running')).toBe(true);

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTable.js

@@ -3,9 +3,14 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import {
   Table,
-  TableHeader,
-  TableBody,
-} from '@patternfly/react-table/deprecated';
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  SortByDirection,
+} from '@patternfly/react-table';
+import { translate as __ } from 'foremanReact/common/I18n';
 import { useForemanSettings } from 'foremanReact/Root/Context/ForemanContext';
 import SelectAllAlert from './SelectAllAlert';
 import {
@@ -51,14 +56,33 @@ const InsightsTable = ({
   const isIop = useIopConfig();
 
   useEffect(() => {
-    setRows(
-      modifySelectedRows(hits, selectedIds, showSelectAllAlert, hideHost, isIop)
-    );
+    setRows(modifySelectedRows(hits, selectedIds, showSelectAllAlert, isIop));
 
     if (hideHost) setColumns(getColumnsWithoutHostname());
-  }, [hits, selectedIds, hideHost]);
+  }, [hits, selectedIds, hideHost, isIop]);
 
   const hasSelectableRows = rows.some(row => !row.disableCheckbox);
+  const hasRows = rows.length > 0;
+  const selectedRowsCount = rows.filter(
+    row => !row.disableCheckbox && row.selected
+  ).length;
+  const selectableRowsCount = rows.filter(row => !row.disableCheckbox).length;
+  const allSelected = hasRows && selectableRowsCount === selectedRowsCount;
+  const isSortDirectionValid =
+    sortOrder === SortByDirection.asc || sortOrder === SortByDirection.desc;
+  const sortIndex = getSortColumnIndex(columns, sortBy);
+  const sortByState = isSortDirectionValid
+    ? {
+        index: hasSelectableRows ? sortIndex + 1 : sortIndex,
+        direction: sortOrder,
+      }
+    : undefined;
+
+  const getCellContent = (row, col) => {
+    if (col.id === 'actions') return col.formatter(row);
+    const value = row[col.id];
+    return col.formatter ? col.formatter(value) : value;
+  };
 
   return (
     <React.Fragment>
@@ -73,24 +97,67 @@ const InsightsTable = ({
         className="rh-cloud-recommendations-table"
         ouiaId="rh-cloud-recommendations-table"
         aria-label="Recommendations Table"
-        {...(hasSelectableRows && {
-          onSelect: (_event, isSelected, rowId) =>
-            onTableSelect(isSelected, rowId, rows, selectedIds),
-        })}
-        canSelectAll={hasSelectableRows}
-        sortBy={{
-          index: getSortColumnIndex(columns, sortBy),
-          direction: sortOrder,
-        }}
-        onSort={(_event, index, direction) =>
-          onTableSort(columns, index, direction)
-        }
-        cells={columns}
-        rows={rows}
         variant="compact"
       >
-        <TableHeader />
-        <TableBody />
+        <Thead>
+          <Tr ouiaId="recommendations-table-head-row">
+            {hasSelectableRows && (
+              <Th
+                aria-label={__('Select all recommendations')}
+                select={{
+                  onSelect: (_event, isSelected) =>
+                    onTableSelect(isSelected, -1, rows, selectedIds),
+                  isSelected: allSelected,
+                }}
+              />
+            )}
+            {columns.map((column, index) => (
+              <Th
+                key={column.id}
+                width={column.width}
+                screenReaderText={!column.title ? __('Actions') : undefined}
+                sort={
+                  column.sortKey
+                    ? {
+                        sortBy: sortByState,
+                        onSort: (_event, colIndex, direction) =>
+                          onTableSort(
+                            columns,
+                            colIndex - (hasSelectableRows ? 1 : 0),
+                            direction
+                          ),
+                        columnIndex: hasSelectableRows ? index + 1 : index,
+                      }
+                    : undefined
+                }
+              >
+                {column.title}
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {rows.map((row, rowIndex) => (
+            <Tr key={row.id} ouiaId={`recommendations-row-${row.id}`}>
+              {hasSelectableRows && (
+                <Td
+                  select={{
+                    rowIndex,
+                    isDisabled: row.disableCheckbox,
+                    onSelect: (_event, isSelected) =>
+                      onTableSelect(isSelected, rowIndex, rows, selectedIds),
+                    isSelected: row.selected,
+                  }}
+                />
+              )}
+              {columns.map(column => (
+                <Td key={`${row.id}-${column.id}`}>
+                  {getCellContent(row, column)}
+                </Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
       </Table>
       <TableEmptyState status={status} error={error} rowsLength={rows.length} />
       <Pagination variant="bottom" />