[WIP] CONSOLE-4447: Migrate modal hooks from useModal to useOverlay#16061
[WIP] CONSOLE-4447: Migrate modal hooks from useModal to useOverlay#16061rhamilto wants to merge 7 commits intoopenshift:mainfrom
Conversation
Update Cancel button variants from "secondary" to "link" in modern PatternFly modals to follow PatternFly standards. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
… wrapper - Migrate useCopyCodeModal, FavoriteButton, and TourStepComponent from deprecated Modal wrapper to modern PatternFly Modal components - Remove deprecated Modal wrapper (packages/console-shared/src/components/modal/) - Migrate CatalogDetailsModal and operator-hub-items from deprecated PatternFly Modal to modern Modal components - Preserve ocs-modal CSS class for catalog modal positioning - Fix FavoriteButton form submission bug by adding preventDefault - Fix Guided Tour accessibility warning by closing Help dropdown and blurring focus before starting tour Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Migrate DeleteModal from deprecated factory/modal components to modern PatternFly v6 Modal components - Create reusable ModalFooterWithAlerts component for alert display - Update configure-count-modal and configure-machine-autoscaler-modal to use modern Modal components and ModalFooterWithAlerts Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
… components This commit updates multiple modal components to use modern PatternFly v6 patterns and replaces deprecated error display components with the new ModalFooterWithAlerts component. Changes: - Replace ModalErrorContent with ModalFooterWithAlerts in: - clone-pvc-modal.tsx - modify-vac-modal.tsx - ResourceLimitsModal.tsx - restore-pvc-modal.tsx - ConfigureUnschedulableModal.tsx - DeletePDBModal.tsx - Remove onSubmit handlers from Form elements - Move form submission to onClick handlers on submit buttons - Add form attribute to submit buttons to associate with form id - Fix Formik type compatibility in ResourceLimitsModal by wrapping handleSubmit in arrow function - Delete unused SCSS files: - packages/console-app/src/components/modals/clone/_clone-pvc-modal.scss - packages/console-app/src/components/modals/restore-pvc/restore-pvc-modal.scss All modals now follow the PatternFly "with form" pattern with consistent error/alert display using ModalFooterWithAlerts.
Migrate the following modals from deprecated PatternFly Modal to v6: - CreateProjectModal: Updated to use ModalHeader, ModalBody, ModalFooterWithAlerts with Form, FormGroup, TextInput, and TextArea components - CreateNamespaceModal: Similar updates with additional Select component for network policy - VSphereConnectionModal: Updated with Formik integration and conditional rendering - ReplaceCodeModal: Simple modal migration with three action buttons and close button test - TestFunctionModal: Remove position prop so the modal uses default center positioning All modals now use: - PatternFly 6 Modal structure (ModalHeader, ModalBody, ModalFooter) - Modern form components (Form, FormGroup, TextInput, TextArea) - ModalFooterWithAlerts for error handling where applicable - Proper form/button association using id and form attributes Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit migrates several modal-related hooks and components from the deprecated useModal API to the modern useOverlay API, and addresses React deprecation warnings. Modal Hook Migrations (useModal → useOverlay): - useAnnotationsModal: Now uses LazyAnnotationsModalOverlay - useLabelsModal: Now uses LazyLabelsModalOverlay - useDeleteModal: Now uses LazyDeleteModalOverlay - useCreateNamespaceModal: Migrated to useOverlay - useCreateProjectModal: Migrated to useOverlay - useCreateNamespaceOrProjectModal: Migrated to useOverlay - useCopyCodeModal: Migrated to useOverlay - IdentityProviders: Migrated to useOverlay with openRemoveModal callback Modal Component Migrations (ModalComponent → OverlayComponent): - AnnotationsModalOverlay: Updated to use OverlayComponent and PF6 Modal - CreateNamespaceModal: Updated to use OverlayComponent and closeOverlay - CreateProjectModal: Updated to use OverlayComponent with backward compatibility - RemoveIdentityProviderModal: Updated to use OverlayComponent and PF6 Modal with titleIconVariant="warning" - CopyCodeModal: Updated to use OverlayComponent React Deprecation Fixes: - NameValueEditor: Replaced defaultProps with JavaScript default parameters - EnvFromEditor: Replaced defaultProps with JavaScript default parameters All hooks now use consistent 'launchModal' naming for the overlay launcher function. Lazy-loaded modal components are used where available for optimal bundle splitting. Note: AlertItem.tsx and notification-drawer.tsx cannot be migrated as they use the AlertAction plugin extension API which expects LaunchModal type. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
openshift-ci-robot
added
the
jira/valid-reference
|
@rhamilto: This pull request references CONSOLE-4447 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set. DetailsIn response to this:
Instructions 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 openshift-eng/jira-lifecycle-plugin repository. |
openshift-ci
bot
added
the
do-not-merge/work-in-progress
|
@rhamilto: This pull request references CONSOLE-4447 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set. DetailsIn response to this:
Instructions 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 openshift-eng/jira-lifecycle-plugin repository. |
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: rhamilto The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
openshift-ci
bot
added
component/knative
|
@rhamilto: This pull request references CONSOLE-4447 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set. DetailsIn response to this:
Instructions 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 openshift-eng/jira-lifecycle-plugin repository. |
Replace manual useOverlay/launchModal calls with dedicated modal hooks (useDeleteModal, useAnnotationsModal, useLabelsModal) in action creators. Changes: - console-app/useCommonActions: Use useDeleteModal, useAnnotationsModal, and useLabelsModal instead of manually launching overlays - dev-console/context-menu: Use useDeleteModal with cleanUpWorkload callback for delete actions - operator-lifecycle-manager/useDefaultOperandActions: Use useDeleteModal with redirect path for operand deletion - operator-lifecycle-manager/useOperatorActions: Use useDeleteModal for CSV deletion while keeping useOverlay for UninstallOperatorOverlay Benefits: - Reduces code duplication by using encapsulated hook logic - Improves consistency across action creators - Maintains lazy loading (hooks use lazy components internally) - Simplifies action creator code and dependency management Technical notes: - Fixed import path in dev-console to use direct import from @console/shared/src/hooks/useDeleteModal instead of barrel export - All hooks internally use lazy-loaded modal components - Preserved all existing functionality including callbacks, redirects, and custom messages Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
|
@rhamilto: This pull request references CONSOLE-4447 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set. DetailsIn response to this:
Instructions 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 openshift-eng/jira-lifecycle-plugin repository. |
|
/retest |
|
@rhamilto: The following test failed, say
Full PR test history. Your PR dashboard. 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. I understand the commands that are listed here. |
|
/retest |
2 participants
Summary
Migrates modal hooks and components from the deprecated
useModalAPI to the modernuseOverlayAPI, and fixes React deprecation warnings fordefaultProps.Note: this PR requires changes from #16061, so it should merge first.
Changes
Modal Hook Migrations (useModal → useOverlay)
useAnnotationsModal- UsesLazyAnnotationsModalOverlayuseLabelsModal- UsesLazyLabelsModalOverlayuseDeleteModal- UsesLazyDeleteModalOverlayuseCreateNamespaceModaluseCreateProjectModaluseCreateNamespaceOrProjectModaluseCopyCodeModalIdentityProviderscomponentModal Component Migrations (ModalComponent → OverlayComponent)
AnnotationsModalOverlay- Updated to PatternFly 6 ModalCreateNamespaceModal- Updated toOverlayComponentCreateProjectModal- Updated with backward compatibilityRemoveIdentityProviderModal- Updated to PatternFly 6 Modal withtitleIconVariant="warning"CopyCodeModal- Updated toOverlayComponentAction Hook Refactoring
useCommonActions- Refactored to use dedicated modal hooks instead of manuallaunchModalcallsdev-console/context-menu- UpdateduseDeleteResourceActionto useuseDeleteModalwithcleanUpWorkloadcallbackoperator-lifecycle-manager/useDefaultOperandActions- Updated to useuseDeleteModalwith redirect pathoperator-lifecycle-manager/useOperatorActions- Updated to useuseDeleteModalfor CSV deletionReact Deprecation Fixes
NameValueEditor- ReplaceddefaultPropswith JavaScript default parametersEnvFromEditor- ReplaceddefaultPropswith JavaScript default parametersImplementation Details
launchModalnaming for the overlay launcher functionOverlayComponent<PropsType>which automatically addscloseOverlaypropcloseModalreferences replaced withcloseOverlayuseDeleteModal,useAnnotationsModal,useLabelsModal) instead of manually callinguseOverlaywith lazy overlaysNot Migrated (Plugin API Constraints)
The following components cannot be migrated without breaking the plugin extension API:
AlertItem.tsx- UsesAlertActionextension which expectsLaunchModaltypenotification-drawer.tsx- Passes modal launcher to alert action extensionsThese will require a coordinated migration of the
AlertActionextension API.Test Plan
Related Issues
CONSOLE-4447
🤖 Generated with Claude Code