Upgrade to Patternfly v6

[Venefilyn]

Documented changes required for a smoother Patternfly (PF) v6 migration including a migration plan. Currently a work in progress!

Tracked in Jira at COCKPIT-1246

Migration plan

Most of these can be done in separate PRs once the main/first one is merged as it will be a requirement for all the others.

• Decide a migration period for everyone to work together on the migration
• In first PR: Upgrade PF dependencies to 6.1.0
• In first PR: Upgrade PF components with command npx @patternfly/pf-codemods@latest ./pkg --v6 --fix --exclude=button-moveIcons-icon-prop,menuToggle-warn-iconOnly-toggle,helperTextItem-warn-screenReaderText-update
• In first PR: Rename PF class names using npx @patternfly/class-name-updater ./pkg --v6 --fix
• PRs for all remaining points in "Required changes" section - which can be in parallel
• PRs created for upgrading cockpit-owned plugins like cockpit-files
• Manual UI review to ensure correct behaviour
• Update pixel tests once they all look good (last item on the migration plan)

Required changes

As part of the ongoing work I've done in #21611 I've come up with the following changes required

• Patternfly dependencies updated to PF6
• PF components are migrated with @patternfly/pf-codemods
• PF classes are migrated with @patternfly/class-name-updater
• PF Page component needs a CSS rule for to prevent masthead and sidebar grid elements from showing within our iframes
• Update spacers to PF6 global variable counterpart
• Update global colors for icon statuses
• Sidebar needs background color variables changed and spacer variables
• Host selection is hacked by adding .pf-v6-c-menu-toggle to the button.ct-nav-toggle element to get better styling
• Core pages that use Page component get the class override added for grid elements showing incorrectly
• Storage page needs to use PF6 semantic CSS variables
• Networking page charts needs to use PF6 semantic CSS variables
• .pf-v5-m-tabular-nums need to be changed to .pf-v6-m-tabular-nums on all related projects
• Mobile navigation bar needs margin and padding removed and flex/grid elements modified
• Menu/dropdown related tests will need to be modified due to menus now appearing in a different area of the dom

Post-migration important changes

These shouldn't be tracked by this issue but are nonetheless important tasks to keep in mind of for a future issue tracker.

• Login-page to the PF Login component
• Sidebar search to PF Search component
• Sidebar to the PF Nav component
• Overview Health card to use PF components (find existing issue and add here)
• Host selection to use PF Menu component
• Redundant <Content> components are fixed (part of pf-codemods)
• Redesign header accent (for admin access) to match PF6 style
• Redesign mobile navigation with Patternfly team
• Firewall on/off-switch needs to be Switch label instead of HelperText
• Breadcrumbs has two different text sizes for links and normal text
• .no-masthead-sidebar should be documented or somehow made default for pages Page - Allow main grid without sidebar and masthead patternfly/patternfly#7357

Important notes

• Patternfly v6 no longer uses different variables for each CSS class if you are on light or dark mode. Instead they use one CSS variable that changes depending on the theme - ideally we should not change the color ourselves for the components but rely on the semantic CSS variables.

[Venefilyn]

Here is a screen recording showing the current status of the upgrade with all the changes I've done so far.

I will start to go through the git commits of the spike PR to consolidate them and then split up and refine to more PRs

Kooha-2025-03-07-13-03-17.webm