feat(scorecard): Customize icons - #2641
Conversation
Signed-off-by: Dominika Zemanovicova <dzemanov@redhat.com>
|
Important This PR includes changes that affect public-facing API. Please ensure you are adding/updating documentation for new features or behavior. Changed Packages
|
Review Summary by QodoAdd custom icon support for scorecard threshold rules
WalkthroughsDescription• Add custom icon support for scorecard threshold rules • Export Material Design icons as default status icons • Create icon resolution component supporting multiple formats • Enhance validation to require icon or color for custom thresholds • Refactor color utilities into threshold-specific module Diagramflowchart LR
A["Threshold Config"] -->|icon property| B["Icon Validation"]
B -->|validated| C["Icon Resolution"]
C -->|system icon| D["ScorecardIcon Component"]
C -->|SVG/URL| D
C -->|Material Design| D
D -->|renders| E["Scorecard UI"]
F["Material Design Icons"] -->|exported| G["Icons Module"]
G -->|registered| E
File Changes1. workspaces/scorecard/packages/app/src/modules/icons/index.ts
|
Code Review by Qodo
1. Wrong default icon registry keys
|
![rhdh-qodo-merge[bot]](https://avatars.githubusercontent.com/in/1961108?s=60&v=4){kind=small}
| if ( | ||
| icon.startsWith('https://') || | ||
| icon.startsWith('http://') || | ||
| icon.startsWith('/') | ||
| ) { | ||
| return ( | ||
| <MuiIcon fontSize={size} baseClassName="material-icons-outlined" sx={sx}> | ||
| <img src={icon} alt="" height="100%" width="100%" /> | ||
| </MuiIcon> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <MuiIcon fontSize={size} baseClassName="material-icons-outlined" sx={sx}> | ||
| {icon} | ||
| </MuiIcon> |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
christoph-jerolimov
left a comment
christoph-jerolimov
left a comment
There was a problem hiding this comment.
Looks good to me! Thanks @dzemanov 👍
Keep it open for a day if someone else wants take a look as well.
Eswaraiahsapram
left a comment
Eswaraiahsapram
left a comment
There was a problem hiding this comment.
Thanks @dzemanov, tested in local. Looks good to me 🎉
/lgtm
Configuration I used
scorecard:
plugins:
jira:
open_issues:
thresholds:
rules:
- key: success
expression: '<5'
color: 'success.main'
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" style="color:#02D8E9"><rect x="4" y="4" width="16" height="16" rx="2" stroke="#02D8E9" stroke-width="2"/><path d="M8 12l2.5 2.5L16 9" stroke="#02D8E9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
- key: warning
expression: '6-60'
color: '#FFA500'
icon: kind:component
- key: error
expression: '>60'
color: 'rgb(255, 0, 0)'
icon: https://raw.githubusercontent.com/dzemanov/backstage-entities/main/icons/scorecard-icon.svg
github:
open_prs:
thresholds:
rules:
- key: success
expression: '<5'
icon: https://raw.githubusercontent.com/dzemanov/backstage-entities/main/icons/scorecard-icon.svg
- key: warning
expression: '6-60'
icon: kind:api
- key: error
expression: '>60'
icon: kind:system
Signed-off-by: Dominika Zemanovicova <dzemanov@redhat.com>
|
New changes are detected. LGTM label has been removed. |
|
Thanks @dzemanov for this PR. I tested locally and have a couple questions: Using Image URLConfig. . .
thresholds:
rules:
- key: error
expression: '>50'
color: 'rgb(229, 85, 0)'
icon: https://raw.githubusercontent.com/dzemanov/backstage-entities/main/icons/scorecard-icon.svgScreenshot
QuestionWhen URLs are used, the icon color defaults to black in my case. Is this the expected behaviour, and how can I change the icon color to match the rest of the donut chart? Using "Text" for icon configConfig. . .
thresholds:
rules:
- key: error
expression: '>50'
color: 'rgb(229, 85, 0)'
icon: NiceScreenshot
QuestionI am not certain whether we can programmatically validate the icon configuration, however, I wanted to confirm that we are aware of this behaviour. Using Backstage System IconWorks as expected. Using the same color as rest of the donut chart Config. . .
thresholds:
rules:
- key: error
expression: '>50'
color: 'rgb(229, 85, 0)'
icon: kind:groupScreenshot
Using Data URIConfig. . .
thresholds:
rules:
- key: error
expression: '>50'
color: 'rgb(229, 85, 0)'
icon: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj48cmVjdCB4PSI0IiB5PSI0IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHJ4PSIyIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTggMTJsMi41IDIuNUwxNiA5IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=Screenshot
QuestionWhen Data URIs are used, the icon color defaults to black in my case. Is this the expected behaviour, and how can I change the icon color to match the rest of the donut chart? Using SVG StringWorks as expected. Using the same color as rest of the donut chart Config. . .
thresholds:
rules:
- key: error
expression: '>50'
color: 'rgb(229, 85, 0)'
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" style="color:#e55500"><rect x="4" y="4" width="16" height="16" rx="2" stroke="#e55500" stroke-width="2"/><path d="M8 12l2.5 2.5L16 9" stroke="#e55500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'Screenshot
Using Default IconsWorks as expected. Using the same color as rest of the donut chart Config. . .
thresholds:
rules:
- key: error
expression: '>50'
color: 'rgb(229, 85, 0)'
icon: scorecardSuccessStatusIconScreenshot
|
|
@imykhno thank you for the review! Color propagation:
The problem is that Icon validation: |
Yes your are totally right color is not propagating at the svg icon.
It will be great if you try to find solution. I think, providing this approach help customers configure the well styled cards with scorecard plugin.
Thank you for additional information regarding this question. I have no objections, I just wanted to make sure we knew about it. Thank you! CC @dzemanov |
Signed-off-by: Dominika Zemanovicova <dzemanov@redhat.com>
|
@imykhno yes, we can encourage users to specify their color in the icon itself. I have updated the code to render with correct color using CSS masking. This means that using image like this: 
will result in:
However, I don't expect users using these types of images and it makes sense to use specified / default threshold colors for icons. |
|
I have reverted the changes with CSS masking due to compatibility issues in Safari - which I fixed - but there might be other potential problems with older browsers. I added to Readme information about the requirement for icons from urls to be pre-colored. |
Signed-off-by: Dominika Zemanovicova <dzemanov@redhat.com>
|
Fixed tests, not sure why CI did not catch it in #2650 |
|
4 participants
Hey, I just made a Pull Request!
Reuses logic from HeaderIcon.
scorecardSuccessStatusIcon,scorecardWarningStatusIcon,scorecardErrorStatusIconto icons registry, following the naming convention of existing icons likeocmIcon,rbacIcon, andbulkImportIcon.Icon configuration - supports multiple formats:
Threshold rules 'success', 'warning' and 'error' have default icons:
scorecardSuccessStatusIcon,scorecardSuccessStatusIcon,scorecardSuccessStatusIcon.Updated Scorecard configuration for RHDH:
Fixes
https://redhat.atlassian.net/browse/RHIDP-12191
Demo
How to test
Try out and uncomment these different icons:
You can test this both in the old and new frontend system.
You can test this in RHDH:
npx @red-hat-developer-hub/cli plugin export --dynamic-plugins-root /MyRoute/Projects/rhdh/dynamic-plugins-root --devfor each scorecard plugin (you can export only one of the modules)Note: color is not propagated correctly when using
<svgor/httpicons and will need to be specified in the icon itself. The logic for this is copied from HeaderIcon.✔️ Checklist