From 4823c491d226560743ab844f8ab80094e3b9b1fe Mon Sep 17 00:00:00 2001
From: MariaAga <mariaaga@redhat.com>
Date: Fri, 6 Sep 2024 14:54:57 +0100
Subject: [PATCH] Fixes #37746 - Update to pf5

---
 app/assets/stylesheets/base-pf4.scss          |  23 +--
 app/assets/stylesheets/base.scss              |   8 +-
 app/assets/stylesheets/navigation.scss        |   4 +-
 .../stylesheets/patternfly_and_overrides.scss |   2 +-
 .../patternfly_colors_overrides.scss          |  42 +++--
 .../layouts/_application_content.html.erb     |   6 +-
 app/views/layouts/base.html.erb               |   2 +-
 package.json                                  |   9 +-
 test/integration/audit_js_test.rb             |   2 +-
 test/integration/breadcrumbs_switcher_test.rb |   4 +-
 test/integration/compute_profile_js_test.rb   |   2 +-
 test/integration/config_report_js_test.rb     |   4 +-
 test/integration/fact_value_js_test.rb        |  12 +-
 test/integration/host_js_test.rb              |   4 +-
 test/integration/model_js_test.rb             |   2 +-
 test/integration/notifications_drawer_test.rb |   2 +-
 test/integration/operatingsystem_js_test.rb   |   4 +-
 test/integration/search_bar_js_test.rb        |   2 +-
 test/integration_test_helper.rb               |  14 +-
 .../javascripts/hosts/tableCheckboxes.js      |   2 +-
 .../react_app/common/variables.scss           |   2 +-
 .../components/ChartBox/ChartBox.css          |   2 +-
 .../__snapshots__/ChartBox.test.js.snap       |   3 +
 .../ColumnSelector/ColumnSelector.js          |   4 +-
 .../ColumnSelector/column-selector.scss       |   6 +-
 .../components/ConfirmModal/index.js          |   2 +-
 .../ConfirmModal/integration.test.js          |   8 +-
 .../components/DiffView/DiffToggle.js         |   4 +-
 .../components/editorsafemodecheckbox.scss    |   2 +-
 .../HostDetails/ActionsBar/index.js           |  11 +-
 .../components/HostDetails/Audits/index.js    |  22 ++-
 .../PowerStatus/PowerStatusDropDown.js        |   6 +-
 .../HostDetails/DetailsCard/index.js          |  22 ++-
 .../HostDetails/DetailsCard/styles.scss       |   8 +-
 .../components/HostDetails/HostDetails.scss   |  10 +-
 .../components/HostDetails/InlineEdit.js      |   4 +-
 .../HostDetails/Status/GlobalState.js         |  23 ++-
 .../HostDetails/Status/StatusIcon.js          |  21 ++-
 .../HostDetails/Status/StatusTable.js         |   6 +-
 .../components/HostDetails/Status/styles.scss |   8 +-
 .../NetworkingInterfaces.scss                 |   4 +-
 .../Cards/TemplatesCard/ReviewModal.js        |   6 +-
 .../Tabs/Details/Cards/TemplatesCard/index.js |  11 +-
 .../Tabs/Parameters/EditTableRow.js           |  44 +++--
 .../Tabs/Parameters/ParametersTable.js        |  22 ++-
 .../Tabs/ReportsTab/ReportsTable.js           |   8 +-
 .../HostDetails/Tabs/ReportsTab/helpers.js    |  32 +++-
 .../Templates/CardItem/CardTemplate/index.js  |  42 +++--
 .../components/HostStatuses/Status/Details.js |   6 +-
 .../HostStatuses/Status/GlobalStatusIcon.js   |   8 +-
 .../HostStatuses/Status/StatusSkeleton.js     |   2 +-
 .../Status/__snapshots__/Status.test.js.snap  |   2 +-
 .../components/HostStatuses/Status/index.js   |   2 +-
 .../components/HostsIndex/ActionKebab.js      |   1 -
 .../buildHosts/BulkBuildHostModal.js          |   6 +-
 .../BulkActions/bulkDeleteModal.scss          |   2 +-
 .../BulkReassignHostgroupModal.js             |   9 +-
 .../reassignHostGroup/HostGroupSelect.js      |   2 +-
 .../Columns/components/HostPowerStatus.js     |   4 +-
 .../components/HostsIndex/RowSelectTd.js      |   2 +-
 .../react_app/components/HostsIndex/index.js  |  12 +-
 .../components/HostsIndex/index.scss          |   6 +-
 .../react_app/components/Layout/Layout.js     |  17 +-
 .../components/Layout/NavigationSearch.js     |   6 +-
 .../Layout/__tests__/NavigationSearch.test.js |   2 +-
 .../ImpersonateIcon/ImpersonateIcon.scss      |   2 +-
 .../ImpersonateIcon.test.js.snap              |   3 -
 .../Layout/components/InstanceBanner.js       |   2 +-
 .../TaxonomySwitcher/TaxonomyDropdown.js      |  14 +-
 .../TaxonomySwitcher/TaxonomyDropdown.scss    |  12 +-
 .../Layout/components/Toolbar/Header.js       |   2 +-
 .../components/Toolbar/HeaderToolbar.js       |   2 +-
 .../components/Toolbar/HeaderToolbar.scss     |   6 +-
 .../components/Toolbar/UserDropdowns.js       |   6 +-
 .../__snapshots__/HeaderToolbar.test.js.snap  |   2 +-
 .../__snapshots__/UserDropdowns.test.js.snap  |   3 -
 .../react_app/components/Layout/layout.scss   |  62 +++----
 .../react_app/components/Loading/Loading.js   |  16 +-
 .../components/PF4/Bookmarks/BookmarkItems.js |   4 +-
 .../components/PF4/Bookmarks/Bookmarks.js     |   4 +-
 .../components/PF4/Bookmarks/bookmarks.scss   |   4 +-
 .../breadcrumb-switcher.scss                  |  14 +-
 .../PF4/BreadcrumbSwitcher/index.js           |  27 +--
 .../DocumentationLink.test.js.snap            |   6 +-
 .../components/PF4/DocumentationLink/index.js |   2 +-
 .../PF4/InlineEdit/InlineTextInput.js         |   2 +-
 .../PF4/TableIndexPage/ActionButtons.js       |   6 +-
 .../Table/SelectAllCheckbox/index.js          |   4 +-
 .../PF4/TableIndexPage/Table/Table.js         |  31 ++--
 .../PF4/TableIndexPage/Table/Table.test.js    |  18 +-
 .../PF4/TableIndexPage/TableIndexPage.js      |   2 +-
 .../PF4/TableIndexPage/TableIndexPage.scss    |   6 +-
 .../react_app/components/Pagination/index.js  |  14 +-
 .../components/Pagination/index.scss          |   2 +-
 .../SearchBar/SearchAutocomplete.js           |  12 +-
 .../components/SearchBar/SearchBar.scss       |  12 +-
 .../ToastsList/__tests__/helpers.test.js      |   2 +-
 .../ToastsList/__tests__/integration.test.js  |   8 +-
 .../components/ToastsList/helpers.js          |   2 +-
 .../components/ToastsList/style.scss          |   2 +-
 .../__snapshots__/DatePicker.test.js.snap     |  48 ++++--
 .../__snapshots__/DateTimePicker.test.js.snap |  48 ++++--
 .../__snapshots__/TimePicker.test.js.snap     |  90 +++++-----
 .../common/EmptyState/EmptyState.scss         |   4 +-
 .../common/EmptyState/EmptyStatePattern.js    |  17 +-
 .../__snapshots__/EmptyState.test.js.snap     |  17 +-
 .../common/ErrorBoundary/index.scss           |   4 +-
 .../__snapshots__/LabelIcon.test.js.snap      |  12 +-
 .../components/common/LabelIcon/index.js      |   8 +-
 .../notifications/notifications.scss          |   2 +-
 .../PersonalAccessTokenModal.js               | 157 ++++++++++--------
 .../routes/FiltersForm/FiltersForm.js         |  17 +-
 .../routes/FiltersForm/SelectResourceType.js  |   6 +-
 .../routes/FiltersForm/SelectRole.js          |   6 +-
 .../__snapshots__/Command.test.js.snap        |   1 -
 .../__snapshots__/ConfigParams.test.js.snap   |   2 -
 .../__snapshots__/HostGroup.test.js.snap      |   1 -
 .../OperatingSystem.test.js.snap              |   7 +-
 .../__snapshots__/Repository.test.js.snap     |   8 +-
 .../__snapshots__/Taxonomies.test.js.snap     |   2 -
 .../__snapshots__/TokenLifeTime.test.js.snap  |  30 ++--
 .../__tests__/integration.test.js             |   2 +-
 .../components/fields/ConfigParams.js         |   4 +-
 .../components/fields/HostGroup.js            |   2 +-
 .../components/fields/OperatingSystem.js      |  25 ++-
 .../components/fields/Packages.js             |  22 ++-
 .../components/fields/RepositoryModalInput.js |   4 +-
 .../components/fields/SmartProxy.js           |  11 +-
 .../components/fields/Taxonomies.js           |   4 +-
 .../components/fields/TokenLifeTime.js        |  48 ++++--
 .../RegistrationCommandsPage/index.js         |   4 +-
 .../routes/common/LoadingPage/index.js        |   2 +-
 132 files changed, 877 insertions(+), 636 deletions(-)

diff --git a/app/assets/stylesheets/base-pf4.scss b/app/assets/stylesheets/base-pf4.scss
index 726e40cb6f8..bc89405d701 100644
--- a/app/assets/stylesheets/base-pf4.scss
+++ b/app/assets/stylesheets/base-pf4.scss
@@ -9,24 +9,25 @@
 html {
   font-family: sans-serif;
   line-height: 1.15;
+  font-size: unset !important;
 }
 
 body {
-  font-family: var(--pf-global--FontFamily--sans-serif);
-  font-size: var(--pf-global--FontSize--sm);
-  font-weight: var(--pf-global--FontWeight--normal);
-  line-height: var(--pf-global--LineHeight--md);
+  font-family: var(--pf-v5-global--FontFamily--text);
+  font-size: var(--pf-v5-global--FontSize--sm);
+  font-weight: var(--pf-v5-global--FontWeight--normal);
+  line-height: var(--pf-v5-global--LineHeight--md);
   text-align: left;
 }
 
 a {
-  font-weight: var(--pf-global--link--FontWeight);
-  color: var(--pf-global--link--Color);
-  text-decoration: var(--pf-global--link--TextDecoration);
+  font-weight: var(--pf-v5-global--link--FontWeight);
+  color: var(--pf-v5-global--link--Color);
+  text-decoration: var(--pf-v5-global--link--TextDecoration);
 
   &:hover {
-    --pf-global--link--Color: var(--pf-global--link--Color--hover);
-    --pf-global--link--TextDecoration: var(--pf-global--link--TextDecoration--hover);
+    --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--hover);
+    --pf-v5-global--link--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
   }
 }
 
@@ -51,6 +52,6 @@ a {
   }
 }
 
-.pf-c-alert h4 {
-  line-height: var(--pf-global--LineHeight--md);
+.pf-v5-c-alert h4 {
+  line-height: var(--pf-v5-global--LineHeight--md);
 }
diff --git a/app/assets/stylesheets/base.scss b/app/assets/stylesheets/base.scss
index 4cd4a168e08..b9f5db7d791 100644
--- a/app/assets/stylesheets/base.scss
+++ b/app/assets/stylesheets/base.scss
@@ -16,8 +16,8 @@ html {
   margin-left: 250px;
   &.user-banner-present {
     --banner-height: calc(
-      2 * var(--pf-global--spacer--xs) +
-        (var(--pf-global--LineHeight--md) * var(--pf-global--FontSize--sm))
+      2 * var(--pf-v5-global--spacer--xs) +
+        (var(--pf-v5-global--LineHeight--md) * var(--pf-v5-global--FontSize--sm))
     ); // banner height is line height and a small padding
     top: calc(
       var(--header-height) + var(--banner-height)
@@ -31,7 +31,7 @@ html {
     flex-wrap: wrap;
     justify-content: space-between;
   }
-  &.pf-c-page {
+  &.pf-v5-c-page {
     display: block;
     grid-template-columns: unset;
     grid-template-areas: unset;
@@ -48,7 +48,7 @@ body {
 #react-app-root {
   height: 100%;
   width: 100%;
-  .pf-c-page {
+  .pf-v5-c-page {
     // pf grid rule stops at @media (min-width: 1200px)
     display: grid;
     grid-template-columns: max-content 1fr;
diff --git a/app/assets/stylesheets/navigation.scss b/app/assets/stylesheets/navigation.scss
index 769f663da4b..1369ff3df3b 100644
--- a/app/assets/stylesheets/navigation.scss
+++ b/app/assets/stylesheets/navigation.scss
@@ -18,8 +18,8 @@
   }
 }
 
-.pf-c-masthead {
-  background: var(--pf-c-masthead--BackgroundColor) image-url('navbar.png');
+.pf-v5-c-masthead {
+  background: var(--pf-v5-c-masthead--BackgroundColor) image-url('navbar.png');
   .user-icon {
     margin-right: 10px;
   }
diff --git a/app/assets/stylesheets/patternfly_and_overrides.scss b/app/assets/stylesheets/patternfly_and_overrides.scss
index 487ecaddbbf..bca4bed0628 100644
--- a/app/assets/stylesheets/patternfly_and_overrides.scss
+++ b/app/assets/stylesheets/patternfly_and_overrides.scss
@@ -144,7 +144,7 @@ a {
   }
 }
 
-.pf-c-backdrop {
+.pf-v5-c-backdrop {
   z-index: 2000;
 }
 
diff --git a/app/assets/stylesheets/patternfly_colors_overrides.scss b/app/assets/stylesheets/patternfly_colors_overrides.scss
index a645258abf9..5404306e8c5 100644
--- a/app/assets/stylesheets/patternfly_colors_overrides.scss
+++ b/app/assets/stylesheets/patternfly_colors_overrides.scss
@@ -1,25 +1,35 @@
 @import './colors.scss';
 
 .foreman-theme {
-  .pf-c-page__sidebar {
-    --pf-c-page__sidebar--Width: 250px;
-    --pf-c-page__sidebar--BackgroundColor: #{$nav-pf-vertical-bg-color};
+  .pf-v5-c-page__sidebar {
+    --pf-v5-c-page__sidebar--Width: 250px;
+    --pf-v5-c-page__sidebar--BackgroundColor: #{$nav-pf-vertical-bg-color};
+    #navigation-search .pf-v5-c-text-input-group {
+      background-color: var(--pf-v5-global--palette--white);
+      .pf-v5-c-text-input-group__icon{
+        color: var(--pf-v5-global--palette--black-500);
+      }
+      .pf-v5-c-text-input-group__text-input {
+        // color: var(--pf-v5-global--palette--black-500);
+        color: var(--pf-v5-global--palette--black-1000);
+      }
+    }
   }
-  .pf-c-nav__link {
-    --pf-c-nav__link--BackgroundColor: #{$nav-pf-vertical-bg-color};
-    --pf-c-nav__link--m-current--BackgroundColor: #{$nav-pf-vertical-active-bg-color};
-    --pf-c-nav__link--hover--BackgroundColor: #{$nav-pf-vertical-hover-bg-color};
-    --pf-c-nav__link--focus--BackgroundColor: #{$nav-pf-vertical-hover-bg-color};
-    --pf-c-nav__link--active--BackgroundColor: #{$nav-pf-vertical-active-bg-color};
-    --pf-c-nav__link--after--BorderColor: #f0f0f0;
-    --pf-c-nav__link--before--BorderColor: #f0f0f0;
-    --pf-c-nav__link--Color: #{$navbar-default-link-color};
+  .pf-v5-c-nav__link {
+    --pf-v5-c-nav__link--BackgroundColor: #{$nav-pf-vertical-bg-color};
+    --pf-v5-c-nav__link--m-current--BackgroundColor: #{$nav-pf-vertical-active-bg-color};
+    --pf-v5-c-nav__link--hover--BackgroundColor: #{$nav-pf-vertical-hover-bg-color};
+    --pf-v5-c-nav__link--focus--BackgroundColor: #{$nav-pf-vertical-hover-bg-color};
+    --pf-v5-c-nav__link--active--BackgroundColor: #{$nav-pf-vertical-active-bg-color};
+    --pf-v5-c-nav__link--after--BorderColor: #f0f0f0;
+    --pf-v5-c-nav__link--before--BorderColor: #f0f0f0;
+    --pf-v5-c-nav__link--Color: #{$navbar-default-link-color};
   }
 
-  .pf-c-nav__subnav {
-    --pf-c-nav--c-divider--BackgroundColor: #{$nav-pf-vertical-active-bg-color};
+  .pf-v5-c-nav__subnav {
+    --pf-v5-c-nav--c-divider--BackgroundColor: #{$nav-pf-vertical-active-bg-color};
   }
-  .pf-c-nav__item {
-    --pf-c-nav__item--before--BorderColor: #{$nav-pf-vertical-active-bg-color};
+  .pf-v5-c-nav__item {
+    --pf-v5-c-nav__item--before--BorderColor: #{$nav-pf-vertical-active-bg-color};
   }
 }
diff --git a/app/views/layouts/_application_content.html.erb b/app/views/layouts/_application_content.html.erb
index 753ff794c27..925e4fd7f7a 100644
--- a/app/views/layouts/_application_content.html.erb
+++ b/app/views/layouts/_application_content.html.erb
@@ -1,6 +1,6 @@
 <div id="main">
   <div id="content">
-    <section class="pf-c-page__main-breadcrumb">
+    <section class="pf-v5-c-page__main-breadcrumb">
       <% if content_for?(:breadcrumbs) %>
         <%= yield(:breadcrumbs) %>
       <% else %>
@@ -8,7 +8,7 @@
       <% end %>
     </section>
     <%= yield(:before_search_bar) %>
-    <div class="pf-c-page__main-section pf-m-light rails-table-toolbar">
+    <div class="pf-v5-c-page__main-section pf-m-light rails-table-toolbar">
       <div class="title_filter">
         <%= mount_search_bar if searchable? %>
         <%= yield(:search_bar) %>
@@ -25,7 +25,7 @@
         </div>
       </div>
     </div>
-    <div class="pf-c-page__main-section pf-m-light">
+    <div class="pf-v5-c-page__main-section pf-m-light">
       <%= yield %>
     </div>
   </div>
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index 7099e4d458f..1b94dd0d260 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -62,7 +62,7 @@
       <% end %>
       <div
         id="rails-app-content"
-        class="pf-c-page <%= Foreman.settings.find('instance_title') ? 'user-banner-present' : '' %>"
+        class="pf-v5-c-page <%= Foreman.settings.find('instance_title') ? 'user-banner-present' : '' %>"
       >
 
       <%= yield(:content) %>
diff --git a/package.json b/package.json
index e64762e9724..a0949d240d5 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,13 @@
   },
   "dependencies": {
     "@module-federation/utilities": "^1.7.0",
+    "@patternfly/patternfly": "^5.1.0",
+    "@patternfly/react-charts": "^7.3.0",
+    "@patternfly/react-core": "^5.1.1",
+    "@patternfly/react-icons": "^5.1.1",
+    "@patternfly/react-styles": "^5.1.1",
+    "@patternfly/react-table": "^5.1.1",
+    "@patternfly/react-tokens": "^5.1.1",
     "@theforeman/vendor": "^13.1.0",
     "graphql-tag": "^2.11.0",
     "intl": "~1.2.5",
@@ -57,7 +64,7 @@
     "style-loader": "^1.3.0",
     "stylelint": "^9.3.0",
     "stylelint-config-standard": "^18.0.0",
-    "tabbable": "~5.2.0",
+    "tabbable": "^6.2.0",
     "victory-core": "~36.8.6",
     "victory-pie": "~36.8.6",
     "webpack": "^5.75.0",
diff --git a/test/integration/audit_js_test.rb b/test/integration/audit_js_test.rb
index 4afb4b55061..a94ac5d0267 100644
--- a/test/integration/audit_js_test.rb
+++ b/test/integration/audit_js_test.rb
@@ -15,7 +15,7 @@ class AuditJSTest < IntegrationTestWithJavascript
     test "Check per page settings in context" do
       Setting['entries_per_page'] = 8
       visit audits_path
-      per_page = page.find('.pf-c-pagination')['data-per-page']
+      per_page = page.find('.pf-v5-c-pagination')['data-per-page']
       assert_equal per_page, '8'
     end
   end
diff --git a/test/integration/breadcrumbs_switcher_test.rb b/test/integration/breadcrumbs_switcher_test.rb
index 083692fd898..6d403368080 100644
--- a/test/integration/breadcrumbs_switcher_test.rb
+++ b/test/integration/breadcrumbs_switcher_test.rb
@@ -19,7 +19,7 @@ class BreadcrumbsSwitcherTest < IntegrationTestWithJavascript
     click_button 'open breadcrumb switcher'
     fill_in('Filter breadcrumb items', :with => 'three')
     wait_for_ajax
-    page.assert_selector('.pf-c-menu__item-main', count: 1)
-    page.assert_selector('.pf-c-menu__item-main', text: 'three')
+    page.assert_selector('.pf-v5-c-menu__item-main', count: 1)
+    page.assert_selector('.pf-v5-c-menu__item-main', text: 'three')
   end
 end
diff --git a/test/integration/compute_profile_js_test.rb b/test/integration/compute_profile_js_test.rb
index 68751da4d80..e1e130f8f0f 100644
--- a/test/integration/compute_profile_js_test.rb
+++ b/test/integration/compute_profile_js_test.rb
@@ -37,7 +37,7 @@ class ComputeProfileJSTest < IntegrationTestWithJavascript
     # amazon123 exists in fixture compute_attributes.yml
     click_link("amazon123 (eu-west-1-EC2)")
 
-    assert page.has_selector?('.pf-c-page__main-breadcrumb .active', :text => compute_profiles(:one).name), "#{compute_profiles(:one).name} was expected in the breadcrumb active, but was not found"
+    assert page.has_selector?('.pf-v5-c-page__main-breadcrumb .active', :text => compute_profiles(:one).name), "#{compute_profiles(:one).name} was expected in the breadcrumb active, but was not found"
     selected_profile = find("#s2id_compute_attribute_compute_profile_id .select2-chosen").text
     assert_equal compute_profiles(:one).name, selected_profile
 
diff --git a/test/integration/config_report_js_test.rb b/test/integration/config_report_js_test.rb
index 52102db3c4a..57570bd225c 100644
--- a/test/integration/config_report_js_test.rb
+++ b/test/integration/config_report_js_test.rb
@@ -23,7 +23,7 @@ class ConfigReportJSTest < IntegrationTestWithJavascript
     report
     visit config_reports_path
     click_link(report.host.name)
-    has_selector?(".foreman-search-bar .pf-c-text-input-group__text-input", text: "host = #{report.host.name}", wait: 3)
-    assert_equal "host = #{report.host.name}", find('.foreman-search-bar .pf-c-text-input-group__text-input').value
+    has_selector?(".foreman-search-bar .pf-v5-c-text-input-group__text-input", text: "host = #{report.host.name}", wait: 3)
+    assert_equal "host = #{report.host.name}", find('.foreman-search-bar .pf-v5-c-text-input-group__text-input').value
   end
 end
diff --git a/test/integration/fact_value_js_test.rb b/test/integration/fact_value_js_test.rb
index 93248546008..0b8f690d743 100644
--- a/test/integration/fact_value_js_test.rb
+++ b/test/integration/fact_value_js_test.rb
@@ -14,19 +14,19 @@ def setup
     within(:xpath, "//tr[contains(.,'#{@fact_name.name}')]") do
       click_link(@host.fqdn)
     end
-    has_selector?(".foreman-search-bar .pf-c-text-input-group__text-input", text: "host = #{@host.fqdn}", wait: 3)
-    assert_equal "host = #{@host.fqdn}", find('.foreman-search-bar .pf-c-text-input-group__text-input').value
+    has_selector?(".foreman-search-bar .pf-v5-c-text-input-group__text-input", text: "host = #{@host.fqdn}", wait: 3)
+    assert_equal "host = #{@host.fqdn}", find('.foreman-search-bar .pf-v5-c-text-input-group__text-input').value
   end
   test "fact_name fact links" do
     visit fact_values_path
     find(:xpath, "//tr[contains(.,'#{@fact_name.name}')]//td[2]//a").click
-    has_selector?(".foreman-search-bar .pf-c-text-input-group__text-input", text: "name = #{@fact_name.name}", wait: 3)
-    assert_equal "name = #{@fact_name.name}", find('.foreman-search-bar .pf-c-text-input-group__text-input').value
+    has_selector?(".foreman-search-bar .pf-v5-c-text-input-group__text-input", text: "name = #{@fact_name.name}", wait: 3)
+    assert_equal "name = #{@fact_name.name}", find('.foreman-search-bar .pf-v5-c-text-input-group__text-input').value
   end
   test "value fact links" do
     visit fact_values_path
     click_link(@value.value)
-    has_selector?(".foreman-search-bar .pf-c-text-input-group__text-input", text: "facts.#{@fact_name.name} = \"#{@value.value}\"", wait: 3)
-    assert_equal "facts.#{@fact_name.name} = \"#{@value.value}\"", find('.foreman-search-bar .pf-c-text-input-group__text-input').value
+    has_selector?(".foreman-search-bar .pf-v5-c-text-input-group__text-input", text: "facts.#{@fact_name.name} = \"#{@value.value}\"", wait: 3)
+    assert_equal "facts.#{@fact_name.name} = \"#{@value.value}\"", find('.foreman-search-bar .pf-v5-c-text-input-group__text-input').value
   end
 end
diff --git a/test/integration/host_js_test.rb b/test/integration/host_js_test.rb
index ba17e7264e4..1cb3c177fb8 100644
--- a/test/integration/host_js_test.rb
+++ b/test/integration/host_js_test.rb
@@ -77,7 +77,7 @@ class HostJSTest < IntegrationTestWithJavascript
     test "assert breadcrumbs" do
       visit current_hosts_path
       click_link @host.fqdn
-      find('.pf-c-breadcrumb__item', :text => @host.fqdn)
+      find('.pf-v5-c-breadcrumb__item', :text => @host.fqdn)
     end
 
     test "switch between hosts" do
@@ -112,7 +112,7 @@ class HostJSTest < IntegrationTestWithJavascript
       visit host_details_page_path(host)
       find('#hostdetails-kebab').click
       click_button 'Delete'
-      find('button.pf-c-button.pf-m-danger').click # the red delete button, not the menu item
+      find('button.pf-v5-c-button.pf-m-danger').click # the red delete button, not the menu item
       assert_current_path current_hosts_path
       assert_raises(ActiveRecord::RecordNotFound) do
         Host.find(host.id)
diff --git a/test/integration/model_js_test.rb b/test/integration/model_js_test.rb
index 7f075465863..5493092f430 100644
--- a/test/integration/model_js_test.rb
+++ b/test/integration/model_js_test.rb
@@ -3,7 +3,7 @@
 class ModelIntegrationTest < IntegrationTestWithJavascript
   test "create new page" do
     visit models_path
-    click_on "Create new", class: 'pf-c-button'
+    click_on "Create new", class: 'pf-v5-c-button'
     assert_current_path new_model_path
     fill_in "model_name", :with => "IBM 123"
     fill_in "model_hardware_model", :with => "IBMabcde"
diff --git a/test/integration/notifications_drawer_test.rb b/test/integration/notifications_drawer_test.rb
index 3fbd84cc199..55465bbbf73 100644
--- a/test/integration/notifications_drawer_test.rb
+++ b/test/integration/notifications_drawer_test.rb
@@ -47,7 +47,7 @@ def notifications_open_and_close_flow
 
   def navigate_somewhere_with_turbolinks
     # check the outside click with turbolinks
-    page.find('a.pf-c-masthead__brand').click
+    page.find('a.pf-v5-c-masthead__brand').click
     # wait for loader to dissapear
     page.has_no_selector?('div.spinner')
   end
diff --git a/test/integration/operatingsystem_js_test.rb b/test/integration/operatingsystem_js_test.rb
index db2fae68a30..b7714db25f1 100644
--- a/test/integration/operatingsystem_js_test.rb
+++ b/test/integration/operatingsystem_js_test.rb
@@ -19,8 +19,8 @@ class OperatingsystemJSTest < IntegrationTestWithJavascript
     actions.find("ul > li > a.delete").click
 
     confirm_modal = page.find("#app-confirm-modal")
-    assert_equal "Confirm", confirm_modal.find(".pf-c-modal-box__title-text").text
-    assert_equal "Delete #{os.title}?", confirm_modal.find(".pf-c-modal-box__body").text
+    assert_equal "Confirm", confirm_modal.find(".pf-v5-c-modal-box__title-text").text
+    assert_equal "Delete #{os.title}?", confirm_modal.find(".pf-v5-c-modal-box__body").text
 
     confirm_button = confirm_modal.find("footer > button:nth-child(1)")
     assert_equal "Confirm", confirm_button.text
diff --git a/test/integration/search_bar_js_test.rb b/test/integration/search_bar_js_test.rb
index 8e83641b31b..a09d8664769 100644
--- a/test/integration/search_bar_js_test.rb
+++ b/test/integration/search_bar_js_test.rb
@@ -6,6 +6,6 @@ class SearchBarTest < IntegrationTestWithJavascript
     work_around_selenium_file_detector_bug
     # needs to be interactive element
     find('table thead').find('a', text: 'Name').send_keys("/")
-    assert_includes(page.evaluate_script("document.activeElement.classList"), "pf-c-text-input-group__text-input")
+    assert_includes(page.evaluate_script("document.activeElement.classList"), "pf-v5-c-text-input-group__text-input")
   end
 end
diff --git a/test/integration_test_helper.rb b/test/integration_test_helper.rb
index 33011320219..490aa4f09e6 100644
--- a/test/integration_test_helper.rb
+++ b/test/integration_test_helper.rb
@@ -111,7 +111,7 @@ def assert_breadcrumb_text(text)
 
   def assert_new_button(index_path, new_link_text, new_path)
     visit index_path
-    click_link(new_link_text, :class => /^((?!pf-c-nav__link).)*$/)
+    click_link(new_link_text, :class => /^((?!pf-v5-c-nav__link).)*$/)
     assert_current_path new_path
   end
 
@@ -267,11 +267,11 @@ def refute_available_organization_menu(organization)
 
   def refute_available_organization_dropdown(organization)
     within('#location-dropdown') do
-      find('.pf-c-context-selector__toggle').click
-      within('.pf-c-context-selector__menu>div>ul', visible: :all) do
+      find('.pf-v5-c-context-selector__toggle').click
+      within('.pf-v5-c-context-selector__menu>div>ul', visible: :all) do
         assert page.has_no_link?(organization)
       end
-      find('.pf-c-context-selector__toggle').click
+      find('.pf-v5-c-context-selector__toggle').click
     end
   end
 
@@ -298,7 +298,7 @@ def select_organization(organization)
 
   def select_organization_dropdown(organization)
     within('#organization-dropdown') do
-      find('.pf-c-context-selector__toggle').click
+      find('.pf-v5-c-context-selector__toggle').click
       find("button.organization_menuitem", text: organization).click
     end
   end
@@ -306,13 +306,13 @@ def select_organization_dropdown(organization)
   def select_organization_menu(organization)
     within('.organization-menu') do
       first('button').click
-      find("li.pf-c-nav__item", text: organization).click
+      find("li.pf-v5-c-nav__item", text: organization).click
     end
   end
 
   def select_location_dropdown(location)
     within('#location-dropdown') do
-      find('.pf-c-context-selector__toggle').click
+      find('.pf-v5-c-context-selector__toggle').click
       find("button.location_menuitem", text: location).click
     end
   end
diff --git a/webpack/assets/javascripts/hosts/tableCheckboxes.js b/webpack/assets/javascripts/hosts/tableCheckboxes.js
index 5e1a1df6c85..6ff09bbaa31 100644
--- a/webpack/assets/javascripts/hosts/tableCheckboxes.js
+++ b/webpack/assets/javascripts/hosts/tableCheckboxes.js
@@ -263,7 +263,7 @@ export function buildRedirect(url) {
 
 function paginationMetaData() {
   const { total, perPage } = document.getElementsByClassName(
-    'pf-c-pagination'
+    'pf-v5-c-pagination'
   )[0].dataset;
   return { total: Number(total), perPage: Number(perPage) };
 }
diff --git a/webpack/assets/javascripts/react_app/common/variables.scss b/webpack/assets/javascripts/react_app/common/variables.scss
index f7485b1fc2b..405920bd3e9 100644
--- a/webpack/assets/javascripts/react_app/common/variables.scss
+++ b/webpack/assets/javascripts/react_app/common/variables.scss
@@ -1,3 +1,3 @@
 @import '~@theforeman/vendor/scss/variables.scss';
 
-$header-max-width: calc(#{$pf-global--breakpoint--lg} + 70px); //TODO move into @theforeman/vendor/scss/variables
+$header-max-width: calc(#{$pf-v5-global--breakpoint--lg} + 70px); //TODO move into @theforeman/vendor/scss/variables
diff --git a/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.css b/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.css
index 681c11a1b4b..eee3273dbbb 100644
--- a/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.css
+++ b/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.css
@@ -3,6 +3,6 @@
     cursor: pointer;
   }
 }
-.chart-box-modal .pf-c-modal-box__body {
+.chart-box-modal .pf-v5-c-modal-box__body {
   text-align: center;
 }
diff --git a/webpack/assets/javascripts/react_app/components/ChartBox/__snapshots__/ChartBox.test.js.snap b/webpack/assets/javascripts/react_app/components/ChartBox/__snapshots__/ChartBox.test.js.snap
index 47128c7fa02..0fffa21452a 100644
--- a/webpack/assets/javascripts/react_app/components/ChartBox/__snapshots__/ChartBox.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/ChartBox/__snapshots__/ChartBox.test.js.snap
@@ -50,6 +50,7 @@ exports[`ChartBox error 1`] = `
       onClose={[Function]}
       ouiaId="chart-2-modal"
       ouiaSafe={true}
+      position="default"
       showClose={true}
       title="some title"
       titleIconVariant={null}
@@ -125,6 +126,7 @@ exports[`ChartBox pending 1`] = `
       onClose={[Function]}
       ouiaId="chart-2-modal"
       ouiaSafe={true}
+      position="default"
       showClose={true}
       title="some title"
       titleIconVariant={null}
@@ -212,6 +214,7 @@ exports[`ChartBox resolved 1`] = `
       onClose={[Function]}
       ouiaId="chart-2-modal"
       ouiaSafe={true}
+      position="default"
       showClose={true}
       title="some title"
       titleIconVariant={null}
diff --git a/webpack/assets/javascripts/react_app/components/ColumnSelector/ColumnSelector.js b/webpack/assets/javascripts/react_app/components/ColumnSelector/ColumnSelector.js
index 3fa87496f63..9a9946dbdc5 100644
--- a/webpack/assets/javascripts/react_app/components/ColumnSelector/ColumnSelector.js
+++ b/webpack/assets/javascripts/react_app/components/ColumnSelector/ColumnSelector.js
@@ -143,8 +143,8 @@ const ColumnSelector = props => {
   };
 
   return (
-    <div className="pf-c-select-input">
-      <div className="pf-c-input-group" id="column-selector">
+    <div className="pf-v5-c-select-input">
+      <div className="pf-v5-c-input-group" id="column-selector">
         <Button
           ouiaId="manage-columns-button"
           id="btn-select-columns"
diff --git a/webpack/assets/javascripts/react_app/components/ColumnSelector/column-selector.scss b/webpack/assets/javascripts/react_app/components/ColumnSelector/column-selector.scss
index 4509ccc1452..9456a03a251 100644
--- a/webpack/assets/javascripts/react_app/components/ColumnSelector/column-selector.scss
+++ b/webpack/assets/javascripts/react_app/components/ColumnSelector/column-selector.scss
@@ -1,14 +1,14 @@
-.pf-c-input-group {
+.pf-v5-c-input-group {
   .columns-selector {
     padding-left: 0px;
 
-    .pf-c-button__icon.pf-m-start {
+    .pf-v5-c-button__icon.pf-m-start {
       padding-right: 4px;
     }
   }
 }
 
-.pf-c-tree-view {
+.pf-v5-c-tree-view {
   padding-top: 0px
 }
 
diff --git a/webpack/assets/javascripts/react_app/components/ConfirmModal/index.js b/webpack/assets/javascripts/react_app/components/ConfirmModal/index.js
index d60b0593172..eedfbdfc1de 100644
--- a/webpack/assets/javascripts/react_app/components/ConfirmModal/index.js
+++ b/webpack/assets/javascripts/react_app/components/ConfirmModal/index.js
@@ -62,7 +62,7 @@ const ConfirmModal = () => {
       ouiaId="dire-warning-checkbox"
       label={__('I understand that this action cannot be undone.')}
       isChecked={direWarningChecked}
-      onChange={val => setDireWarningChecked(val)}
+      onChange={(_event, val) => setDireWarningChecked(val)}
     />
   );
 
diff --git a/webpack/assets/javascripts/react_app/components/ConfirmModal/integration.test.js b/webpack/assets/javascripts/react_app/components/ConfirmModal/integration.test.js
index 479bf90bb00..02f9fde40a4 100644
--- a/webpack/assets/javascripts/react_app/components/ConfirmModal/integration.test.js
+++ b/webpack/assets/javascripts/react_app/components/ConfirmModal/integration.test.js
@@ -29,19 +29,19 @@ describe('Confirm modal', () => {
         .first()
         .simulate('click');
     
-    expect(wrapper.find('.pf-c-modal-box__body').text()).toEqual(modalMessage);
-    expect(wrapper.find('.pf-c-modal-box__title-text').text()).toEqual(modalTitle);
+    expect(wrapper.find('.pf-v5-c-modal-box__body').text()).toEqual(modalMessage);
+    expect(wrapper.find('.pf-v5-c-modal-box__title-text').text()).toEqual(modalTitle);
 
     expect(onConfirm).toBeCalledTimes(0);
 
     wrapper
-        .find('.pf-c-modal-box__footer > Button')
+        .find('.pf-v5-c-modal-box__footer > Button')
         .first()
         .simulate('click');
     
     expect(onConfirm).toBeCalledTimes(1);
 
     // The modal should be hidden
-    expect(wrapper.find('.pf-c-modal-box__body')).toHaveLength(0);
+    expect(wrapper.find('.pf-v5-c-modal-box__body')).toHaveLength(0);
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/DiffView/DiffToggle.js b/webpack/assets/javascripts/react_app/components/DiffView/DiffToggle.js
index 25ec31db26a..f9a6676083e 100644
--- a/webpack/assets/javascripts/react_app/components/DiffView/DiffToggle.js
+++ b/webpack/assets/javascripts/react_app/components/DiffView/DiffToggle.js
@@ -16,7 +16,7 @@ const DiffToggle = ({ stateView, changeState }) => {
         buttonId={`${SPLIT}-btn`}
         className="diff-button"
         isSelected={stateView === SPLIT}
-        onChange={selected => handleItemClick(selected, SPLIT)}
+        onChange={(_event, selected) => handleItemClick(selected, SPLIT)}
       />
       <ToggleGroupItem
         key={`${UNIFIED}-btn`}
@@ -24,7 +24,7 @@ const DiffToggle = ({ stateView, changeState }) => {
         buttonId={`${UNIFIED}-btn`}
         className="diff-button"
         isSelected={stateView === UNIFIED}
-        onChange={selected => handleItemClick(selected, UNIFIED)}
+        onChange={(_event, selected) => handleItemClick(selected, UNIFIED)}
       />
     </ToggleGroup>
   );
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/editorsafemodecheckbox.scss b/webpack/assets/javascripts/react_app/components/Editor/components/editorsafemodecheckbox.scss
index 20ad1c8a1c5..19a62f09e45 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/editorsafemodecheckbox.scss
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/editorsafemodecheckbox.scss
@@ -1,6 +1,6 @@
 label.safemode-rendering-checkbox {
   font-size: 14px;
-  font-weight: var(--pf-global--link--FontWeight);
+  font-weight: var(--pf-v5-global--link--FontWeight);
   margin: 5px;
   cursor: pointer;
 }
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/ActionsBar/index.js b/webpack/assets/javascripts/react_app/components/HostDetails/ActionsBar/index.js
index 4570a2f249d..da74837b1d9 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/ActionsBar/index.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/ActionsBar/index.js
@@ -1,15 +1,13 @@
 import PropTypes from 'prop-types';
 import React, { useState, createContext } from 'react';
 import { useSelector, shallowEqual, useDispatch } from 'react-redux';
+import { Button, Split, SplitItem } from '@patternfly/react-core';
 import {
-  Button,
   DropdownItem,
   Dropdown,
   DropdownSeparator,
   KebabToggle,
-  Split,
-  SplitItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import {
   DatabaseIcon,
   TrashIcon,
@@ -159,7 +157,10 @@ const ActionsBar = ({
               ouiaId="kebab-dropdown"
               alignments={{ default: 'right' }}
               toggle={
-                <KebabToggle id="hostdetails-kebab" onToggle={onKebabToggle} />
+                <KebabToggle
+                  id="hostdetails-kebab"
+                  onToggle={(_event, isOpen) => onKebabToggle(isOpen)}
+                />
               }
               isOpen={kebabIsOpen}
               isPlain
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/Audits/index.js b/webpack/assets/javascripts/react_app/components/HostDetails/Audits/index.js
index 681dac736c6..a5aec7fb702 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/Audits/index.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/Audits/index.js
@@ -4,7 +4,6 @@ import { useDispatch } from 'react-redux';
 import {
   Bullseye,
   Card,
-  CardActions,
   CardHeader,
   CardTitle,
   CardBody,
@@ -12,7 +11,7 @@ import {
   Title,
 } from '@patternfly/react-core';
 import {
-  TableComposable,
+  Table /* data-codemods */,
   TableText,
   Tr,
   Tbody,
@@ -48,11 +47,18 @@ const AuditCard = ({ hostName }) => {
   return (
     <GridItem xl2={3} xl={4} md={6} lg={4}>
       <Card ouiaId="audit-card">
-        <CardHeader>
+        <CardHeader
+          actions={{
+            actions: (
+              <>
+                <a onClick={() => dispatch(push(uiUrl))}> {__('All audits')}</a>
+              </>
+            ),
+            hasNoOffset: false,
+            className: undefined,
+          }}
+        >
           <CardTitle>{__('Recent audits')}</CardTitle>
-          <CardActions>
-            <a onClick={() => dispatch(push(uiUrl))}> {__('All audits')}</a>
-          </CardActions>
         </CardHeader>
         <CardBody>
           <SkeletonLoader
@@ -67,7 +73,7 @@ const AuditCard = ({ hostName }) => {
             }
           >
             {audits && (
-              <TableComposable
+              <Table
                 aria-label="audits table"
                 variant="compact"
                 borders="compactBorderless"
@@ -95,7 +101,7 @@ const AuditCard = ({ hostName }) => {
                     )
                   )}
                 </Tbody>
-              </TableComposable>
+              </Table>
             )}
           </SkeletonLoader>
         </CardBody>
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/PowerStatus/PowerStatusDropDown.js b/webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/PowerStatus/PowerStatusDropDown.js
index 6530db2db6d..4cdf25a6a6f 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/PowerStatus/PowerStatusDropDown.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/PowerStatus/PowerStatusDropDown.js
@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
+import { Tooltip } from '@patternfly/react-core';
 import {
   Dropdown,
   DropdownToggle,
   DropdownItem,
-  Tooltip,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 import { foremanUrl } from '../../../../common/helpers';
 import { useAPI } from '../../../../common/hooks/API/APIHooks';
@@ -72,7 +72,7 @@ const PowerStatusDropDown = ({ hostID, hasPowerPermission, isBmc }) => {
           <DropdownToggle
             ouiaId="power-status-dropdown-toggle"
             isDisabled={!hasPowerPermission || currentState === 'na'}
-            onToggle={onToggle}
+            onToggle={(_event, open) => onToggle(open)}
           >
             <PowerStatusIcon
               state={currentState}
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/index.js b/webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/index.js
index e525702a1ca..d6e77c26d64 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/index.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/index.js
@@ -7,7 +7,6 @@ import {
   DescriptionListGroup,
   DescriptionListDescription,
   Card,
-  CardActions,
   CardHeader,
   CardTitle,
   CardBody,
@@ -49,14 +48,21 @@ const DetailsCard = ({
 }) => (
   <GridItem xl2={3} xl={4} md={6} lg={4} rowSpan={2}>
     <Card ouiaId="details-card">
-      <CardHeader>
+      <CardHeader
+        actions={{
+          actions: (
+            <>
+              <PowerStatusDropDown
+                hostID={hostName}
+                hasPowerPermission={hasPowerPermission}
+              />
+            </>
+          ),
+          hasNoOffset: false,
+          className: undefined,
+        }}
+      >
         <CardTitle>{__('Details')}</CardTitle>
-        <CardActions>
-          <PowerStatusDropDown
-            hostID={hostName}
-            hasPowerPermission={hasPowerPermission}
-          />
-        </CardActions>
       </CardHeader>
       <CardBody>
         <DescriptionList>
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/styles.scss b/webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/styles.scss
index d4477492bc6..9b448d5eb87 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/styles.scss
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/styles.scss
@@ -3,18 +3,18 @@
 }
 
 .disabled-text {
-  color: var(--pf-global--disabled-color--200);
+  color: var(--pf-v5-global--disabled-color--200);
   font-size: small;
 }
 
 .power-on {
-  color: var(--pf-global--success-color--100);
+  color: var(--pf-v5-global--success-color--100);
 }
 
 .power-off {
-  color: var(--pf-global--danger-color--100);
+  color: var(--pf-v5-global--danger-color--100);
 }
 
 .power-na {
-  color: var(--pf-global--disable-color--200);
+  color: var(--pf-v5-global--disable-color--200);
 }
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/HostDetails.scss b/webpack/assets/javascripts/react_app/components/HostDetails/HostDetails.scss
index d5579d84f85..136c58fbee9 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/HostDetails.scss
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/HostDetails.scss
@@ -1,8 +1,8 @@
 .pf-gray-background {
-  background: var(--pf-global--BackgroundColor--200);
+  background: var(--pf-v5-global--BackgroundColor--200);
 }
 
-.pf-c-page__main-section.pf-m-light.host-details-tabs-section {
+.pf-v5-c-page__main-section.pf-m-light.host-details-tabs-section {
   padding-left: 24px;
   .tab-width-138 {
     max-width: calc(
@@ -44,7 +44,7 @@
 
 .host-details-cards-section {
   .host-details-tab-item {
-    .pf-c-card {
+    .pf-v5-c-card {
       height: 100%;
     }
   }
@@ -52,12 +52,12 @@
     display: contents;
   }
 
-  .pf-c-inline-edit__value {
+  .pf-v5-c-inline-edit__value {
     overflow-wrap: anywhere;
     white-space: pre-line;
   }
 }
 
-.host-details-tabs-section + .pf-c-tabs {
+.host-details-tabs-section + .pf-v5-c-tabs {
   overflow: visible;
 }
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/InlineEdit.js b/webpack/assets/javascripts/react_app/components/HostDetails/InlineEdit.js
index 6d8b8db4bb8..4baba084a3c 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/InlineEdit.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/InlineEdit.js
@@ -53,7 +53,7 @@ export const InlineEdit = ({
             <TextArea
               value={value}
               type="text"
-              onChange={handleInputChange}
+              onChange={(_event, newValue) => handleInputChange(newValue)}
               aria-label="Editable text input"
             />
           </FlexItem>
@@ -84,7 +84,7 @@ export const InlineEdit = ({
             spacer={{ default: 'spacerNone' }}
             grow={{ default: 'grow' }}
           >
-            <div className="pf-c-inline-edit__value">{value}</div>
+            <div className="pf-v5-c-inline-edit__value">{value}</div>
           </FlexItem>
           {editPermission && (
             <FlexItem spacer={{ default: 'spacerNone' }}>
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/Status/GlobalState.js b/webpack/assets/javascripts/react_app/components/HostDetails/Status/GlobalState.js
index 8102f4e3303..be9004f450f 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/Status/GlobalState.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/Status/GlobalState.js
@@ -1,6 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Title, EmptyState, EmptyStateIcon } from '@patternfly/react-core';
+import {
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateHeader,
+} from '@patternfly/react-core';
 import { global_success_color_100 as successColor } from '@patternfly/react-tokens';
 import { CheckCircleIcon, BanIcon } from '@patternfly/react-icons';
 import { translate as __ } from '../../../common/I18n';
@@ -20,13 +24,18 @@ const GlobalState = ({
       : __('All statuses OK');
     return (
       <EmptyState style={{ marginTop: '-1px' }} isFullHeight>
-        <EmptyStateIcon
-          icon={showBanIcon ? BanIcon : CheckCircleIcon}
-          color={showBanIcon ? undefined : successColor.value}
+        <EmptyStateHeader
+          titleText={
+            <>{cannotViewStatuses ? __('No statuses to show') : statusText}</>
+          }
+          icon={
+            <EmptyStateIcon
+              icon={showBanIcon ? BanIcon : CheckCircleIcon}
+              color={showBanIcon ? undefined : successColor.value}
+            />
+          }
+          headingLevel="h4"
         />
-        <Title ouiaId="global-state-title" size="lg" headingLevel="h4">
-          {cannotViewStatuses ? __('No statuses to show') : statusText}
-        </Title>
       </EmptyState>
     );
   }
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/Status/StatusIcon.js b/webpack/assets/javascripts/react_app/components/HostDetails/Status/StatusIcon.js
index baf5292b184..648c3097716 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/Status/StatusIcon.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/Status/StatusIcon.js
@@ -6,6 +6,7 @@ import {
   ExclamationCircleIcon,
   BanIcon,
 } from '@patternfly/react-icons';
+import { Icon } from '@patternfly/react-core';
 import './styles.scss';
 import {
   ERROR_STATUS_STATE,
@@ -19,26 +20,38 @@ const StatusIcon = ({ statusNumber, label, style }) => {
     case OK_STATUS_STATE:
       return (
         <span className="status-success" style={style}>
-          <CheckCircleIcon noVerticalAlign /> {label}
+          <Icon isInline>
+            <CheckCircleIcon />
+          </Icon>
+          {label}
         </span>
       );
     case WARNING_STATUS_STATE:
       return (
         <span className="status-warning" style={style}>
-          <ExclamationTriangleIcon noVerticalAlign /> {label}
+          <Icon isInline>
+            <ExclamationTriangleIcon />
+          </Icon>
+          {label}
         </span>
       );
 
     case ERROR_STATUS_STATE:
       return (
         <span className="status-error" style={style}>
-          <ExclamationCircleIcon noVerticalAlign /> {label}
+          <Icon isInline>
+            <ExclamationCircleIcon />
+          </Icon>
+          {label}
         </span>
       );
     case NA_STATUS_STATE:
       return (
         <span className="disabled" style={style}>
-          <BanIcon noVerticalAlign /> {label}
+          <Icon isInline>
+            <BanIcon />
+          </Icon>
+          {label}
         </span>
       );
     default:
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/Status/StatusTable.js b/webpack/assets/javascripts/react_app/components/HostDetails/Status/StatusTable.js
index d0bec794233..bc9aeebd48a 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/Status/StatusTable.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/Status/StatusTable.js
@@ -1,7 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+} from '@patternfly/react-table/deprecated';
 import RelativeDateTime from '../../common/dates/RelativeDateTime';
 import StatusIcon from './StatusIcon';
 import { forgetStatus } from './StatusActions';
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/Status/styles.scss b/webpack/assets/javascripts/react_app/components/HostDetails/Status/styles.scss
index 1d641337505..9ae3fd47095 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/Status/styles.scss
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/Status/styles.scss
@@ -9,17 +9,17 @@
 }
 
 .disabled {
-  color: var(--pf-global--disabled-color--200);
+  color: var(--pf-v5-global--disabled-color--200);
 }
 
 .status-success {
-  color: var(--pf-global--success-color--100);
+  color: var(--pf-v5-global--success-color--100);
 }
 
 .status-error {
-  color: var(--pf-global--danger-color--100);
+  color: var(--pf-v5-global--danger-color--100);
 }
 
 .status-warning {
-  color: var(--pf-global--warning-color--100);
+  color: var(--pf-v5-global--warning-color--100);
 }
\ No newline at end of file
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/NetworkingInterfaces/NetworkingInterfaces.scss b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/NetworkingInterfaces/NetworkingInterfaces.scss
index 03bf0a8d527..9be0ae5418f 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/NetworkingInterfaces/NetworkingInterfaces.scss
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/NetworkingInterfaces/NetworkingInterfaces.scss
@@ -2,11 +2,11 @@
   .interface-name svg {
     margin-left: 5px;
   }
-  .pf-l-grid__item {
+  .pf-v5-l-grid__item {
     text-align: left;
     white-space: pre-wrap;
   }
-  .pf-c-accordion__toggle-text {
+  .pf-v5-c-accordion__toggle-text {
     width: 100%;
   }
 }
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/TemplatesCard/ReviewModal.js b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/TemplatesCard/ReviewModal.js
index 5c071f181d2..17e2beaac18 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/TemplatesCard/ReviewModal.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/TemplatesCard/ReviewModal.js
@@ -77,8 +77,8 @@ export const ReviewModal = ({
       {!safeMode && (
         <div
           style={{
-            paddingTop: 'var(--pf-global--spacer--lg)',
-            paddingBottom: 'var(--pf-global--spacer--lg)',
+            paddingTop: 'var(--pf-v5-global--spacer--lg)',
+            paddingBottom: 'var(--pf-v5-global--spacer--lg)',
           }}
         >
           <Switch
@@ -87,7 +87,7 @@ export const ReviewModal = ({
             label={__('Safe mode on')}
             labelOff={__('Safe mode off')}
             isChecked={showSafe}
-            onChange={setShowSafe}
+            onChange={(_event, val) => setShowSafe(val)}
           />
         </div>
       )}
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/TemplatesCard/index.js b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/TemplatesCard/index.js
index 40bdf205607..5c85fc355f4 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/TemplatesCard/index.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/TemplatesCard/index.js
@@ -2,7 +2,12 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
-import { TableComposable, Tr, Tbody, Td } from '@patternfly/react-table';
+import {
+  Table /* data-codemods */,
+  Tr,
+  Tbody,
+  Td,
+} from '@patternfly/react-table';
 import { translate as __ } from '../../../../../../common/I18n';
 import { foremanUrl } from '../../../../../../common/helpers';
 import { useAPI } from '../../../../../../common/hooks/API/APIHooks';
@@ -49,7 +54,7 @@ const TemplatesCard = ({ hostName }) => {
             template={currentTemplate}
           />
         )}
-        <TableComposable
+        <Table
           ouiaId="provisioning-templates-table"
           aria-label="templates table"
           variant="compact"
@@ -88,7 +93,7 @@ const TemplatesCard = ({ hostName }) => {
               </Tr>
             ))}
           </Tbody>
-        </TableComposable>
+        </Table>
       </SkeletonLoader>
     </CardTemplate>
   );
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Parameters/EditTableRow.js b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Parameters/EditTableRow.js
index d0277045581..358220890f9 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Parameters/EditTableRow.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Parameters/EditTableRow.js
@@ -2,11 +2,12 @@ import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Tr, Td } from '@patternfly/react-table';
-import { TimesIcon, CheckIcon } from '@patternfly/react-icons';
 import {
-  SelectVariant,
-  Select,
-  SelectOption,
+  TimesIcon,
+  CheckIcon,
+  ExclamationCircleIcon,
+} from '@patternfly/react-icons';
+import {
   Button,
   TextInput,
   TextArea,
@@ -14,7 +15,15 @@ import {
   FormGroup,
   Form,
   Tooltip,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
 } from '@patternfly/react-core';
+import {
+  SelectVariant,
+  Select,
+  SelectOption,
+} from '@patternfly/react-core/deprecated';
 import { APIActions } from '../../../../redux/API';
 import { sprintf, translate as __ } from '../../../../common/I18n';
 import { HOST_PARAM, columnNames, typeOptions } from './ParametersConstants';
@@ -97,18 +106,27 @@ export const EditParametersTableRow = ({
     <Tr ouiaId={`edit-parameters-table-row-${rowIndex}`} key={rowIndex}>
       <Td dataLabel={columnNames.name}>
         <Form>
-          <FormGroup
-            validated={name.includes(' ') ? 'error' : null}
-            helperTextInvalid={__("Name can't contain spaces")}
-          >
+          <FormGroup>
             <TextInput
               ouiaId={`edit-parameters-table-row-name-${rowIndex}`}
               validated={name.includes(' ') ? 'error' : null}
               aria-label={`${param.name} name text`}
               value={name}
-              onChange={setName}
+              onChange={(_event, val) => setName(val)}
               label={null}
             />
+            {name.includes(' ') && (
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem
+                    icon={<ExclamationCircleIcon />}
+                    variant="error"
+                  >
+                    {__("Name can't contain spaces")}
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            )}
           </FormGroup>
         </Form>
       </Td>
@@ -117,7 +135,7 @@ export const EditParametersTableRow = ({
           ouiaId={`edit-parameters-table-row-type-${rowIndex}`}
           variant={SelectVariant.single}
           aria-label={`Select ${param.name} type`}
-          onToggle={setSelectIsOpen}
+          onToggle={(_event, val) => setSelectIsOpen(val)}
           selections={type}
           isOpen={selectIsOpen}
           onSelect={(event, selection) => {
@@ -137,8 +155,8 @@ export const EditParametersTableRow = ({
               ouiaId={`edit-parameters-table-row-boolean-${rowIndex}`}
               variant={SelectVariant.single}
               aria-label={`Select ${param.name} value`}
-              onToggle={setSelectValueIsOpen}
               selections={value?.toString()}
+              onToggle={(_event, val) => setSelectValueIsOpen(val)}
               isOpen={selectValueIsOpen}
               onSelect={onSelect}
             >
@@ -151,7 +169,7 @@ export const EditParametersTableRow = ({
               ouiaId={`edit-parameters-table-row-value-${rowIndex}`}
               aria-label={`${param.name} value text`}
               value={typeof value === 'object' ? JSON.stringify(value) : value}
-              onChange={setValue}
+              onChange={(_event, val) => setValue(val)}
               label={null}
               type={isHide ? 'password' : 'text'}
               rows={1}
@@ -162,7 +180,7 @@ export const EditParametersTableRow = ({
             ouiaId={`edit-parameters-table-row-hide-${rowIndex}`}
             label={__('Hide value')}
             isChecked={isHide}
-            onChange={setIsHide}
+            onChange={(_event, val) => setIsHide(val)}
             id="hide value checkbox"
           />
         </>
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Parameters/ParametersTable.js b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Parameters/ParametersTable.js
index 902efb75c5d..714ad26294e 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Parameters/ParametersTable.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Parameters/ParametersTable.js
@@ -1,6 +1,12 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { TableComposable, Thead, Tbody, Tr, Th } from '@patternfly/react-table';
+import {
+  Table /* data-codemods */,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+} from '@patternfly/react-table';
 import {
   Toolbar,
   ToolbarContent,
@@ -80,8 +86,12 @@ export const ParametersTable = ({
             <SearchInput
               placeholder={__('Find by name')}
               value={search}
-              onChange={setSearch}
-              onSearch={onSearch}
+              onChange={(_e, value) => {
+                setSearch(value);
+              }}
+              onSearch={(_e, newSearch) => {
+                onSearch(newSearch);
+              }}
               onClear={() => {
                 setSearch('');
                 onSearch('');
@@ -113,7 +123,7 @@ export const ParametersTable = ({
           </ToolbarItem>
         </ToolbarContent>
       </Toolbar>
-      <TableComposable
+      <Table
         ouiaId="parameters-table"
         id="parameters-table"
         aria-label="Parameters table"
@@ -125,7 +135,7 @@ export const ParametersTable = ({
             <Th>{columnNames.type}</Th>
             <Th>{columnNames.value}</Th>
             <Th>{columnNames.source}</Th>
-            <Th />
+            <Th aria-label='actions'/>
           </Tr>
         </Thead>
         <Tbody>
@@ -160,7 +170,7 @@ export const ParametersTable = ({
             />
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
       <Pagination
         variant="bottom"
         itemCount={allParameters.length}
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/ReportsTab/ReportsTable.js b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/ReportsTab/ReportsTable.js
index b445244387e..c0096f36a74 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/ReportsTab/ReportsTable.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/ReportsTab/ReportsTable.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  TableComposable,
+  Table /* data-codemods */,
   Thead,
   Tbody,
   Tr,
@@ -56,7 +56,7 @@ const ReportsTable = ({ reports, status, fetchReports, error, origin }) => {
     emptyState = (
       <EmptyState
         icon={
-          <ExclamationCircleIcon color="var(--pf-global--palette--red-200)" />
+          <ExclamationCircleIcon color="var(--pf-v5-global--palette--red-200)" />
         }
         header={__('Something went wrong')}
         description={error}
@@ -68,14 +68,14 @@ const ReportsTable = ({ reports, status, fetchReports, error, origin }) => {
 
   return (
     <React.Fragment>
-      <TableComposable
+      <Table
         aria-label="Reports table"
         ouiaId="reports-table"
         variant="compact"
       >
         {tableHead}
         {tableBody}
-      </TableComposable>
+      </Table>
       {emptyState}
     </React.Fragment>
   );
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/ReportsTab/helpers.js b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/ReportsTab/helpers.js
index bd9a8c0a137..0627eb29d27 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/ReportsTab/helpers.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/ReportsTab/helpers.js
@@ -2,14 +2,12 @@
 /* eslint-disable react/prop-types */
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
+import { Button, FlexItem, Flex, Icon } from '@patternfly/react-core';
 import {
-  Button,
   Dropdown,
   DropdownItem,
   KebabToggle,
-  FlexItem,
-  Flex,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import {
   ExclamationCircleIcon,
   SyncAltIcon,
@@ -25,23 +23,34 @@ import RelativeDateTime from '../../../common/dates/RelativeDateTime';
 const statusMapper = {
   failed: amount => (
     <>
-      <ExclamationCircleIcon color="var(--pf-global--palette--red-100)" />{' '}
+      <Icon color="var(--pf-v5-global--palette--red-100)">
+        <ExclamationCircleIcon />
+      </Icon>
       {amount}
     </>
   ),
   failed_restarts: amount => (
     <>
-      <SyncAltIcon color="var(--pf-global--palette--red-100)" /> {amount}
+      <Icon color="var(--pf-v5-global--palette--red-100)">
+        <SyncAltIcon />
+      </Icon>{' '}
+      {amount}
     </>
   ),
   restarted: amount => (
     <>
-      <SyncAltIcon color="var(--pf-global--palette--orange-300)" /> {amount}
+      <Icon color="var(--pf-v5-global--palette--orange-300)">
+        <SyncAltIcon />
+      </Icon>{' '}
+      {amount}
     </>
   ),
   applied: amount => (
     <>
-      <CheckCircleIcon color="var(--pf-global--success-color--100)" /> {amount}
+      <Icon color="var(--pf-v5-global--success-color--100)">
+        <CheckCircleIcon />
+      </Icon>{' '}
+      {amount}
     </>
   ),
   skipped: amount => (
@@ -122,7 +131,12 @@ export const ActionFormatter = ({ id, can_delete }, fetchReports) => {
         <Dropdown
           ouiaId="action-dropdown"
           onSelect={v => setOpen(!v)}
-          toggle={<KebabToggle onToggle={setOpen} id="toggle-action" />}
+          toggle={
+            <KebabToggle
+              onToggle={(_event, val) => setOpen(val)}
+              id="toggle-action"
+            />
+          }
           isOpen={isOpen}
           isPlain
           dropdownItems={dropdownItems}
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/Templates/CardItem/CardTemplate/index.js b/webpack/assets/javascripts/react_app/components/HostDetails/Templates/CardItem/CardTemplate/index.js
index ba8800021ff..647e55fa75a 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/Templates/CardItem/CardTemplate/index.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/Templates/CardItem/CardTemplate/index.js
@@ -2,15 +2,13 @@ import PropTypes from 'prop-types';
 import React, { useState, useContext, useEffect } from 'react';
 import {
   Card,
-  CardActions,
   CardHeader,
   CardExpandableContent,
-  Dropdown,
-  KebabToggle,
   CardTitle,
   CardBody,
   GridItem,
 } from '@patternfly/react-core';
+import { Dropdown, KebabToggle } from '@patternfly/react-core/deprecated';
 
 import { CardExpansionContext } from '../../../CardExpansionContext';
 
@@ -62,23 +60,33 @@ const CardTemplate = ({
     >
       <Card isExpanded={isExpanded} ouiaId={`card-template-${cardId}`}>
         <CardHeader
+          {...(dropdownItems && {
+            actions: {
+              actions: (
+                <>
+                  <Dropdown
+                    ouiaId="template-card-dropdown"
+                    toggle={
+                      <KebabToggle
+                        onToggle={(_event, isOpen) => onDropdownToggle(isOpen)}
+                      />
+                    }
+                    isOpen={dropdownVisibility}
+                    dropdownItems={dropdownItems}
+                    isPlain
+                    position="right"
+                    {...overrideDropdownProps}
+                    onSelect={onDropdownSelect}
+                  />
+                </>
+              ),
+              hasNoOffset: false,
+              className: undefined,
+            },
+          })}
           onExpand={expandable && onExpandCallback}
           isToggleRightAligned
         >
-          {dropdownItems && (
-            <CardActions>
-              <Dropdown
-                ouiaId="template-card-dropdown"
-                toggle={<KebabToggle onToggle={onDropdownToggle} />}
-                isOpen={dropdownVisibility}
-                dropdownItems={dropdownItems}
-                isPlain
-                position="right"
-                {...overrideDropdownProps}
-                onSelect={onDropdownSelect}
-              />
-            </CardActions>
-          )}
           <CardTitle>{header}</CardTitle>
         </CardHeader>
         {expandable ? (
diff --git a/webpack/assets/javascripts/react_app/components/HostStatuses/Status/Details.js b/webpack/assets/javascripts/react_app/components/HostStatuses/Status/Details.js
index 3c14fbb347d..7a82b99ba12 100644
--- a/webpack/assets/javascripts/react_app/components/HostStatuses/Status/Details.js
+++ b/webpack/assets/javascripts/react_app/components/HostStatuses/Status/Details.js
@@ -1,6 +1,10 @@
 import React, { Fragment } 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 GlobalStatusIcon from './GlobalStatusIcon';
 import LinkOrLabel from './LinkOrLabel';
 import { translate as __ } from '../../../common/I18n';
diff --git a/webpack/assets/javascripts/react_app/components/HostStatuses/Status/GlobalStatusIcon.js b/webpack/assets/javascripts/react_app/components/HostStatuses/Status/GlobalStatusIcon.js
index 69aa023ed72..f22b71bd23f 100644
--- a/webpack/assets/javascripts/react_app/components/HostStatuses/Status/GlobalStatusIcon.js
+++ b/webpack/assets/javascripts/react_app/components/HostStatuses/Status/GlobalStatusIcon.js
@@ -17,28 +17,28 @@ const GlobalStatusIcon = ({ status, ...props }) => {
     case GLOBAL_STATUS_OK:
       return (
         <CheckCircleIcon
-          style={{ fill: 'var(--pf-global--success-color--100)' }}
+          style={{ fill: 'var(--pf-v5-global--success-color--100)' }}
           {...props}
         />
       );
     case GLOBAL_STATUS_WARN:
       return (
         <ExclamationTriangleIcon
-          style={{ fill: 'var(--pf-global--warning-color--100)' }}
+          style={{ fill: 'var(--pf-v5-global--warning-color--100)' }}
           {...props}
         />
       );
     case GLOBAL_STATUS_ERROR:
       return (
         <ExclamationCircleIcon
-          style={{ fill: 'var(--pf-global--danger-color--100)' }}
+          style={{ fill: 'var(--pf-v5-global--danger-color--100)' }}
           {...props}
         />
       );
     default:
       return (
         <QuestionCircleIcon
-          style={{ fill: 'var(--pf-global--info-color--200)' }}
+          style={{ fill: 'var(--pf-v5-global--info-color--200)' }}
           {...props}
         />
       );
diff --git a/webpack/assets/javascripts/react_app/components/HostStatuses/Status/StatusSkeleton.js b/webpack/assets/javascripts/react_app/components/HostStatuses/Status/StatusSkeleton.js
index ccb1b9aaf27..fbe26f63981 100644
--- a/webpack/assets/javascripts/react_app/components/HostStatuses/Status/StatusSkeleton.js
+++ b/webpack/assets/javascripts/react_app/components/HostStatuses/Status/StatusSkeleton.js
@@ -5,7 +5,7 @@ import GlobalStatusIcon from './GlobalStatusIcon';
 
 const StatusSkeleton = () => (
   <GridItem sm={12} xl2={6}>
-    <Card ouiaId="status-card-skeleton" className="pf-c-alert pf-m-success">
+    <Card ouiaId="status-card-skeleton" className="pf-v5-c-alert pf-m-success">
       <CardHeader
         onExpand={() => {}}
         toggleButtonProps={{
diff --git a/webpack/assets/javascripts/react_app/components/HostStatuses/Status/__snapshots__/Status.test.js.snap b/webpack/assets/javascripts/react_app/components/HostStatuses/Status/__snapshots__/Status.test.js.snap
index 34d560c3c81..862fe6f6394 100644
--- a/webpack/assets/javascripts/react_app/components/HostStatuses/Status/__snapshots__/Status.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/HostStatuses/Status/__snapshots__/Status.test.js.snap
@@ -6,7 +6,7 @@ exports[`Status renders Status 1`] = `
   xl2={6}
 >
   <Card
-    className="pf-c-alert pf-m-danger"
+    className="pf-v5-c-alert pf-m-danger"
     isExpanded={false}
     ouiaId="status-card"
   >
diff --git a/webpack/assets/javascripts/react_app/components/HostStatuses/Status/index.js b/webpack/assets/javascripts/react_app/components/HostStatuses/Status/index.js
index 9ffa171612c..7e0b79c921e 100644
--- a/webpack/assets/javascripts/react_app/components/HostStatuses/Status/index.js
+++ b/webpack/assets/javascripts/react_app/components/HostStatuses/Status/index.js
@@ -47,7 +47,7 @@ const Status = ({ name }) => {
     error: { total: errorTotalCount, owned: errorOwnedCount },
   } = useSelector(state => selectHostStatusCounter(state, name));
 
-  const cardClass = classNames('pf-c-alert', {
+  const cardClass = classNames('pf-v5-c-alert', {
     'pf-m-danger': errorTotalCount,
     'pf-m-warning': !errorTotalCount && warnTotalCount,
     'pf-m-success': !errorTotalCount && !warnTotalCount,
diff --git a/webpack/assets/javascripts/react_app/components/HostsIndex/ActionKebab.js b/webpack/assets/javascripts/react_app/components/HostsIndex/ActionKebab.js
index 1c9fd8bbb7c..9529baaa56f 100644
--- a/webpack/assets/javascripts/react_app/components/HostsIndex/ActionKebab.js
+++ b/webpack/assets/javascripts/react_app/components/HostsIndex/ActionKebab.js
@@ -41,7 +41,6 @@ export const ActionKebab = ({ items, menuOpen, setMenuOpen }) => {
         popper={menu}
         appendTo={containerRef.current || undefined}
         isVisible={menuOpen}
-        popperMatchesTriggerWidth={false}
       />
     </div>
   );
diff --git a/webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/buildHosts/BulkBuildHostModal.js b/webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/buildHosts/BulkBuildHostModal.js
index 1c02884c859..99f973ba8f4 100644
--- a/webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/buildHosts/BulkBuildHostModal.js
+++ b/webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/buildHosts/BulkBuildHostModal.js
@@ -123,7 +123,7 @@ const BulkBuildHostModal = ({
       <Radio
         isChecked={buildRadioChecked}
         name="buildHostRadioGroup"
-        onChange={checked => handleBuildRadioSelected(checked)}
+        onChange={(_event, checked) => handleBuildRadioSelected(checked)}
         label={__('Build')}
         id="build-host-radio"
         ouiaId="build-host-radio"
@@ -134,7 +134,7 @@ const BulkBuildHostModal = ({
             name="reboot-now"
             isChecked={rebootChecked}
             isDisabled={!buildRadioChecked}
-            onChange={setRebootChecked}
+            onChange={(_event, val) => setRebootChecked(val)}
             ouiaId="build-reboot-checkbox"
           />
         }
@@ -142,7 +142,7 @@ const BulkBuildHostModal = ({
       <hr />
       <Radio
         name="buildHostRadioGroup"
-        onChange={checked => handleBuildRadioSelected(!checked)}
+        onChange={(_event, checked) => handleBuildRadioSelected(!checked)}
         label={__('Rebuild provisioning configuration only')}
         id="rebuild-host-radio"
         ouiaId="rebuild-host-radio"
diff --git a/webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/bulkDeleteModal.scss b/webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/bulkDeleteModal.scss
index 2bea7a5a854..9d62669e433 100644
--- a/webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/bulkDeleteModal.scss
+++ b/webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/bulkDeleteModal.scss
@@ -1,6 +1,6 @@
 #bulk-delete-hosts-modal {
   min-height: 21rem;
-  .pf-c-check label {
+  .pf-v5-c-check label {
     font-size: 14px;
     position: relative;
     top: 2px;
diff --git a/webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/reassignHostGroup/BulkReassignHostgroupModal.js b/webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/reassignHostGroup/BulkReassignHostgroupModal.js
index 1faa23613bf..44e96c6362f 100644
--- a/webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/reassignHostGroup/BulkReassignHostgroupModal.js
+++ b/webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/reassignHostGroup/BulkReassignHostgroupModal.js
@@ -2,13 +2,8 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
-import {
-  Modal,
-  Button,
-  TextContent,
-  Text,
-  SelectOption,
-} from '@patternfly/react-core';
+import { Modal, Button, TextContent, Text } from '@patternfly/react-core';
+import { SelectOption } from '@patternfly/react-core/deprecated';
 import { addToast } from '../../../ToastsList/slice';
 import { translate as __ } from '../../../../common/I18n';
 import { failedHostsToastParams } from '../helpers';
diff --git a/webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/reassignHostGroup/HostGroupSelect.js b/webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/reassignHostGroup/HostGroupSelect.js
index 94f2c726f35..e9833c7672d 100644
--- a/webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/reassignHostGroup/HostGroupSelect.js
+++ b/webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/reassignHostGroup/HostGroupSelect.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Select, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectVariant } from '@patternfly/react-core/deprecated';
 import PropTypes from 'prop-types';
 import { translate as __ } from '../../../../common/I18n';
 
diff --git a/webpack/assets/javascripts/react_app/components/HostsIndex/Columns/components/HostPowerStatus.js b/webpack/assets/javascripts/react_app/components/HostsIndex/Columns/components/HostPowerStatus.js
index 2ae66884dc3..70e8a26cb71 100644
--- a/webpack/assets/javascripts/react_app/components/HostsIndex/Columns/components/HostPowerStatus.js
+++ b/webpack/assets/javascripts/react_app/components/HostsIndex/Columns/components/HostPowerStatus.js
@@ -29,8 +29,8 @@ const HostPowerStatus = ({ hostName }) => {
   const tooltipText = state === 'na' ? `${title} - ${statusText}` : title;
   let powerIcon = <UnknownIcon />;
   const moveItALittleUp = { position: 'relative', top: '-0.1em' };
-  const green = 'var(--pf-global--palette--green-300)';
-  const disabledGray = 'var(--pf-global--disabled-color--200)';
+  const green = 'var(--pf-v5-global--palette--green-300)';
+  const disabledGray = 'var(--pf-v5-global--disabled-color--200)';
   switch (state) {
     case 'on':
       powerIcon = (
diff --git a/webpack/assets/javascripts/react_app/components/HostsIndex/RowSelectTd.js b/webpack/assets/javascripts/react_app/components/HostsIndex/RowSelectTd.js
index 2bd64346dd1..304b96106a0 100644
--- a/webpack/assets/javascripts/react_app/components/HostsIndex/RowSelectTd.js
+++ b/webpack/assets/javascripts/react_app/components/HostsIndex/RowSelectTd.js
@@ -15,7 +15,7 @@ export const RowSelectTd = ({
         selectOne(isSelecting, rowData[idColumnName], rowData);
       },
       isSelected: isSelected(rowData[idColumnName]),
-      disable: false,
+      isDisabled: false,
     }}
   />
 );
diff --git a/webpack/assets/javascripts/react_app/components/HostsIndex/index.js b/webpack/assets/javascripts/react_app/components/HostsIndex/index.js
index 73f7de2482d..8387d3050ed 100644
--- a/webpack/assets/javascripts/react_app/components/HostsIndex/index.js
+++ b/webpack/assets/javascripts/react_app/components/HostsIndex/index.js
@@ -5,10 +5,7 @@ import { Tr, Td, ActionsColumn } from '@patternfly/react-table';
 import {
   ToolbarItem,
   Divider,
-  Dropdown,
-  DropdownItem,
   MenuItem,
-  KebabToggle,
   Flex,
   FlexItem,
   Button,
@@ -17,6 +14,11 @@ import {
   TextContent,
   Text,
 } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+} from '@patternfly/react-core/deprecated';
 import { UndoIcon } from '@patternfly/react-icons';
 import { useForemanModal } from '../ForemanModal/ForemanModalHooks';
 import { addModal } from '../ForemanModal/ForemanModalActions';
@@ -302,7 +304,7 @@ const HostsIndex = () => {
         <KebabToggle
           aria-label="legacy-ui-kebab-toggle"
           id="legacy-ui-kebab-toggle"
-          onToggle={setLegacyUIKebabOpen}
+          onToggle={(_event, val) => setLegacyUIKebabOpen(val)}
         />
       }
       isOpen={legacyUIKebabOpen}
@@ -408,7 +410,7 @@ const HostsIndex = () => {
         {results?.map((result, rowIndex) => {
           const rowActions = getActions(result);
           return (
-            <Tr key={rowIndex} ouiaId={`table-row-${rowIndex}`} isHoverable>
+            <Tr key={rowIndex} ouiaId={`table-row-${rowIndex}`} isClickable>
               {<RowSelectTd rowData={result} {...{ selectOne, isSelected }} />}
               {columnNamesKeys.map(k => (
                 <Td key={k} dataLabel={keysToColumnNames[k]}>
diff --git a/webpack/assets/javascripts/react_app/components/HostsIndex/index.scss b/webpack/assets/javascripts/react_app/components/HostsIndex/index.scss
index 08a9029bac8..56c3881ae7c 100644
--- a/webpack/assets/javascripts/react_app/components/HostsIndex/index.scss
+++ b/webpack/assets/javascripts/react_app/components/HostsIndex/index.scss
@@ -1,15 +1,15 @@
-#legacy-ui-kebab ul.pf-c-dropdown__menu {
+#legacy-ui-kebab ul.pf-v5-c-dropdown__menu {
   padding-left: 0;
   li {
     display: unset;
     a {
       font-size: 16px;
-      color: var(--pf-c-dropdown__menu-item--Color);
+      color: var(--pf-v5-c-dropdown__menu-item--Color);
       font-weight: 300;
     }
   }
 }
 
-#header-text .pf-l-flex {
+#header-text .pf-v5-l-flex {
   align-items: center;
 }
diff --git a/webpack/assets/javascripts/react_app/components/Layout/Layout.js b/webpack/assets/javascripts/react_app/components/Layout/Layout.js
index a740ad334a7..70f582efcad 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/Layout.js
+++ b/webpack/assets/javascripts/react_app/components/Layout/Layout.js
@@ -1,6 +1,12 @@
 import React from 'react';
 
-import { Page, PageSidebar, Flex, FlexItem } from '@patternfly/react-core';
+import {
+  Page,
+  PageSidebar,
+  Flex,
+  FlexItem,
+  PageSidebarBody,
+} from '@patternfly/react-core';
 import { layoutPropTypes, layoutDefaultProps } from './LayoutHelper';
 import { InstanceBanner } from './components/InstanceBanner';
 import Header from './components/Toolbar/Header';
@@ -51,17 +57,16 @@ const Layout = ({
             }
             id="foreman-page"
             sidebar={
-              <PageSidebar
-                isNavOpen={!isCollapsed}
-                nav={
+              <PageSidebar isSidebarOpen={!isCollapsed}>
+                <PageSidebarBody>
                   <Navigation
                     items={items}
                     navigate={navigate}
                     navigationActiveItem={navigationActiveItem}
                     setNavigationActiveItem={setNavigationActiveItem}
                   />
-                }
-              />
+                </PageSidebarBody>
+              </PageSidebar>
             }
           >
             {children}
diff --git a/webpack/assets/javascripts/react_app/components/Layout/NavigationSearch.js b/webpack/assets/javascripts/react_app/components/Layout/NavigationSearch.js
index 322f7fb0a64..8555db37729 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/NavigationSearch.js
+++ b/webpack/assets/javascripts/react_app/components/Layout/NavigationSearch.js
@@ -173,11 +173,13 @@ export const NavigationSearch = ({ items, clickAndNavigate }) => {
     <SearchInput
       value={value}
       placeholder={__('Search and go')}
-      onChange={onChange}
+      onChange={(_e, newValue) => {
+        onChange(newValue);
+      }}
       onClear={onClear}
       ref={searchInputRef}
       id="navigation-search"
-      onSearch={(_, event) => {
+      onSearch={(event, _) => {
         const firstItem = navItems.find(option =>
           option.toLowerCase().includes(value.toLowerCase())
         );
diff --git a/webpack/assets/javascripts/react_app/components/Layout/__tests__/NavigationSearch.test.js b/webpack/assets/javascripts/react_app/components/Layout/__tests__/NavigationSearch.test.js
index 180ecfb1d24..95abfdde8eb 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/__tests__/NavigationSearch.test.js
+++ b/webpack/assets/javascripts/react_app/components/Layout/__tests__/NavigationSearch.test.js
@@ -25,7 +25,7 @@ describe('NavigationSearch', () => {
       getByRole,
       getByLabelText,
     } = render(
-      <div className="pf-c-masthead pf-m-display-inline">
+      <div className="pf-v5-c-masthead pf-m-display-inline">
         <NavigationSearch items={items} clickAndNavigate={() => {}} />
       </div>
     );
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/ImpersonateIcon.scss b/webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/ImpersonateIcon.scss
index fee44434dbc..bdb9133d3fb 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/ImpersonateIcon.scss
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/ImpersonateIcon.scss
@@ -21,7 +21,7 @@
   animation: blink normal 1s infinite ease-in-out; /* Opera and prob css3 final iteration */
 }
 
-.pf-c-masthead {
+.pf-v5-c-masthead {
   .nav-item-iconic .blink-image {
     color: $color-pf-gold-200;
   }
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/__snapshots__/ImpersonateIcon.test.js.snap b/webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/__snapshots__/ImpersonateIcon.test.js.snap
index b2728a11db2..65094c0cded 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/__snapshots__/ImpersonateIcon.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/__snapshots__/ImpersonateIcon.test.js.snap
@@ -12,9 +12,6 @@ exports[`ImpersonateIcon should render 1`] = `
     >
       <EyeIcon
         className="blink-image"
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
       />
     </span>
   </Tooltip>
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/InstanceBanner.js b/webpack/assets/javascripts/react_app/components/Layout/components/InstanceBanner.js
index 6c759b0e1b0..c0c9e67a520 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/InstanceBanner.js
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/InstanceBanner.js
@@ -42,7 +42,7 @@ export const InstanceBanner = ({ data }) => {
     instance && (
       <Banner
         isSticky
-        style={{ '--pf-c-banner--BackgroundColor': instanceColor }}
+        style={{ '--pf-v5-c-banner--BackgroundColor': instanceColor }}
         className="instance-banner"
       >
         <div
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.js b/webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.js
index a1106ca1838..6aba11a5747 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.js
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.js
@@ -1,13 +1,11 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
+import { Button, Grid, GridItem, Icon } from '@patternfly/react-core';
 import {
   ContextSelector,
   ContextSelectorItem,
   ContextSelectorFooter,
-  Button,
-  Grid,
-  GridItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { CheckIcon, GlobeIcon, BuildingIcon } from '@patternfly/react-icons';
 import { foremanUrl } from '../../../../common/helpers';
 import { translate as __ } from '../../../../common/I18n';
@@ -50,7 +48,11 @@ const TaxonomyDropdown = ({ taxonomyType, currentTaxonomy, taxonomies }) => {
     setSearchValue(event.target.value);
   };
 
-  const selectedIcon = <CheckIcon size="sm" className="current-taxonomy-v" />;
+  const selectedIcon = (
+    <Icon size="sm">
+      <CheckIcon className="current-taxonomy-v" />
+    </Icon>
+  );
   const anyIcon =
     taxonomyType === 'organization' ? (
       <BuildingIcon style={{ marginRight: '5px', marginTop: '3px' }} />
@@ -80,7 +82,7 @@ const TaxonomyDropdown = ({ taxonomyType, currentTaxonomy, taxonomies }) => {
     <ContextSelectorFooter>
       <Button
         ouiaId={`manage-taxonomy-button-${taxonomyType}`}
-        isSmall
+        size="sm"
         component="a"
         className={taxonomyType}
         variant="secondary"
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.scss b/webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.scss
index 5f7e814d201..db4b7a41f24 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.scss
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.scss
@@ -1,7 +1,7 @@
 @import '~@theforeman/vendor/scss/variables';
 
-.pf-c-masthead .pf-c-toolbar {
-  .pf-c-context-selector__menu-search {
+.pf-v5-c-masthead .pf-v5-c-toolbar {
+  .pf-v5-c-context-selector__menu-search {
     border-bottom: 0;
   }
   .current-taxonomy-v {
@@ -9,11 +9,11 @@
   }
   .organizations_clear,
   .locations_clear {
-    border-bottom: var(--pf-c-context-selector__menu-search--BorderBottomWidth)
-      solid var(--pf-c-context-selector__menu-search--BorderBottomColor);
+    border-bottom: var(--pf-v5-c-context-selector__menu-search--BorderBottomWidth)
+      solid var(--pf-v5-c-context-selector__menu-search--BorderBottomColor);
   }
-  .pf-c-context-selector__menu-footer > a{
+  .pf-v5-c-context-selector__menu-footer > a{
     // to override secondry button text color being white if the button is in a menu
-    color: $pf-color-blue-400
+    color: $pf-v5-color-blue-400
   }
 }
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/Header.js b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/Header.js
index 3a0cad884f1..edefb670601 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/Header.js
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/Header.js
@@ -30,7 +30,7 @@ const Header = ({
       </Button>
     </MastheadToggle>
     <MastheadMain>
-      <MastheadBrand href={root}>
+      <MastheadBrand component="a" href={root}>
         <React.Fragment>
           <Brand src={logo} alt={brand} href={root} />
           <span className="navbar-brand-txt">
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.js b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.js
index 0f1674cf025..6e7f0eb3684 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.js
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.js
@@ -36,7 +36,7 @@ const HeaderToolbar = ({
           isLoading={isLoading}
         />
       </ToolbarGroup>
-      <ToolbarGroup alignment={{ default: 'alignRight' }}>
+      <ToolbarGroup align={{ default: 'alignRight' }}>
         <ToolbarItem className="notifications_container">
           <NotificationContainer data={{ url: notificationUrl }} />
         </ToolbarItem>
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.scss b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.scss
index dc4d10290fd..71f36eb99cc 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.scss
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.scss
@@ -11,20 +11,20 @@
   }
 }
 
-.pf-c-toolbar#data-toolbar {
+.pf-v5-c-toolbar#data-toolbar {
   // Override for unupdated plugins that use unupdated foreman CSS
   display: grid;
   justify-content: normal;
 }
 
-.pf-c-masthead__brand {
+.pf-v5-c-masthead__brand {
   padding-right: 15px;
 
   &:hover {
     text-decoration: none;
   }
 
-  .pf-c-brand {
+  .pf-v5-c-brand {
     height: 34px;
   }
 
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/UserDropdowns.js b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/UserDropdowns.js
index 6e405f11256..52abb5bd172 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/UserDropdowns.js
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/UserDropdowns.js
@@ -5,7 +5,7 @@ import {
   DropdownToggle,
   DropdownItem,
   DropdownSeparator,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { UserAltIcon } from '@patternfly/react-icons';
 
 import { userPropType } from '../../LayoutHelper';
@@ -49,7 +49,9 @@ const UserDropdowns = ({ user, notificationUrl, instanceTitle, ...props }) => {
         toggle={
           <DropdownToggle
             ouiaId="user-dropdown-toggle"
-            onToggle={onDropdownToggle}
+            onToggle={(_event, newUserDropdownOpen) =>
+              onDropdownToggle(newUserDropdownOpen)
+            }
           >
             <UserAltIcon className="user-icon" />
             {userInfo.name}
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap
index cba23cba620..ee8548b0b19 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap
@@ -47,7 +47,7 @@ exports[`HeaderToolbar rendering render HeaderToolbar 1`] = `
       />
     </ForwardRef>
     <ForwardRef
-      alignment={
+      align={
         Object {
           "default": "alignRight",
         }
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/UserDropdowns.test.js.snap b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/UserDropdowns.test.js.snap
index e9cd02b34c6..9909c552ebb 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/UserDropdowns.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/UserDropdowns.test.js.snap
@@ -30,9 +30,6 @@ exports[`UserDropdown render 1`] = `
     >
       <UserAltIcon
         className="user-icon"
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
       />
       G L
     </DropdownToggle>
diff --git a/webpack/assets/javascripts/react_app/components/Layout/layout.scss b/webpack/assets/javascripts/react_app/components/Layout/layout.scss
index 050b9cc57e7..57140e5972f 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/layout.scss
+++ b/webpack/assets/javascripts/react_app/components/Layout/layout.scss
@@ -12,7 +12,7 @@
 
 .collapsed-nav {
   #react-app-root {
-    main.pf-c-page__main {
+    main.pf-v5-c-page__main {
       padding-left: 0;
     }
   }
@@ -22,7 +22,7 @@
 }
 
 #page-sidebar {
-  .pf-c-nav__item.hidden-nav-lg {
+  .pf-v5-c-nav__item.hidden-nav-lg {
     display: none;
 
     @media (max-width: $header-max-width) {
@@ -31,7 +31,7 @@
   }
 }
 
-.pf-c-nav {
+.pf-v5-c-nav {
   .nav-title-icon {
     word-break: break-word;
     overflow-wrap: break-word;
@@ -44,77 +44,77 @@
   .nav-title {
     pointer-events: none;
   }
-  .pf-c-nav__item .pf-c-nav__item.pf-m-expandable .pf-c-nav__list::before {
+  .pf-v5-c-nav__item .pf-v5-c-nav__item.pf-m-expandable .pf-v5-c-nav__list::before {
     border: 0;
   }
-  .pf-c-nav__item.pf-m-expandable::before {
-    z-index: var(--pf-c-page__sidebar--ZIndex);
+  .pf-v5-c-nav__item.pf-m-expandable::before {
+    z-index: var(--pf-v5-c-page__sidebar--ZIndex);
   }
-  .pf-c-nav__item .pf-c-nav__item.pf-m-expandable::before {
+  .pf-v5-c-nav__item .pf-v5-c-nav__item.pf-m-expandable::before {
     // in small screens, the expandable items have css to add a second border
     border-bottom: none;
   }
   
-  .pf-m-expandable>.pf-c-nav__link{
+  .pf-m-expandable>.pf-v5-c-nav__link{
     text-align: left;
   }
 
   .navigation-search-menu {
-    .pf-c-menu__item {
+    .pf-v5-c-menu__item {
       padding: 5px;
-      .pf-c-menu__item-description {
+      .pf-v5-c-menu__item-description {
         word-break: break-word;
       }
     }
     min-width: 0;
     margin: 0;
-    --pf-c-menu__list-item--hover--BackgroundColor: var(
-      --pf-global--BackgroundColor--200
+    --pf-v5-c-menu__list-item--hover--BackgroundColor: var(
+      --pf-v5-global--BackgroundColor--200
     );
-    --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--100);
-    --pf-c-menu__list-item--Color: var(--pf-global--Color--100);
-    --pf-c-menu__list-item--BackgroundColor: transparent;
-    --pf-c-menu__list-item--hover--BackgroundColor: var(
-      --pf-global--BackgroundColor--200
+    --pf-v5-c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+    --pf-v5-c-menu__list-item--Color: var(--pf-v5-global--Color--100);
+    --pf-v5-c-menu__list-item--BackgroundColor: transparent;
+    --pf-v5-c-menu__list-item--hover--BackgroundColor: var(
+      --pf-v5-global--BackgroundColor--200
     );
-    --pf-c-menu__list-item--focus-within--Color: var(--pf-global--palette--blue-400);
-    --pf-c-menu__list-item--focus-within--BackgroundColor: var(
-      --pf-global--BackgroundColor--200
+    --pf-v5-c-menu__list-item--focus-within--Color: var(--pf-v5-global--palette--blue-400);
+    --pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(
+      --pf-v5-global--BackgroundColor--200
     );
 
-    --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
-    --pf-c-menu__list-item--hover--Color: unset;
+    --pf-v5-c-menu__item-description--Color: var(--pf-v5-global--Color--200);
+    --pf-v5-c-menu__list-item--hover--Color: unset;
   }
   #navigation-search {
-    width:calc(#{var(--pf-c-page__sidebar--Width)} - 10px);
+    width:calc(#{var(--pf-v5-c-page__sidebar--Width)} - 10px);
     margin-left: 5px;
-    .pf-c-button.pf-m-control {
+    .pf-v5-c-button.pf-m-control {
       display: none;
     }
   }
 }
 
-.pf-c-page {
-  --pf-c-page--BackgroundColor: var(--pf-global--BackgroundColor--100);
+.pf-v5-c-page {
+  --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
 }
 
-.pf-c-page .pf-c-masthead {
+.pf-v5-c-page .pf-v5-c-masthead {
   background-repeat: no-repeat;
   background-size: cover;
 
-  .pf-c-toolbar__item {
-    .pf-c-context-selector__menu {
+  .pf-v5-c-toolbar__item {
+    .pf-v5-c-context-selector__menu {
       top: auto;
     }
 
-    .pf-c-context-selector {
+    .pf-v5-c-context-selector {
       &.pf-m-expanded,
       &:hover {
         background: rgba(255, 255, 255, 0.24);
       }
     }
 
-    .pf-c-context-selector__toggle::before {
+    .pf-v5-c-context-selector__toggle::before {
       border-width: 0;
     }
   }
diff --git a/webpack/assets/javascripts/react_app/components/Loading/Loading.js b/webpack/assets/javascripts/react_app/components/Loading/Loading.js
index a66d45028ab..2552f880987 100644
--- a/webpack/assets/javascripts/react_app/components/Loading/Loading.js
+++ b/webpack/assets/javascripts/react_app/components/Loading/Loading.js
@@ -6,6 +6,8 @@ import {
   EmptyState,
   EmptyStateIcon,
   Spinner,
+  EmptyStateHeader,
+  EmptyStateFooter,
 } from '@patternfly/react-core';
 import { translate as __ } from '../../common/I18n';
 
@@ -17,12 +19,14 @@ const Loading = ({ textSize, iconSize, showText }) => {
   return (
     <Bullseye>
       <EmptyState>
-        <EmptyStateIcon variant="container" component={LoadingSpinner} />
-        {showText && (
-          <Title ouiaId="loading-title" size={textSize} headingLevel="h4">
-            {__('Loading')}
-          </Title>
-        )}
+        <EmptyStateHeader icon={<EmptyStateIcon icon={LoadingSpinner} />} />
+        <EmptyStateFooter>
+          {showText && (
+            <Title ouiaId="loading-title" size={textSize} headingLevel="h4">
+              {__('Loading')}
+            </Title>
+          )}
+        </EmptyStateFooter>
       </EmptyState>
     </Bullseye>
   );
diff --git a/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/BookmarkItems.js b/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/BookmarkItems.js
index 722cfd37155..fb5dd3d55ab 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/BookmarkItems.js
+++ b/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/BookmarkItems.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { PlusIcon } from '@patternfly/react-icons';
+import { Spinner } from '@patternfly/react-core';
 import {
   DropdownItem,
   DropdownGroup,
   DropdownSeparator,
-  Spinner,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { sprintf, translate as __ } from '../../../common/I18n';
 import { STATUS } from '../../../constants';
 import DocumentationUrl from '../DocumentationLink';
diff --git a/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/Bookmarks.js b/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/Bookmarks.js
index b720da01563..b7ac2a79957 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/Bookmarks.js
+++ b/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/Bookmarks.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, DropdownToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle } from '@patternfly/react-core/deprecated';
 import { OutlinedBookmarkIcon } from '@patternfly/react-icons';
 import BookmarkModal from '../../BookmarkForm/SearchModal';
 import { STATUS } from '../../../constants';
@@ -79,7 +79,7 @@ const Bookmarks = ({
         onSelect={() => setIsDropdownOpen(false)}
         toggle={
           <DropdownToggle
-            onToggle={onToggle}
+            onToggle={(_event, isOpen) => onToggle(isOpen)}
             title={__('Bookmarks')}
             aria-label="bookmarks dropdown toggle"
             ouiaId="bookmarks-dropdown-toggle"
diff --git a/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/bookmarks.scss b/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/bookmarks.scss
index b41b45aad74..b25bbb2285d 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/bookmarks.scss
+++ b/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/bookmarks.scss
@@ -11,14 +11,14 @@
   white-space: normal;
 }
 
-@media only screen and (min-width: $pf-global--breakpoint--xl) {
+@media only screen and (min-width: $pf-v5-global--breakpoint--xl) {
   .bookmarks-dropdown-item.adapt-long-bookmark {
     width: 600px;
     white-space: normal;
   }
 }
 
-@media only screen and (min-width: $pf-global--breakpoint--2xl) {
+@media only screen and (min-width: $pf-v5-global--breakpoint--2xl) {
   .bookmarks-dropdown-item.adapt-long-bookmark {
     width: 700px;
     white-space: normal;
diff --git a/webpack/assets/javascripts/react_app/components/PF4/BreadcrumbSwitcher/breadcrumb-switcher.scss b/webpack/assets/javascripts/react_app/components/PF4/BreadcrumbSwitcher/breadcrumb-switcher.scss
index f9502833b57..a7f5cb862f1 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/BreadcrumbSwitcher/breadcrumb-switcher.scss
+++ b/webpack/assets/javascripts/react_app/components/PF4/BreadcrumbSwitcher/breadcrumb-switcher.scss
@@ -1,15 +1,15 @@
 .pf4-breadcrumb-switcher-popover {
-  .pf-c-pagination,
-  .pf-c-pagination.pf-m-bottom .pf-c-options-menu,
-  .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav,
-  .pf-c-menu__list,
-  .pf-c-menu__list-item{
+  .pf-v5-c-pagination,
+  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-options-menu,
+  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav,
+  .pf-v5-c-menu__list,
+  .pf-v5-c-menu__list-item{
     visibility: unset;
   }
-  .pf-c-menu__footer {
+  .pf-v5-c-menu__footer {
     padding: 0;
 
-    .pf-c-pagination {
+    .pf-v5-c-pagination {
       padding: 0;
       justify-content: center;
     }
diff --git a/webpack/assets/javascripts/react_app/components/PF4/BreadcrumbSwitcher/index.js b/webpack/assets/javascripts/react_app/components/PF4/BreadcrumbSwitcher/index.js
index b5cfdbf5329..d336934efad 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/BreadcrumbSwitcher/index.js
+++ b/webpack/assets/javascripts/react_app/components/PF4/BreadcrumbSwitcher/index.js
@@ -9,10 +9,11 @@ import {
   MenuContent,
   MenuFooter,
   MenuList,
-  MenuInput,
+  MenuSearch,
   MenuItem,
   Tooltip,
   Spinner,
+  MenuSearchInput,
 } from '@patternfly/react-core';
 import { ExchangeAltIcon } from '@patternfly/react-icons';
 import { translate as __ } from '../../../common/I18n';
@@ -123,17 +124,19 @@ const BreadcrumbSwitcher = ({
         bodyContent={
           <div>
             <Menu ouiaId="breadcrumb-menu" isScrollable>
-              <MenuInput>
-                <SearchInput
-                  value={searchValue}
-                  aria-label="Filter breadcrumb items"
-                  type="search"
-                  onChange={value => {
-                    autoSearch(value || '');
-                  }}
-                  onClear={onSearchClear}
-                />
-              </MenuInput>
+              <MenuSearch>
+                <MenuSearchInput>
+                  <SearchInput
+                    value={searchValue}
+                    aria-label="Filter breadcrumb items"
+                    type="search"
+                    onChange={(_e, value) => {
+                      autoSearch(value || '');
+                    }}
+                    onClear={onSearchClear}
+                  />
+                </MenuSearchInput>
+              </MenuSearch>
               <Divider />
               <MenuContent>
                 <MenuList>{menuListItems}</MenuList>
diff --git a/webpack/assets/javascripts/react_app/components/PF4/DocumentationLink/__snapshots__/DocumentationLink.test.js.snap b/webpack/assets/javascripts/react_app/components/PF4/DocumentationLink/__snapshots__/DocumentationLink.test.js.snap
index 3fc4f2ec363..3946c404328 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/DocumentationLink/__snapshots__/DocumentationLink.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/PF4/DocumentationLink/__snapshots__/DocumentationLink.test.js.snap
@@ -6,11 +6,7 @@ exports[`documentation links should have an external link to documentation 1`] =
   onClick={[Function]}
   ouiaId="doc-url-dropdown"
 >
-  <QuestionCircleIcon
-    color="currentColor"
-    noVerticalAlign={false}
-    size="sm"
-  />
+  <QuestionCircleIcon />
    
   Documentation
 </DropdownItem>
diff --git a/webpack/assets/javascripts/react_app/components/PF4/DocumentationLink/index.js b/webpack/assets/javascripts/react_app/components/PF4/DocumentationLink/index.js
index e9a17b39e77..2485749f12b 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/DocumentationLink/index.js
+++ b/webpack/assets/javascripts/react_app/components/PF4/DocumentationLink/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DropdownItem } from '@patternfly/react-core';
+import { DropdownItem } from '@patternfly/react-core/deprecated';
 import { QuestionCircleIcon } from '@patternfly/react-icons';
 import { newWindowOnClick } from '../../../common/helpers';
 import { translate as __ } from '../../../../react_app/common/I18n';
diff --git a/webpack/assets/javascripts/react_app/components/PF4/InlineEdit/InlineTextInput.js b/webpack/assets/javascripts/react_app/components/PF4/InlineEdit/InlineTextInput.js
index 5798076255d..852ac226902 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/InlineEdit/InlineTextInput.js
+++ b/webpack/assets/javascripts/react_app/components/PF4/InlineEdit/InlineTextInput.js
@@ -15,7 +15,7 @@ const InlineTextInput = ({
 
   const inputProps = {
     value,
-    onChange: v => setInputValue(v),
+    onChange: (e, v) => setInputValue(v),
     onFocus: () => inputRef?.current?.select(),
   };
 
diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/ActionButtons.js b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/ActionButtons.js
index c285d27d042..26fade64858 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/ActionButtons.js
+++ b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/ActionButtons.js
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { Button } from '@patternfly/react-core';
 import {
-  Button,
   Dropdown,
   KebabToggle,
   DropdownItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 /**
  * Generate a button or a dropdown of buttons
@@ -33,7 +33,7 @@ export const ActionButtons = ({ buttons: originalButtons }) => {
           toggle={
             <KebabToggle
               aria-label="toggle action dropdown"
-              onToggle={setIsOpen}
+              onToggle={(_event, val) => setIsOpen(val)}
             />
           }
           isOpen={isOpen}
diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox/index.js b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox/index.js
index 9e9a08dbaaf..8febdbabb85 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox/index.js
+++ b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox/index.js
@@ -5,7 +5,7 @@ import {
   DropdownToggle,
   DropdownToggleCheckbox,
   DropdownItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { translate as __ } from '../../../../../common/I18n';
 import { noop } from '../../../../../common/helpers';
 
@@ -144,7 +144,7 @@ const SelectAllCheckbox = ({
               key="table-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/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.js b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.js
index 03de88ed0e8..27cdcf2a037 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.js
+++ b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import {
-  TableComposable,
+  Table as PFTable /* data-codemods */,
   Thead,
   Tr,
   Th,
@@ -85,17 +85,23 @@ export const Table = ({
     id,
     name,
     ...item
-  }) =>
-    [
+  }) => {
+    const extendActions =
+      (getActions && getActions({ id, name, canDelete, canEdit, ...item })) ??
+      [];
+
+    return [
       isDeleteable && {
         title: __('Delete'),
         onClick: () => onDeleteClick({ id, name }),
-        isDisabled: !canDelete,
+        isAriaDisabled: !canDelete,
       },
-      ...((getActions &&
-        getActions({ id, name, canDelete, canEdit, ...item })) ??
-        []),
+      ...extendActions.map(action => ({
+        ...action,
+        isAriaDisabled: action.isDisabled,
+      })),
     ].filter(Boolean);
+  };
   const RowSelectTd = rowSelectTd;
   return (
     <>
@@ -106,10 +112,12 @@ export const Table = ({
         url={url}
         refreshData={refreshData}
       />
-      <TableComposable variant="compact" ouiaId="table" isStriped>
+      <PFTable variant="compact" ouiaId="table" isStriped>
         <Thead>
           <Tr ouiaId="table-header">
-            {showCheckboxes && <Th key="checkbox-th" />}
+            {showCheckboxes && (
+              <Th aria-label="checkbox-header" key="checkbox-th" />
+            )}
             {columnNamesKeys.map(k => (
               <Th
                 key={k}
@@ -117,6 +125,7 @@ export const Table = ({
                   Object.values(columnsToSortParams).includes(k) &&
                   pfSortParams(keysToColumnNames[k])
                 }
+                aria-label={keysToColumnNames[k]}
               >
                 {keysToColumnNames[k]}
               </Th>
@@ -164,7 +173,7 @@ export const Table = ({
             results.map((result, rowIndex) => {
               const rowActions = actions(result);
               return (
-                <Tr key={rowIndex} ouiaId={`table-row-${rowIndex}`} isHoverable>
+                <Tr key={rowIndex} ouiaId={`table-row-${rowIndex}`} isClickable>
                   {showCheckboxes && (
                     <RowSelectTd
                       rowData={result}
@@ -189,7 +198,7 @@ export const Table = ({
               );
             })}
         </Tbody>
-      </TableComposable>
+      </PFTable>
       {results.length > 0 && !errorMessage && !emptyMessage && bottomPagination}
     </>
   );
diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.test.js b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.test.js
index 9ac59eb501c..52215225950 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.test.js
+++ b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.test.js
@@ -81,7 +81,7 @@ describe('Table', () => {
     });
   });
 
-  test('shows delete modal when delete button is clicked', () => {
+  test('shows delete modal when delete button is clicked', async () => {
     const onDeleteClick = jest.fn();
     const resultWithDeleteButton = { ...results[0], can_delete: true };
 
@@ -101,15 +101,18 @@ describe('Table', () => {
       </Provider>
     );
 
-    fireEvent.click(screen.getByLabelText('Actions'));
+    fireEvent.click(screen.getByLabelText('Kebab toggle'));
     fireEvent.click(screen.getByText('Delete'));
     expect(
       screen.getByText('You are about to delete John Doe. Are you sure?')
     ).toBeInTheDocument();
     fireEvent.click(screen.getByText('Delete'));
+    await act(async () => {
+      jest.advanceTimersByTime(1000); // to handle pf4 table actions popover
+    });
   });
 
-  test('disables delete button when item cannot be deleted', () => {
+  test('disables delete button when item cannot be deleted', async () => {
     const resultWithDeleteButton = { ...results[0], can_delete: false };
 
     render(
@@ -126,8 +129,11 @@ describe('Table', () => {
         />
       </Provider>
     );
-    fireEvent.click(screen.getByLabelText('Actions'));
-    expect(screen.getByText('Delete')).toHaveClass('pf-m-disabled');
+    fireEvent.click(screen.getByLabelText('Kebab toggle'));
+    expect(screen.getByRole('none', {description: 'Delete'})).toHaveClass('pf-m-aria-disabled');
+    await act(async () => {
+      jest.advanceTimersByTime(1000); // to handle pf4 table actions popover
+    });
   });
 
   test('no actions button when there are no actions', () => {
@@ -147,7 +153,7 @@ describe('Table', () => {
         />
       </Provider>
     );
-    expect(screen.queryAllByText('Actions')).toHaveLength(0);
+    expect(screen.queryAllByText('Kebab toggle')).toHaveLength(0);
   });
 
   test('show error and not the table on error', () => {
diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js
index 41e77ff54cd..b5de72eb8f1 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js
+++ b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js
@@ -255,7 +255,7 @@ const TableIndexPage = ({
             )}
             {(customToolbarItems || actionButtons.length > 0) && (
               <ToolbarGroup
-                alignment={{ default: 'alignLeft' }}
+                align={{ default: 'alignLeft' }}
                 className="table-toolbar-actions"
                 variant="button-group"
               >
diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.scss b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.scss
index 5f919555973..9d95f703900 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.scss
+++ b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.scss
@@ -7,7 +7,7 @@
     padding-bottom: 16px;
     .table-toolbar {
       padding: 0;
-      .pf-c-toolbar__content {
+      .pf-v5-c-toolbar__content {
         padding: 0;
       }
       .toolbar-search {
@@ -17,7 +17,7 @@
         padding-left: 16px;
       }
     }
-    .pf-c-toolbar__group {
+    .pf-v5-c-toolbar__group {
       flex-grow: 1;
       &.pf-m-align-right {
         justify-content: flex-end;
@@ -29,7 +29,7 @@
     padding-left: 0;
     padding-right: 0;
   }
-  .pf-c-toolbar__group {
+  .pf-v5-c-toolbar__group {
     flex-grow: 1;
     &.pf-m-align-right {
       justify-content: flex-end;
diff --git a/webpack/assets/javascripts/react_app/components/Pagination/index.js b/webpack/assets/javascripts/react_app/components/Pagination/index.js
index 12dbf5df166..1db7dfa48e0 100644
--- a/webpack/assets/javascripts/react_app/components/Pagination/index.js
+++ b/webpack/assets/javascripts/react_app/components/Pagination/index.js
@@ -59,13 +59,13 @@ const Pagination = ({
     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 getPerPageOptions = () => {
diff --git a/webpack/assets/javascripts/react_app/components/Pagination/index.scss b/webpack/assets/javascripts/react_app/components/Pagination/index.scss
index 60cb5b4fe8e..826e86b78ff 100644
--- a/webpack/assets/javascripts/react_app/components/Pagination/index.scss
+++ b/webpack/assets/javascripts/react_app/components/Pagination/index.scss
@@ -1,4 +1,4 @@
-.pf-c-pagination.pf-m-bottom.tfm-pagination {
+.pf-v5-c-pagination.pf-m-bottom.tfm-pagination {
   &.no-side-padding {
     padding: 16px 0;
   }
diff --git a/webpack/assets/javascripts/react_app/components/SearchBar/SearchAutocomplete.js b/webpack/assets/javascripts/react_app/components/SearchBar/SearchAutocomplete.js
index 2a7db4fabde..55cd559ae03 100644
--- a/webpack/assets/javascripts/react_app/components/SearchBar/SearchAutocomplete.js
+++ b/webpack/assets/javascripts/react_app/components/SearchBar/SearchAutocomplete.js
@@ -114,9 +114,17 @@ export const SearchAutocomplete = ({
       <SearchInput
         ref={searchInputRef}
         value={value}
-        onChange={onChange}
+        onChange={(_e, newValue) => {
+          onChange(newValue);
+        }}
         onClear={onClear}
-        onSearch={onSearch && _onSearch}
+        onSearch={(event, searchValue) => {
+          if (onSearch) {
+            onSearch(searchValue);
+          } else {
+            _onSearch(searchValue);
+          }
+        }}
         isDisabled={disabled}
         placeholder={__('Search')}
         resetButtonLabel={__('Reset search')}
diff --git a/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.scss b/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.scss
index 1d3c880ace0..38b54ee12ce 100644
--- a/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.scss
+++ b/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.scss
@@ -2,20 +2,20 @@
 
 .autocomplete-search {
   width: 100%;
-  &.disabled-autocomplete-search .pf-c-input-group{
-    color: var(--pf-global--disabled-color--100);
-    background-color: var(--pf-global--disabled-color--300);
+  &.disabled-autocomplete-search .pf-v5-c-input-group{
+    color: var(--pf-v5-global--disabled-color--100);
+    background-color: var(--pf-v5-global--disabled-color--300);
     cursor: not-allowed;
-    border-color: var(--pf-global--disabled-color--300);
+    border-color: var(--pf-v5-global--disabled-color--300);
   }
 }
 
 .foreman-search-bar {
   display: flex;
-  .pf-c-dropdown.pf-m-align-right {
+  .pf-v5-c-dropdown.pf-m-align-right {
     width: unset;
   }
-  .pf-c-dropdown { 
+  .pf-v5-c-dropdown { 
     width: unset; // just in case Katello overrides it
   }
 }
diff --git a/webpack/assets/javascripts/react_app/components/ToastsList/__tests__/helpers.test.js b/webpack/assets/javascripts/react_app/components/ToastsList/__tests__/helpers.test.js
index 20159b86f5e..ecbcba1fbc1 100644
--- a/webpack/assets/javascripts/react_app/components/ToastsList/__tests__/helpers.test.js
+++ b/webpack/assets/javascripts/react_app/components/ToastsList/__tests__/helpers.test.js
@@ -15,7 +15,7 @@ describe('toastType', () => {
   });
 
   it('with invalid type', () => {
-    expect(toastType('invalid')).toEqual('default');
+    expect(toastType('invalid')).toEqual('custom');
   });
 });
 
diff --git a/webpack/assets/javascripts/react_app/components/ToastsList/__tests__/integration.test.js b/webpack/assets/javascripts/react_app/components/ToastsList/__tests__/integration.test.js
index 92c109172ed..14553ad288c 100644
--- a/webpack/assets/javascripts/react_app/components/ToastsList/__tests__/integration.test.js
+++ b/webpack/assets/javascripts/react_app/components/ToastsList/__tests__/integration.test.js
@@ -13,18 +13,18 @@ describe('ToastsList', () => {
         <ToastsList />
       </Provider>);
 
-    let alerts = component.find('.pf-c-alert.foreman-toast');
+    let alerts = component.find('.pf-v5-c-alert.foreman-toast');
     expect(alerts.length).toBe(0);
 
     store.dispatch(addToast(toast));
     component.update();
-    alerts = component.find('.pf-c-alert.foreman-toast');
+    alerts = component.find('.pf-v5-c-alert.foreman-toast');
     expect(alerts.length).toBe(1);
-    expect(component.find('.pf-c-alert__title').at(0).text()).toBe('Success alert:message');
+    expect(component.find('.pf-v5-c-alert__title').at(0).text()).toBe('Success alert:message');
 
     store.dispatch(deleteToast(toast.key));
     component.update();
-    alerts = component.find('.pf-c-alert.foreman-toast');
+    alerts = component.find('.pf-v5-c-alert.foreman-toast');
     expect(alerts.length).toBe(0);
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/ToastsList/helpers.js b/webpack/assets/javascripts/react_app/components/ToastsList/helpers.js
index d0c25d6c054..bee86458607 100644
--- a/webpack/assets/javascripts/react_app/components/ToastsList/helpers.js
+++ b/webpack/assets/javascripts/react_app/components/ToastsList/helpers.js
@@ -17,7 +17,7 @@ export const toastType = type => {
     error: AlertVariant.danger,
   };
 
-  return fallbackTypes[type] || AlertVariant.default;
+  return fallbackTypes[type] || AlertVariant.custom;
 };
 
 export const toastTitle = (message, type) => {
diff --git a/webpack/assets/javascripts/react_app/components/ToastsList/style.scss b/webpack/assets/javascripts/react_app/components/ToastsList/style.scss
index daa47e763d2..8a48c977740 100644
--- a/webpack/assets/javascripts/react_app/components/ToastsList/style.scss
+++ b/webpack/assets/javascripts/react_app/components/ToastsList/style.scss
@@ -1,4 +1,4 @@
 /* Make toasts visible over modal (z-index: 1050) */
-.pf-c-alert-group {
+.pf-v5-c-alert-group {
   z-index: 1100 !important;
 }
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/DatePicker.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/DatePicker.test.js.snap
index bf0447a01c3..363f2afbcd2 100644
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/DatePicker.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/DatePicker.test.js.snap
@@ -11,14 +11,18 @@ exports[`DatePicker edit works 1`] = `
       type="text"
       value="2019-02-22"
     />
-    <span
-      class="date-picker-pf input-group-addon"
+    <div
+      style="display: contents;"
     >
       <span
-        aria-hidden="true"
-        class="fa fa-calendar"
-      />
-    </span>
+        class="date-picker-pf input-group-addon"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-calendar"
+        />
+      </span>
+    </div>
     <span
       class="clear-button input-group-addon"
     >
@@ -42,14 +46,18 @@ exports[`DatePicker prefils the value from prop 1`] = `
       type="text"
       value="2019-02-21"
     />
-    <span
-      class="date-picker-pf input-group-addon"
+    <div
+      style="display: contents;"
     >
       <span
-        aria-hidden="true"
-        class="fa fa-calendar"
-      />
-    </span>
+        class="date-picker-pf input-group-addon"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-calendar"
+        />
+      </span>
+    </div>
     <span
       class="clear-button input-group-addon"
     >
@@ -73,14 +81,18 @@ exports[`DatePicker renders properly 1`] = `
       type="text"
       value=""
     />
-    <span
-      class="date-picker-pf input-group-addon"
+    <div
+      style="display: contents;"
     >
       <span
-        aria-hidden="true"
-        class="fa fa-calendar"
-      />
-    </span>
+        class="date-picker-pf input-group-addon"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-calendar"
+        />
+      </span>
+    </div>
     <span
       class="clear-button input-group-addon"
     >
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/DateTimePicker.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/DateTimePicker.test.js.snap
index 2bfdbe21653..6d2ac93f9a1 100644
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/DateTimePicker.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/DateTimePicker.test.js.snap
@@ -11,14 +11,18 @@ exports[`DateTimePicker edit works 1`] = `
       type="text"
       value="2019-02-22 14:22:00"
     />
-    <span
-      class="date-time-picker-pf input-group-addon"
+    <div
+      style="display: contents;"
     >
       <span
-        aria-hidden="true"
-        class="fa fa-calendar"
-      />
-    </span>
+        class="date-time-picker-pf input-group-addon"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-calendar"
+        />
+      </span>
+    </div>
     <span
       class="clear-button input-group-addon"
     >
@@ -42,14 +46,18 @@ exports[`DateTimePicker prefils the value from prop 1`] = `
       type="text"
       value="2019-02-21 14:22:00"
     />
-    <span
-      class="date-time-picker-pf input-group-addon"
+    <div
+      style="display: contents;"
     >
       <span
-        aria-hidden="true"
-        class="fa fa-calendar"
-      />
-    </span>
+        class="date-time-picker-pf input-group-addon"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-calendar"
+        />
+      </span>
+    </div>
     <span
       class="clear-button input-group-addon"
     >
@@ -73,14 +81,18 @@ exports[`DateTimePicker renders properly 1`] = `
       type="text"
       value=""
     />
-    <span
-      class="date-time-picker-pf input-group-addon"
+    <div
+      style="display: contents;"
     >
       <span
-        aria-hidden="true"
-        class="fa fa-calendar"
-      />
-    </span>
+        class="date-time-picker-pf input-group-addon"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-calendar"
+        />
+      </span>
+    </div>
     <span
       class="clear-button input-group-addon"
     >
diff --git a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/TimePicker.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/TimePicker.test.js.snap
index fc944a2e5db..9735701df47 100644
--- a/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/TimePicker.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/common/DateTimePicker/__snapshots__/TimePicker.test.js.snap
@@ -2,69 +2,81 @@
 
 exports[`Edit form of TimePicker 1`] = `
 <div>
-  <span
-    class="input-group date-time-picker-pf input-group"
+  <div
+    style="display: contents;"
   >
-    <input
-      aria-label="date-time-picker-input"
-      class="form-control"
-      type="text"
-      value="2:42 PM"
-    />
     <span
-      class="date-picker-pf input-group-addon"
+      class="input-group date-time-picker-pf input-group"
     >
-      <span
-        aria-hidden="true"
-        class="fa fa-clock-o"
+      <input
+        aria-label="date-time-picker-input"
+        class="form-control"
+        type="text"
+        value="2:42 PM"
       />
+      <span
+        class="date-picker-pf input-group-addon"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-clock-o"
+        />
+      </span>
     </span>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`TimePicker is working properly 1`] = `
 <div>
-  <span
-    class="input-group date-time-picker-pf input-group"
+  <div
+    style="display: contents;"
   >
-    <input
-      aria-label="date-time-picker-input"
-      class="form-control"
-      type="text"
-      value="5:22 PM"
-    />
     <span
-      class="date-picker-pf input-group-addon"
+      class="input-group date-time-picker-pf input-group"
     >
-      <span
-        aria-hidden="true"
-        class="fa fa-clock-o"
+      <input
+        aria-label="date-time-picker-input"
+        class="form-control"
+        type="text"
+        value="5:22 PM"
       />
+      <span
+        class="date-picker-pf input-group-addon"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-clock-o"
+        />
+      </span>
     </span>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`TimePicker is working properly with time only 1`] = `
 <div>
-  <span
-    class="input-group date-time-picker-pf input-group"
+  <div
+    style="display: contents;"
   >
-    <input
-      aria-label="date-time-picker-input"
-      class="form-control"
-      type="text"
-      value="5:22 PM"
-    />
     <span
-      class="date-picker-pf input-group-addon"
+      class="input-group date-time-picker-pf input-group"
     >
-      <span
-        aria-hidden="true"
-        class="fa fa-clock-o"
+      <input
+        aria-label="date-time-picker-input"
+        class="form-control"
+        type="text"
+        value="5:22 PM"
       />
+      <span
+        class="date-picker-pf input-group-addon"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-clock-o"
+        />
+      </span>
     </span>
-  </span>
+  </div>
 </div>
 `;
diff --git a/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyState.scss b/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyState.scss
index 6d30d3b27dd..e88cf9a1116 100644
--- a/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyState.scss
+++ b/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyState.scss
@@ -1,7 +1,7 @@
-.pf-c-empty-state {
+.pf-v5-c-empty-state {
   margin-top: 100px;
 
   .empty-state-icon {
-    font-size: var(--pf-global--icon--FontSize--xl);
+    font-size: var(--pf-v5-global--icon--FontSize--xl);
   }
 }
diff --git a/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStatePattern.js b/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStatePattern.js
index 7617d6fb8c7..38328c97793 100644
--- a/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStatePattern.js
+++ b/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStatePattern.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import { Icon } from 'patternfly-react';
 import {
-  Title,
   EmptyState,
   EmptyStateVariant,
   EmptyStateBody,
-  EmptyStateSecondaryActions,
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter,
 } from '@patternfly/react-core';
 import { emptyStatePatternPropTypes } from './EmptyStatePropTypes';
 import { translate as __ } from '../../../common/I18n';
@@ -57,17 +58,15 @@ const EmptyStatePattern = props => {
       <span className="empty-state-icon">
         <EmptyStateIcon />
       </span>
-      <Title ouiaId="empty-state-header" headingLevel="h5" size="4xl">
-        {header}
-      </Title>
+      <EmptyStateHeader titleText={<>{header}</>} headingLevel="h5" />
       <EmptyStateBody>
         <div className="empty-state-description">{description}</div>
         <DocumentationBlock />
       </EmptyStateBody>
-      {action}
-      <EmptyStateSecondaryActions>
-        {secondaryActions}
-      </EmptyStateSecondaryActions>
+      <EmptyStateFooter>
+        {action}
+        <EmptyStateActions>{secondaryActions}</EmptyStateActions>
+      </EmptyStateFooter>
     </EmptyState>
   );
 };
diff --git a/webpack/assets/javascripts/react_app/components/common/EmptyState/__snapshots__/EmptyState.test.js.snap b/webpack/assets/javascripts/react_app/components/common/EmptyState/__snapshots__/EmptyState.test.js.snap
index b85814834b8..11e8735ff2a 100644
--- a/webpack/assets/javascripts/react_app/components/common/EmptyState/__snapshots__/EmptyState.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/common/EmptyState/__snapshots__/EmptyState.test.js.snap
@@ -63,13 +63,14 @@ exports[`Empty State Pattern should render with props 1`] = `
   >
     <EmptyStateIcon />
   </span>
-  <Title
+  <EmptyStateHeader
     headingLevel="h5"
-    ouiaId="empty-state-header"
-    size="4xl"
-  >
-    Printers
-  </Title>
+    titleText={
+      <React.Fragment>
+        Printers
+      </React.Fragment>
+    }
+  />
   <EmptyStateBody>
     <div
       className="empty-state-description"
@@ -78,6 +79,8 @@ exports[`Empty State Pattern should render with props 1`] = `
     </div>
     <DocumentationBlock />
   </EmptyStateBody>
-  <EmptyStateSecondaryActions />
+  <EmptyStateFooter>
+    <EmptyStateActions />
+  </EmptyStateFooter>
 </EmptyState>
 `;
diff --git a/webpack/assets/javascripts/react_app/components/common/ErrorBoundary/index.scss b/webpack/assets/javascripts/react_app/components/common/ErrorBoundary/index.scss
index 82e13d0d5d6..664ebc3059d 100644
--- a/webpack/assets/javascripts/react_app/components/common/ErrorBoundary/index.scss
+++ b/webpack/assets/javascripts/react_app/components/common/ErrorBoundary/index.scss
@@ -1,9 +1,9 @@
 .error-boundary-foreman-app {
   .empty-state-icon {
-    color: var(--pf-global--palette--red-200);
+    color: var(--pf-v5-global--palette--red-200);
   }
 
-  .pf-c-clipboard-copy__expandable-content {
+  .pf-v5-c-clipboard-copy__expandable-content {
     white-space: pre-wrap;
   }
 }
diff --git a/webpack/assets/javascripts/react_app/components/common/LabelIcon/__snapshots__/LabelIcon.test.js.snap b/webpack/assets/javascripts/react_app/components/common/LabelIcon/__snapshots__/LabelIcon.test.js.snap
index bec22c18263..b64d72cd323 100644
--- a/webpack/assets/javascripts/react_app/components/common/LabelIcon/__snapshots__/LabelIcon.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/common/LabelIcon/__snapshots__/LabelIcon.test.js.snap
@@ -5,14 +5,14 @@ exports[`LabelIcon renders 1`] = `
   bodyContent="Yay, label help!"
 >
   <button
-    className="pf-c-form__group-label-help"
+    className="pf-v5-c-form__group-label-help"
     onClick={[Function]}
   >
-    <HelpIcon
-      color="currentColor"
-      noVerticalAlign={true}
-      size="sm"
-    />
+    <Icon
+      isInline={true}
+    >
+      <HelpIcon />
+    </Icon>
   </button>
 </Popover>
 `;
diff --git a/webpack/assets/javascripts/react_app/components/common/LabelIcon/index.js b/webpack/assets/javascripts/react_app/components/common/LabelIcon/index.js
index e83f0d2aa98..057fcc4e54f 100644
--- a/webpack/assets/javascripts/react_app/components/common/LabelIcon/index.js
+++ b/webpack/assets/javascripts/react_app/components/common/LabelIcon/index.js
@@ -1,16 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Popover } from '@patternfly/react-core';
+import { Popover, Icon } from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
 
 const LabelIcon = ({ text }) => (
   <Popover bodyContent={text}>
     <button
-      className="pf-c-form__group-label-help"
+      className="pf-v5-c-form__group-label-help"
       onClick={e => e.preventDefault()}
     >
-      <HelpIcon noVerticalAlign />
+      <Icon isInline>
+        <HelpIcon />
+      </Icon>
     </button>
   </Popover>
 );
diff --git a/webpack/assets/javascripts/react_app/components/notifications/notifications.scss b/webpack/assets/javascripts/react_app/components/notifications/notifications.scss
index b887f23fcc2..db08d4621bd 100644
--- a/webpack/assets/javascripts/react_app/components/notifications/notifications.scss
+++ b/webpack/assets/javascripts/react_app/components/notifications/notifications.scss
@@ -3,7 +3,7 @@
 .notifications_container {
   position: static;
   margin-top: -1px;
-  color: var(--pf-global--palette--black-1000);
+  color: var(--pf-v5-global--palette--black-1000);
   top: 48px;
 
   .fa-bell,
diff --git a/webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokenModal.js b/webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokenModal.js
index 34153071989..504f2533694 100644
--- a/webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokenModal.js
+++ b/webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokenModal.js
@@ -12,7 +12,12 @@ import {
   InputGroup,
   TimePicker,
   TextInput,
+  InputGroupItem,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
 } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import PropTypes from 'prop-types';
 import { translate as __ } from '../../../common/I18n';
 import {
@@ -143,13 +148,17 @@ const PersonalAccessTokenModal = ({ controller, url }) => {
       );
     }
   };
-
+  const nameValidationError =
+    showNameErrors && (isNameEmpty() || isNameDuplicate() !== undefined);
+  const expiresValidattionError =
+    !isDateTimeInFuture() ||
+    ((!date.length || !time.length) && endsNever === false);
   return (
     <>
       <Button
         ouiaId="add-personal-access-token-button"
         variant="primary"
-        isSmall
+        size="sm"
         onClick={() => setIsModalOpen(true)}
       >
         {__('Add Personal Access Token')}
@@ -195,16 +204,7 @@ const PersonalAccessTokenModal = ({ controller, url }) => {
         ]}
       >
         <Form className="add-personal-access-token-form">
-          <FormGroup
-            label={__('Name')}
-            isRequired
-            validated={
-              isNameEmpty() || isNameDuplicate() !== undefined
-                ? 'error'
-                : 'default'
-            }
-            helperTextInvalid={nameHelperText()}
-          >
+          <FormGroup label={__('Name')} isRequired>
             <TextInput
               ouiaId="personal-token-name"
               aria-label="personal access token name input"
@@ -212,25 +212,24 @@ const PersonalAccessTokenModal = ({ controller, url }) => {
               isRequired
               validated={nameHelperText().length ? 'error' : 'default'}
               value={name}
-              onChange={setName}
+              onChange={(_event, val) => setName(val)}
               onBlur={() => setShowNameErrors(true)}
             />
+            {nameValidationError && (
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem
+                    icon={<ExclamationCircleIcon />}
+                    variant="error"
+                  >
+                    {nameHelperText()}
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            )}
           </FormGroup>
-          <FormGroup
-            label={__('Expires')}
-            validated={
-              !isDateTimeInFuture() ||
-              ((!date.length || !time.length) && endsNever === false)
-                ? 'error'
-                : 'default'
-            }
-            helperTextInvalid={
-              !isDateTimeInFuture()
-                ? __('Cannot be in the past')
-                : __('Fill out the date and time')
-            }
-          >
-            <div className="pf-c-form">
+          <FormGroup label={__('Expires')}>
+            <div className="pf-v5-c-form">
               <FormGroup fieldId="token-expires-never">
                 <Radio
                   ouiaId="expires-never"
@@ -260,54 +259,72 @@ const PersonalAccessTokenModal = ({ controller, url }) => {
                         {__('At')}
                       </div>
                       <InputGroup>
-                        <DatePicker
-                          aria-label="expiration date picker"
-                          isDisabled={isDateTimeDisabled}
-                          value={date}
-                          onChange={(_e, v) => validateDateChange(v)}
-                          appendTo={() => document.body}
-                          invalidFormatText={
-                            isDateValid
-                              ? ''
-                              : __('Enter valid date: YYYY-MM-DD')
-                          }
-                          // for undisplaying invalidFormatText when changing to 'Never'
-                          dateParse={() =>
-                            date === ''
-                              ? new Date()
-                              : date.split('-').length === 3 &&
-                                new Date(`${date}T00:00:00`)
-                          }
-                        />
-                        <TimePicker
-                          aria-label="expiration time picker"
-                          isDisabled={
-                            !isDateValid ||
-                            isDateTimeDisabled ||
-                            date.length === 0
-                          }
-                          is24Hour
-                          includeSeconds
-                          menuAppendTo={() => document.body}
-                          placeholder={__('HH:MM:SS')}
-                          onChange={v => validateTimeChange(v)}
-                          invalidFormatErrorMessage={__(
-                            'Enter valid time: HH:MM:SS'
-                          )}
-                          invalidMinMaxErrorMessage=""
-                          validateTime={() => isTimeValid}
-                          inputProps={{
-                            validated: isTimeValid ? 'default' : 'error',
-                            // for undisplaying time when changing to 'Never'
-                            value: time,
-                          }}
-                        />
+                        <InputGroupItem>
+                          <DatePicker
+                            aria-label="expiration date picker"
+                            isDisabled={isDateTimeDisabled}
+                            value={date}
+                            onChange={(_e, v) => validateDateChange(v)}
+                            appendTo={() => document.body}
+                            invalidFormatText={
+                              isDateValid
+                                ? ''
+                                : __('Enter valid date: YYYY-MM-DD')
+                            }
+                            // for undisplaying invalidFormatText when changing to 'Never'
+                            dateParse={() =>
+                              date === ''
+                                ? new Date()
+                                : date.split('-').length === 3 &&
+                                  new Date(`${date}T00:00:00`)
+                            }
+                          />
+                        </InputGroupItem>
+                        <InputGroupItem>
+                          <TimePicker
+                            aria-label="expiration time picker"
+                            isDisabled={
+                              !isDateValid ||
+                              isDateTimeDisabled ||
+                              date.length === 0
+                            }
+                            is24Hour
+                            includeSeconds
+                            menuAppendTo={() => document.body}
+                            placeholder={__('HH:MM:SS')}
+                            onChange={(e, v) => validateTimeChange(v)}
+                            invalidFormatErrorMessage={__(
+                              'Enter valid time: HH:MM:SS'
+                            )}
+                            invalidMinMaxErrorMessage=""
+                            validateTime={() => isTimeValid}
+                            inputProps={{
+                              validated: isTimeValid ? 'default' : 'error',
+                              // for undisplaying time when changing to 'Never'
+                              value: time,
+                            }}
+                          />
+                        </InputGroupItem>
                       </InputGroup>
                     </div>
                   }
                 />
               </FormGroup>
             </div>
+            {expiresValidattionError && (
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem
+                    icon={<ExclamationCircleIcon />}
+                    variant="error"
+                  >
+                    {!isDateTimeInFuture()
+                      ? __('Cannot be in the past')
+                      : __('Fill out the date and time')}
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            )}
           </FormGroup>
         </Form>
       </Modal>
diff --git a/webpack/assets/javascripts/react_app/routes/FiltersForm/FiltersForm.js b/webpack/assets/javascripts/react_app/routes/FiltersForm/FiltersForm.js
index 765b71a91a2..6b5adb55e15 100644
--- a/webpack/assets/javascripts/react_app/routes/FiltersForm/FiltersForm.js
+++ b/webpack/assets/javascripts/react_app/routes/FiltersForm/FiltersForm.js
@@ -9,6 +9,7 @@ import {
   Popover,
   ActionGroup,
   Button,
+  Icon,
 } from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
 import { translate as __ } from '../../common/I18n';
@@ -134,9 +135,11 @@ export const FiltersForm = ({ roleName, roleId, isNew, data, history }) => {
                 type="button"
                 aria-label="More info for override field"
                 onClick={e => e.preventDefault()}
-                className="pf-c-form__group-label-help"
+                className="pf-v5-c-form__group-label-help"
               >
-                <HelpIcon noVerticalAlign />
+                <Icon isInline>
+                  <HelpIcon />
+                </Icon>
               </button>
             </Popover>
           }
@@ -144,7 +147,7 @@ export const FiltersForm = ({ roleName, roleId, isNew, data, history }) => {
           <Checkbox
             ouiaId="override-checkbox"
             isChecked={isOverride}
-            onChange={checked => {
+            onChange={(_event, checked) => {
               setIsOverride(checked);
             }}
             aria-label="is override"
@@ -181,9 +184,11 @@ export const FiltersForm = ({ roleName, roleId, isNew, data, history }) => {
                   type="button"
                   aria-label="More info for unlimited field"
                   onClick={e => e.preventDefault()}
-                  className="pf-c-form__group-label-help"
+                  className="pf-v5-c-form__group-label-help"
                 >
-                  <HelpIcon noVerticalAlign />
+                  <Icon isInline>
+                    <HelpIcon />
+                  </Icon>
                 </button>
               </Popover>
             }
@@ -191,7 +196,7 @@ export const FiltersForm = ({ roleName, roleId, isNew, data, history }) => {
             <Checkbox
               ouiaId="unlimited-checkbox"
               isChecked={isUnlimited}
-              onChange={checked => {
+              onChange={(_event, checked) => {
                 setAutocompleteQuery('');
                 setIsUnlimited(checked);
               }}
diff --git a/webpack/assets/javascripts/react_app/routes/FiltersForm/SelectResourceType.js b/webpack/assets/javascripts/react_app/routes/FiltersForm/SelectResourceType.js
index 702802cb357..76a2d972050 100644
--- a/webpack/assets/javascripts/react_app/routes/FiltersForm/SelectResourceType.js
+++ b/webpack/assets/javascripts/react_app/routes/FiltersForm/SelectResourceType.js
@@ -1,11 +1,11 @@
 import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { FormGroup } from '@patternfly/react-core';
 import {
   Select,
   SelectOption,
   SelectVariant,
-  FormGroup,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { useAPI } from '../../common/hooks/API/APIHooks';
 import { EMPTY_RESOURCE_TYPE } from './FiltersFormConstants';
 import { translate as __ } from '../../common/I18n';
@@ -51,7 +51,7 @@ export const SelectResourceType = ({
         maxHeight="45vh"
         variant={SelectVariant.typeahead}
         typeAheadAriaLabel="Select a resource type"
-        onToggle={setIsOpen}
+        onToggle={(_event, val) => setIsOpen(val)}
         selections={type.translation}
         isOpen={isOpen}
         aria-labelledby="resource type"
diff --git a/webpack/assets/javascripts/react_app/routes/FiltersForm/SelectRole.js b/webpack/assets/javascripts/react_app/routes/FiltersForm/SelectRole.js
index 3f89dd0598b..d5bc36d1be9 100644
--- a/webpack/assets/javascripts/react_app/routes/FiltersForm/SelectRole.js
+++ b/webpack/assets/javascripts/react_app/routes/FiltersForm/SelectRole.js
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { FormGroup } from '@patternfly/react-core';
 import {
   Select,
   SelectOption,
   SelectVariant,
-  FormGroup,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { useAPI } from '../../common/hooks/API/APIHooks';
 import { translate as __ } from '../../common/I18n';
 
@@ -22,7 +22,7 @@ export const SelectRole = ({ role, setRole }) => {
         maxHeight="45vh"
         variant={SelectVariant.typeahead}
         typeAheadAriaLabel="Select a role"
-        onToggle={setIsOpen}
+        onToggle={(_event, val) => setIsOpen(val)}
         selections={results.find(result => result.id === role)?.name}
         isOpen={isOpen}
         aria-labelledby="resource type"
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/Command.test.js.snap b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/Command.test.js.snap
index 96086db7142..a17fce835fd 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/Command.test.js.snap
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/Command.test.js.snap
@@ -18,7 +18,6 @@ exports[`RegistrationCommandsPage - Command renders 1`] = `
     onCopy={[Function]}
     ouiaSafe={true}
     position="top"
-    removeFindDomNode={false}
     textAriaLabel="Copyable input"
     toggleAriaLabel="Show content"
     variant="expansion"
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/ConfigParams.test.js.snap b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/ConfigParams.test.js.snap
index f6143a098c5..1872da0a949 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/ConfigParams.test.js.snap
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/ConfigParams.test.js.snap
@@ -15,7 +15,6 @@ exports[`RegistrationCommandsPage fields - ConfigParams renders 1`] = `
       className="without_select2"
       id="registration_setup_remote_execution"
       isDisabled={false}
-      isIconSprite={false}
       isRequired={true}
       onBlur={[Function]}
       onChange={[Function]}
@@ -55,7 +54,6 @@ exports[`RegistrationCommandsPage fields - ConfigParams renders 1`] = `
       className="without_select2"
       id="registration_setup_insights"
       isDisabled={false}
-      isIconSprite={false}
       isRequired={true}
       onBlur={[Function]}
       onChange={[Function]}
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/HostGroup.test.js.snap b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/HostGroup.test.js.snap
index 1646712b4a5..3a26d8f34b6 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/HostGroup.test.js.snap
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/HostGroup.test.js.snap
@@ -9,7 +9,6 @@ exports[`RegistrationCommandsPage fields - HostGroup renders 1`] = `
     className="without_select2"
     id="reg_host_group"
     isDisabled={false}
-    isIconSprite={false}
     isRequired={false}
     onBlur={[Function]}
     onChange={[Function]}
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/OperatingSystem.test.js.snap b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/OperatingSystem.test.js.snap
index 5ea6452e6ce..f6de22a437a 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/OperatingSystem.test.js.snap
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/OperatingSystem.test.js.snap
@@ -3,7 +3,6 @@
 exports[`RegistrationCommandsPage fields - OperatingSystem renders 1`] = `
 <FormGroup
   fieldId="reg_os"
-  helperText=""
   label="Operating system"
   labelIcon={
     <LabelIcon
@@ -15,7 +14,6 @@ exports[`RegistrationCommandsPage fields - OperatingSystem renders 1`] = `
     className="without_select2"
     id="reg_os"
     isDisabled={true}
-    isIconSprite={false}
     isRequired={false}
     onBlur={[Function]}
     onChange={[Function]}
@@ -30,5 +28,10 @@ exports[`RegistrationCommandsPage fields - OperatingSystem renders 1`] = `
       value=""
     />
   </FormSelect>
+  <FormHelperText>
+    <HelperText>
+      <HelperTextItem />
+    </HelperText>
+  </FormHelperText>
 </FormGroup>
 `;
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/Repository.test.js.snap b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/Repository.test.js.snap
index 2d1a25c109c..8a33af76373 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/Repository.test.js.snap
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/Repository.test.js.snap
@@ -21,13 +21,7 @@ exports[`RegistrationCommandsPage fields - Repository renders 1`] = `
     }
   >
     <Button
-      icon={
-        <PlusCircleIcon
-          color="currentColor"
-          noVerticalAlign={false}
-          size="sm"
-        />
-      }
+      icon={<PlusCircleIcon />}
       onClick={[Function]}
       ouiaId="host_reg_add_more_repositories"
       variant="link"
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/Taxonomies.test.js.snap b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/Taxonomies.test.js.snap
index 6e08ea4d261..cabf26ef00d 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/Taxonomies.test.js.snap
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/Taxonomies.test.js.snap
@@ -15,7 +15,6 @@ exports[`RegistrationCommandsPage fields - Taxonomies renders 1`] = `
       className="without_select2"
       id="reg_organization"
       isDisabled={false}
-      isIconSprite={false}
       isRequired={true}
       onBlur={[Function]}
       onChange={[Function]}
@@ -44,7 +43,6 @@ exports[`RegistrationCommandsPage fields - Taxonomies renders 1`] = `
       className="without_select2"
       id="reg_location"
       isDisabled={false}
-      isIconSprite={false}
       isRequired={true}
       onBlur={[Function]}
       onChange={[Function]}
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/TokenLifeTime.test.js.snap b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/TokenLifeTime.test.js.snap
index 743a062d1c1..5d3e2952070 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/TokenLifeTime.test.js.snap
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/components/__snapshots__/TokenLifeTime.test.js.snap
@@ -3,37 +3,39 @@
 exports[`RegistrationCommandsPage fields - TokenLifeTime renders 1`] = `
 <FormGroup
   fieldId="reg_token_life_time_input"
-  helperTextInvalid="Token life time value must be between 1 and 999999 hours."
   label="Token life time"
   labelIcon={
     <LabelIcon
       text="Expiration of the authorization token."
     />
   }
-  validated="default"
 >
   <InputGroup>
-    <TextInput
-      id="reg_token_life_time_input"
-      isDisabled={false}
-      max={999999}
-      min={1}
-      onChange={[Function]}
-      ouiaId="reg_token_life_time_input"
-      type="number"
-      validated="default"
-      value={4}
-    />
+    <InputGroupItem
+      isFill={true}
+    >
+      <TextInput
+        id="reg_token_life_time_input"
+        isDisabled={false}
+        max={999999}
+        min={1}
+        onChange={[Function]}
+        ouiaId="reg_token_life_time_input"
+        type="number"
+        validated="default"
+        value={4}
+      />
+    </InputGroupItem>
     <InputGroupText>
       hours
     </InputGroupText>
     <InputGroupText>
       <Checkbox
         className=""
-        component="div"
         id="reg_unlimited_token_life_time"
         isChecked={false}
         isDisabled={false}
+        isLabelWrapped={false}
         isRequired={false}
         isValid={true}
         label="unlimited"
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/integration.test.js b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/integration.test.js
index d7e45b634d3..4fdf1e1e021 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/integration.test.js
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/__tests__/integration.test.js
@@ -32,7 +32,7 @@ describe('RegistrationCommandsPage integration', () => {
     integrationTestHelper.takeStoreAndLastActionSnapshot('rendered');
 
     const submitBtn = component.find('#generate_btn').at(0)
-    const commandField = component.find('.pf-c-clipboard-copy__expandable-content pre')
+    const commandField = component.find('.pf-v5-c-clipboard-copy__expandable-content pre')
 
     expect(submitBtn.hasClass('pf-m-disabled')).toBe(false);
     expect(commandField.length).toBe(0);
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/ConfigParams.js b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/ConfigParams.js
index 44d80447d51..3c4604843b0 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/ConfigParams.js
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/ConfigParams.js
@@ -49,7 +49,7 @@ const ConfigParams = ({
         <FormSelect
           ouiaId="registration_setup_remote_execution"
           value={setupRemoteExecution}
-          onChange={v => handleRemoteExecution(v)}
+          onChange={(_event, v) => handleRemoteExecution(v)}
           className="without_select2"
           id="registration_setup_remote_execution"
           isDisabled={isLoading}
@@ -73,7 +73,7 @@ const ConfigParams = ({
         <FormSelect
           ouiaId="registration_setup_insights"
           value={setupInsights}
-          onChange={v => handleInsights(v)}
+          onChange={(_event, v) => handleInsights(v)}
           className="without_select2"
           id="registration_setup_insights"
           isDisabled={isLoading}
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/HostGroup.js b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/HostGroup.js
index abe97eba551..44dcab51eaf 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/HostGroup.js
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/HostGroup.js
@@ -15,7 +15,7 @@ const HostGroup = ({ hostGroupId, hostGroups, handleHostGroup, isLoading }) => (
     <FormSelect
       ouiaId="reg_host_group"
       value={hostGroupId}
-      onChange={v => handleHostGroup(v)}
+      onChange={(_event, v) => handleHostGroup(v)}
       className="without_select2"
       id="reg_host_group"
       isDisabled={isLoading || hostGroups.length === 0}
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/OperatingSystem.js b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/OperatingSystem.js
index 6e3357ea3b1..e6e57b1c7b6 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/OperatingSystem.js
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/OperatingSystem.js
@@ -9,6 +9,9 @@ import {
   FormGroup,
   FormSelect,
   FormSelectOption,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
 } from '@patternfly/react-core';
 
 import LabelIcon from '../../../../../components/common/LabelIcon';
@@ -67,13 +70,6 @@ const OperatingSystem = ({
   return (
     <FormGroup
       label={__('Operating system')}
-      helperText={osHelperText(
-        operatingSystemId,
-        operatingSystems,
-        hostGroupId,
-        hostGroups,
-        operatingSystemTemplate
-      )}
       labelIcon={
         <LabelIcon
           text={__(
@@ -86,7 +82,7 @@ const OperatingSystem = ({
       <FormSelect
         ouiaId="os-select"
         value={operatingSystemId}
-        onChange={v => handleOperatingSystem(v)}
+        onChange={(_event, v) => handleOperatingSystem(v)}
         className="without_select2"
         id="reg_os"
         validated={validatedOS(operatingSystemId, operatingSystemTemplate)}
@@ -97,6 +93,19 @@ const OperatingSystem = ({
           <FormSelectOption key={i} value={os.id} label={os.title} />
         ))}
       </FormSelect>
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem>
+            {osHelperText(
+              operatingSystemId,
+              operatingSystems,
+              hostGroupId,
+              hostGroups,
+              operatingSystemTemplate
+            )}
+          </HelperTextItem>
+        </HelperText>
+      </FormHelperText>
     </FormGroup>
   );
 };
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/Packages.js b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/Packages.js
index 5755d6b5678..2b6838c3699 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/Packages.js
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/Packages.js
@@ -2,7 +2,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { FormGroup, TextInput } from '@patternfly/react-core';
+import {
+  FormGroup,
+  TextInput,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
 import LabelIcon from '../../../../../components/common/LabelIcon';
 
 import { sprintf, translate as __ } from '../../../../../common/I18n';
@@ -10,10 +16,6 @@ import { sprintf, translate as __ } from '../../../../../common/I18n';
 const Packages = ({ packages, handlePackages, configParams, isLoading }) => (
   <FormGroup
     label={__('Install packages')}
-    helperText={
-      configParams?.host_packages &&
-      sprintf('Default value: "%s"', configParams?.host_packages)
-    }
     labelIcon={
       <LabelIcon
         text={__(
@@ -28,9 +30,17 @@ const Packages = ({ packages, handlePackages, configParams, isLoading }) => (
       id="reg_packages"
       value={packages}
       type="text"
-      onChange={handlePackages}
+      onChange={(e, v) => handlePackages(v)}
       isDisabled={isLoading}
     />
+    <FormHelperText>
+      <HelperText>
+        <HelperTextItem>
+          {configParams?.host_packages &&
+            sprintf('Default value: "%s"', configParams?.host_packages)}
+        </HelperTextItem>
+      </HelperText>
+    </FormHelperText>
   </FormGroup>
 );
 
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/RepositoryModalInput.js b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/RepositoryModalInput.js
index 5459a7ec745..5b8af861cb2 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/RepositoryModalInput.js
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/RepositoryModalInput.js
@@ -28,7 +28,7 @@ const RepositoryModalInput = ({
             id="host_reg_repo"
             value={initRepo}
             type="text"
-            onChange={onRepoUpdate}
+            onChange={(_event, repo) => onRepoUpdate(repo)}
             isDisabled={isLoading}
           />
         </FormGroup>
@@ -40,7 +40,7 @@ const RepositoryModalInput = ({
             id="host_reg_gpg_key"
             value={initGpgKey}
             type="text"
-            onChange={onGpgKeyUpdate}
+            onChange={(_event, gpgKey) => onGpgKeyUpdate(gpgKey)}
             isDisabled={isLoading}
           />
         </FormGroup>
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/SmartProxy.js b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/SmartProxy.js
index b48c5001a10..bbcaf1f5c08 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/SmartProxy.js
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/SmartProxy.js
@@ -5,6 +5,9 @@ import {
   FormGroup,
   FormSelect,
   FormSelectOption,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
 } from '@patternfly/react-core';
 
 import LabelIcon from '../../../../../components/common/LabelIcon';
@@ -36,12 +39,11 @@ const SmartProxy = ({
           )}
         />
       }
-      helperText={smartProxyUrl()}
     >
       <FormSelect
         ouiaId="reg_smart_proxy"
         value={smartProxyId}
-        onChange={v => handleSmartProxy(v)}
+        onChange={(_event, v) => handleSmartProxy(v)}
         className="without_select2"
         id="reg_smart_proxy"
         isDisabled={isLoading || smartProxies.length === 0}
@@ -51,6 +53,11 @@ const SmartProxy = ({
           <FormSelectOption key={i} value={sp.id} label={sp.name} />
         ))}
       </FormSelect>
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem>{smartProxyUrl()}</HelperTextItem>
+        </HelperText>
+      </FormHelperText>
     </FormGroup>
   );
 };
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/Taxonomies.js b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/Taxonomies.js
index 2615dd3054d..86de09e95b2 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/Taxonomies.js
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/Taxonomies.js
@@ -34,7 +34,7 @@ const Taxonomies = ({
       <FormSelect
         ouiaId="reg_organization"
         value={organizationId}
-        onChange={v => handleOrganization(v)}
+        onChange={(_event, v) => handleOrganization(v)}
         className="without_select2"
         id="reg_organization"
         isDisabled={isLoading}
@@ -61,7 +61,7 @@ const Taxonomies = ({
       <FormSelect
         ouiaId="reg_location"
         value={locationId}
-        onChange={v => handleLocation(v)}
+        onChange={(_event, v) => handleLocation(v)}
         className="without_select2"
         id="reg_location"
         isDisabled={isLoading}
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/TokenLifeTime.js b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/TokenLifeTime.js
index bc57af5a3ce..4f82e42a2a5 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/TokenLifeTime.js
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/components/fields/TokenLifeTime.js
@@ -7,7 +7,12 @@ import {
   InputGroup,
   InputGroupText,
   Checkbox,
+  InputGroupItem,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
 } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
 
 import LabelIcon from '../../../../../components/common/LabelIcon';
 
@@ -33,29 +38,25 @@ const TokenLifeTime = ({ value, onChange, handleInvalidField, isLoading }) => {
   return (
     <FormGroup
       label={__('Token life time')}
-      validated={isValid(value) ? 'default' : 'error'}
-      helperTextInvalid={sprintf(
-        'Token life time value must be between %s and %s hours.',
-        minValue,
-        maxValue
-      )}
       fieldId="reg_token_life_time_input"
       labelIcon={
         <LabelIcon text={__('Expiration of the authorization token.')} />
       }
     >
       <InputGroup>
-        <TextInput
-          ouiaId="reg_token_life_time_input"
-          value={value}
-          type="number"
-          min={minValue}
-          max={maxValue}
-          validated={isValid(value) ? 'default' : 'error'}
-          isDisabled={isLoading || value === 'unlimited'}
-          id="reg_token_life_time_input"
-          onChange={v => setValue(v)}
-        />
+        <InputGroupItem isFill>
+          <TextInput
+            ouiaId="reg_token_life_time_input"
+            value={value}
+            type="number"
+            min={minValue}
+            max={maxValue}
+            validated={isValid(value) ? 'default' : 'error'}
+            isDisabled={isLoading || value === 'unlimited'}
+            id="reg_token_life_time_input"
+            onChange={(_event, v) => setValue(v)}
+          />
+        </InputGroupItem>
         <InputGroupText>{__('hours')}</InputGroupText>
         <InputGroupText>
           <Checkbox
@@ -68,6 +69,19 @@ const TokenLifeTime = ({ value, onChange, handleInvalidField, isLoading }) => {
           />
         </InputGroupText>
       </InputGroup>
+      {!isValid(value) && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+              {sprintf(
+                'Token life time value must be between %s and %s hours.',
+                minValue,
+                maxValue
+              )}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
     </FormGroup>
   );
 };
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/index.js b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/index.js
index e653e3b342f..332c30d2c43 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/index.js
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/index.js
@@ -260,7 +260,7 @@ const RegistrationCommandsPage = () => {
               id="generalSection"
               ref={generalTabRef}
             >
-              <div className="pf-c-form">
+              <div className="pf-v5-c-form">
                 <General
                   organizationId={organizationId}
                   organizations={organizations}
@@ -310,7 +310,7 @@ const RegistrationCommandsPage = () => {
               ref={advancedTabRef}
               hidden
             >
-              <div className="pf-c-form">
+              <div className="pf-v5-c-form">
                 <Advanced
                   configParams={configParams}
                   setupRemoteExecution={setupRemoteExecution}
diff --git a/webpack/assets/javascripts/react_app/routes/common/LoadingPage/index.js b/webpack/assets/javascripts/react_app/routes/common/LoadingPage/index.js
index 46e4c05edb0..6b9fd2788ba 100644
--- a/webpack/assets/javascripts/react_app/routes/common/LoadingPage/index.js
+++ b/webpack/assets/javascripts/react_app/routes/common/LoadingPage/index.js
@@ -4,7 +4,7 @@ import './loadingpage.scss';
 
 const LoadingPage = () => (
   <div id="loading-page">
-    <Spinner isSVG size="xl" aria-label="Loading Page" />
+    <Spinner size="xl" aria-label="Loading Page" />
   </div>
 );