Migrate missed PF5 styles (and one PF4 style) to PF6 (#10175)

[keithchong]

See GITOPS-10175

[coderabbitai]

📝 Walkthrough

Walkthrough

Migrates PatternFly v5 styling references to PatternFly 6 tokens and classes across shared icons, status snapshots, graph edges, generators, project views, rollout links, policy icons, field-level help, and disabled dropdown items.

Changes

PatternFly v6 styling migration

Layer / File(s)	Summary
Icon colors and graph edges src/gitops/utils/components/Icons/Icons.tsx, src/gitops/components/application/graph/ApplicationGraphView.scss	Exported icon colors and healthy or warning graph edge styles now use PatternFly 6 icon tokens.
Status rendering validation src/gitops/Statuses/*.test.tsx, .eslintrc.json	Inline snapshots reflect updated SVG icon markup and token names; the React JSX scope lint rule is disabled.
Component token and class updates src/gitops/components/appset/generators/*, src/gitops/components/project/*, src/gitops/components/rollout/*, src/gitops/components/shared/FieldLevelHelp/FieldLevelHelp.scss, src/gitops/utils/components/ActionDropDownItem/action-dropdown-item.scss	Generator containers, project panels and cards, rollout links, policy icons, field-level help, and disabled dropdown text now use PatternFly 6 tokens or utility classes.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: wtam2018

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly summarizes the main change: migrating remaining PatternFly styles from PF5/PF4 to PF6.
Description check	✅ Passed	The description references the related issue and is not off-topic.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 11.91%. Comparing base (01e9db1) to head (95826be).
⚠️ Report is 17 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #252      +/-   ##
==========================================
- Coverage   11.92%   11.91%   -0.02%     
==========================================
  Files         154      156       +2     
  Lines        6272     6321      +49     
  Branches     2028     2122      +94     
==========================================
+ Hits          748      753       +5     
- Misses       5524     5568      +44     

Flag	Coverage Δ
unit-tests	11.91% <100.00%> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

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

📥 Commits

Reviewing files that changed from the base of the PR and between 01e9db1 and 7a0dd27.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (5)

• src/gitops/Statuses/HealthStatus.test.tsx
• src/gitops/Statuses/OperationState.test.tsx
• src/gitops/Statuses/SyncStatus.test.tsx
• src/gitops/components/application/graph/ApplicationGraphView.scss
• src/gitops/utils/components/Icons/Icons.tsx

[aali309]

LGTM. I think these files also need updates?

• ProjectRolesTab.tsx
• ClusterGenerator.tsx
• GenericGenerator.tsx
• FieldLevelHelp.scss
• action-dropdown-item.scss
• CanaryServices.tsx
• TopologyLink.tsx
• ProjectAllowDenyTab.tsx

[keithchong]

LGTM. I think these files also need updates?

• ProjectRolesTab.tsx
• ClusterGenerator.tsx
• GenericGenerator.tsx
• FieldLevelHelp.scss
• action-dropdown-item.scss
• CanaryServices.tsx
• TopologyLink.tsx
• ProjectAllowDenyTab.tsx

Thanks @aali309 , updated. What changes are needed for action-dropdown-item.scss?

[aali309]

LGTM. I think these files also need updates?

• ProjectRolesTab.tsx
• ClusterGenerator.tsx
• GenericGenerator.tsx
• FieldLevelHelp.scss
• action-dropdown-item.scss
• CanaryServices.tsx
• TopologyLink.tsx
• ProjectAllowDenyTab.tsx

Thanks @aali309 , updated. What changes are needed for action-dropdown-item.scss?

Looks like this is still using the old PF4-era variable:

- `var(--pf-global--disabled-color--100)`
+ `var(--pf-t--global--text--color--disabled)`

[keithchong]

LGTM. I think these files also need updates?

• ProjectRolesTab.tsx
• ClusterGenerator.tsx
• GenericGenerator.tsx
• FieldLevelHelp.scss
• action-dropdown-item.scss
• CanaryServices.tsx
• TopologyLink.tsx
• ProjectAllowDenyTab.tsx

Thanks @aali309 , updated. What changes are needed for action-dropdown-item.scss?

Looks like this is still using the old PF4-era variable:

- `var(--pf-global--disabled-color--100)`
+ `var(--pf-t--global--text--color--disabled)`

Ok, updated

[aali309]

LGTM! Thanks @keithchong