Skip to content

[WIP] CONSOLE-4447: Migrate core modals to PatternFly v6 (part 1)#16100

Open
rhamilto wants to merge 4 commits intoopenshift:mainfrom
rhamilto:CONSOLE-4447-core
Open

[WIP] CONSOLE-4447: Migrate core modals to PatternFly v6 (part 1)#16100
rhamilto wants to merge 4 commits intoopenshift:mainfrom
rhamilto:CONSOLE-4447-core

Conversation

@rhamilto
Copy link
Member

@rhamilto rhamilto commented Mar 3, 2026 •
edited
Loading

Summary

This PR migrates 9 core modal components from deprecated factory modal components to PatternFly v6 Modal components.

Note: This PR includes changes from #16015, so it should merge first.

Changes

Modal Files Migrated:

  1. ✅ add-secret-to-workload.tsx
  2. ✅ alert-routing-modal.tsx
  3. ✅ configure-cluster-upstream-modal.tsx
  4. ✅ configure-ns-pull-secret-modal.tsx
  5. ✅ configure-update-strategy-modal.tsx
  6. ✅ expand-pvc-modal.tsx
  7. ✅ labels-modal.tsx
  8. ✅ managed-resource-save-modal.tsx
  9. ✅ remove-volume-modal.tsx

Hook Updated:

  • useLabelsModal.tsx - Eliminated duplication by using LabelsModalOverlay directly

Pattern Applied:

  • ❌ Removed: ModalTitle, ModalSubmitFooter, ModalWrapper (deprecated factory components)
  • ✅ Added: PatternFly v6 Modal, ModalHeader, ModalBody, ModalVariant
  • ✅ Added: ModalFooterWithAlerts from @console/shared
  • ✅ Replaced HTML <form> with React Fragment <>
  • ✅ Added Form component with id for form submission
  • ✅ Associated submit buttons using form attribute
  • ✅ Replaced <p> tags with <Content component={ContentVariants.p}>
  • ✅ Used titleIconVariant for warning/danger icons instead of custom icon components
  • ✅ Modern overlay pattern with useState for isOpen management

Testing

No existing tests were found for these modals. Manual testing instructions are available for each modal.

Statistics

  • 11 files changed
  • 785 insertions(+)
  • 605 deletions(-)
  • Net: +180 lines (cleaner, more modern code)

🤖 Generated with Claude Code

rhamilto and others added 3 commits February 19, 2026 16:40
@rhamilto @claude
Update modal Cancel buttons to use variant="link"
edbbd36 
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>
@rhamilto @claude
Migrate modals to modern PatternFly Modal and remove deprecated Modal…
fff846f 
… 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>
@rhamilto @claude
Migrate DeleteModal and related modals to modern PatternFly Modal
a5cc161 
- 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>
@openshift-ci-robot openshift-ci-robot added the jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. label Mar 3, 2026
@openshift-ci-robot
Copy link
Contributor

openshift-ci-robot commented Mar 3, 2026 •
edited by openshift-ci bot
Loading

@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.

Details

In response to this:

Summary

This PR migrates 9 core modal components from deprecated factory modal components to PatternFly v6 Modal components.

Changes

Modal Files Migrated:

  1. ✅ add-secret-to-workload.tsx
  2. ✅ alert-routing-modal.tsx
  3. ✅ configure-cluster-upstream-modal.tsx
  4. ✅ configure-ns-pull-secret-modal.tsx
  5. ✅ configure-update-strategy-modal.tsx
  6. ✅ expand-pvc-modal.tsx
  7. ✅ labels-modal.tsx
  8. ✅ managed-resource-save-modal.tsx
  9. ✅ remove-volume-modal.tsx

Hook Updated:

  • useLabelsModal.tsx - Eliminated duplication by using LabelsModalOverlay directly

Pattern Applied:

  • ❌ Removed: ModalTitle, ModalSubmitFooter, ModalWrapper (deprecated factory components)
  • ✅ Added: PatternFly v6 Modal, ModalHeader, ModalBody, ModalVariant
  • ✅ Added: ModalFooterWithAlerts from @console/shared
  • ✅ Replaced HTML <form> with React Fragment <>
  • ✅ Added Form component with id for form submission
  • ✅ Associated submit buttons using form attribute
  • ✅ Replaced <p> tags with <Content component={ContentVariants.p}>
  • ✅ Used titleIconVariant for warning/danger icons instead of custom icon components
  • ✅ Modern overlay pattern with useState for isOpen management

Testing

No existing tests were found for these modals. Manual testing instructions are available for each modal.

Statistics

  • 11 files changed
  • 785 insertions(+)
  • 605 deletions(-)
  • Net: +180 lines (cleaner, more modern code)

🤖 Generated with Claude Code

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 openshift-ci bot requested review from Leo6Leo and rawagner March 3, 2026 21:51
@openshift-ci openshift-ci bot added the component/core Related to console core functionality label Mar 3, 2026
@openshift-ci
Copy link
Contributor

openshift-ci bot commented Mar 3, 2026

[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

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@openshift-ci openshift-ci bot added component/knative Related to knative-plugin approved Indicates a PR has been approved by an approver from all required OWNERS files. component/metal3 Related to metal3-plugin component/olm Related to OLM component/shared Related to console-shared labels Mar 3, 2026
@rhamilto rhamilto changed the title Open [WIP] CONSOLE-4447: Migrate core modals to PatternFly v6 Open [WIP] CONSOLE-4447: Migrate core modals to PatternFly v6 (part 1) Mar 3, 2026
@rhamilto rhamilto changed the title Open [WIP] CONSOLE-4447: Migrate core modals to PatternFly v6 (part 1) [WIP] CONSOLE-4447: Migrate core modals to PatternFly v6 (part 1) Mar 3, 2026
@openshift-ci openshift-ci bot added the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Mar 3, 2026
@openshift-ci-robot
Copy link
Contributor

openshift-ci-robot commented Mar 3, 2026 •
edited by openshift-ci bot
Loading

@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.

Details

In response to this:

Summary

This PR migrates 9 core modal components from deprecated factory modal components to PatternFly v6 Modal components.

Note: This PR includes changes from #16015, so it should merge first.

Changes

Modal Files Migrated:

  1. ✅ add-secret-to-workload.tsx
  2. ✅ alert-routing-modal.tsx
  3. ✅ configure-cluster-upstream-modal.tsx
  4. ✅ configure-ns-pull-secret-modal.tsx
  5. ✅ configure-update-strategy-modal.tsx
  6. ✅ expand-pvc-modal.tsx
  7. ✅ labels-modal.tsx
  8. ✅ managed-resource-save-modal.tsx
  9. ✅ remove-volume-modal.tsx

Hook Updated:

  • useLabelsModal.tsx - Eliminated duplication by using LabelsModalOverlay directly

Pattern Applied:

  • ❌ Removed: ModalTitle, ModalSubmitFooter, ModalWrapper (deprecated factory components)
  • ✅ Added: PatternFly v6 Modal, ModalHeader, ModalBody, ModalVariant
  • ✅ Added: ModalFooterWithAlerts from @console/shared
  • ✅ Replaced HTML <form> with React Fragment <>
  • ✅ Added Form component with id for form submission
  • ✅ Associated submit buttons using form attribute
  • ✅ Replaced <p> tags with <Content component={ContentVariants.p}>
  • ✅ Used titleIconVariant for warning/danger icons instead of custom icon components
  • ✅ Modern overlay pattern with useState for isOpen management

Testing

No existing tests were found for these modals. Manual testing instructions are available for each modal.

Statistics

  • 11 files changed
  • 785 insertions(+)
  • 605 deletions(-)
  • Net: +180 lines (cleaner, more modern code)

🤖 Generated with Claude Code

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
Copy link
Member Author

rhamilto commented Mar 3, 2026

/retest

1 similar comment
@rhamilto
Copy link
Member Author

rhamilto commented Mar 4, 2026

/retest

@rhamilto rhamilto force-pushed the CONSOLE-4447-core branch 2 times, most recently from 8af3f6a to 4ba1ef0 Compare March 4, 2026 18:20
@rhamilto rhamilto force-pushed the CONSOLE-4447-core branch from 4ba1ef0 to ae6f268 Compare March 4, 2026 18:24
@rhamilto
Copy link
Member Author

rhamilto commented Mar 5, 2026

/retest

@openshift-ci
Copy link
Contributor

openshift-ci bot commented Mar 5, 2026

@rhamilto: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name Commit Details Required Rerun command
ci/prow/e2e-gcp-console ae6f268 link true /test e2e-gcp-console

Full PR test history. Your PR dashboard.

Details

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 kubernetes-sigs/prow repository. I understand the commands that are listed here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Leo6Leo Leo6Leo Awaiting requested review from Leo6Leo

@rawagner rawagner Awaiting requested review from rawagner

Assignees

No one assigned

Labels

approved Indicates a PR has been approved by an approver from all required OWNERS files. component/core Related to console core functionality component/knative Related to knative-plugin component/metal3 Related to metal3-plugin component/olm Related to OLM component/shared Related to console-shared do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. jira/valid-reference Indicates that this PR references a valid Jira ticket of any type.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@rhamilto @openshift-ci-robot