ROX-31773: Fix network graph selectors and layout for PF6#19165
Draft
sachaudh wants to merge 5 commits intodv/ROX-28622-pf-6from
Draft
ROX-31773: Fix network graph selectors and layout for PF6#19165sachaudh wants to merge 5 commits intodv/ROX-28622-pf-6from
sachaudh wants to merge 5 commits intodv/ROX-28622-pf-6from
Conversation
Replace the anti-pattern of nesting a Menu component inside a Select with proper PF6 Select children (SelectList, SelectOption, SelectGroup). This resolves click-handling and rendering issues caused by having two competing menu components managing state. Both DeploymentSelector and NamespaceSelector follow the same migration: - Menu/MenuItem/MenuList -> Select/SelectOption/SelectList - MenuGroup -> SelectGroup - Search input wrapped in MenuSearch/MenuSearchInput - onSelect and selected props moved from Menu to Select Partially generated by AI Signed-off-by: Saif Chaudhry <schaudhr@redhat.com>
Remove unused CSS import and add appendTo: 'inline' to prevent the dropdown from closing when clicking options. The CSS override is no longer needed since PF6 handles icon alignment natively. Partially generated by AI Signed-off-by: Saif Chaudhry <schaudhr@redhat.com>
Address several PF6 layout regressions on the network graph page:
- Use isFilled on the graph PageSection so it expands to fill the
remaining viewport height
- Replace padding={{ default: 'noPadding' }} with pf-v6-u-pb-0 on
toolbar sections to restore balanced spacing
- Vertically center the display options toggle with align-self-center
- Offset the topology control bar with a bottom spacer to prevent
clipping by the visualization surface overflow
Partially generated by AI
Signed-off-by: Saif Chaudhry <schaudhr@redhat.com>
|
Skipping CI for Draft Pull Request. |
Add explicit types to onSelect handlers, replace .filter(Boolean) with a proper type guard, remove redundant .toString() calls, drop inline styles for text alignment, delete orphaned PF5 CSS file, and standardize PageSection padding to use utility classes. AI-assisted Signed-off-by: Saif Chaudhry <schaudhr@redhat.com>
Align DeploymentSelector with NamespaceSelector by using PF6 MenuSearch/MenuSearchInput instead of a plain div wrapper. AI-assisted Signed-off-by: Saif Chaudhry <schaudhr@redhat.com>
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## dv/ROX-28622-pf-6 #19165 +/- ##
==================================================
Coverage 49.52% 49.52%
==================================================
Files 2666 2666
Lines 201181 201181
==================================================
Hits 99632 99632
+ Misses 94113 94112 -1
- Partials 7436 7437 +1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Fixes several PF6 migration issues on the Network Graph page:
DeploymentSelectorandNamespaceSelectorwere using the PF5 pattern of nesting aMenucomponent insideSelect. ReplacedMenu/MenuItem/MenuGroup/MenuListwith PF6'sSelectOption/SelectGroup/SelectListand movedonSelect/selectedprops to theSelectcomponent.appendTo: 'inline'to keep the dropdown in the toolbar's stacking context, preventing the blur handler from closing it immediately.pf-v6-u-pb-0instead ofnoPaddingfor toolbar sections, addedisFilledto the graph section so it fills the viewport, vertically centered the display options toggle, and offset the topology control bar to prevent clipping.DisplayOptionsSelect.csswhich targeted PF5 class names.User-facing documentation
Testing and quality
feature flag
Automated testing
How I validated my change
Screen.Recording.2026-02-24.at.12.47.01.PM.mov