Migrate deprecated PF5 Wizard to composable API - #510
Merged
Conversation
Replace all imports of Wizard, WizardContextConsumer, and WizardFooter
from @patternfly/react-core/deprecated with the new PF5 composable
Wizard API from @patternfly/react-core.
The Wizard wrapper (components/Wizard/Wizard.js) is rewritten as a
compatibility shim that accepts the legacy steps-array API and maps it
to PF5 WizardStep children. Key mappings:
- steps[].canJumpTo -> navItem={{ isDisabled: true }} (sidebar only,
does not block Next/Back navigation)
- steps[].enableNext -> footer={{ isNextDisabled: true }}
- steps[].nextButtonText -> footer={{ nextButtonText }}
- isOpen -> wraps the wizard in a Modal
- onNext/onBack/onGoToStep -> onStepChange with scope detection
- Per-step footer overrides are skipped when a custom footer element
is provided, since PF5 WizardContext resolves per-step footers
before the wizard-level footer
Files with custom footers (SubscriptionEdit, NodeModal,
CredentialPluginPrompt) replace WizardContextConsumer render props
with useWizardContext() hook and WizardFooterWrapper.
Simple consumers (LaunchPrompt, SchedulePromptableFields) only needed
an import path change to use the wrapper.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates Wizard usage away from deprecated PatternFly 5 Wizard APIs by introducing a compatibility shim in components/Wizard/Wizard.js that accepts the legacy steps-array interface while rendering via the PF5 composable Wizard, and updates several callers to use the new composable context/footer APIs.
Changes:
- Replaced deprecated Wizard wrapper with a PF5 composable Wizard-based compatibility wrapper (legacy
steps[],onNext/onBack/onGoToStep, per-step footer behavior, optional modal wrapping). - Updated multiple wizard consumers to stop using
WizardContextConsumer/WizardFooterand instead useuseWizardContext()+WizardFooterWrapper. - Switched remaining deprecated Wizard imports in a few components to the shared
components/Wizardwrapper.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| awx/ui/src/components/Wizard/Wizard.js | Rewritten wizard wrapper to map legacy steps-array API onto PF5 composable Wizard + optional Modal wrapper |
| awx/ui/src/components/LaunchPrompt/LaunchPrompt.js | Updated to use shared Wizard wrapper instead of deprecated PF import |
| awx/ui/src/components/Schedule/shared/SchedulePromptableFields.js | Updated to use shared Wizard wrapper instead of deprecated PF import |
| awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionEdit.js | Migrated custom footer to useWizardContext + WizardFooterWrapper and uses shared Wizard wrapper |
| awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.js | Migrated custom footer to useWizardContext + WizardFooterWrapper with a dedicated footer component |
| awx/ui/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialPluginPrompt.js | Migrated custom footer to useWizardContext + WizardFooterWrapper with a dedicated footer component |
Comment on lines
+39
to
+43
| nextButtonText, | ||
| height, | ||
| style, | ||
| css: cssProp, | ||
| className, |
Comment on lines
+143
to
+149
| <Modal | ||
| isOpen={isOpen} | ||
| variant={ModalVariant.large} | ||
| showClose={false} | ||
| hasNoBodyWrapper | ||
| aria-label={title || 'Wizard'} | ||
| > |
The nested http-proxy-middleware under webpack-dev-server regressed from 2.0.10 back to 2.0.9 when later PRs regenerated the lockfile. Bump the transitive dep to 2.0.10 which resolves GHSA-64mm-vxmg-q3vj.
Add onClose={onClose} to the Modal wrapper so ESC key and backdrop
clicks properly trigger the close callback. Remove the unused
css: cssProp destructuring — babel-plugin-styled-components handles
the css prop at the styled-components layer before it reaches the
component.
Contributor
Author
|
Fixed two issues flagged by Copilot review in dd26136:
All 24 affected tests pass (Wizard, SubscriptionEdit, CredentialPluginPrompt, LaunchPrompt). |
cigamit
approved these changes
Jun 25, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
SUMMARY
Migrate all deprecated PatternFly 5 Wizard imports (
Wizard,WizardContextConsumer,WizardFooterfrom@patternfly/react-core/deprecated) to the new PF5 composable Wizard API (Wizard,WizardStep,useWizardContext,WizardFooterWrapperfrom@patternfly/react-core).After this PR, zero imports of Wizard-related components from
@patternfly/react-core/deprecatedremain.Approach
The existing
components/Wizard/Wizard.jswrapper is rewritten as a compatibility shim that accepts the legacy steps-array API and maps it to PF5WizardStepchildren internally. This keeps callers' code changes minimal while eliminating all deprecated imports.Key mappings in the wrapper:
steps[].canJumpTo->navItem={{ isDisabled: true }}(disables sidebar nav item only; does NOT block Next/Back navigation, whichisDisabledon WizardStep would)steps[].enableNext->footer={{ isNextDisabled: true }}steps[].nextButtonText->footer={{ nextButtonText }}isOpen-> wraps the wizard in a<Modal>onNext/onBack/onGoToStep->onStepChangewith scope detectionFiles changed
components/Wizard/Wizard.jscomponents/LaunchPrompt/LaunchPrompt.jscomponents/Schedule/shared/SchedulePromptableFields.jsscreens/Setting/Subscription/SubscriptionEdit/SubscriptionEdit.jsWizardContextConsumer/WizardFooter->useWizardContext()/WizardFooterWrapperscreens/Template/.../NodeModal.jsWizardContextConsumer/WizardFooter->useWizardContext()/WizardFooterWrapper; extractedNodeModalCustomFootercomponentscreens/Credential/.../CredentialPluginPrompt.jsWizardContextConsumer/WizardFooter->useWizardContext()/WizardFooterWrapper; extractedCredentialPluginFootercomponentISSUE TYPE
COMPONENT NAME
UI
ADDITIONAL INFORMATION
Tests verified
Wizard.test.js- 4/4 passedSubscriptionEdit.test.js- 9/9 passed (including the 3-step wizard navigation test)CredentialPluginPrompt.test.js- 4/4 passedLaunchPrompt.test.js- 7/7 passedAdHocCommandsWizard.test.js- 6/6 passedUserAndTeamAccessAdd.test.js+AddResourceRole.test.js- 8/8 passed