[WIP] CONSOLE-4447: Remove deprecated modal components and CSS#16126
[WIP] CONSOLE-4447: Remove deprecated modal components and CSS#16126rhamilto wants to merge 22 commits intoopenshift:mainfrom
Conversation
|
@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. |
|
@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 |
245f6d2 to
e145baf
Compare
e145baf to
29c4fdf
Compare
|
/retest |
|
@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. |
|
@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. |
29c4fdf to
5fb7d75
Compare
… 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
- Add onSubmit handlers to Form elements for proper form submission
- Wire submit buttons to forms using form attribute (type="submit" + form="form-id")
- Fix event types for submit handlers (FormEvent<HTMLFormElement>)
- Remove focus blur workarounds (PatternFly v6 handles focus management)
- Fix promise handling and state management:
- Use usePromiseHandler hook in DeletePDBModal (prevents memory leak from setState after unmount)
- Return promise from handleSubmit for ESLint compliance
- Replace empty Form with semantic <p> tag in ConfigureUnschedulableModal
- Fix Formik type compatibility in ResourceLimitsModal
- Add role="form" to ResourceLimitsModal form for accessibility
- Update ResourceLimitsModal tests to use getByRole('form') following RTL best practices
- 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 v6 Modal pattern with consistent
error/alert display using ModalFooterWithAlerts and proper form submission
handling.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Addresses code review feedback with fixes for accessibility, error handling, i18n, null safety, and code quality:
Accessibility improvements:
- Add aria-labelledby to Modal components linking to ModalHeader labelId
- Fix FormGroup in cluster-update-modal to use role="radiogroup" instead of unused fieldId
- Add aria-label to TextInput components in taints-modal
- Add isDisabled to delete button while operation in progress
Error handling:
- Add .catch(() => {}) to promise chains in cluster-update-modal and rollback-modal
i18n fixes:
- Add missing 'public~' namespace prefix to Close button translation
- Translate Tooltip content in taints-modal
Null safety:
- Add defensive fallback for semver.parse in cluster-channel-modal using nullish coalescing
Code quality:
- Fix duplicate modal rendering in cluster-settings using useRef to track modal state
- Use useQueryParamsMutator hook's getQueryArgument for URL params
- Replace raw input elements with PatternFly TextInput components in taints-modal
- Fix inconsistent error checking in rollback-modal
- Fix typo: defalt-column-management → default-column-management
- Migrate taints-modal to lazy loading pattern (LazyTaintsModalOverlay)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Migrate 7 modals from deprecated @console/internal/components/factory ModalWrapper to modern @patternfly/react-core Modal components: - SinkSourceModal - PubSubModal - SinkPubsubModal - DeleteRevisionModal - SinkUriModal - TestFunctionModal - TrafficSplittingModal Changes: - Replace ModalWrapper with PatternFly 6 Modal in controller components - Replace ModalTitle with ModalHeader (with labelId and data-test-id="modal-title") - Move Form inside ModalBody for consistency - Replace ModalSubmitFooter with ModalFooter or ModalFooterWithAlerts - Add form attribute to submit buttons to connect to form id - Add data-test-id="modal-cancel-action" to cancel buttons for integration tests - Update unit tests to mock PatternFly 6 components - Fix TestFunction bug: service.data.metadata -> service.metadata All modals now follow consistent pattern: - Modal wrapper in Controller component - ModalHeader with accessibility labelId and test ID - Form inside ModalBody with unique id and className="pf-v6-u-mr-md" - Submit button with type="submit" and form attribute - Cancel button with variant="link" and test ID Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
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>
Migrate all OLM modals from deprecated PatternFly modal components (ModalTitle, ModalSubmitFooter, ModalWrapper) to PatternFly v6 Modal components (Modal, ModalHeader, ModalBody, ModalFooter/ModalFooterWithAlerts). Changes: - Use PatternFly Form component with external submit button pattern - Replace deprecated Checkbox with PatternFly Checkbox - Add proper data-test-id attributes for Cypress integration tests - Update test files to work with new modal structure - Use ModalFooterWithAlerts for error handling where applicable Migrated modals: - disable-default-source-modal.tsx - edit-default-sources-modal.tsx - installplan-approval-modal.tsx - installplan-preview-modal.tsx - subscription-channel-modal.tsx - uninstall-operator-modal.tsx - update-strategy-modal.tsx - operator-hub-community-provider-modal.tsx - resource-requirements.tsx Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Use unique form IDs with useId() in ResourceRequirementsModal to prevent ID collisions when multiple modal instances mount - Prevent modal dismissal during async operations in UninstallOperatorModal by disabling onClose when operations are in progress - Remove redundant onClick handlers from submit buttons in disable-default-source-modal and edit-default-sources-modal - Simplify Radio onChange handlers in installplan-approval-modal to use closures with known constant values instead of reading e.target.value - Remove duplicate InfoCircleIcon from operator-hub-community-provider-modal since titleIconVariant="info" already displays the icon Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…iew-modal For read-only/informational modals with a single dismiss button, the OK button should use variant="primary" as it's the main action. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add missing aria-labelledby attributes for WCAG 2.1 compliance and restore
historical cancel button behavior across all 8 migrated modals.
Accessibility fixes:
- Add labelId to all ModalHeader components
- Add matching aria-labelledby to all Modal wrapper components
- Ensures screen readers can properly announce modal titles
UX fixes:
- Remove isDisabled={inProgress} from all cancel buttons
- Restores historical pattern where users can cancel during async operations
- Aligns with console-wide modal behavior (see ModalSubmitFooter history)
Modals updated:
- disable-default-source-modal.tsx
- edit-default-sources-modal.tsx
- installplan-approval-modal.tsx
- installplan-preview-modal.tsx
- subscription-channel-modal.tsx
- uninstall-operator-modal.tsx
- update-strategy-modal.tsx
- operator-hub-community-provider-modal.tsx
Follows patterns from PR openshift#16123 (CONSOLE-4447-app-2).
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…r to useOverlay Assisted by: Claude Code
Replace history object usage with useNavigate hook in console-shared package. Changes: - ActionMenuItem.tsx: Replace history.push with navigate - CatalogTile.tsx: Replace history.push with navigate - CatalogView.tsx: Replace history.push with navigate - catalog-utils.tsx: Accept NavigateFunction as parameter - dynamic-form/index.tsx: Replace history.goBack with navigate(-1) - error-boundary.tsx: Use componentDidUpdate instead of key prop for location-based reset - DeleteResourceModal.tsx: Replace history.push with navigate - MultiTabListPage.tsx: Replace history.push with navigate Migration patterns: - Components: Added useNavigate() hook - Utilities: Parameter injection for NavigateFunction - ErrorBoundary: Pass locationPathname as prop and use componentDidUpdate to reset error state only when there's an active error AND location changes. This avoids unnecessary component remounting during tab navigation. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…odal - Add LazyConsolePluginModalOverlay export with lazy loading - Update clusterserviceversion.tsx to use lazy-loaded modal - Migrate DeleteHPAModal from deprecated factory/modal to modern PatternFly Modal - Use ModalHeader, ModalBody, and ModalFooterWithAlerts components - Replace manual state management with usePromiseHandler hook Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Rename launchOverlay to launchModal in useHPAActions and ConsolePlugins - Rename DeleteHPAModalProvider to DeleteHPAModalOverlay - Rename DeleteHPAModalProviderProps to DeleteHPAModalOverlayProps - Export DeleteHPAModalOverlay with named export instead of default Assisted-by: Claude
Migrates DeleteHPAModal, ConsolePluginModal, and DeleteResourceModal from deprecated factory modal components to modern PatternFly v6 Modal. Changes: - Replace ModalWrapper with Modal component with state management - Replace ModalTitle with ModalHeader - Replace ModalSubmitFooter with ModalFooterWithAlerts - Replace HTML form with PatternFly Form component - Use modern Button components with consistent loading/disabled states - Maintain Formik integration in DeleteResourceModal Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Migrate EditApplicationModal, MoveConnectionModal, and HelmReadmeModal from deprecated modal components to modern PatternFly v6 Modal components. Changes: - Replace ModalWrapper, ModalTitle, ModalBody, ModalSubmitFooter with PatternFly v6 Modal, ModalHeader, ModalBody components - Use ModalFooterWithAlerts for consistent error display - Replace HTML form elements with PatternFly Form component - Update modal providers to use modern Modal with proper state management - Maintain backward compatibility with existing modal launcher hooks 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>
Replace manual useOverlay/launchModal calls with dedicated modal hooks (useDeleteModal, useAnnotationsModal, useLabelsModal) in action creators, and migrate the AlertAction extension API from useModal to useOverlay. 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 - AlertAction extension: Changed from LaunchModal to LaunchOverlay type - notification-drawer: Updated to use useOverlay instead of useModal - AlertItem: Updated to use useOverlay instead of useModal - CHANGELOG-core.md: Documented breaking change for AlertAction extension Breaking changes: - AlertAction extension action callback now receives LaunchOverlay instead of LaunchModal. The LaunchOverlay type does not support the optional id parameter that LaunchModal had. Plugins implementing console.alert-action extensions must update their action callbacks accordingly. 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 - Completes migration away from deprecated useModal API 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 - Kept launchModal variable naming for backward compatibility Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Convert CreateNamespaceModal and CreateProjectModal from ModalComponent to OverlayComponent to fix type errors with useOverlay hooks. Changes: - Change from ModalComponent to OverlayComponent type - Replace closeModal prop with closeOverlay - Add compatibility layer for extension components expecting closeModal Fixes build errors: - useCreateNamespaceModal type incompatibility - useCreateProjectModal type incompatibility - useCreateNamespaceOrProjectModal type incompatibility Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…ndency Remove all deprecated modal components (ModalWrapper, ModalTitle, ModalBody, ModalFooter, ModalSubmitFooter) from the modal factory as they have been fully migrated to PatternFly v6 Modal components. Changes: - Remove deprecated modal component implementations from modal.tsx - Keep only ModalComponentProps type for backward compatibility - Remove react-modal package dependency from package.json - Remove react-modal initialization code from app.tsx All modals have been migrated to use PatternFly v6 Modal components with the useOverlay hook pattern. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…factory/modal.tsx Relocates the ModalComponentProps type definition to a proper shared location and removes the deprecated factory/modal.tsx file entirely. This completes the removal of all deprecated modal components. Changes: - Create new file packages/console-shared/src/types/modal.ts with ModalComponentProps type - Update all 32 imports across the codebase to use @console/shared/src/types/modal - Remove public/components/factory/modal.tsx - Remove modal export from public/components/factory/index.tsx Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Removes unused CSS classes that were only used by the deprecated modal components: - .co-overlay (used by old ModalWrapper component) - .modal-footer (replaced by PatternFly ModalFooter) - .modal-paragraph (no longer needed with PatternFly modals) All remaining classes in _modals.scss are still in use by existing modals or integration tests. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
5fb7d75 to
895d2c3
Compare
Summary
This PR completes the migration to PatternFly v6 modals by removing deprecated modal components and cleaning up legacy CSS:
ModalTitle,ModalSubmitFooter,ModalWrapper) from@console/internal/components/factory/modalModalComponentPropstype to@console/shared/src/types/modaland updated 32 importspublic/components/modals/_modals.scssand all orphaned CSS classesreact-modaldependencyNote: this PR should merge last for this story.
Breaking Changes
For dynamic plugin developers:
.co-overlay,.modal-footer,.modal-paragraph,.modal-header,.modal-body,.modal-body-border,.modal-body-content,.modal-content,.modal-dialog,.co-modal-table,.modal__inline-resource-link.pf-v6-c-modal-box__body) or data-test attributesCHANGELOG-core.mdfor full detailsDocumentation
MODAL_CSS_USAGE_REPORT.md- Documents removed CSS classes and their previous usageMODAL_CSS_INTEGRATION_TEST_UPDATES.md- Lists integration test updates needed in follow-up PRs, organized by packageTest Plan
Related PRs
Part of the CONSOLE-4447 modal migration series:
🤖 Generated with Claude Code