foreman_rh_cloud 14.2.0 → 14.3.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid } from 'patternfly-react';
+import { Grid, GridItem } from '@patternfly/react-core';
 import InventorySettings from '../InventorySettings';
 import PageDescription from './components/PageDescription';
 import InventoryFilter from '../InventoryFilter';
@@ -20,14 +20,14 @@ const PageHeader = () => {
           <PageDescription />
         </div>
       )}
-      <Grid.Row>
-        <Grid.Col xs={4}>
+      <Grid hasGutter>
+        <GridItem span={4}>
           <InventoryFilter />
-        </Grid.Col>
-        <Grid.Col xs={7} xsOffset={1}>
+        </GridItem>
+        <GridItem span={8}>
           <ToolbarButtons />
-        </Grid.Col>
-      </Grid.Row>
+        </GridItem>
+      </Grid>
     </div>
   );
 };

data/webpack/ForemanInventoryUpload/Components/PageHeader/PageHeader.scss

@@ -1,6 +1,6 @@
 .rh-cloud-inventory-page {
   .inventory-upload-header {
-    padding: var(--pf-v5-global--spacer--md) var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--lg);
+    padding: var(--pf-v5-global--spacer--md) 0 var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--lg);
 
     h1 {
       font-family: 'RedHatDisplay';
@@ -13,7 +13,7 @@
     }
 
     .pf-v5-c-dropdown__toggle {
-      margin-right: -20px;
+      margin-right: 0;
     }
 
     .settings-alert {
@@ -38,6 +38,7 @@
 
     .title-dropdown {
       float: right;
+      margin-right: -24px;
     }
   }
 }

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

@@ -1,11 +1,14 @@
 import React, { useState } from 'react';
-import { Grid, GridItem } from '@patternfly/react-core';
 import {
+  Grid,
+  GridItem,
   Dropdown,
   DropdownItem,
-  KebabToggle,
-  DropdownPosition,
-} from '@patternfly/react-core/deprecated';
+  DropdownList,
+  MenuToggle,
+} from '@patternfly/react-core';
+import { EllipsisVIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
 import Head from 'foremanReact/components/Head';
 import {
   INVENTORY_PAGE_TITLE,
@@ -25,37 +28,7 @@ const PageTitle = () => {
   const isIop = useIopConfig();
   const [showPingModal, setPingModal] = useState(false);
   const togglePingModal = () => setPingModal(v => !v);
-  const dropdownItems = [
-    <DropdownItem
-      key="tasks-history-button"
-      ouiaId="tasks-history-button"
-      href={getActionsHistoryUrl()}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      {ACTIONS_HISTORY_BUTTON_TEXT}
-    </DropdownItem>,
-    <DropdownItem
-      key="inventory-documentation-button"
-      ouiaId="inventory-documentation-button"
-      href={getInventoryDocsUrl()}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      {DOCS_BUTTON_TEXT}
-    </DropdownItem>,
-    ...(!isIop
-      ? [
-          <DropdownItem
-            key="cloud-ping"
-            ouiaId="dropdownItem-cloud-ping"
-            onClick={togglePingModal}
-          >
-            {CLOUD_PING_TITLE}
-          </DropdownItem>,
-        ]
-      : []),
-  ];
+
   return (
     <Grid className="inventory-upload-header-title">
       <GridItem span={6}>
@@ -64,21 +37,65 @@ const PageTitle = () => {
         </Head>
         <h1>{INVENTORY_PAGE_TITLE}</h1>
       </GridItem>
-      <GridItem span={6}>
+      <GridItem
+        span={6}
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          marginRight: '-16px',
+        }}
+      >
         <Dropdown
           className="title-dropdown"
           ouiaId="title-dropdown"
-          onSelect={() => setIsDropdownOpen(false)}
-          toggle={
-            <KebabToggle
-              onToggle={(_event, isOpen) => setIsDropdownOpen(isOpen)}
-            />
-          }
           isOpen={isDropdownOpen}
-          isPlain
-          dropdownItems={dropdownItems}
-          position={DropdownPosition.right}
-        />
+          onSelect={() => setIsDropdownOpen(false)}
+          onOpenChange={val => setIsDropdownOpen(val)}
+          popperProps={{ position: 'end' }}
+          toggle={toggleRef => (
+            <MenuToggle
+              ref={toggleRef}
+              aria-label={__('Actions')}
+              variant="plain"
+              onClick={() => setIsDropdownOpen(prev => !prev)}
+              isExpanded={isDropdownOpen}
+            >
+              <EllipsisVIcon />
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>
+            <DropdownItem
+              key="tasks-history-button"
+              ouiaId="tasks-history-button"
+              to={getActionsHistoryUrl()}
+              component="a"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {ACTIONS_HISTORY_BUTTON_TEXT}
+            </DropdownItem>
+            <DropdownItem
+              key="inventory-documentation-button"
+              ouiaId="inventory-documentation-button"
+              to={getInventoryDocsUrl()}
+              component="a"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {DOCS_BUTTON_TEXT}
+            </DropdownItem>
+            {!isIop && (
+              <DropdownItem
+                key="cloud-ping"
+                ouiaId="dropdownItem-cloud-ping"
+                onClick={togglePingModal}
+              >
+                {CLOUD_PING_TITLE}
+              </DropdownItem>
+            )}
+          </DropdownList>
+        </Dropdown>
         <CloudPingModal
           isOpen={showPingModal}
           toggle={togglePingModal}

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

@@ -121,14 +121,11 @@ describe('PageHeader', () => {
         },
       });
 
-      const gridRow = container.querySelector('.row');
-      expect(gridRow).toBeTruthy();
+      const grid = container.querySelector('.pf-v5-l-grid');
+      expect(grid).toBeTruthy();
 
-      const filterColumn = container.querySelector('.col-xs-4');
-      expect(filterColumn).toBeTruthy();
-
-      const toolbarColumn = container.querySelector('.col-xs-7');
-      expect(toolbarColumn).toBeTruthy();
+      expect(screen.getByTestId('inventory-filter')).toBeTruthy();
+      expect(screen.getByTestId('toolbar-buttons')).toBeTruthy();
     });
 
     test('renders description section only when not in IoP mode', () => {

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/Components/TaskConstants.js

@@ -0,0 +1,6 @@
+// Task durations reported by the API are in seconds; used to derive
+// minutes/seconds for display in TaskHistory and TaskProgress.
+export const SECONDS_PER_MINUTE = 60;
+
+// Progress percentage to show once a task has finished running.
+export const PERCENT_COMPLETE = 100;

data/webpack/ForemanInventoryUpload/Components/TaskHistory/TaskHistory.js

@@ -18,6 +18,7 @@ import {
 } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
+import { SECONDS_PER_MINUTE } from '../TaskConstants';
 import './taskHistory.scss';
 
 const TaskHistory = ({ tasks, title }) => {
@@ -52,8 +53,8 @@ const TaskHistory = ({ tasks, title }) => {
     if (!Number.isFinite(seconds) || seconds < 0) {
       return __('N/A');
     }
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
+    const mins = Math.floor(seconds / SECONDS_PER_MINUTE);
+    const secs = Math.floor(seconds % SECONDS_PER_MINUTE);
     if (mins > 0) {
       return `${mins}m ${secs}s`;
     }

data/webpack/ForemanInventoryUpload/Components/TaskProgress/TaskProgress.js

@@ -29,6 +29,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { inventoryUrl } from '../../ForemanInventoryHelpers';
 import { selectSubscriptionConnectionEnabled } from '../InventorySettings/InventorySettingsSelectors';
 import { useIopConfig } from '../../../common/Hooks/ConfigHooks';
+import { SECONDS_PER_MINUTE, PERCENT_COMPLETE } from '../TaskConstants';
 import './taskProgress.scss';
 
 const TaskProgress = ({
@@ -213,8 +214,8 @@ const TaskProgress = ({
     ) {
       return '';
     }
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
+    const mins = Math.floor(seconds / SECONDS_PER_MINUTE);
+    const secs = Math.floor(seconds % SECONDS_PER_MINUTE);
     if (mins > 0) {
       return `${mins}m ${secs}s`;
     }
@@ -232,7 +233,7 @@ const TaskProgress = ({
   if (isStartingNewTask) {
     progressValue = 0;
   } else if (task.state === 'stopped') {
-    progressValue = 100;
+    progressValue = PERCENT_COMPLETE;
   } else {
     progressValue = task.progress || 0;
   }

data/webpack/ForemanInventoryUpload/ForemanInventoryHelpers.js

@@ -7,7 +7,7 @@ export const inventoryUrl = path =>
 
 export const getInventoryDocsUrl = () =>
   getDocsURL(
-    'Managing_Hosts',
+    'Administering_Project',
     'configuring-foreman-server-for-cloud-connection'
   );
 

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,17 +1,20 @@
+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', () => {
+    it('requests the admin guide cloud connection chapter', () => {
       getInventoryDocsUrl();
       expect(getDocsURL).toHaveBeenCalledWith(
-        'Managing_Hosts',
-        'configuring-foreman-server-for-cloud-connection'
+        'Administering_Project',
+        'configuring-foreman-server-for-cloud-connection'
       );
     });
   });