[ACM-29812] ApplicationSet creation - Git revision menu extends page height#5671
[ACM-29812] ApplicationSet creation - Git revision menu extends page height#5671Ginxo wants to merge 2 commits intostolostron:mainfrom
Conversation
|
Skipping CI for Draft Pull Request. |
📝 WalkthroughWalkthroughThis pull request enhances select components with scrollable dropdown functionality across the react-form-wizard package and refactors the ControlPanelComboBox component to use PatternFly v6 markup with improved accessibility standards including semantic HTML and ARIA attributes. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
Signed-off-by: Enrique Mingorance Cano <[email protected]>
Signed-off-by: Enrique Mingorance Cano <[email protected]>
| 'tf--list-box__menu-icon': true, | ||
| 'tf--list-box__menu-icon--open': isOpen, | ||
| }) | ||
| const toggleStyles = { height: isOpen ? '10%' : '100%' } |
There was a problem hiding this comment.
this is for the open/close arrow, it is not ideal solution but it feels like this screen has not been well maintained
| @@ -292,39 +294,43 @@ class ControlPanelComboBox extends React.Component { | |||
| </div> | |||
| {!disabled && isOpen && ( | |||
| <div | |||
There was a problem hiding this comment.
the rest is just wrapping the whole thing according to the new PF6 HTML structure
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js`:
- Line 171: The inline percentage-based toggleStyles ({ height: isOpen ? '10%' :
'100%' }) on the toggle button can cause layout issues because parent height
isn't explicitly set and it conflicts with the existing CSS rule
.tf--list-box__menu-icon; remove the toggleStyles usage (and any application of
it) from the component so the element relies on the stylesheet's height: 100%
behavior, or replace it with a static, CSS-class-driven style if different
styling is needed; update references to toggleStyles and any conditional
application based on isOpen to use CSS classes instead.
| 'tf--list-box__menu-icon': true, | ||
| 'tf--list-box__menu-icon--open': isOpen, | ||
| }) | ||
| const toggleStyles = { height: isOpen ? '10%' : '100%' } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, locate and read the file
find . -type f -name "ControlPanelComboBox.js" | head -5Repository: stolostron/console
Length of output: 135
🏁 Script executed:
# Check the actual file structure around line 171
if [ -f "frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js" ]; then
wc -l "frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js"
fiRepository: stolostron/console
Length of output: 137
🏁 Script executed:
# Search for related CSS files
fd -e css -e scss "ControlPanelComboBox|ComboBox" frontend/Repository: stolostron/console
Length of output: 44
🏁 Script executed:
# Read the file around line 171 to understand the toggleStyles context
sed -n '160,190p' "frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js"Repository: stolostron/console
Length of output: 1357
🏁 Script executed:
# Also read around line 278 where toggleStyles is applied
sed -n '270,290p' "frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js"Repository: stolostron/console
Length of output: 950
🏁 Script executed:
# Read the component structure (likely JSX return statement)
sed -n '1,50p' "frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js"Repository: stolostron/console
Length of output: 1954
🏁 Script executed:
# Search for CSS files that contain styles for these classes
rg -n "creation-view-controls-combobox|tf--list-box" --type css --type scss -B 2 -A 5 frontend/Repository: stolostron/console
Length of output: 90
🏁 Script executed:
# Also check if there are SCSS files in the same directory
fd -e scss -e css frontend/src/components/TemplateEditor/controls/Repository: stolostron/console
Length of output: 559
🏁 Script executed:
# Read more of the JSX structure to see the full component layout, especially the menu part
sed -n '190,320p' "frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js"Repository: stolostron/console
Length of output: 6105
🏁 Script executed:
# Search for CSS files in the project that might define tf--list-box styles
rg -t css "tf--list-box" --max-count 5 -B 2 -A 5 frontend/Repository: stolostron/console
Length of output: 2549
🏁 Script executed:
# Also search for any inline style definitions or CSS files that might be imported
fd . 'frontend/src/components/TemplateEditor/controls/' --type fRepository: stolostron/console
Length of output: 3474
🏁 Script executed:
# Check if there's a styles file in the same directory or parent
fd -e css -e scss . 'frontend/src/components/TemplateEditor/' | head -20Repository: stolostron/console
Length of output: 442
🏁 Script executed:
# Read the control-panel.css file to understand the styling context
cat -n "frontend/src/components/TemplateEditor/css/control-panel.css"Repository: stolostron/console
Length of output: 37252
Percentage-based height on toggle button may cause unexpected layout behavior.
The height: isOpen ? '10%' : '100%' relies on the parent container (.tf--list-box) having an explicitly defined height. Since the parent has position: relative but no explicit height property, percentage calculations may not work as intended. Additionally, this pattern introduces unnecessary state-dependent styling that conflicts with the existing CSS rule height: 100% on .tf--list-box__menu-icon.
Consider removing the inline height style and relying on CSS:
🔧 Suggested fix
- const toggleStyles = { height: isOpen ? '10%' : '100%' }
+ const toggleStyles = {}Or simply omit the style attribute since CSS already handles this correctly.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const toggleStyles = { height: isOpen ? '10%' : '100%' } | |
| const toggleStyles = {} |
🤖 Prompt for AI Agents
In `@frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js` at
line 171, The inline percentage-based toggleStyles ({ height: isOpen ? '10%' :
'100%' }) on the toggle button can cause layout issues because parent height
isn't explicitly set and it conflicts with the existing CSS rule
.tf--list-box__menu-icon; remove the toggleStyles usage (and any application of
it) from the component so the element relies on the stylesheet's height: 100%
behavior, or replace it with a static, CSS-class-driven style if different
styling is needed; update references to toggleStyles and any conditional
application based on isOpen to use CSS classes instead.
|
/lgtm |
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: fxiang1, Ginxo The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
|
/retest |
2 participants
📝 Summary
Ticket Summary (Title):
ApplicationSet creation - Git revision menu extends page height
Ticket Link:
https://issues.redhat.com/browse/ACM-29812
Evidences
Video_2026-02-10_15-42-12.mp4
for the create application (deprecated one)
Video_2026-02-10_16-25-26.mp4
Type of Change:
✅ Checklist
General
ACM-12340 Fix bug with...)If Feature
If Bugfix
🗒️ Notes for Reviewers
Summary by CodeRabbit
New Features
UI/Style