feat(patternfly): add PatternFly migration plugin#428
feat(patternfly): add PatternFly migration plugin#428anandkuma77 wants to merge 2 commits intoopenshift-eng:mainfrom
Conversation
Adds new plugin for migrating React components from PatternFly v5 to v6. Includes: - /patternfly:migrate command for automated migration analysis - MigrationPf5ToPf6 skill with comprehensive v6 migration knowledge - Component replacements, prop updates, and import path migrations - Manual verification guidance for structural changes
openshift-ci
Bot
added
the
do-not-merge/work-in-progress
|
Skipping CI for Draft Pull Request. |
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: anandkuma77 The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 31 minutes and 31 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
WalkthroughA new PatternFly migration plugin is registered and documented across plugin registry files, configuration manifests, and documentation pages. The plugin provides tools for migrating React components from PatternFly 5 to PatternFly 6 via a Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes 🚥 Pre-merge checks | ✅ 10✅ Passed checks (10 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@plugins/patternfly/commands/migrate.md`:
- Line 3: Update the /patternfly:migrate command docs to consistently document
the --dry-run flag: add [--dry-run] to the command hint/synopsis and examples
shown (the usages around /patternfly:migrate [file-path], /patternfly:migrate
src/components/Dashboard.tsx, and /patternfly:migrate src/components --dry-run),
add a bullet for `--dry-run` in the Arguments section explaining it analyzes and
reports the migration plan without applying edits, and add bash fence languages
to the code blocks to satisfy MD040; then regenerate/update the related
registries/docs (docs/data.json, PLUGINS.md, plugins/patternfly/README.md) so
the synopsis and argument hints for /patternfly:migrate remain aligned.
In `@plugins/patternfly/README.md`:
- Around line 74-79: Update the PatternFly resource links under the "##
Resources" section to use the stable domain and correct upgrade path: replace
any occurrences of "staging-v6.patternfly.org" with "www.patternfly.org" and
change the migration guide path from "/get-started/migrate-to-v6/" to
"/get-started/upgrade/"; ensure the three token/component/doc links (Token
Reference, Component Examples, PatternFly v6 Documentation) now point to the
corresponding "www.patternfly.org" URLs with the updated paths.
In `@plugins/patternfly/skills/patternfly-migration/SKILL.md`:
- Around line 484-492: Replace the destructive commands in the troubleshooting
entries: under the "Module not found" section remove the `rm -rf node_modules
package-lock.json && npm install` recommendation and instead advise using `npm
ci` to install from the lockfile; under the "Property does not exist" section
remove `npm install typescript@latest` and instead instruct contributors to bump
TypeScript through the repository's standard dependency-update process (e.g.,
open a dependency-update PR and run CI) so upgrades are reviewed and lockfile
changes are explicit.
- Around line 207-212: The markdown references use the staging domain
(staging-v6.patternfly.org); update every occurrence of that domain to the
canonical public site (www.patternfly.org) so links like
"https://staging-v6.patternfly.org/tokens/all-patternfly-tokens" become
"https://www.patternfly.org/tokens/all-patternfly-tokens"; search the SKILL.md
for any "staging-v6.patternfly.org" strings (including in the "Token Migration
Strategy" section and the other referenced locations) and replace them with
"www.patternfly.org", keeping the rest of the URL path and HTTPS scheme intact.
- Around line 53-60: Update the Token Updates section to clarify that the t_
prefix is applied automatically by the PatternFly codemod (not manually) and
emphasize running the codemod command `npx `@patternfly/pf-codemods`@latest --v6
./src --fix`; explicitly mention that React import forms are transformed (e.g.,
`import global_BorderWidth_lg` becomes `import
t_global_border_width_extra_strong`) and that the codemod also converts CSS vars
(e.g., `--pf-v5-global--BorderWidth--lg` →
`--pf-t--global--border--width--extra-strong`), so readers should rely on the
automated tool rather than manually adding the `t_` prefix.
🪄 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: Pro Plus
Run ID: c6856ece-f71d-4684-a5ec-5a9656014ec8
📒 Files selected for processing (7)
.claude-plugin/marketplace.jsonPLUGINS.mddocs/data.jsonplugins/patternfly/.claude-plugin/plugin.jsonplugins/patternfly/README.mdplugins/patternfly/commands/migrate.mdplugins/patternfly/skills/patternfly-migration/SKILL.md
| @@ -0,0 +1,94 @@ | |||
| --- | |||
| description: Migrate React components from PatternFly 5 to PatternFly 6 | |||
| argument-hint: "[file-path]" | |||
There was a problem hiding this comment.
Keep --dry-run discoverable or remove the example.
Line 75 advertises --dry-run, but the command hint, synopsis, generated registries, and Arguments section only document [file-path]. If dry-run is supported, include it consistently and define that no edits are applied; otherwise remove the example. While touching this block, add fence languages to satisfy MD040.
📝 Proposed docs update if dry-run is supported
-description: Migrate React components from PatternFly 5 to PatternFly 6
-argument-hint: "[file-path]"
+description: Migrate React components from PatternFly 5 to PatternFly 6
+argument-hint: "[file-path] [--dry-run]"
skill: patternfly-migration
---
@@
-```
-/patternfly:migrate [file-path]
+```bash
+/patternfly:migrate [file-path] [--dry-run]@@
-
/patternfly:migrate src/components/Dashboard.tsx
@@
-
/patternfly:migrate
@@
-
Shows migration plan without applying changes (if user wants to review first)
/patternfly:migrate src/components --dry-run
@@
--$1: (Optional) File path or directory to migrate. If not provided, analyzes the current context or prompts for clarification.
+-$1: (Optional) File path or directory to migrate. If not provided, analyzes the current context or prompts for clarification.
+---dry-run: (Optional) Analyze and report the migration plan without applying edits.
Also regenerate/update `docs/data.json`, `PLUGINS.md`, and `plugins/patternfly/README.md` so their synopsis and argument hints stay aligned.
</details>
Also applies to: 10-13, 59-80
<details>
<summary>🤖 Prompt for AI Agents</summary>
Verify each finding against the current code and only fix it if needed.
In @plugins/patternfly/commands/migrate.md at line 3, Update the
/patternfly:migrate command docs to consistently document the --dry-run flag:
add [--dry-run] to the command hint/synopsis and examples shown (the usages
around /patternfly:migrate [file-path], /patternfly:migrate
src/components/Dashboard.tsx, and /patternfly:migrate src/components --dry-run),
add a bullet for --dry-run in the Arguments section explaining it analyzes and
reports the migration plan without applying edits, and add bash fence languages
to the code blocks to satisfy MD040; then regenerate/update the related
registries/docs (docs/data.json, PLUGINS.md, plugins/patternfly/README.md) so
the synopsis and argument hints for /patternfly:migrate remain aligned.
</details>
<!-- fingerprinting:phantom:poseidon:ibis -->
<!-- This is an auto-generated comment by CodeRabbit -->
| #### 5. **Token Updates** | ||
| - Global tokens prefixed with `t_` when they reference `--pf-t` variables | ||
| - Many v5 tokens replaced with v6 equivalents | ||
| - Color tokens replaced with `t_temp_dev_tbd` (requires manual update) | ||
| - Examples: | ||
| - `global_BorderWidth_lg` → `global_border_width_extra_strong` | ||
| - `global_FontWeight_normal` → `global_font_weight_body_default` | ||
| - CSS vars: `--pf-v5-global--BorderWidth--lg` → `--pf-t--global--border--width--extra-strong` |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
curl -fsSL https://raw.githubusercontent.com/patternfly/pf-codemods/main/README.md \
| grep -E 'global_border_width_extra_strong|global_font_weight_body_default|t_temp_dev_tbd'Repository: openshift-eng/ai-helpers
Length of output: 50
🏁 Script executed:
cat plugins/patternfly/skills/patternfly-migration/SKILL.md | head -70 | tail -20Repository: openshift-eng/ai-helpers
Length of output: 981
🏁 Script executed:
#!/bin/bash
# Check if SKILL.md file exists and get its size
if [ -f "plugins/patternfly/skills/patternfly-migration/SKILL.md" ]; then
wc -l "plugins/patternfly/skills/patternfly-migration/SKILL.md"
echo "---"
sed -n '53,60p' "plugins/patternfly/skills/patternfly-migration/SKILL.md"
else
echo "File not found"
fiRepository: openshift-eng/ai-helpers
Length of output: 588
🌐 Web query:
PatternFly v6 token migration codemod global token examples
💡 Result:
PatternFly v6 provides codemods via the @patternfly/pf-codemods package to automate token migration from v5 to v6, particularly for global tokens. Run with npx @patternfly/pf-codemods@latest --v6 ./path-to-src --fix after updating dependencies to PatternFly 6. Key rules affecting tokens: - Prefix rule: Adds 't_' prefix to React tokens referencing --pf-t variables. Example: In: import color_green_10 from "@patternfly/react-tokens/dist/esm/color_green_10"; Out: import t_color_green_10 from "@patternfly/react-tokens/dist/esm/t_color_green_10"; - tokens-update rule: Updates CSS tokens. Autofixes global non-color tokens (e.g., spacers, font sizes). For global color tokens, replaces with temporary hot pink placeholder t_temp_dev_tbd (or --pf-t--temp--dev--tbd) requiring manual replacement using v6 token docs. Non-global tokens need manual update. Examples (inferred from snippets): In: global_Color_100; global_Color_200; color300; global_BorderColor_100; Out (color): t_temp_dev_tbd as global_Color_100 /* CODEMODS: you should update this color token /; Out (non-color, e.g.): t_global_border_width_regular or similar autofix. Style usage example: In: style={{ color: "var(--pf-v5-global--Color--100)" }} Out: style={{ color: "var(--pf-t--temp--dev--tbd)/ CODEMODS: original v5 color was --pf-v5-global--Color--100 */" }} Manual steps post-codemod: - Replace t_temp_dev_tbd with semantic v6 global tokens from https://www.patternfly.org/tokens/all-patternfly-tokens (prefer semantic like --pf-t--global--background--color--primary--default, avoid palette/base ending in numbers). - No 1:1 mapping; choose semantically (e.g., v5 global_link_Color_hover -> t_global_color_nonstatus_green_clicked). - Non-color example: --pf-v5-global--FontSize--lg -> --pf-t--global--font--size--lg (t_global_font_size_lg). - Import React tokens: import t_global_spacer_sm from '@patternfly/react-tokens/dist/esm/t_global_spacer_sm'; Run codemods iteratively, review flagged issues, remove overrides, check token docs for replacements. Sources confirm up-to-date as of 2026.
Citations:
- 1: https://github.com/patternfly/pf-codemods?tab=readme-ov-file
- 2: https://staging.patternfly.org/releases/upgrade-guide
- 3: https://github.com/patternfly/pf-codemods
- 4: https://www.patternfly.org/get-started/upgrade
- 5: https://www.patternfly.org/tokens/develop-with-tokens
- 6: https://patternfly.org/get-started/upgrade
- 7: https://www.patternfly.org/tokens/all-patternfly-tokens
🌐 Web query:
PatternFly pf-codemods global_BorderWidth_lg global_border_width_extra_strong
💡 Result:
In PatternFly's pf-codemods tool, used for upgrading PatternFly React code (e.g., from v5 to v6), the "tokens-update" rule automatically replaces deprecated token imports like global_BorderWidth_lg from "@patternfly/react-tokens" with the updated global_border_width_extra_strong. This is part of broader token updates where about half of the tokens were replaced with newer ones. The codemod provides autofix for global non-color tokens via --fix flag. Example transformation shown in docs: In: import global_BorderWidth_lg from "@patternfly/react-tokens/dist/esm/global_BorderWidth_lg"; Out: import global_border_width_extra_strong from "@patternfly/react-tokens/dist/esm/global_border_width_extra_strong"; In PatternFly 6, border widths use semantic tokens like --pf-t--global--border--width--extra-strong, which likely corresponds to this React token (following the pattern where React tokens mirror CSS vars with t_ prefix and underscores, e.g., t_global_border_width_extra_strong). To apply: Run npx @patternfly/pf-codemods@latest --v6 ./src --fix (targets v5 to v6 changes).
Citations:
- 1: https://github.com/patternfly/pf-codemods
- 2: https://github.com/patternfly/pf-codemods?tab=readme-ov-file
- 3: https://github.com/patternfly/pf-codemods/
- 4: https://staging-v6.patternfly.org/get-started/upgrade/
🏁 Script executed:
#!/bin/bash
# Check if there are other similar misleading statements in SKILL.md about token prefixing
rg -n "Global tokens|prefixed with.*t_|React.*token" plugins/patternfly/skills/patternfly-migration/SKILL.md -A 2 -B 2Repository: openshift-eng/ai-helpers
Length of output: 300
🏁 Script executed:
#!/bin/bash
# Verify the exact import forms that would result from applying these rules
# by checking if there are code examples elsewhere in the file
sed -n '1,100p' plugins/patternfly/skills/patternfly-migration/SKILL.md | grep -E "import|from.*react-tokens" -A 1 -B 1Repository: openshift-eng/ai-helpers
Length of output: 508
Clarify that the t_ prefix is applied by the automated codemod, not manually.
The statement "Global tokens prefixed with t_ when they reference --pf-t variables" is accurate per PatternFly's codemod behavior, but the examples (global_BorderWidth_lg → global_border_width_extra_strong) only show token name updates and don't illustrate the React import form. The codemod's prefix rule automatically adds t_ to React token imports: import global_BorderWidth_lg → import t_global_border_width_extra_strong. The guidance should emphasize running the automated codemod (npx @patternfly/pf-codemods@latest --v6 ./src --fix) rather than manually applying these transformation rules, to avoid confusion about when and how the t_ prefix applies.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@plugins/patternfly/skills/patternfly-migration/SKILL.md` around lines 53 -
60, Update the Token Updates section to clarify that the t_ prefix is applied
automatically by the PatternFly codemod (not manually) and emphasize running the
codemod command `npx `@patternfly/pf-codemods`@latest --v6 ./src --fix`;
explicitly mention that React import forms are transformed (e.g., `import
global_BorderWidth_lg` becomes `import t_global_border_width_extra_strong`) and
that the codemod also converts CSS vars (e.g., `--pf-v5-global--BorderWidth--lg`
→ `--pf-t--global--border--width--extra-strong`), so readers should rely on the
automated tool rather than manually adding the `t_` prefix.
- Replace staging-v6.patternfly.org with www.patternfly.org - Update migration guide path from /migrate-to-v6/ to /upgrade/ - Replace destructive npm commands with safer alternatives: - Use npm ci instead of rm -rf node_modules - Recommend dependency-update PR process instead of npm install @latest
openshift-ci
Bot
added
the
needs-rebase
|
PR needs rebase. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. |
1 participant
Adds a new patternfly plugin with migration tooling for React components.
New command:
New skill:
Plugin structure:
Why
PatternFly v6 introduces significant breaking changes that require manual code updates. While official codemods handle batch migrations, developers need:
This plugin complements the official @patternfly/pf-codemods by providing intelligent analysis, clear explanations, and manual verification checklists for structural changes that can't be automated.
Summary by CodeRabbit
Release Notes
/patternfly:migratecommand to upgrade PatternFly components from version 5 to version 6