Katello · MariaAga · Sep 6, 2024
diff --git a/webpack/components/ActivationKeysSearch/index.js b/webpack/components/ActivationKeysSearch/index.js
@@ -5,13 +5,14 @@ import {
   FormGroup,
   Spinner,
   EmptyState,
-  Title,
   Button,
+  Alert, EmptyStateHeader,
+} from '@patternfly/react-core';
+import {
   Select,
   SelectOption,
   SelectVariant,
-  Alert,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { FormattedMessage } from 'react-intl';
 import $ from 'jquery';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -134,9 +135,7 @@ const ActivationKeysSearch = () => {
   if (!(selectedEnvId && selectedContentViewId)) {
     return (
       <EmptyState>
-        <Title headingLevel="h4" size="lg" ouiaId="ak-empty-state-title">
-          {__('Please select a lifecycle environment and content view to view activation keys.')}
-        </Title>
+        <EmptyStateHeader titleText={<>{__('Please select a lifecycle environment and content view to view activation keys.')}</>} headingLevel="h4" />
       </EmptyState>
     );
   }
@@ -157,7 +156,7 @@ const ActivationKeysSearch = () => {
           <Select
             ouiaId="ak-select"
             variant={SelectVariant.typeaheadMulti}
-            onToggle={setIsOpen}
+            onToggle={(_event, val) => setIsOpen(val)}
             onSelect={onSelect}
             selections={selectedKeys}
             isOpen={isOpen}

diff --git a/webpack/components/Bookmark/AddBookmarkModal.js b/webpack/components/Bookmark/AddBookmarkModal.js
@@ -46,7 +46,7 @@ const AddBookmarkModal = ({ selectedItem, onClose, controller }) => {
             aria-label="input_name"
             name="name"
             value={name}
-            onChange={setName}
+            onChange={(_event, val) => setName(val)}
           />
         </FormGroup>
         <FormGroup label={__('Search Query')} isRequired fieldId="query">
@@ -58,7 +58,7 @@ const AddBookmarkModal = ({ selectedItem, onClose, controller }) => {
             aria-label="input_query"
             name="query"
             value={query}
-            onChange={setQuery}
+            onChange={(_event, val) => setQuery(val)}
           />
         </FormGroup>
         <FormGroup fieldId="public" isInline>
@@ -68,7 +68,7 @@ const AddBookmarkModal = ({ selectedItem, onClose, controller }) => {
             name="public"
             label={__('Public')}
             isChecked={isPublic}
-            onChange={setIsPublic}
+            onChange={(_event, val) => setIsPublic(val)}
           />
           <Tooltip
             position={TooltipPosition.top}

diff --git a/webpack/components/Bookmark/Bookmark.scss b/webpack/components/Bookmark/Bookmark.scss
@@ -1,20 +1,20 @@
-  .pf-c-dropdown__toggle-text {
+  .pf-v5-c-dropdown__toggle-text {
     padding: 0 5px;
 
     .fa-bookmark {
       font-size: 14px;
     }
   }
 
-  .pf-c-dropdown__toggle-icon {
+  .pf-v5-c-dropdown__toggle-icon {
     margin: 0;
   }
 
 
   .pf-m-inline {
     align-content: center;
 
-    .pf-c-check {
+    .pf-v5-c-check {
       input {
         margin-top: 2px;
       }

diff --git a/webpack/components/Bookmark/index.js b/webpack/components/Bookmark/index.js
@@ -3,7 +3,12 @@ import PropTypes from 'prop-types';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
-import { Dropdown, DropdownItem, DropdownToggle, DropdownSeparator } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+  DropdownSeparator,
+} from '@patternfly/react-core/deprecated';
 import { OutlinedBookmarkIcon } from '@patternfly/react-icons';
 import { getBookmarks } from './BookmarkActions';
 import { selectBookmarks, selectBookmarkStatus } from './BookmarkSelectors';
@@ -71,7 +76,7 @@ const Bookmark = ({
           <DropdownToggle
             ouiaId="bookmark-toggle"
             isDisabled={isDisabled || status !== STATUS.RESOLVED}
-            onToggle={setDropdownOpen}
+            onToggle={(_event, val) => setDropdownOpen(val)}
             id="toggle-id"
           >
             <OutlinedBookmarkIcon />

diff --git a/webpack/components/EditableSwitch.js b/webpack/components/EditableSwitch.js
@@ -18,7 +18,7 @@ const EditableSwitch = ({
       aria-label={identifier}
       ouiaId={`switch-${identifier}`}
       isChecked={value}
-      onChange={onSwitch}
+      onChange={(_event, val) => onSwitch(val)}
       disabled={disabled}
     />
   );

diff --git a/webpack/components/EditableTextInput/EditableTextInput.js b/webpack/components/EditableTextInput/EditableTextInput.js
@@ -69,7 +69,7 @@ const EditableTextInput = ({
     onKeyUp,
     component,
     value: inputValue || '',
-    onChange: setInputValue,
+    onChange: (e, v) => setInputValue(v),
   };
 
   return editing ? (

diff --git a/webpack/components/Errata/index.js b/webpack/components/Errata/index.js
@@ -199,7 +199,7 @@ export const ErrataToggleGroupItem = ({
     <ToggleGroupItem
       text={text}
       isSelected={isSelected}
-      onChange={onChange}
+      onChange={(e, v) => onChange(v)}
       {...toggleGroupItemProps}
     />
   </Tooltip>

diff --git a/webpack/components/Loading.js b/webpack/components/Loading.js
@@ -7,6 +7,8 @@ import {
   EmptyStateIcon,
   Spinner,
   Skeleton,
+  EmptyStateHeader,
+  EmptyStateFooter,
 } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 
@@ -19,11 +21,14 @@ const Loading = ({
   return (
     <Bullseye>
       <EmptyState>
-        <EmptyStateIcon size={size} variant="container" component={Spinner} />
-        {showText && (
-        <Title size={size} headingLevel="h4" ouiaId="loading-title">
-          {loadingText || __('Loading')}
-        </Title>)}
+        <EmptyStateHeader icon={<EmptyStateIcon size={size} icon={Spinner} />} />
+        <EmptyStateFooter>
+          {showText && (
+            <Title size={size} headingLevel="h4" ouiaId="loading-title">
+              {loadingText || __('Loading')}
+            </Title>
+          )}
+        </EmptyStateFooter>
       </EmptyState>
     </Bullseye>
   );
@@ -43,5 +48,4 @@ Loading.defaultProps = {
   skeleton: false,
 };
 
-
 export default Loading;
diff --git a/webpack/components/Packages/index.js b/webpack/components/Packages/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Icon } from '@patternfly/react-core';
 import { TableText } from '@patternfly/react-table';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {
@@ -25,7 +26,7 @@ const PackagesStatus = ({ upgradable_versions: upgradableVersions }) => {
 
   return (
     <TableText wrapModifier="nowrap">
-      {color && <PackagesIcon color={color} title={label} />} {label}
+      {color && <Icon color={color} title={label}><PackagesIcon /></Icon>} {label}
     </TableText>
   );
 };

diff --git a/webpack/components/SelectAllCheckbox/index.js b/webpack/components/SelectAllCheckbox/index.js
@@ -1,7 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, DropdownToggle, DropdownToggleCheckbox,
-  DropdownItem } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  DropdownItem,
+} from '@patternfly/react-core/deprecated';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { noop } from 'foremanReact/common/helpers';
 
@@ -95,7 +99,7 @@ const SelectAllCheckbox = ({
               key="tablewrapper-select-all-checkbox"
               ouiaId="select-all-checkbox-dropdown-toggle-checkbox"
               aria-label="Select all"
-              onChange={checked => onSelectAllCheckboxChange(checked)}
+              onChange={(_event, checked) => onSelectAllCheckboxChange(checked)}
               isChecked={selectionToggle}
               isDisabled={totalCount === 0 && selectedCount === 0}
             >

diff --git a/webpack/components/SelectableDropdown/SelectableDropdown.js b/webpack/components/SelectableDropdown/SelectableDropdown.js
@@ -1,6 +1,15 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Spinner, Select, SelectOption, SelectVariant, Level, LevelItem } from '@patternfly/react-core';
+import {
+  Spinner,
+  Level,
+  LevelItem,
+} from '@patternfly/react-core';
+import {
+  Select,
+  SelectOption,
+  SelectVariant,
+} from '@patternfly/react-core/deprecated';
 import { ErrorCircleOIcon } from '@patternfly/react-icons';
 
 
@@ -37,7 +46,7 @@ const SelectableDropdown = ({
           aria-label={`select ${title}`}
           key="type-dropdown"
           variant={SelectVariant.single}
-          onToggle={onToggle}
+          onToggle={(_event, open) => onToggle(open)}
           onSelect={onSelect}
           selections={selected}
           isOpen={isOpen}

diff --git a/webpack/components/Table/EmptyStateMessage.js b/webpack/components/Table/EmptyStateMessage.js
@@ -4,10 +4,8 @@ import {
   EmptyStateBody,
   EmptyStateIcon,
   EmptyStateVariant,
-  EmptyStateSecondaryActions,
   Bullseye,
-  Title,
-  Button,
+  Button, EmptyStateActions, EmptyStateHeader, EmptyStateFooter,
 } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -77,41 +75,41 @@ const EmptyStateMessage = ({
   return (
     <Bullseye>
       <EmptyState
-        variant={happy ? EmptyStateVariant.xl : EmptyStateVariant.small}
+        variant={happy ? EmptyStateVariant.xl : EmptyStateVariant.sm}
       >
         <KatelloEmptyStateIcon
           error={!!error}
           search={search && !showPrimaryAction}
           customIcon={PlusCircleIcon}
           happyIcon={happy}
         />
-        <Title headingLevel="h2" size="lg" ouiaId="empty-state-title">
-          {emptyStateTitle}
-        </Title>
+        <EmptyStateHeader titleText={<>{emptyStateTitle}</>} headingLevel="h2" />
         <EmptyStateBody>
           {emptyStateBody}
         </EmptyStateBody>
-        {showPrimaryAction && actionButton}
-        {showSecondaryActionAnchor &&
-          <EmptyStateSecondaryActions>
+        <EmptyStateFooter>
+          {showPrimaryAction && actionButton}
+          {showSecondaryActionAnchor &&
+          <EmptyStateActions>
             <Button variant="link" ouiaId="empty-state-secondary-action-link">
               {extraTableProps.secondaryActionTargetBlank ? (
                 <a href={secondaryActionLink} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }} >{secondaryActionTitle}</a>
               ) : (
                 <a href={secondaryActionLink} style={{ textDecoration: 'none' }} >{secondaryActionTitle}</a>
               )}
             </Button>
-          </EmptyStateSecondaryActions>
+          </EmptyStateActions>
         }
 
-        {(!showSecondaryActionAnchor &&
+          {(!showSecondaryActionAnchor &&
           (showSecondaryActionButton || searchIsActive || !!filtersAreActive)) &&
-          <EmptyStateSecondaryActions>
+          <EmptyStateActions>
             <Button variant="link" onClick={handleClick} ouiaId="empty-state-secondary-action-router-link">
               {secondaryActionText}
             </Button>
-          </EmptyStateSecondaryActions>
+          </EmptyStateActions>
         }
+        </EmptyStateFooter>
       </EmptyState>
     </Bullseye>
   );

diff --git a/webpack/components/Table/MainTable.js b/webpack/components/Table/MainTable.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
+
 import {
-  Table,
+  Table as TableDeprecated,
   TableHeader,
   TableBody,
-  TableComposable,
-} from '@patternfly/react-table';
+  Table,
+} from '@patternfly/react-table/deprecated';
 import { STATUS } from 'foremanReact/constants';
 import { isEqual } from 'lodash';
 import PropTypes from 'prop-types';
@@ -96,26 +97,26 @@ const MainTable = ({
   const tableProps = { cells, rows, ...extraTableProps };
   if (children) {
     return (
-      <TableComposable
+      <Table
         ouiaId="content-view-table-composable"
         aria-label="Content View Table"
         className="katello-pf4-table"
         {...extraTableProps}
       >
         {children}
-      </TableComposable>
+      </Table>
     );
   }
   return (
-    <Table
+    <TableDeprecated
       ouiaId="Content-View-table"
       aria-label="Content View Table"
       className="katello-pf4-table"
       {...tableProps}
     >
       <TableHeader />
       <TableBody />
-    </Table>
+    </TableDeprecated>
   );
 };
 

diff --git a/webpack/components/Table/MainTable.scss b/webpack/components/Table/MainTable.scss
@@ -1,18 +1,18 @@
 .katello-pf4-table {
-  .pf-c-dropdown.pf-m-align-right {
+  .pf-v5-c-dropdown.pf-m-align-right {
     width: 100%;
     justify-content: flex-end;
     display: flex;
   }
 
-  .pf-c-dropdown__menu {
+  .pf-v5-c-dropdown__menu {
     min-width: 0;
   }
-  .pf-c-wizard__footer {
+  .pf-v5-c-wizard__footer {
     z-index: 1;
   }
 
-  .pf-c-table tbody tr td {
+  .pf-v5-c-table tbody tr td {
     vertical-align: inherit;
   }
 

diff --git a/webpack/components/extensions/HostDetails/ActionsBar/index.js b/webpack/components/extensions/HostDetails/ActionsBar/index.js
@@ -1,6 +1,9 @@
 import React, { useContext } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+import {
+  DropdownItem,
+  DropdownSeparator,
+} from '@patternfly/react-core/deprecated';
 import { CubeIcon, UndoIcon, RedoIcon } from '@patternfly/react-icons';
 
 import { translate as __ } from 'foremanReact/common/I18n';

diff --git a/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/ChangeHostCVModal.js b/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/ChangeHostCVModal.js
@@ -229,7 +229,7 @@ const ChangeHostCVModal = ({
       </TextContent>
       <Checkbox
         isChecked={forceProfileUpload}
-        onChange={setForceProfileUpload}
+        onChange={(_event, val) => setForceProfileUpload(val)}
         label={__('Update the host immediately via remote execution')}
         id="force-profile-upload-checkbox"
         ouiaId="force-profile-upload-checkbox"