ACM-37214 External link icon renders as heavy solid asset#6495
ACM-37214 External link icon renders as heavy solid asset#6495oksanabaza wants to merge 1 commit into
Conversation
Signed-off-by: Oksana Bazylieva <obazylie@redhat.com>
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: oksanabaza 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 |
📝 WalkthroughWalkthroughA global CSS override was added to hide the PatternFly ChangesPatternFly icon rendering
Estimated code review effort: 1 (Trivial) | ~2 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
frontend/src/GlobalApplicationStyle.cssESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![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
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/GlobalApplicationStyle.css`:
- Around line 11-14: Replace the global `.pf-v6-svg .pf-v6-icon-rh-ui` rule in
GlobalApplicationStyle.css with a selector scoped to the duplicate
ExternalLinkAltIcon wrapper/path, using an existing wrapper-specific class or
adding one at the relevant render site. Ensure only the duplicate external-link
icon is hidden while unrelated RH UI icons remain visible, including across App
and plugin contexts.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Enterprise
Run ID: 009afa6f-25c8-4e3a-aacc-89660fa07329
📒 Files selected for processing (1)
frontend/src/GlobalApplicationStyle.css
| /* Fix for bold icons when running as plugin in OCP 4.22 - PatternFly 6.5+ dual icon rendering incompatibility */ | ||
| .pf-v6-svg .pf-v6-icon-rh-ui { | ||
| display: none !important; | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## File outline: frontend/src/GlobalApplicationStyle.css\n'
wc -l frontend/src/GlobalApplicationStyle.css
cat -n frontend/src/GlobalApplicationStyle.css
printf '\n## Search for pf-v6-icon-rh-ui and related selectors\n'
rg -n "pf-v6-icon-rh-ui|pf-v6-svg" frontend/src
printf '\n## Inspect imports of GlobalApplicationStyle.css\n'
rg -n "GlobalApplicationStyle\.css" frontend/src
printf '\n## Show nearby code for the import sites\n'
for f in frontend/src/App.tsx frontend/src/components/PluginContextProvider.tsx; do
if [ -f "$f" ]; then
printf '\n### %s\n' "$f"
rg -n -C 3 "GlobalApplicationStyle\.css" "$f"
fi
doneRepository: stolostron/console
Length of output: 15961
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## Source occurrences outside snapshots\n'
rg -n --glob '!**/__snapshots__/**' "pf-v6-icon-rh-ui|pf-v6-svg" frontend/src
printf '\n## Inspect likely relevant components that use the icon\n'
for f in \
frontend/src/routes/Search/components/HeaderWithNotification.tsx \
frontend/src/routes/Search/components/ReuseableSearchbar.tsx \
frontend/src/components/TemplateEditor/components/EditorHeader.tsx \
frontend/src/components/TemplateEditor/components/EditorBar.tsx \
frontend/src/components/TemplateEditor/controls/ControlPanelSingleSelect.tsx \
frontend/src/components/TemplateEditor/controls/ControlPanelNumber.tsx \
frontend/src/components/TemplateEditor/controls/ControlPanelMultiSelect.tsx
do
if [ -f "$f" ]; then
printf '\n### %s\n' "$f"
rg -n -C 3 "pf-v6-icon-rh-ui|pf-v6-svg|ExternalLink|icon" "$f"
fi
doneRepository: stolostron/console
Length of output: 398
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## Search for icon-related source that could render pf-v6-icon-rh-ui\n'
rg -n --glob '!**/__snapshots__/**' \
"ExternalLink|external link|pf-v6-icon-rh-ui|pf-v6-svg|icon-rh-ui|Icon.*external|external.*Icon|Link.*Icon" \
frontend/src
printf '\n## Inspect the source files named by the snapshots if present\n'
for f in \
frontend/src/routes/Search/components/HeaderWithNotification.tsx \
frontend/src/routes/Search/components/ReuseableSearchbar.tsx \
frontend/src/components/TemplateEditor/components/EditorHeader.tsx \
frontend/src/components/TemplateEditor/components/EditorBar.tsx \
frontend/src/components/TemplateEditor/controls/ControlPanelSingleSelect.tsx \
frontend/src/components/TemplateEditor/controls/ControlPanelNumber.tsx \
frontend/src/components/TemplateEditor/controls/ControlPanelMultiSelect.tsx
do
if [ -f "$f" ]; then
printf '\n### %s\n' "$f"
cat -n "$f" | sed -n '1,220p'
fi
doneRepository: stolostron/console
Length of output: 39646
Scope the icon override more narrowly.
frontend/src/App.tsx and frontend/src/components/PluginContextProvider.tsx load this stylesheet globally, so .pf-v6-svg .pf-v6-icon-rh-ui hides every matching RH UI icon in the app/plugin—not just the duplicate external-link case. There are multiple ExternalLinkAltIcon render sites in the codebase, so unrelated icons can disappear. Use a wrapper-specific selector or another narrower hook for the duplicate path.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/GlobalApplicationStyle.css` around lines 11 - 14, Replace the
global `.pf-v6-svg .pf-v6-icon-rh-ui` rule in GlobalApplicationStyle.css with a
selector scoped to the duplicate ExternalLinkAltIcon wrapper/path, using an
existing wrapper-specific class or adding one at the relevant render site.
Ensure only the duplicate external-link icon is hidden while unrelated RH UI
icons remain visible, including across App and plugin contexts.
Source: Coding guidelines
|
@oksanabaza shall we just upgrade to PF 6.5.2 if it has the fix? |
@KevinFCormier yes, upgrading OCP Console 4.22 to PF 6.5.2 would fix it (ACM already uses upgraded version), but it's not trivial. I tried locally and the build kept failing due to webpack/asset resolution issues. It would require additional changes beyond just bumping the version |
|
Oh, @oksanabaza I misunderstood. Yeah, 4.22 is already shipped, so we can't really ask them to upgrade PF in it. |
|
|
/cc @KevinFCormier |
KevinFCormier
left a comment
KevinFCormier
left a comment
There was a problem hiding this comment.
Unfortunately this removes the icon completely when running with OCP 5.0 (CONSOLE_VERSION=5.0 npm run plugins).
| } | ||
|
|
||
| /* Fix for bold icons when running as plugin in OCP 4.22 - PatternFly 6.5+ dual icon rendering incompatibility */ | ||
| .pf-v6-svg .pf-v6-icon-rh-ui { |
There was a problem hiding this comment.
| .pf-v6-svg .pf-v6-icon-rh-ui { | |
| .pf-v6-svg .pf-v6-icon-rh-ui :not(.pf-v6-icon-set-rh-ui *) { |
2 participants
📝 Summary
Ticket Summary (Title):
ACM-37214 External link icon renders as heavy solid asset
Ticket Link:
https://redhat.atlassian.net/browse/ACM-37214
Type of Change:
✅ Checklist
General
ACM-12340 Fix bug with...)If Feature
If Bugfix
🗒️ Notes for Reviewers
2026-07-16.2.33.24.PM.mov
Summary by CodeRabbit