foreman_rh_cloud 14.2.0 → 14.2.1

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

@@ -1,5 +1,7 @@
 import React from 'react';
-import { fireEvent, 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';
 
 let mockIopMode = false;
@@ -15,10 +17,30 @@ jest.mock('foremanReact/Root/Context/ForemanContext', () => ({
   }),
 }));
 
-jest.mock('../components/CloudPingModal', () => () => (
-  <div data-testid="cloud-ping-modal">CloudPingModal</div>
-));
-jest.mock('foremanReact/common/helpers', () => ({ getDocsURL: () => {} }));
+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(() => {
@@ -31,21 +53,70 @@ describe('PageTitle', () => {
   });
 
   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('renders cloud-ping dropdown item when not in IoP mode', () => {
+  it('opens CloudPingModal when clicking Connectivity test', async () => {
     mockIopMode = false;
     render(<PageTitle />);
-    fireEvent.click(screen.getByLabelText('Actions'));
-    expect(screen.getByText('Connectivity test')).toBeTruthy();
+
+    // 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', () => {
+  it('does not render cloud-ping dropdown item when in IoP mode', async () => {
     mockIopMode = true;
     render(<PageTitle />);
-    fireEvent.click(screen.getByLabelText('Actions'));
+    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/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,10 +1,13 @@
+import { getDocsURL } from 'foremanReact/common/helpers';
+import {
+  getInventoryDocsUrl,
+  isExitCodeLoading,
+} from '../ForemanInventoryHelpers';
+
 jest.mock('foremanReact/common/helpers', () => ({
   getDocsURL: jest.fn(),
 }));
 
-import { getDocsURL } from 'foremanReact/common/helpers';
-import { getInventoryDocsUrl, isExitCodeLoading } from '../ForemanInventoryHelpers';
-
 describe('ForemanInventoryUpload helpers', () => {
   describe('getInventoryDocsUrl', () => {
     it('requests the Managing Hosts guide at the cloud connection chapter', () => {

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" />

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

@@ -96,8 +96,7 @@ export const clearAllSelection = () => dispatch => {
 };
 
 export const onTableSort = (columns, index, direction) => {
-  // The checkbox column shifts the data columns by 1;
-  const { sortKey } = columns[index - 1];
+  const { sortKey } = columns[index];
   return fetchInsights({
     sortBy: sortKey,
     sortOrder: direction,

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

@@ -1,7 +1,6 @@
 /* eslint-disable camelcase */
 import React from 'react';
-import { DropdownItem } from '@patternfly/react-core/deprecated';
-import { sortable, cellWidth } from '@patternfly/react-table';
+import { DropdownItem } from '@patternfly/react-core';
 import { AnsibeTowerIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from '../../../ForemanRhCloudHelpers';
@@ -9,26 +8,23 @@ import DropdownToggle from '../../../common/DropdownToggle';
 import InsightsSection from './InsightsSection';
 import InsightsLabel from './InsightsLabel';
 
-export const totalRiskFormatter = ({ title: totalRisk }) => ({
-  children: (
-    <InsightsSection className="insights-total-risk" type="icon-group">
-      <InsightsLabel value={totalRisk} />
-    </InsightsSection>
-  ),
-});
+export const totalRiskFormatter = totalRisk => (
+  <InsightsSection className="insights-total-risk" type="icon-group">
+    <InsightsLabel value={totalRisk} />
+  </InsightsSection>
+);
 
-export const hasPlaybookFormatter = ({ title: hasPlaybook }) => ({
-  children: hasPlaybook ? (
+export const hasPlaybookFormatter = hasPlaybook =>
+  hasPlaybook ? (
     <span className="td-insights-remediate-playbook">
       <AnsibeTowerIcon />
       {__('Playbook')}
     </span>
   ) : (
     <span className="td-insights-remediate-manual">{__('Manual')}</span>
-  ),
-});
+  );
 
-export const actionsFormatter = (props, { rowData = {} }) => {
+export const actionsFormatter = rowData => {
   const { recommendationUrl, accessRHUrl, isLocalAdvisorEngine } = rowData;
   const dropdownItems = [];
 
@@ -51,9 +47,7 @@ export const actionsFormatter = (props, { rowData = {} }) => {
       </DropdownItem>
     );
 
-  return {
-    children: <DropdownToggle items={dropdownItems} />,
-  };
+  return <DropdownToggle items={dropdownItems} />;
 };
 
 export const columns = [
@@ -61,39 +55,39 @@ export const columns = [
     id: 'hostname',
     sortKey: 'hostname',
     title: __('Hostname'),
-    transforms: [cellWidth(20), sortable],
+    width: 20,
   },
   {
     id: 'recommendation',
     sortKey: 'title',
     title: __('Recommendation'),
-    transforms: [cellWidth(50), sortable],
+    width: 50,
   },
   {
-    id: 'total risk',
+    id: 'total_risk',
     sortKey: 'total_risk',
     title: __('Total risk'),
-    transforms: [cellWidth(15), sortable],
-    cellTransforms: [totalRiskFormatter],
+    width: 15,
+    formatter: totalRiskFormatter,
   },
   {
-    id: 'remediate',
+    id: 'has_playbook',
     title: __('Remediate'),
-    transforms: [cellWidth(10)],
-    cellTransforms: [hasPlaybookFormatter],
+    width: 10,
+    formatter: hasPlaybookFormatter,
   },
   {
     id: 'actions',
     title: '',
-    transforms: [cellWidth(5)],
-    cellTransforms: [actionsFormatter],
+    width: 5,
+    formatter: actionsFormatter,
   },
 ];
 
 export const getColumnsWithoutHostname = () => {
-  const nextCols = columns.slice(1);
-  nextCols[0].transforms = [cellWidth(70), sortable];
-  return nextCols;
+  return columns
+    .slice(1)
+    .map(col => (col.id === 'recommendation' ? { ...col, width: 70 } : col));
 };
 
 export const paginationTitles = {

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

@@ -6,7 +6,6 @@ export const modifySelectedRows = (
   hits,
   selectedIds,
   showSelectAllAlert,
-  hideHost,
   isLocalAdvisorEngine
 ) => {
   if (hits.length === 0) return [];
@@ -24,12 +23,13 @@ export const modifySelectedRows = (
         solution_url,
       }) => {
         const disableCheckbox = !has_playbook;
-        const cells = [hostname, title, total_risk, has_playbook, results_url];
-        if (hideHost) cells.shift();
         return {
-          cells,
           disableCheckbox,
           id,
+          hostname,
+          recommendation: title,
+          total_risk,
+          has_playbook,
           /** The main table checkbox will be seen as selected only if all rows are selected,
            * in this case we need to select also the disabled once and hide it with css */
           selected: selectedIds[id] || (disableCheckbox && showSelectAllAlert),
@@ -45,8 +45,7 @@ export const getSortColumnIndex = (columns, sortBy) => {
   let colIndex = 0;
   columns.forEach((col, index) => {
     if (col.sortKey === sortBy) {
-      // The checkbox column shifts the data columns by 1;
-      colIndex = index + 1;
+      colIndex = index;
     }
   });
   return colIndex;