Migrate missed PF5 styles to PF6 (#10175)#252
Conversation
|
Warning Review limit reached
Next review available in: 14 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Enterprise Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (5)
📝 WalkthroughWalkthroughMigrates icon color CSS variable references from PatternFly v5 ( ChangesPatternFly v6 CSS Token Migration
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
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 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #252 +/- ##
==========================================
- Coverage 11.92% 11.80% -0.12%
==========================================
Files 154 154
Lines 6272 6344 +72
Branches 2028 2172 +144
==========================================
+ Hits 748 749 +1
+ Misses 5524 5368 -156
- Partials 0 227 +227
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
![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 `@src/gitops/Statuses/HealthStatus.test.tsx`:
- Around line 11-33: The HealthStatus test file uses JSX in the snapshots and
render calls but is missing the React import required by the current
react/react-in-jsx-scope lint rule. Add the React import at the top of
HealthStatus.test.tsx so the JSX in the HealthStatus test cases compiles and
lints correctly.
🪄 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: Organization UI
Review profile: CHILL
Plan: Enterprise
Run ID: 0b335a72-6586-4d90-a02a-d744db6179ae
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (5)
src/gitops/Statuses/HealthStatus.test.tsxsrc/gitops/Statuses/OperationState.test.tsxsrc/gitops/Statuses/SyncStatus.test.tsxsrc/gitops/components/application/graph/ApplicationGraphView.scsssrc/gitops/utils/components/Icons/Icons.tsx
| it('renders Degraded', () => { | ||
| expect(renderToStaticMarkup(<HealthStatus status="Degraded" />)).toMatchInlineSnapshot( | ||
| `"<div><div><svg data-icon="HeartBrokenIcon" style="color:var(--pf-v5-global--danger-color--100)"></svg> Degraded</div></div>"`, | ||
| `"<div><div><svg data-icon="HeartBrokenIcon" style="color:var(--pf-t--global--icon--color--status--danger--default)"></svg> Degraded</div></div>"`, | ||
| ); | ||
| }); | ||
|
|
||
| it('renders Progressing', () => { | ||
| expect(renderToStaticMarkup(<HealthStatus status="Progressing" />)).toMatchInlineSnapshot( | ||
| `"<div><div><svg data-icon="CircleNotchIcon" class="undefined fa-spin" style="color:var(--pf-v5-global--primary-color--200)"></svg> Progressing</div></div>"`, | ||
| `"<div><div><svg data-icon="CircleNotchIcon" class="undefined fa-spin" style="color:var(--pf-t--global--icon--color--brand--default)"></svg> Progressing</div></div>"`, | ||
| ); | ||
| }); | ||
|
|
||
| it('renders Unknown for unrecognized status', () => { | ||
| expect(renderToStaticMarkup(<HealthStatus status="SomethingElse" />)).toMatchInlineSnapshot( | ||
| `"<div><div><svg data-icon="UnknownIcon" style="color:var(--pf-v5-global--disabled-color--100)"></svg> SomethingElse</div></div>"`, | ||
| `"<div><div><svg data-icon="UnknownIcon" style="color:var(--pf-t--global--icon--color--disabled)"></svg> SomethingElse</div></div>"`, | ||
| ); | ||
| }); | ||
|
|
||
| it('renders popover when message is provided', () => { | ||
| expect( | ||
| renderToStaticMarkup(<HealthStatus status="Degraded" message="Something broke" />), | ||
| ).toMatchInlineSnapshot( | ||
| `"<div><div><div data-testid="popover"><div data-testid="popover-header"><div>Degraded</div></div><div data-testid="popover-body"><div>Something broke</div></div><button data-variant="link"><svg data-icon="HeartBrokenIcon" style="color:var(--pf-v5-global--danger-color--100)"></svg> Degraded</button></div></div></div>"`, | ||
| `"<div><div><div data-testid="popover"><div data-testid="popover-header"><div>Degraded</div></div><div data-testid="popover-body"><div>Something broke</div></div><button data-variant="link"><svg data-icon="HeartBrokenIcon" style="color:var(--pf-t--global--icon--color--status--danger--default)"></svg> Degraded</button></div></div></div>"`, |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '## file\n'
git ls-files 'src/gitops/Statuses/HealthStatus.test.tsx' 'src/gitops/Statuses/HealthStatus.tsx' '.eslintrc*' 'eslint.config.*' 'package.json' | sed 's#^`#-` #'
printf '\n## file excerpts\n'
for f in src/gitops/Statuses/HealthStatus.test.tsx src/gitops/Statuses/HealthStatus.tsx; do
if [ -f "$f" ]; then
echo "--- $f"
nl -ba "$f" | sed -n '1,120p'
fi
done
printf '\n## eslint/react config references\n'
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' \
'react/react-in-jsx-scope|react/jsx-runtime|jsx-runtime|jsxImportSource|`@typescript-eslint`|eslint-plugin-react|react' \
.eslintrc* eslint.config.* package.json . 2>/dev/null | sed -n '1,220p'Repository: redhat-developer/gitops-console-plugin
Length of output: 404
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '## nearby test files with JSX imports\n'
rg -n --glob 'src/**/*.test.tsx' --glob 'src/**/*.tsx' \
'import React from '\''react'\''|react/react-in-jsx-scope|jsx-runtime' src | sed -n '1,240p'Repository: redhat-developer/gitops-console-plugin
Length of output: 372
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "## src/gitops/Statuses/HealthStatus.test.tsx"
sed -n '1,120p' src/gitops/Statuses/HealthStatus.test.tsx
echo
echo "## .eslintrc.json"
sed -n '1,220p' .eslintrc.json
echo
echo "## package.json relevant bits"
sed -n '1,220p' package.json | sed -n '/"eslint"/,/}/p'
echo
echo "## React imports in nearby tsx files"
rg -n --glob 'src/**/*.tsx' "import React from 'react';|react/react-in-jsx-scope|jsx-runtime" src | sed -n '1,240p'Repository: redhat-developer/gitops-console-plugin
Length of output: 7008
Fix the JSX-in-scope lint failure in this test file.
src/gitops/Statuses/HealthStatus.test.tsx uses JSX but doesn't import React, so react/react-in-jsx-scope fails under the current ESLint config.
Suggested fix
+import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import HealthStatus, { HealthStatusIcon } from './HealthStatus';📝 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.
| it('renders Degraded', () => { | |
| expect(renderToStaticMarkup(<HealthStatus status="Degraded" />)).toMatchInlineSnapshot( | |
| `"<div><div><svg data-icon="HeartBrokenIcon" style="color:var(--pf-v5-global--danger-color--100)"></svg> Degraded</div></div>"`, | |
| `"<div><div><svg data-icon="HeartBrokenIcon" style="color:var(--pf-t--global--icon--color--status--danger--default)"></svg> Degraded</div></div>"`, | |
| ); | |
| }); | |
| it('renders Progressing', () => { | |
| expect(renderToStaticMarkup(<HealthStatus status="Progressing" />)).toMatchInlineSnapshot( | |
| `"<div><div><svg data-icon="CircleNotchIcon" class="undefined fa-spin" style="color:var(--pf-v5-global--primary-color--200)"></svg> Progressing</div></div>"`, | |
| `"<div><div><svg data-icon="CircleNotchIcon" class="undefined fa-spin" style="color:var(--pf-t--global--icon--color--brand--default)"></svg> Progressing</div></div>"`, | |
| ); | |
| }); | |
| it('renders Unknown for unrecognized status', () => { | |
| expect(renderToStaticMarkup(<HealthStatus status="SomethingElse" />)).toMatchInlineSnapshot( | |
| `"<div><div><svg data-icon="UnknownIcon" style="color:var(--pf-v5-global--disabled-color--100)"></svg> SomethingElse</div></div>"`, | |
| `"<div><div><svg data-icon="UnknownIcon" style="color:var(--pf-t--global--icon--color--disabled)"></svg> SomethingElse</div></div>"`, | |
| ); | |
| }); | |
| it('renders popover when message is provided', () => { | |
| expect( | |
| renderToStaticMarkup(<HealthStatus status="Degraded" message="Something broke" />), | |
| ).toMatchInlineSnapshot( | |
| `"<div><div><div data-testid="popover"><div data-testid="popover-header"><div>Degraded</div></div><div data-testid="popover-body"><div>Something broke</div></div><button data-variant="link"><svg data-icon="HeartBrokenIcon" style="color:var(--pf-v5-global--danger-color--100)"></svg> Degraded</button></div></div></div>"`, | |
| `"<div><div><div data-testid="popover"><div data-testid="popover-header"><div>Degraded</div></div><div data-testid="popover-body"><div>Something broke</div></div><button data-variant="link"><svg data-icon="HeartBrokenIcon" style="color:var(--pf-t--global--icon--color--status--danger--default)"></svg> Degraded</button></div></div></div>"`, | |
| import React from 'react'; | |
| import { renderToStaticMarkup } from 'react-dom/server'; | |
| import HealthStatus, { HealthStatusIcon } from './HealthStatus'; |
🧰 Tools
🪛 ESLint
[error] 12-12: 'React' must be in scope when using JSX
(react/react-in-jsx-scope)
[error] 18-18: 'React' must be in scope when using JSX
(react/react-in-jsx-scope)
[error] 24-24: 'React' must be in scope when using JSX
(react/react-in-jsx-scope)
[error] 31-31: 'React' must be in scope when using JSX
(react/react-in-jsx-scope)
🤖 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 `@src/gitops/Statuses/HealthStatus.test.tsx` around lines 11 - 33, The
HealthStatus test file uses JSX in the snapshots and render calls but is missing
the React import required by the current react/react-in-jsx-scope lint rule. Add
the React import at the top of HealthStatus.test.tsx so the JSX in the
HealthStatus test cases compiles and lints correctly.
Source: Linters/SAST tools
Signed-off-by: Keith Chong <kykchong@redhat.com>
keithchong
force-pushed
the
10175-PF6-Styles
branch
from
7a0dd27 to
06951b0
Compare
2 participants
See GITOPS-10175