PatternFly 6 upgrade preparation work

[jelly]

Upgrading to PF6 will be a major task in all our Cockpit projects. This issue is here to collect everything which we can do upfront to make the bump to PF6 less painful:

• Land Bump the patternfly group with 6 updates #20962
• The deprecated Select component has been removed in the PF 6 branch and is still used in a lot of places
  • Remove comments about noResultsFoundText, this was removed bug(Select): noResultsFoundText will never show in the typeahead variant when one of the options is a Divider component patternfly/patternfly-react#6005
• Run codemods if possible for things which are removed or deprecated in PF6
  • nav tertiary can become horizontal-subnav
  • Switch labelOff fix(Switch): updated a11y by removing dynamic labeling patternfly/patternfly-react#10646 selinux: remove deprecated labelOff property of a Switch #20978
  • All CSS is changed to pf-v5 => pf-v6 this is becoming unmaintainable churn :-)
• Go over our old PF4/5 issues and see if they are resolved.
  • Machines host vm table https://github.com/cockpit-project/cockpit-machines/blob/ef2bfbd336327e59a892c06bded8a7032f325a04/src/components/vms/hostvmslist.scss#L9
  • Hack which mentions it should be fixed in PF 5 https://github.com/cockpit-project/cockpit-machines/blob/ef2bfbd336327e59a892c06bded8a7032f325a04/src/components/vms/hostvmslist.scss#L26
  • Cockpit => Clean up "# HACK: PF modal can have multiple id's in certain scenario's"
  • Cockpit Bug - SearchInput - breaking change in advanced filter's panel-based popover; positioning is no longer absolute patternfly/patternfly-react#7592
  • Cockpit Radio: when the label contains an input field the radio button is misaligned patternfly/patternfly#4061
  • Cockpit https://github.com/patternfly/patternfly/issues/9399
  • Cockpit page: demo: the icon group in the toolbar in the masthead top is not clear when focused / selected patternfly/patternfly#4524
  • Cockpit Bug - Checkbox and Radio - Vertical misalignment patternfly/patternfly#5802
  • Cockpit Bug - Table - Adding screenReaderText to a empty Th element changes column width patternfly/patternfly#6643
  • Cockpit Table/Empty state: the Empty State table from the react demos is breaking on mobile patternfly/patternfly-react#5379
  • Cockpit CardBody: provide hasNoPadding property to remove body padding patternfly/patternfly-react#5606
  • Cockpit pf-c-table: why do we need to much padding in the nested tables?  patternfly/patternfly#4280
  • Cockpit refactor(tabs): updated to new tab design patternfly/patternfly#2757
  • Cockpit fix(card): allow card header to wrap patternfly/patternfly#3714
  • Cockpit fix(alerts): update styling for better accessibility patternfly/patternfly#2921

More PF issues can be found with:

git grep "github.com/patternfly/patternfly"

[jelly]

Most of the codemods change code to renamed properties or changed implementations which we can't do upfront.

Instead of changing all our tests to handle pf-v5-c -> pf-v6-c we could write our tests like:

test/verify/check-users:        b.wait_visible("#accounts div.pf-v5-c-empty-state")

test/verify/check-users:        b.wait_visible(f"#accounts div.{self.pf_version}-c-empty-state")

[jelly]

nav tertiary looks 💯 different from the horizontal subnav. The screenshot is stretched because of the Flex we have there.

[garrett]

nav tertiary looks 💯 different from the horizontal subnav. The screenshot is stretched because of the Flex we have there.

Yep, it's not a replacement, regardless of what they've said. The visual replacement would be tabs, but they should activate a location instead of switch a tab notebook.

In other words, I think this is what we'd want instead (tabs as navigation): https://www.patternfly.org/components/tabs/#tabs-linked-to-nav-elements

If that doesn't work, a fallback could be to use the HTML version instead: https://www.patternfly.org/components/tabs/html#tabs-as-navigation — But I think the React tabs as navigation approach should work.