foreman_rh_cloud 14.1.3 → 14.2.1

data/webpack/ForemanInventoryUpload/Components/AccountList/Components/EmptyState/EmptyState.js

@@ -1,15 +1,23 @@
 import React from 'react';
-import { EmptyState, Spinner } from 'patternfly-react';
+import {
+  EmptyState,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateVariant,
+  Spinner,
+} from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import './emptyState.scss';
 
 const inventoryEmptyState = () => (
-  <EmptyState>
-    <Spinner loading inline size="lg" />
-    <EmptyState.Title>
-      {__('Fetching data about your accounts')}
-    </EmptyState.Title>
-    <EmptyState.Info>{__('Loading...')}</EmptyState.Info>
+  <EmptyState variant={EmptyStateVariant.lg}>
+    <EmptyStateIcon icon={Spinner} />
+    <EmptyStateHeader
+      titleText={<>{__('Fetching data about your accounts')}</>}
+      headingLevel="h2"
+    />
+    <EmptyStateBody>{__('Loading...')}</EmptyStateBody>
   </EmptyState>
 );
 

data/webpack/ForemanInventoryUpload/Components/AccountList/Components/EmptyState/__tests__/EmptyState.test.js

@@ -5,9 +5,7 @@ import EmptyState from '../EmptyState';
 describe('EmptyState', () => {
   it('renders fetching data message', () => {
     render(<EmptyState />);
-    expect(
-      screen.getByText('Fetching data about your accounts')
-    ).toBeTruthy();
+    expect(screen.getByText('Fetching data about your accounts')).toBeTruthy();
   });
 
   it('renders loading indicator', () => {

data/webpack/ForemanInventoryUpload/Components/AccountList/Components/EmptyState/emptyState.scss

@@ -1,9 +1,5 @@
 .rh-cloud-inventory-page {
-  .blank-slate-pf {
+  .pf-v5-c-empty-state {
     margin-top: 100px;
-
-    .spinner {
-      float: none;
-    }
   }
 }

data/webpack/ForemanInventoryUpload/Components/AccountList/Components/ErrorState/ErrorState.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Icon } from 'patternfly-react';
+import { TimesIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import './errorState.scss';
 
 const ErrorState = ({ error }) => (
   <div className="error_state">
-    <Icon className="error_icon" name="times" size="2x" />
+    <TimesIcon className="error_icon" size="xl" />
     <p>{__('Encountered an error while trying to access the server:')}</p>
     <p className="error_description">{error}</p>
   </div>

data/webpack/ForemanInventoryUpload/Components/AccountList/Components/ListItem/__tests__/ListItem.test.js

@@ -32,5 +32,4 @@ describe('ListItem', () => {
     expect(screen.getByText('Generated')).toBeTruthy();
     expect(screen.getByText('Uploaded')).toBeTruthy();
   });
-
 });

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

@@ -3,9 +3,7 @@ import { render, screen } from '@testing-library/react';
 import AccountList from '../AccountList';
 import { accounts } from '../AccountList.fixtures';
 
-jest.mock('../Components/ListItem', () => ({ label }) => (
-  <div>{label}</div>
-));
+jest.mock('../Components/ListItem', () => ({ label }) => <div>{label}</div>);
 
 describe('AccountList', () => {
   it('renders account labels', () => {
@@ -26,9 +24,7 @@ describe('AccountList', () => {
 
   it('shows empty state when accounts are empty', () => {
     render(<AccountList accounts={{}} />);
-    expect(
-      screen.getByText('Fetching data about your accounts')
-    ).toBeTruthy();
+    expect(screen.getByText('Fetching data about your accounts')).toBeTruthy();
   });
 
   it('shows error state when error is present', () => {

data/webpack/ForemanInventoryUpload/Components/AccountList/__tests__/AccountListReducer.test.js

@@ -13,7 +13,6 @@ import {
   processStatusName,
   pollingResponse,
   accounts,
-  CloudConnectorStatus,
 } from '../AccountList.fixtures';
 
 describe('AccountList reducer', () => {
@@ -30,7 +29,6 @@ describe('AccountList reducer', () => {
       payload: pollingResponse,
     });
     expect(state.accounts).toEqual(accounts);
-    expect(state.CloudConnectorStatus).toEqual(CloudConnectorStatus);
     expect(state.error).toBeNull();
   });
 

data/webpack/ForemanInventoryUpload/Components/InventoryFilter/Components/ClearButton/ClearButton.js

@@ -1,19 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { noop } from 'foremanReact/common/helpers';
-import { Icon, OverlayTrigger, Tooltip } from 'patternfly-react';
+import { Tooltip, Button } from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 
 const ClearButton = ({ onClear }) => (
-  <OverlayTrigger
-    overlay={
-      <Tooltip id="inventory_filter_clear_overlay">{__('Clear')}</Tooltip>
-    }
-    placement="top"
-    trigger={['hover', 'focus']}
-  >
-    <Icon name="close" className="inventory-clear-button" onClick={onClear} />
-  </OverlayTrigger>
+  <Tooltip content={__('Clear')} position="top">
+    <Button
+      variant="plain"
+      className="inventory-clear-button"
+      onClick={onClear}
+      aria-label={__('Clear')}
+      ouiaId="inventory-clear-button"
+    >
+      <TimesIcon />
+    </Button>
+  </Tooltip>
 );
 
 ClearButton.propTypes = {

data/webpack/ForemanInventoryUpload/Components/InventoryFilter/InventoryFilter.js

@@ -1,11 +1,17 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, TextInput } from '@patternfly/react-core';
+import {
+  FormGroup,
+  TextInput,
+  InputGroup,
+  InputGroupItem,
+  Button,
+} from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
 import { noop } from 'foremanReact/common/helpers';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { useForemanOrganization } from 'foremanReact/Root/Context/ForemanContext';
-import ClearButton from './Components/ClearButton';
 import './inventoryFilter.scss';
 import { ANY_ORGANIZATION } from './InventoryFilterConstants';
 
@@ -24,15 +30,28 @@ const InventoryFilter = ({
   return (
     <form id="inventory_filter_form">
       <FormGroup>
-        <TextInput
-          id="inventory_filter_input"
-          ouiaId="inventory_filter_input"
-          value={filterTerm}
-          type="text"
-          placeholder={__('Filter..')}
-          onChange={(e, v) => handleFilterChange(v)}
-        />
-        <ClearButton onClear={handleFilterClear} />
+        <InputGroup>
+          <InputGroupItem isFill>
+            <TextInput
+              id="inventory_filter_input"
+              ouiaId="inventory_filter_input"
+              value={filterTerm}
+              type="text"
+              placeholder={__('Filter..')}
+              onChange={(e, v) => handleFilterChange(v)}
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button
+              ouiaId="inventory-filter-clear-button"
+              variant="plain"
+              aria-label={__('Clear')}
+              onClick={handleFilterClear}
+            >
+              <TimesIcon />
+            </Button>
+          </InputGroupItem>
+        </InputGroup>
       </FormGroup>
     </form>
   );

data/webpack/ForemanInventoryUpload/Components/InventoryFilter/__tests__/integration.test.js

@@ -31,7 +31,9 @@ describe('InventoryFilter integration test', () => {
 
     const actions = store.getActions();
     const filterAction = actions.find(
-      a => a.type === INVENTORY_FILTER_UPDATE && a.payload.filterTerm === 'some_new_filter'
+      a =>
+        a.type === INVENTORY_FILTER_UPDATE &&
+        a.payload.filterTerm === 'some_new_filter'
     );
     expect(filterAction).toBeTruthy();
   });

data/webpack/ForemanInventoryUpload/Components/InventoryFilter/inventoryFilter.scss

@@ -1,28 +1,34 @@
 #inventory_filter_form {
-  .pf-v5-c-form__group-control {
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    -webkit-flex-wrap: nowrap;
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-    -webkit-justify-content: flex-end;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
-    -webkit-align-content: center;
-    -ms-flex-line-pack: center;
-    align-content: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
-    align-items: center;
+  .pf-v5-c-form__group {
     margin-bottom: 0;
+  }
+
+  .pf-v5-c-input-group {
+    width: 100%;
+    position: relative;
+
+    .pf-v5-c-input-group__item {
+      &:last-child {
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        pointer-events: auto;
+
+        .pf-v5-c-button {
+          margin-right: 8px;
+        }
+      }
+
+      &:first-child {
+        flex: 1;
 
-    .inventory-clear-button {
-      position: absolute;
-      right: 27px;
+        .pf-v5-c-form-control {
+          padding-right: 40px;
+        }
+      }
     }
   }
 }

data/webpack/ForemanInventoryUpload/Components/InventorySettings/InventorySettings.js

@@ -52,12 +52,12 @@ const InventorySettings = () => {
       })}
       <MinimalInventoryDropdown setChosenValue={setChosenValue} />
       {Object.keys(childSettingsDict).length > 0 && ( // Only render this section if there are child settings
-        <div style={{ marginTop: '1.5em' }}>
+        <div className="child-settings">
           <Flex>
-            <FlexItem>
-              <span style={{ width: '6em' }} />
+            <FlexItem flex={{ default: 'flexNone' }}>
+              <span className="child-settings-spacer" />
             </FlexItem>
-            <FlexItem>
+            <FlexItem flex={{ default: 'flex_1' }}>
               {Object.keys(childSettingsDict).map(key => (
                 <AdvancedSetting
                   key={key}

data/webpack/ForemanInventoryUpload/Components/InventorySettings/InventorySettings.scss

@@ -1,14 +1,27 @@
 .rh-cloud-inventory-page {
   .inventory-settings {
-    border: 1px solid #ededed;
-    border-radius: 4px;
+    border: 1px solid var(--pf-v5-global--BorderColor--100);
+    border-radius: var(--pf-v5-global--BorderRadius--sm);
     padding: 10px;
-    margin-bottom: 15px;
+    margin-bottom: var(--pf-v5-global--spacer--md);
+    margin-left: 20px;
     float: right;
+    max-width: 450px;
 
     h3 {
       margin-top: 0;
+      margin-bottom: 10px;
       font-weight: 600;
+      font-size: var(--pf-v5-global--FontSize--md);
+    }
+
+    .child-settings {
+      margin-top: 10px;
+      margin-left: 0;
+
+      .child-settings-spacer {
+        display: none;
+      }
     }
   }
 }

data/webpack/ForemanInventoryUpload/Components/InventorySettings/MinimalInventoryDropdown.js

@@ -72,6 +72,7 @@ const MinimalInventoryDropdown = ({ setChosenValue }) => {
       isOpen={isOpen}
       onSelect={onSelect}
       onOpenChange={val => setIsOpen(val)}
+      popperProps={{ width: '350px' }}
       toggle={toggleRef => (
         <MenuToggle
           ref={toggleRef}
@@ -84,20 +85,18 @@ const MinimalInventoryDropdown = ({ setChosenValue }) => {
       )}
       shouldFocusToggleOnSelect
     >
-      <div style={{ maxWidth: '28em' }}>
-        <DropdownList>
-          {Object.entries(dropdownValues).map(([value, item]) => (
-            <DropdownItem
-              value={value}
-              key={value}
-              description={item.description}
-              ouiaId={`inventory-dropdownItem-${value}`}
-            >
-              {item.title}
-            </DropdownItem>
-          ))}
-        </DropdownList>
-      </div>
+      <DropdownList>
+        {Object.entries(dropdownValues).map(([value, item]) => (
+          <DropdownItem
+            value={value}
+            key={value}
+            description={item.description}
+            ouiaId={`inventory-dropdownItem-${value}`}
+          >
+            {item.title}
+          </DropdownItem>
+        ))}
+      </DropdownList>
     </Dropdown>
   );
 };

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

@@ -1,10 +1,9 @@
 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';
 import ToolbarButtons from './components/ToolbarButtons';
-import SettingsWarning from './components/SettingsWarning';
 import PageTitle from './PageTitle';
 import { useIopConfig } from '../../../common/Hooks/ConfigHooks';
 import './PageHeader.scss';
@@ -14,7 +13,6 @@ const PageHeader = () => {
 
   return (
     <div className="inventory-upload-header">
-      <SettingsWarning />
       <PageTitle />
       {!isIop && (
         <div className="inventory-upload-header-description">
@@ -22,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 {
-    margin-top: 35px;
+    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 {
@@ -33,12 +33,12 @@
     }
 
     .inventory-upload-header-title {
-      margin-top: -15px;
       margin-bottom: 8px;
     }
 
     .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,
@@ -18,38 +21,14 @@ import {
   getInventoryDocsUrl,
 } from '../../ForemanInventoryHelpers';
 import CloudPingModal from './components/CloudPingModal';
+import { useIopConfig } from '../../../common/Hooks/ConfigHooks';
 
 const PageTitle = () => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  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>,
-    <DropdownItem
-      key="cloud-ping"
-      ouiaId="dropdownItem-cloud-ping"
-      onClick={togglePingModal}
-    >
-      {CLOUD_PING_TITLE}
-    </DropdownItem>,
-  ];
+
   return (
     <Grid className="inventory-upload-header-title">
       <GridItem span={6}>
@@ -58,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

@@ -20,9 +20,6 @@ jest.mock('foremanReact/Root/Context/ForemanContext', () => ({
 
 // Mock child components to isolate PageHeader testing
 // This prevents child component complexity from affecting our tests
-jest.mock('../components/SettingsWarning', () => () => (
-  <div data-testid="settings-warning">SettingsWarning</div>
-));
 jest.mock('../PageTitle', () => () => (
   <div data-testid="page-title">PageTitle</div>
 ));
@@ -59,7 +56,6 @@ describe('PageHeader', () => {
       });
 
       // All components should be present when not in IoP mode
-      expect(screen.getByTestId('settings-warning')).toBeTruthy();
       expect(screen.getByTestId('page-title')).toBeTruthy();
       expect(screen.getByTestId('inventory-settings')).toBeTruthy();
       expect(screen.getByTestId('page-description')).toBeTruthy();
@@ -83,7 +79,6 @@ describe('PageHeader', () => {
       });
 
       // Core components should still be present
-      expect(screen.getByTestId('settings-warning')).toBeTruthy();
       expect(screen.getByTestId('page-title')).toBeTruthy();
       expect(screen.getByTestId('inventory-filter')).toBeTruthy();
       expect(screen.getByTestId('toolbar-buttons')).toBeTruthy();
@@ -126,14 +121,11 @@ describe('PageHeader', () => {
         },
       });
 
-      const gridRow = container.querySelector('.row');
-      expect(gridRow).toBeTruthy();
-
-      const filterColumn = container.querySelector('.col-xs-4');
-      expect(filterColumn).toBeTruthy();
+      const grid = container.querySelector('.pf-v5-l-grid');
+      expect(grid).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', () => {