CONSOLE-5049: Migrate cluster and toleration modals to useOverlay hook

[sg00dwin]

Migrates cluster settings and toleration modals from the deprecated createModalLauncher pattern to the modern OverlayComponent pattern. This is part of CONSOLE-5012 to modernize modal handling across the console.

Changes

Modals Migrated (4 total)

All modals now follow the OverlayComponent pattern with consistent implementation:

1. ClusterChannelModal (public/components/modals/cluster-channel-modal.tsx)

   • Wrapped with ClusterChannelModalOverlay: OverlayComponent
   • Removed createModalLauncher usage
   • Removed unused TFunction from props

2. ClusterMoreUpdatesModal (public/components/modals/cluster-more-updates-modal.tsx)

   • Wrapped with ClusterMoreUpdatesModalOverlay: OverlayComponent
   • Removed createModalLauncher usage

3. ClusterUpdateModal (public/components/modals/cluster-update-modal.tsx)

   • Wrapped with ClusterUpdateModalOverlay: OverlayComponent
   • Removed createModalLauncher usage

4. TolerationsModal (public/components/modals/tolerations-modal.tsx)

   • Wrapped with TolerationsModalOverlay: OverlayComponent
   • Removed createModalLauncher usage
   • Added modalClassName prop support for modal sizing

Updated to Use New Overlay Modals

Replaced direct modal function calls with useOverlay():

• cluster-settings.tsx: Updated 5 call sites

  • CurrentChannel component: Changed from clusterChannelModal({ cv }) to launchModal(ClusterChannelModalOverlay, { cv })
  • UpdateLink component: Changed from clusterUpdateModal({ cv }) to launchModal(ClusterUpdateModalOverlay, { cv })
  • UpdatesGraph component: Changed from clusterMoreUpdatesModal({ cv }) to launchModal(ClusterMoreUpdatesModalOverlay, { cv })
  • ClusterVersionDetailsTable component: Converted URL query parameter handling from promise-based to useEffect with immediate cleanup

• useCommonActions.ts: Updated 1 call site

  • Changed from tolerationsModal({ ... }) to launchModal(TolerationsModalOverlay, { ... })
  • Updated eslint-disable comment to remove tolerationsModal reference

React Hooks Dependency Array Updates

Added launchModal to dependency arrays where used:

• cluster-settings.tsx: Added launchModal and cv to useEffect dependency array for URL query parameter handling

Note: While launchModal from useOverlay() is referentially stable, it's included in dependency arrays for correctness and to satisfy exhaustive-deps linting rules.

Barrel Exports Removed

Removed deprecated modal function exports from public/components/modals/index.ts:

• Removed clusterChannelModal export
• Removed clusterMoreUpdatesModal export
• Removed clusterUpdateModal export
• Removed tolerationsModal export

Naming Convention

All modal components use named exports following team standards:

• Named exports: ClusterChannelModalOverlay, ClusterMoreUpdatesModalOverlay, ClusterUpdateModalOverlay, TolerationsModalOverlay
• All imports updated to use direct imports instead of barrel exports
• Follows consistent pattern with other migrated modals

Related

• Part of CONSOLE-5012 modal modernization effort
• Jira: CONSOLE-5049

Assisted-by: Claude Code

Summary by CodeRabbit

• Refactor
  • Updated modal system architecture for cluster settings (channel, updates) and tolerations configuration to use a centralized overlay-based approach, improving consistency in modal lifecycle management.

[openshift-ci-robot]

@sg00dwin: This pull request references CONSOLE-5049 which is a valid jira issue.

Details

In response to this:

Migrates cluster settings and toleration modals from the deprecated createModalLauncher pattern to the modern OverlayComponent pattern. This is part of CONSOLE-5012 to modernize modal handling across the console.

Changes

Modals Migrated (4 total)

All modals now follow the OverlayComponent pattern with consistent implementation:

1. ClusterChannelModal (public/components/modals/cluster-channel-modal.tsx)

• Wrapped with ClusterChannelModalOverlay: OverlayComponent
• Removed createModalLauncher usage
• Removed unused TFunction from props

2. ClusterMoreUpdatesModal (public/components/modals/cluster-more-updates-modal.tsx)

• Wrapped with ClusterMoreUpdatesModalOverlay: OverlayComponent
• Removed createModalLauncher usage

3. ClusterUpdateModal (public/components/modals/cluster-update-modal.tsx)

• Wrapped with ClusterUpdateModalOverlay: OverlayComponent
• Removed createModalLauncher usage

4. TolerationsModal (public/components/modals/tolerations-modal.tsx)

• Wrapped with TolerationsModalOverlay: OverlayComponent
• Removed createModalLauncher usage
• Added modalClassName prop support for modal sizing

Updated to Use New Overlay Modals

Replaced direct modal function calls with useOverlay():

• cluster-settings.tsx: Updated 5 call sites

• CurrentChannel component: Changed from clusterChannelModal({ cv }) to launchModal(ClusterChannelModalOverlay, { cv })

• UpdateLink component: Changed from clusterUpdateModal({ cv }) to launchModal(ClusterUpdateModalOverlay, { cv })

• UpdatesGraph component: Changed from clusterMoreUpdatesModal({ cv }) to launchModal(ClusterMoreUpdatesModalOverlay, { cv })

• ClusterVersionDetailsTable component: Converted URL query parameter handling from promise-based to useEffect with immediate cleanup

• useCommonActions.ts: Updated 1 call site

• Changed from tolerationsModal({ ... }) to launchModal(TolerationsModalOverlay, { ... })

• Updated eslint-disable comment to remove tolerationsModal reference

React Hooks Dependency Array Updates

Added launchModal to dependency arrays where used:

• cluster-settings.tsx: Added launchModal and cv to useEffect dependency array for URL query parameter handling

Note: While launchModal from useOverlay() is referentially stable, it's included in dependency arrays for correctness and to satisfy exhaustive-deps linting rules.

Barrel Exports Removed

Removed deprecated modal function exports from public/components/modals/index.ts:

• Removed clusterChannelModal export
• Removed clusterMoreUpdatesModal export
• Removed clusterUpdateModal export
• Removed tolerationsModal export

Naming Convention

All modal components use named exports following team standards:

• Named exports: ClusterChannelModalOverlay, ClusterMoreUpdatesModalOverlay, ClusterUpdateModalOverlay, TolerationsModalOverlay
• All imports updated to use direct imports instead of barrel exports
• Follows consistent pattern with other migrated modals

Related

• Part of CONSOLE-5012 modal modernization effort
• Jira: CONSOLE-5049

Assisted-by: 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-robot]

@sg00dwin: This pull request references CONSOLE-5049 which is a valid jira issue.

Details

In response to this:

Migrates cluster settings and toleration modals from the deprecated createModalLauncher pattern to the modern OverlayComponent pattern. This is part of CONSOLE-5012 to modernize modal handling across the console.

Changes

Modals Migrated (4 total)

All modals now follow the OverlayComponent pattern with consistent implementation:

1. ClusterChannelModal (public/components/modals/cluster-channel-modal.tsx)

• Wrapped with ClusterChannelModalOverlay: OverlayComponent
• Removed createModalLauncher usage
• Removed unused TFunction from props

2. ClusterMoreUpdatesModal (public/components/modals/cluster-more-updates-modal.tsx)

• Wrapped with ClusterMoreUpdatesModalOverlay: OverlayComponent
• Removed createModalLauncher usage

3. ClusterUpdateModal (public/components/modals/cluster-update-modal.tsx)

• Wrapped with ClusterUpdateModalOverlay: OverlayComponent
• Removed createModalLauncher usage

4. TolerationsModal (public/components/modals/tolerations-modal.tsx)

• Wrapped with TolerationsModalOverlay: OverlayComponent
• Removed createModalLauncher usage
• Added modalClassName prop support for modal sizing

Updated to Use New Overlay Modals

Replaced direct modal function calls with useOverlay():

• cluster-settings.tsx: Updated 5 call sites

• CurrentChannel component: Changed from clusterChannelModal({ cv }) to launchModal(ClusterChannelModalOverlay, { cv })

• UpdateLink component: Changed from clusterUpdateModal({ cv }) to launchModal(ClusterUpdateModalOverlay, { cv })

• UpdatesGraph component: Changed from clusterMoreUpdatesModal({ cv }) to launchModal(ClusterMoreUpdatesModalOverlay, { cv })

• ClusterVersionDetailsTable component: Converted URL query parameter handling from promise-based to useEffect with immediate cleanup

• useCommonActions.ts: Updated 1 call site

• Changed from tolerationsModal({ ... }) to launchModal(TolerationsModalOverlay, { ... })

• Updated eslint-disable comment to remove tolerationsModal reference

React Hooks Dependency Array Updates

Added launchModal to dependency arrays where used:

• cluster-settings.tsx: Added launchModal and cv to useEffect dependency array for URL query parameter handling

Note: While launchModal from useOverlay() is referentially stable, it's included in dependency arrays for correctness and to satisfy exhaustive-deps linting rules.

Barrel Exports Removed

Removed deprecated modal function exports from public/components/modals/index.ts:

• Removed clusterChannelModal export
• Removed clusterMoreUpdatesModal export
• Removed clusterUpdateModal export
• Removed tolerationsModal export

Naming Convention

All modal components use named exports following team standards:

• Named exports: ClusterChannelModalOverlay, ClusterMoreUpdatesModalOverlay, ClusterUpdateModalOverlay, TolerationsModalOverlay
• All imports updated to use direct imports instead of barrel exports
• Follows consistent pattern with other migrated modals

Related

• Part of CONSOLE-5012 modal modernization effort
• Jira: CONSOLE-5049

Assisted-by: Claude Code

Summary by CodeRabbit

• Refactor
• Updated modal system architecture for cluster settings (channel, updates) and tolerations configuration to use a centralized overlay-based approach, improving consistency in modal lifecycle management.

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.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request refactors the modal launching architecture across OpenShift Console's cluster settings and tolerations features. The change replaces the createModalLauncher pattern with a new OverlayComponent-based approach. Four modal components (cluster channel, cluster updates, cluster more updates, and tolerations) are migrated to export overlay-wrapped versions instead of launcher functions. Modal invocations throughout the codebase are updated to use launchModal with the new overlay components. The old modal launcher exports are removed from the index, consolidating modal access through the overlay system.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and accurately summarizes the main change: migrating cluster and toleration modals from the old modal launcher pattern to the modern useOverlay hook pattern.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[rhamilto]

So much cleaner! One nit.

[sg00dwin]

/assign @yanpzhan

Tech debt, so assigning labels
/label px-approved
/label docs-approved

[rhamilto]

Nit: keep the changes on the same line to make the diff easier to read.

[sg00dwin]

updated

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: sg00dwin
Once this PR has been reviewed and has the lgtm label, please ask for approval from rhamilto. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS

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

[openshift-ci]

@sg00dwin: The following tests 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/frontend	c6b1f47	link	true	/test frontend
ci/prow/e2e-gcp-console	c6b1f47	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.

[rhamilto]

We need to remove add-users-modal.tsx in this PR since it is orphaned?

[openshift-merge-robot]

PR needs rebase.

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.