PF5

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);
 }

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;

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;
   }

app/assets/stylesheets/patternfly_and_overrides.scss

@@ -144,7 +144,7 @@ a {
   }
 }
 
-.pf-c-backdrop {
+.pf-v5-c-backdrop {
   z-index: 2000;
 }
 

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};
   }
 }

app/views/layouts/_application_content.html.erb

@@ -1,14 +1,14 @@
 <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 %>
         <%= mount_breadcrumbs %>
       <% 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>

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) %>

package.json

@@ -21,6 +21,13 @@
   },
   "dependencies": {
     "@module-federation/utilities": "^1.7.0",
+    "@patternfly/patternfly": "^5.1.0",
+    "@patternfly/react-charts": "^5.3.22",
+    "@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",

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

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

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
 

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

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

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)

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"

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

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

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

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,21 +298,21 @@ 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
 
   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

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) };
 }

webpack/assets/javascripts/react_app/common/colors.scss

@@ -7,7 +7,7 @@ $pf-gold-400: #f0ab00;
 $pf-green-400: #3f9c35;
 $pf-green-600: #1e4f18;
 $pf-blue-400: #0088ce;
-$pf-color-white: #fff;
+$pf-v5-color-white: #fff;
 $pf-border-gray: #d1d1d1;
 
 $nav-pf-vertical-active-bg-color: #026991;

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

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;
 }