From c1db34396d6b9af7b620bc20e9ddebb4a1d8f6a0 Mon Sep 17 00:00:00 2001
From: MariaAga <mariaaga@redhat.com>
Date: Tue, 10 Sep 2024 13:05:52 +0100
Subject: [PATCH] Update to Patternfly5

---
 .../__snapshots__/ListItem.test.js.snap       |  8 +----
 .../__snapshots__/ListItemStatus.test.js.snap |  6 +---
 .../Components/AccountList/accountList.scss   |  6 ++--
 .../InventoryFilter/InventoryFilter.js        |  2 +-
 .../InventoryFilter/inventoryFilter.scss      |  2 +-
 .../Components/PageHeader/PageHeader.scss     |  6 ++--
 .../Components/PageHeader/PageTitle.js        | 16 ++++++----
 .../components/CloudPingModal/index.js        | 21 ++++++++++--
 .../InventoryAutoUpload.test.js.snap          | 12 ++-----
 .../Components/InsightsTable/InsightsTable.js |  6 +++-
 .../InsightsTable/InsightsTableConstants.js   |  4 ++-
 .../Components/InsightsTable/Pagination.js    | 14 ++++----
 .../Components/InsightsTable/table.scss       |  2 +-
 .../RemediationModal/RemediationModal.js      |  6 +++-
 .../RemediationTableConstants.js              |  3 +-
 .../Components/ToolbarDropdown.js             |  8 +++--
 .../InsightsCloudSync/InsightsCloudSync.scss  |  2 +-
 .../InsightsTotalRiskChart.js                 |  8 ++++-
 .../NewHostDetailsTab.js                      | 14 ++++----
 webpack/common/DropdownToggle.js              |  7 ++--
 webpack/common/Switcher/HelpLabel.js          |  2 +-
 webpack/common/Switcher/SwitcherPF4.scss      |  2 +-
 .../__snapshots__/HelpLabel.test.js.snap      |  8 ++---
 webpack/common/table/EmptyState.js            | 32 +++++++------------
 24 files changed, 104 insertions(+), 93 deletions(-)

diff --git a/webpack/ForemanInventoryUpload/Components/AccountList/Components/ListItem/__tests__/__snapshots__/ListItem.test.js.snap b/webpack/ForemanInventoryUpload/Components/AccountList/Components/ListItem/__tests__/__snapshots__/ListItem.test.js.snap
index 93867f03..af825b32 100644
--- a/webpack/ForemanInventoryUpload/Components/AccountList/Components/ListItem/__tests__/__snapshots__/ListItem.test.js.snap
+++ b/webpack/ForemanInventoryUpload/Components/AccountList/Components/ListItem/__tests__/__snapshots__/ListItem.test.js.snap
@@ -10,13 +10,7 @@ exports[`ListItem rendering render with Props 1`] = `
       <Label
         className="account-icon"
         color="blue"
-        icon={
-          <UserIcon
-            color="currentColor"
-            noVerticalAlign={false}
-            size="sm"
-          />
-        }
+        icon={<UserIcon />}
         variant="outline"
       />
       test
diff --git a/webpack/ForemanInventoryUpload/Components/AccountList/Components/ListItemStatus/__tests__/__snapshots__/ListItemStatus.test.js.snap b/webpack/ForemanInventoryUpload/Components/AccountList/Components/ListItemStatus/__tests__/__snapshots__/ListItemStatus.test.js.snap
index e5d2c56e..d0270697 100644
--- a/webpack/ForemanInventoryUpload/Components/AccountList/Components/ListItemStatus/__tests__/__snapshots__/ListItemStatus.test.js.snap
+++ b/webpack/ForemanInventoryUpload/Components/AccountList/Components/ListItemStatus/__tests__/__snapshots__/ListItemStatus.test.js.snap
@@ -12,11 +12,7 @@ exports[`ListItemStatus rendering render with Props 1`] = `
     <p>
       Generating
     </p>
-    <CheckIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
+    <CheckIcon />
   </GridItem>
   <GridItem
     className="item"
diff --git a/webpack/ForemanInventoryUpload/Components/AccountList/accountList.scss b/webpack/ForemanInventoryUpload/Components/AccountList/accountList.scss
index 82f25b7f..ca665efb 100644
--- a/webpack/ForemanInventoryUpload/Components/AccountList/accountList.scss
+++ b/webpack/ForemanInventoryUpload/Components/AccountList/accountList.scss
@@ -8,11 +8,11 @@
   }
 
   .account-list {
-    .pf-c-accordion__toggle {
+    .pf-v5-c-accordion__toggle {
       margin-top: 10px;
     }
 
-    .pf-c-accordion__toggle-text {
+    .pf-v5-c-accordion__toggle-text {
       font-size: 16px;
       display: flex;
       justify-content: space-between;
@@ -21,7 +21,7 @@
       .account-icon {
         margin-right: 5px;
 
-        .pf-c-label__icon {
+        .pf-v5-c-label__icon {
           margin: 0;
         }
       }
diff --git a/webpack/ForemanInventoryUpload/Components/InventoryFilter/InventoryFilter.js b/webpack/ForemanInventoryUpload/Components/InventoryFilter/InventoryFilter.js
index 80155c34..1c7aca7f 100644
--- a/webpack/ForemanInventoryUpload/Components/InventoryFilter/InventoryFilter.js
+++ b/webpack/ForemanInventoryUpload/Components/InventoryFilter/InventoryFilter.js
@@ -29,7 +29,7 @@ const InventoryFilter = ({
           value={filterTerm}
           type="text"
           placeholder={__('Filter..')}
-          onChange={handleFilterChange}
+          onChange={(e, v) => handleFilterChange(v)}
         />
         <ClearButton onClear={handleFilterClear} />
       </FormGroup>
diff --git a/webpack/ForemanInventoryUpload/Components/InventoryFilter/inventoryFilter.scss b/webpack/ForemanInventoryUpload/Components/InventoryFilter/inventoryFilter.scss
index 4d65979d..5f27a1bd 100644
--- a/webpack/ForemanInventoryUpload/Components/InventoryFilter/inventoryFilter.scss
+++ b/webpack/ForemanInventoryUpload/Components/InventoryFilter/inventoryFilter.scss
@@ -1,5 +1,5 @@
 #inventory_filter_form {
-  .pf-c-form__group-control {
+  .pf-v5-c-form__group-control {
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
diff --git a/webpack/ForemanInventoryUpload/Components/PageHeader/PageHeader.scss b/webpack/ForemanInventoryUpload/Components/PageHeader/PageHeader.scss
index cd2a3cfe..162085a9 100644
--- a/webpack/ForemanInventoryUpload/Components/PageHeader/PageHeader.scss
+++ b/webpack/ForemanInventoryUpload/Components/PageHeader/PageHeader.scss
@@ -12,16 +12,16 @@
       font-size: 16px;
     }
 
-    .pf-c-dropdown__toggle {
+    .pf-v5-c-dropdown__toggle {
       margin-right: -20px;
     }
 
     .settings-alert {
       margin-bottom: 30px;
-      .pf-c-alert {
+      .pf-v5-c-alert {
         margin-bottom: 5px;
 
-        .pf-c-alert__title {
+        .pf-v5-c-alert__title {
           font-size: var(--pf-global--FontSize--md);
           line-height: var(--pf-global--LineHeight--md);
         }
diff --git a/webpack/ForemanInventoryUpload/Components/PageHeader/PageTitle.js b/webpack/ForemanInventoryUpload/Components/PageHeader/PageTitle.js
index c77d9d58..ea090810 100644
--- a/webpack/ForemanInventoryUpload/Components/PageHeader/PageTitle.js
+++ b/webpack/ForemanInventoryUpload/Components/PageHeader/PageTitle.js
@@ -1,12 +1,14 @@
 import React, { useState } from 'react';
 import {
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
-  DropdownPosition,
-  Grid,
-  GridItem,
+	Grid,
+	GridItem
 } from '@patternfly/react-core';
+import {
+	Dropdown,
+	DropdownItem,
+	KebabToggle,
+	DropdownPosition
+} from '@patternfly/react-core/deprecated';
 import Head from 'foremanReact/components/Head';
 import {
   INVENTORY_PAGE_TITLE,
@@ -58,7 +60,7 @@ const PageTitle = () => {
           className="title-dropdown"
           onSelect={() => setIsDropdownOpen(false)}
           toggle={
-            <KebabToggle onToggle={isOpen => setIsDropdownOpen(isOpen)} />
+            <KebabToggle onToggle={(_event, isOpen) => setIsDropdownOpen(isOpen)} />
           }
           isOpen={isDropdownOpen}
           isPlain
diff --git a/webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudPingModal/index.js b/webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudPingModal/index.js
index f2815da1..b6108315 100644
--- a/webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudPingModal/index.js
+++ b/webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudPingModal/index.js
@@ -2,7 +2,11 @@
 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';
+import {
+  Table,
+  TableBody,
+  TableHeader,
+} from '@patternfly/react-table/deprecated';
 import {
   Card,
   CardTitle,
@@ -11,6 +15,7 @@ import {
   ModalVariant,
   Spinner,
   Text,
+  Icon,
 } from '@patternfly/react-core';
 import {
   CheckCircleIcon,
@@ -108,8 +113,18 @@ const CloudPingModal = ({ title, isOpen, toggle }) => {
 
 const StatusIcon = ({ isPending, authStatus }) => {
   if (isPending) return <Spinner size="sm" />;
-  if (authStatus.success) return <CheckCircleIcon color="green" />;
-  if (authStatus.error) return <ExclamationCircleIcon color="red" />;
+  if (authStatus.success)
+    return (
+      <Icon color="green">
+        <CheckCircleIcon />
+      </Icon>
+    );
+  if (authStatus.error)
+    return (
+      <Icon color="red">
+        <ExclamationCircleIcon />
+      </Icon>
+    );
   return <Spinner size="sm" />;
 };
 
diff --git a/webpack/ForemanInventoryUpload/SubscriptionsPageExtension/InventoryAutoUpload/__tests__/__snapshots__/InventoryAutoUpload.test.js.snap b/webpack/ForemanInventoryUpload/SubscriptionsPageExtension/InventoryAutoUpload/__tests__/__snapshots__/InventoryAutoUpload.test.js.snap
index 91cf9bb2..0acb0047 100644
--- a/webpack/ForemanInventoryUpload/SubscriptionsPageExtension/InventoryAutoUpload/__tests__/__snapshots__/InventoryAutoUpload.test.js.snap
+++ b/webpack/ForemanInventoryUpload/SubscriptionsPageExtension/InventoryAutoUpload/__tests__/__snapshots__/InventoryAutoUpload.test.js.snap
@@ -56,11 +56,7 @@ exports[`InventoryAutoUpload rendering render with props 1`] = `
           >
             Show Advanced Settings
              
-            <CaretRightIcon
-              color="currentColor"
-              noVerticalAlign={false}
-              size="sm"
-            />
+            <CaretRightIcon />
           </Button>
         </Popover>
       </Col>
@@ -78,11 +74,7 @@ exports[`InventoryAutoUpload rendering render with props 1`] = `
         <Text
           component="p"
         >
-          <InfoAltIcon
-            color="currentColor"
-            noVerticalAlign={false}
-            size="sm"
-          />
+          <InfoAltIcon />
            
           More details can be found in
            
diff --git a/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTable.js b/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTable.js
index ed0d83f1..eed853c3 100644
--- a/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTable.js
+++ b/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTable.js
@@ -1,7 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import {
+	Table,
+	TableHeader,
+	TableBody
+} from '@patternfly/react-table/deprecated';
 import { useForemanSettings } from 'foremanReact/Root/Context/ForemanContext';
 import SelectAllAlert from './SelectAllAlert';
 import {
diff --git a/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableConstants.js b/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableConstants.js
index 946462bb..e42de03b 100644
--- a/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableConstants.js
+++ b/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableConstants.js
@@ -4,7 +4,9 @@ import {
   InsightsLabel,
   Section,
 } from '@redhat-cloud-services/frontend-components';
-import { DropdownItem } from '@patternfly/react-core';
+import {
+	DropdownItem
+} from '@patternfly/react-core/deprecated';
 import { sortable, cellWidth } from '@patternfly/react-table';
 import { AnsibeTowerIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
diff --git a/webpack/InsightsCloudSync/Components/InsightsTable/Pagination.js b/webpack/InsightsCloudSync/Components/InsightsTable/Pagination.js
index 9811007a..12adfc33 100644
--- a/webpack/InsightsCloudSync/Components/InsightsTable/Pagination.js
+++ b/webpack/InsightsCloudSync/Components/InsightsTable/Pagination.js
@@ -20,13 +20,13 @@ const paginationTitles = {
   page: '', // doesn't work well with translations as it adds 's' for plural, see: https://github.com/patternfly/patternfly-react/issues/6707
   itemsPerPage: __('Items per page'),
   perPageSuffix: __('per page'),
-  toFirstPage: __('Go to first page'),
-  toPreviousPage: __('Go to previous page'),
-  toLastPage: __('Go to last page'),
-  toNextPage: __('Go to next page'),
-  optionsToggle: __('Items per page'),
-  currPage: __('Current page'),
-  paginationTitle: __('Pagination'),
+  toFirstPageAriaLabel: __('Go to first page'),
+  toPreviousPageAriaLabel: __('Go to previous page'),
+  toLastPageAriaLabel: __('Go to last page'),
+  toNextPageAriaLabel: __('Go to next page'),
+  optionsToggleAriaLabel: __('Items per page'),
+  currPageAriaLabel: __('Current page'),
+  paginationAriaLabel: __('Pagination'),
 };
 
 const Pagination = ({ variant, ...props }) => {
diff --git a/webpack/InsightsCloudSync/Components/InsightsTable/table.scss b/webpack/InsightsCloudSync/Components/InsightsTable/table.scss
index 265040cc..4ce5ae6c 100644
--- a/webpack/InsightsCloudSync/Components/InsightsTable/table.scss
+++ b/webpack/InsightsCloudSync/Components/InsightsTable/table.scss
@@ -1,5 +1,5 @@
 .rh-cloud-recommendations-table {
-  .pf-c-table__check {
+  .pf-v5-c-table__check {
     input:disabled {
       display: none;
     }
diff --git a/webpack/InsightsCloudSync/Components/RemediationModal/RemediationModal.js b/webpack/InsightsCloudSync/Components/RemediationModal/RemediationModal.js
index 303b3a5b..19839a15 100644
--- a/webpack/InsightsCloudSync/Components/RemediationModal/RemediationModal.js
+++ b/webpack/InsightsCloudSync/Components/RemediationModal/RemediationModal.js
@@ -1,7 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import {
+	Table,
+	TableHeader,
+	TableBody
+} from '@patternfly/react-table/deprecated';
 import { Modal, ModalVariant, Button } from '@patternfly/react-core';
 import { isEmpty } from 'lodash';
 import { STATUS } from 'foremanReact/constants';
diff --git a/webpack/InsightsCloudSync/Components/RemediationModal/RemediationTableConstants.js b/webpack/InsightsCloudSync/Components/RemediationModal/RemediationTableConstants.js
index 5faccc96..967e584c 100644
--- a/webpack/InsightsCloudSync/Components/RemediationModal/RemediationTableConstants.js
+++ b/webpack/InsightsCloudSync/Components/RemediationModal/RemediationTableConstants.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import { cellWidth } from '@patternfly/react-table';
+import { Icon } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from '../../../ForemanRhCloudHelpers';
 
 export const rebootFormatter = ({ title: reboot }) => ({
-  children: reboot ? <CheckCircleIcon color="green" /> : __('No'),
+  children: reboot ? <Icon color="green"><CheckCircleIcon /></Icon> : __('No'),
 });
 
 export const columns = [
diff --git a/webpack/InsightsCloudSync/Components/ToolbarDropdown.js b/webpack/InsightsCloudSync/Components/ToolbarDropdown.js
index f6c82ad5..199dd613 100644
--- a/webpack/InsightsCloudSync/Components/ToolbarDropdown.js
+++ b/webpack/InsightsCloudSync/Components/ToolbarDropdown.js
@@ -1,7 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+import {
+	Dropdown,
+	DropdownItem,
+	KebabToggle
+} from '@patternfly/react-core/deprecated';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { redHatAdvisorSystems } from '../InsightsCloudSyncHelpers';
 
@@ -30,7 +34,7 @@ const ToolbarDropdown = ({ onRecommendationSync }) => {
     <Dropdown
       className="title-dropdown"
       onSelect={() => setIsDropdownOpen(false)}
-      toggle={<KebabToggle onToggle={isOpen => setIsDropdownOpen(isOpen)} />}
+      toggle={<KebabToggle onToggle={(_event, isOpen) => setIsDropdownOpen(isOpen)} />}
       isOpen={isDropdownOpen}
       isPlain
       dropdownItems={dropdownItems}
diff --git a/webpack/InsightsCloudSync/InsightsCloudSync.scss b/webpack/InsightsCloudSync/InsightsCloudSync.scss
index 3cb19e81..bda35960 100644
--- a/webpack/InsightsCloudSync/InsightsCloudSync.scss
+++ b/webpack/InsightsCloudSync/InsightsCloudSync.scss
@@ -78,7 +78,7 @@
       width: 100%;
     }
 
-    .pf-c-pagination {
+    .pf-v5-c-pagination {
       padding-right: 0;
     }
   }
diff --git a/webpack/InsightsHostDetailsTab/InsightsTotalRiskChart.js b/webpack/InsightsHostDetailsTab/InsightsTotalRiskChart.js
index a8b9d9f7..335cbe5c 100644
--- a/webpack/InsightsHostDetailsTab/InsightsTotalRiskChart.js
+++ b/webpack/InsightsHostDetailsTab/InsightsTotalRiskChart.js
@@ -3,7 +3,13 @@ import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
 import { push } from 'connected-react-router';
 import { useHistory } from 'react-router-dom';
-import { DropdownItem, Bullseye, Title } from '@patternfly/react-core';
+import {
+	Bullseye,
+	Title
+} from '@patternfly/react-core';
+import {
+	DropdownItem
+} from '@patternfly/react-core/deprecated';
 import { ChartDonut, ChartLegend, ChartLabel } from '@patternfly/react-charts';
 import { STATUS } from 'foremanReact/constants';
 import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
diff --git a/webpack/InsightsHostDetailsTab/NewHostDetailsTab.js b/webpack/InsightsHostDetailsTab/NewHostDetailsTab.js
index ef85747b..f7fac8ac 100644
--- a/webpack/InsightsHostDetailsTab/NewHostDetailsTab.js
+++ b/webpack/InsightsHostDetailsTab/NewHostDetailsTab.js
@@ -4,12 +4,14 @@ import { useDispatch, useSelector } from 'react-redux';
 import SearchBar from 'foremanReact/components/SearchBar';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {
-  Grid,
-  GridItem,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
+	Grid,
+	GridItem
 } from '@patternfly/react-core';
+import {
+	Dropdown,
+	DropdownItem,
+	KebabToggle
+} from '@patternfly/react-core/deprecated';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import InsightsTable from '../InsightsCloudSync/Components/InsightsTable';
 import RemediationModal from '../InsightsCloudSync/Components/RemediationModal';
@@ -74,7 +76,7 @@ const NewHostDetailsTab = ({ hostName, router }) => {
           ouiaId="insights-dropdown"
           onSelect={() => setIsDropdownOpen(false)}
           toggle={
-            <KebabToggle onToggle={isOpen => setIsDropdownOpen(isOpen)} />
+            <KebabToggle onToggle={(_event, isOpen) => setIsDropdownOpen(isOpen)} />
           }
           isOpen={isDropdownOpen}
           isPlain
diff --git a/webpack/common/DropdownToggle.js b/webpack/common/DropdownToggle.js
index 72d8d689..767fdffa 100644
--- a/webpack/common/DropdownToggle.js
+++ b/webpack/common/DropdownToggle.js
@@ -1,13 +1,16 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, KebabToggle } from '@patternfly/react-core';
+import {
+	Dropdown,
+	KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 const DropdownToggle = ({ items, ...props }) => {
   const [isOpen, setOpen] = useState(false);
   return (
     <Dropdown
       onSelect={() => setOpen(false)}
-      toggle={<KebabToggle onToggle={value => setOpen(value)} />}
+      toggle={<KebabToggle onToggle={(_event, value) => setOpen(value)} />}
       isOpen={isOpen}
       isPlain
       dropdownItems={items}
diff --git a/webpack/common/Switcher/HelpLabel.js b/webpack/common/Switcher/HelpLabel.js
index 8830561d..688f510e 100644
--- a/webpack/common/Switcher/HelpLabel.js
+++ b/webpack/common/Switcher/HelpLabel.js
@@ -9,7 +9,7 @@ export const HelpLabel = ({ text, id, className }) => {
     <Popover id={`${id}-help`} bodyContent={text} aria-label="help-text">
       <button
         onClick={e => e.preventDefault()}
-        className={`pf-c-form__group-label-help ${className}`}
+        className={`pf-v5-c-form__group-label-help ${className}`}
       >
         <HelpIcon />
       </button>
diff --git a/webpack/common/Switcher/SwitcherPF4.scss b/webpack/common/Switcher/SwitcherPF4.scss
index c9d7abbc..4906876e 100644
--- a/webpack/common/Switcher/SwitcherPF4.scss
+++ b/webpack/common/Switcher/SwitcherPF4.scss
@@ -7,7 +7,7 @@ label.foreman-rh-cloud-switcher {
     padding-left: 5px;
   }
 
-  .pf-c-switch__toggle {
+  .pf-v5-c-switch__toggle {
     margin-right: 5px;
   }
 }
diff --git a/webpack/common/Switcher/__tests__/__snapshots__/HelpLabel.test.js.snap b/webpack/common/Switcher/__tests__/__snapshots__/HelpLabel.test.js.snap
index 461a70f3..05081bb0 100644
--- a/webpack/common/Switcher/__tests__/__snapshots__/HelpLabel.test.js.snap
+++ b/webpack/common/Switcher/__tests__/__snapshots__/HelpLabel.test.js.snap
@@ -7,14 +7,10 @@ exports[`InsightsCloudSync helpers should return insights cloud Url 1`] = `
   id="some-id-help"
 >
   <button
-    className="pf-c-form__group-label-help some-class"
+    className="pf-v5-c-form__group-label-help some-class"
     onClick={[Function]}
   >
-    <HelpIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
+    <HelpIcon />
   </button>
 </Popover>
 `;
diff --git a/webpack/common/table/EmptyState.js b/webpack/common/table/EmptyState.js
index 66fdc1d4..a6ca3721 100644
--- a/webpack/common/table/EmptyState.js
+++ b/webpack/common/table/EmptyState.js
@@ -4,9 +4,8 @@ import {
   EmptyState,
   EmptyStateIcon,
   Spinner,
-  EmptyStateVariant,
-  Title,
-} from '@patternfly/react-core';
+  EmptyStateVariant, EmptyStateHeader,
+  } from '@patternfly/react-core';
 import { ExclamationCircleIcon, CheckIcon } from '@patternfly/react-icons';
 
 import { STATUS } from 'foremanReact/constants';
@@ -16,33 +15,24 @@ const TableEmptyState = ({ status, error, rowsLength }) => {
   switch (status) {
     case STATUS.PENDING:
       return (
-        <EmptyState variant={EmptyStateVariant.small}>
-          <EmptyStateIcon variant="container" component={Spinner} />
-          <Title headingLevel="h2" size="lg">
-            {__('Loading')}
-          </Title>
+        <EmptyState variant={EmptyStateVariant.sm}>
+          <EmptyStateHeader titleText={<>{__('Loading')}</>} icon={<EmptyStateIcon  icon={Spinner} />} headingLevel="h2" />
         </EmptyState>
       );
     case STATUS.ERROR:
       return (
-        <EmptyState variant={EmptyStateVariant.small}>
-          <EmptyStateIcon
-            variant="container"
-            component={ExclamationCircleIcon}
-          />
-          <Title headingLevel="h2" size="lg">
-            {sprintf(__('The server returned the following error: %s'), error)}
-          </Title>
+        <EmptyState variant={EmptyStateVariant.sm}>
+          <EmptyStateHeader titleText={<>{sprintf(__('The server returned the following error: %s'), error)}</>} icon={<EmptyStateIcon
+            
+            icon={ExclamationCircleIcon}
+          />} headingLevel="h2" />
         </EmptyState>
       );
     case STATUS.RESOLVED:
       if (rowsLength > 0) return null;
       return (
-        <EmptyState variant={EmptyStateVariant.large}>
-          <EmptyStateIcon variant="container" component={CheckIcon} />
-          <Title headingLevel="h2" size="lg">
-            {__('There are no recommendations for your hosts')}
-          </Title>
+        <EmptyState variant={EmptyStateVariant.lg}>
+          <EmptyStateHeader titleText={<>{__('There are no recommendations for your hosts')}</>} icon={<EmptyStateIcon  icon={CheckIcon} />} headingLevel="h2" />
         </EmptyState>
       );
     default: