Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migration to Patternfly v6 #21611

Draft
wants to merge 58 commits into
base: main
Choose a base branch
from
Draft

Conversation

Venefilyn
Copy link
Member

@Venefilyn Venefilyn commented Feb 12, 2025

Acceptance criteria

  • All unit tests pass
  • All integration tests pass
  • Pixel tests looked over and verified
  • No merge conflicts

Notes

Set up pushing to Freya's branch:

git remote add freya [email protected]:Venefilyn/cockpit.git
git branch --set-upstream-to=freya/pf6
  • Do not force push, if there is a new commit when you try to push to this PR you can do git pull --rebase
  • Replace global CSS from PF5 to PF6
  • Each component may have it's own classes changed, if so see in the specific PF6 component page
  • Colors can be a pain, if you don't know what PF6 token to use from here then ask @Venefilyn or @garrett

Current tasks

Easiest is if we fix the codebase per test case. It should reduce the merge conflicts as well. Some test cases might overlap like networkmanager test cases. The tests might fail due to selectors not being updated or because the page or component it's testing hasn't been upgraded to Patternfly v6. They may also fail purely because of pixel changes.

Assign yourself to a test case to fix and assign yourself like this.

If you're done and tests pass in GitHub, or it only fails because of pixel changes and these look ok, click the checkbox. If you see that tests already pass and no one is assigned then assign yourself anyway to show that you've verified them. If the pixel change shows brokenness, judge if it is a blocker (and must be fixed in this PR), or can be a followup -- then make sure it appears in the list below.

/test/verify

  • unit tests @martinpitt
  • check-apps @Venefilyn
  • check-bots-api @Venefilyn
  • check-client @Venefilyn
  • check-connection @Venefilyn
  • check-embed @Venefilyn
  • check-examples @Venefilyn
  • check-kdump
  • check-lib @martinpitt
  • check-loopback
  • check-metrics @martinpitt
  • check-networkmanager-basic @martinpitt (needs followup fix, see below)
  • check-networkmanager-bond @martinpitt
  • check-networkmanager-bridge @martinpitt
  • check-networkmanager-checkpoints @martinpitt
  • check-networkmanager-firewall @martinpitt (needs followup fix for table headers, see below)
  • check-networkmanager-mac @martinpitt
  • check-networkmanager-mtu @martinpitt (needs followup fix, see below)
  • check-networkmanager-other @martinpitt
  • check-networkmanager-settings @martinpitt (needs followup fix, see below)
  • check-networkmanager-team @martinpitt
  • check-networkmanager-unmanaged @martinpitt
  • check-networkmanager-vlan @martinpitt
  • check-networkmanager-wireguard @martinpitt (needs followup fix, see below)
  • check-packagekit @martinpitt
  • check-packages
  • check-pages @martinpitt
  • check-reauthorize
  • check-selinux @martinpitt (needs followup fix, see below)
  • check-session
  • check-shell-active-pages @Venefilyn
  • check-shell-host-switching @Venefilyn
  • check-shell-keys @Venefilyn (needs followup fix, auto-generated pf-screen-reader text) worked around
  • check-shell-menu @Venefilyn
  • check-shell-multi-machine @Venefilyn
  • check-shell-multi-machine-key @Venefilyn
  • check-shell-multi-os @Venefilyn
  • check-sosreport @martinpitt
  • check-ssh-api @martinpitt
  • check-static-login
  • check-storage-anaconda @tomasmatus
  • check-storage-basic @martinpitt
  • check-storage-btrfs @tomasmatus
  • check-storage-format
  • check-storage-hidden
  • check-storage-ignored
  • check-storage-iscsi
  • check-storage-luks @martinpitt
  • check-storage-lvm2 @tomasmatus
  • check-storage-mdraid @tomasmatus
  • check-storage-mounting @martinpitt (needs followup fix, see below)
  • check-storage-msdos
  • check-storage-multipath
  • check-storage-nfs @tomasmatus
  • check-storage-partitions
  • check-storage-raid1
  • check-storage-resize
  • check-storage-scaling
  • check-storage-smart
  • check-storage-stratis @tomasmatus -- known issue; but the pixel failure cancels the naughty match; once we accept pixel update it'll be fine
  • check-storage-swap
  • check-storage-unrecognized
  • check-storage-unused
  • check-storage-used @martinpitt (needs follow-up fix for dialog table headers and description list)
  • check-storage-vdo
  • check-superuser @martinpitt (needs follow-up fix, see below; plus the multi-host shell crash, same as with check-shell-multi-machine)
  • check-system-info
  • check-system-journal
  • check-system-realms @martinpitt fixed most of it what remains is the auto-generated bogus pf-screen-reader text worked around
  • check-system-services @Venefilyn
  • check-system-shutdown-restart @martinpitt; ok except for the bogus pf-screen-reader text worked around
  • check-system-terminal @martinpitt
  • check-system-tuned
  • check-testlib
  • check-users @Venefilyn (auto-generated pf-screen-reader text worked around)
  • check-users-roles @Venefilyn
  • check-ws-bastion @martinpitt (it's fine)
---

Description

To redo codemod simply reset the commit, revert changes you don't want, and run

npx @patternfly/pf-codemods@latest ./pkg --v6 --fix --exclude=button-moveIcons-icon-prop,menuToggle-warn-iconOnly-toggle,helperTextItem-warn-screenReaderText-update
  • button-moveIcons-icon-prop is excluded as it only makes it have a small margin (can be added later)
  • menuToggle-warn-iconOnly-toggle same as above icon exclusion
  • helperTextItem-warn-screenReaderText-update is excluded for now as things should work still for most cases

And for renaming CSS classes

npx @patternfly/class-name-updater ./pkg --v6 --fix

Items fixed or documented

When we are about to merge these should all be on our minds so we can fix either in this or preferably in upcoming PRs

  • pf-codemods introduce extra <Content>, need to be verified manually post-merge TextContent + Text results in two Content components patternfly/pf-codemods#825
  • All @patternfly/patternfly/*-theme-dark.css stuff is removed due to PF Tokens
  • All dark-theme color changes are unnecessary once the light-theme has changed to a Patternfly semantic CSS variable
  • SCSS global--breakpoint variables should start using rem instead
  • Global CSS spacers --pf-v5-global--spacer-- need to be renamed to --pf-t--global--spacer--
  • EmptyStateIconProps and EmptyStateHeaderProps are merged into EmptyStateProps
  • iframes use Page component as it should but we need an override to prevent whitespace in its grid Page - Allow main grid without sidebar and masthead patternfly/patternfly#7357
  • PF Nav needs NavLinkText and NavLinkIcon under NavLink now
    • Remember to move the hint to be after NavLinkIcon and not in it
  • Icons needs to be changed to use vars like --pf-t--global--icon--color--status--info--default
  • Sidebar
    • Host selection requires a full revamp (and ideally migration to React component) as Patternfly no longer has Select but rather Menu component.
    • For now host selection has more CSS to get rid of border and remove padding (as it needs a revamp it'll be a big refactor so should be skipped in this PR)
    • 🐛 Hostname doesn't hide long text but goes to newline
  • Masthead doesn't need much extra change apart from background CSS rules
  • Currently mobile toolbar at the bottom of the screen is broken
  • Limited access alert in overview has redundant CSS that can be replaced with CSS variables

All new upstream issues deriving from this upgrade

Regressions which are acceptable to be fixed in a follow-up (before next release)

  • networking MTU dialog missing space between "Set to" and input: screenshot
  • networking settings dialog trash icons are off screenshot
  • networking wireguard dialog: listen port input is too narrow; is the error alert supposed to not have backgroundu color? screenshot
  • networking interface details are missing spacing: screenshot
  • "Limited access" indicator does not look actionable (it's a button) and does not have a clear component boundary screenshot
  • sw updates "view update log" is off-center screenshot
  • description lists are missing boldness in the term and general spacing; compare our screenshot with upstream doc
  • storage busy dialog table headers are not bold screenshot; same for firewall
  • selinux expander/checkbox are misaligned screenshot
  • SSH key dialog (and possibly others) have misaligned labels for the inputs; and the labels are too small screenshot
  • PF6 uses a different font structure and with the recent changes we need to prevent or update how PF imports fonts and import the new fonts in addition to the existing fonts. screenshot

Related PRs

@Venefilyn Venefilyn marked this pull request as draft February 12, 2025 13:48
@jelly jelly added the no-test For doc/workflow changes, or experiments which don't need a full CI run, label Feb 12, 2025
<Toolbar className="ct-alert-toolbar">
<ToolbarContent>
<ToolbarGroup spaceItems={{ default: "spaceItemsMd" }}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this no longer does any layout, what replaces this?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IIRC I changed this after messing about with the wrap issue. Can check soon

patternfly/patternfly#3713


// REVIEW @Venefilyn: Is this still true?
/* Import our own fonts since the PF4 font-face rules are filtered out in build.js */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a good first prio target :)

@Venefilyn Venefilyn force-pushed the pf6 branch 2 times, most recently from 243148a to 4bc7573 Compare February 17, 2025 13:48
@Venefilyn Venefilyn force-pushed the pf6 branch 2 times, most recently from 5f90de6 to 81053eb Compare February 24, 2025 16:20
@Venefilyn Venefilyn mentioned this pull request Feb 25, 2025
33 tasks
@Venefilyn Venefilyn force-pushed the pf6 branch 3 times, most recently from 9183612 to 71f7cf5 Compare March 3, 2025 15:16
@Venefilyn Venefilyn force-pushed the pf6 branch 9 times, most recently from 2dacca0 to 67d6842 Compare March 12, 2025 15:07
Venefilyn and others added 27 commits March 14, 2025 16:10
Run `eslint:fix` to replace tabs with spaces.
Fix rule-empty-line-before
stylelint liberty/use-logical-spec
sytlelint liberty/use-logical-spec
stylelint rule-empty-line-before
In Chromium, the menu is directly hanging off `<body>`, not as a child
of `#zoom-control`.
Same "menu is now detached from element" change.
What remains is the bogus screen-reader text, but let's fix this more
centrally.
Restrict the hammer.gif size, as otherwise it would take the entire
screen width.
Dropdown menu is no longer attached to the element but attaches directly
to body.
Don't consider `.pf-v6-screen-reader` sub-elements of ph_text()
elements. Current PF6 version forces some extra screen-reader only junk:
patternfly/patternfly-react#11678

We will fix this properly (via PF), but it breaks a number of tests.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
no-test For doc/workflow changes, or experiments which don't need a full CI run,
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants