[WIP] CONSOLE-5012: Create shared error modal launcher using React Context #15946

rhamilto · 2026-01-22T23:58:54Z

Summary

Creates a shared error modal launcher utility in the console-shared package using React Context to eliminate code duplication and ensure error modals work correctly across all contexts (topology, standalone pages, import flows).

Note: This PR builds on:

CONSOLE-5012: Migrate delete modals and PVC modals to overlay pattern #15932 (PVC modals, delete-modal, configure-update-strategy-modal, configure-ns-pull-secret-modal, configure-cluster-upstream-modal)
CONSOLE-5012: Migrate modals to overlay pattern #15939 (managed-resource-save-modal, rollback-modal)
CONSOLE-5012: Additional modal migrations to overlay pattern #15940 (additional modal migration)

Architecture

React Context Pattern

This implementation reuses the existing OverlayProvider instead of creating a new context provider:

<OverlayProvider>
  <SyncErrorModalLauncher />  {/* Zero-render sync component */}
  <App />
</OverlayProvider>

Dual API for Different Contexts

React Components - Use the hook:

const launchErrorModal = useErrorModalLauncher();
launchErrorModal({ title: 'Error', error: err.message });

Non-React Code (callbacks, promises, utilities) - Use the function:

createConnection(source, target).catch(err => {
  launchErrorModal({ title: 'Failed', error: err.message });
});

Changes

New Shared Utility

packages/console-shared/src/utils/error-modal-handler.tsx

SyncErrorModalLauncher - Component that syncs the launcher for non-React contexts
useErrorModalLauncher() - Hook for launching error modals from React components
launchErrorModal() - Function for launching from non-React contexts (callbacks, promises)

Test Coverage

packages/console-shared/src/utils/__tests__/error-modal-handler.spec.tsx

Unit tests covering all scenarios (5 tests, all passing)
Tests lifecycle (mount/unmount)
Tests error handling (uninitialized launcher)

packages/console-shared/src/utils/__mocks__/error-modal-handler.tsx

Mock utilities for testing components that use the error modal launcher

Single Initialization Point

public/components/app.tsx

Added <SyncErrorModalLauncher /> inside OverlayProvider
Single initialization point for the entire application

Topology Move Node Error Handling

packages/topology/src/utils/moveNodeToGroup.tsx

Added setMoveNodeToGroupErrorHandler() for managing error handler
Added useSetupMoveNodeToGroupErrorHandler() hook called in Topology component
Updated moveNodeToGroup() to accept optional onError callback
Deprecated useMoveNodeToGroup() hook

packages/topology/src/components/graph-view/Topology.tsx

Added useSetupMoveNodeToGroupErrorHandler() call to initialize error handling

Note: This uses a global handler pattern instead of React Context. A follow-up PR (#15948) will refactor this to use the same React Context pattern as the error modal handler.

Migrated to New API

Updated to use launchErrorModal in:

topology: componentUtils.ts, edgeActions.ts
knative-plugin: knativeComponentUtils.ts, create-connector-utils.ts
shipwright-plugin: logs-utils.ts
dev-console: pipeline-template-utils.ts

Cleanup

Removed deprecated errorModal function from public/components/modals
Updated exports in console-shared package

Benefits

✅ Eliminates global state race conditions - Single initialization point in app root
✅ Improves testability - OverlayProvider context can be mocked in tests
✅ No code duplication - Shared utility used across all packages
✅ Reuses existing infrastructure - No new providers, uses existing OverlayProvider
✅ Simpler architecture - No unnecessary provider nesting
✅ Type-safe - Full TypeScript support with proper generics
✅ Proper lifecycle - Cleanup on unmount via useEffect
✅ Backward compatible - Non-React code continues to work via module reference
✅ Comprehensive test coverage - 5 unit tests covering all scenarios

Test Plan

Automated Tests

✅ Unit tests pass (5/5 tests)
✅ TypeScript compilation succeeds
✅ ESLint passes
✅ Pre-commit hooks pass

Manual Testing

Test topology drag/drop operations that trigger errors
Test BuildRun log viewing with error conditions
Test Git import flow with route exposure errors
Test deploy image flow with pipeline trigger errors
Verify no console errors when error modals are triggered
Test error modal from React component using useErrorModalLauncher() hook
Test error modal from promise chain using launchErrorModal() function
Test topology node move operations with error handling

Technical Details

Hybrid Approach

The implementation uses a hybrid pattern to support both React and non-React code:

React Components: Call useErrorModalLauncher() hook which directly uses useOverlay()
Non-React Code: Call launchErrorModal() function which accesses a module-level reference
Sync Component: SyncErrorModalLauncher syncs the launcher to the module-level variable

This approach:

Eliminates the need for a custom Context provider
Reuses the existing OverlayProvider infrastructure
Supports both React hooks and imperative API calls
Has proper cleanup via React lifecycle

Migration Path

Before:

No shared utility
Each package implemented its own error modal handling
Inconsistent patterns across codebase
Direct imports of deprecated errorModal function

After:

Single initialization point (app.tsx)
React Context-based (via OverlayProvider)
Proper cleanup on unmount
Easy to test with mocks
Consistent API across all packages

Summary

Creates a shared global error modal launcher utility in the console-shared package to eliminate code duplication and ensure error modals work correctly across all contexts (topology, standalone pages, import flows).

Changes

New Shared Utility

packages/console-shared/src/utils/error-modal-handler.ts

launchGlobalErrorModal() - Launch error modals from non-React contexts

useSetupGlobalErrorModalLauncher() - Hook to initialize the launcher

setGlobalErrorModalLauncher() - Manage global state

Migrated Packages

topology: Updated Topology.tsx, componentUtils.ts, edgeActions.ts

knative-plugin: Updated knativeComponentUtils.ts, create-connector-utils.ts

shipwright-plugin: Updated logs-utils.ts, BuildRunDetailsPage.tsx

dev-console: Updated pipeline-template-utils.ts, ImportPage.tsx, DeployImagePage.tsx

Launcher Initialization

Added useSetupGlobalErrorModalLauncher() in root components:

packages/topology/src/components/graph-view/Topology.tsx - For topology drag/drop contexts

packages/shipwright-plugin/src/components/buildrun-details/BuildRunDetailsPage.tsx - For standalone log viewing

packages/dev-console/src/components/import/ImportPage.tsx - For Git import flow

packages/dev-console/src/components/import/DeployImagePage.tsx - For deploy image flow

Cleanup

Removed topology-specific errorModalHandler implementation

Removed deprecated errorModal function from public/components/modals

Benefits

✅ Eliminates code duplication across packages

✅ Ensures error modals work in all contexts (topology, standalone pages, import flows)

✅ Single source of truth for error modal launching

✅ Proper initialization and cleanup via React hooks

Test plan

Test topology drag/drop operations that trigger errors

Test BuildRun log viewing with error conditions

Test Git import flow with route exposure errors

Test deploy image flow with pipeline trigger errors

Verify no console errors when error modals are triggered

Related

Jira: CONSOLE-5012

🤖 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 · 2026-01-22T23:58:59Z

Skipping CI for Draft Pull Request.
If you want CI signal for your change, please convert it to an actual PR.
You can still manually trigger a test run with /test all

openshift-ci-robot · 2026-01-22T23:59:03Z

@rhamilto: This pull request references CONSOLE-5012 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

Creates a shared global error modal launcher utility in the console-shared package to eliminate code duplication and ensure error modals work correctly across all contexts (topology, standalone pages, import flows).

Changes

New Shared Utility

packages/console-shared/src/utils/error-modal-handler.ts

launchGlobalErrorModal() - Launch error modals from non-React contexts

useSetupGlobalErrorModalLauncher() - Hook to initialize the launcher

setGlobalErrorModalLauncher() - Manage global state

Migrated Packages

topology: Updated Topology.tsx, componentUtils.ts, edgeActions.ts

knative-plugin: Updated knativeComponentUtils.ts, create-connector-utils.ts

shipwright-plugin: Updated logs-utils.ts, BuildRunDetailsPage.tsx

dev-console: Updated pipeline-template-utils.ts, ImportPage.tsx, DeployImagePage.tsx

Launcher Initialization

Added useSetupGlobalErrorModalLauncher() in root components:

packages/topology/src/components/graph-view/Topology.tsx - For topology drag/drop contexts

packages/shipwright-plugin/src/components/buildrun-details/BuildRunDetailsPage.tsx - For standalone log viewing

packages/dev-console/src/components/import/ImportPage.tsx - For Git import flow

packages/dev-console/src/components/import/DeployImagePage.tsx - For deploy image flow

Cleanup

Removed topology-specific errorModalHandler implementation

Removed deprecated errorModal function from public/components/modals

Benefits

✅ Eliminates code duplication across packages

✅ Ensures error modals work in all contexts (topology, standalone pages, import flows)

✅ Single source of truth for error modal launching

✅ Proper initialization and cleanup via React hooks

Test plan

Test topology drag/drop operations that trigger errors

Test BuildRun log viewing with error conditions

Test Git import flow with route exposure errors

Test deploy image flow with pipeline trigger errors

Verify no console errors when error modals are triggered

Related

Jira: CONSOLE-5012

🤖 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 · 2026-01-22T23:59:22Z

[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:

~~frontend/OWNERS~~ [rhamilto]

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

openshift-ci-robot · 2026-01-23T15:21:04Z

@rhamilto: This pull request references CONSOLE-5012 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

Creates a shared global error modal launcher utility in the console-shared package to eliminate code duplication and ensure error modals work correctly across all contexts (topology, standalone pages, import flows).

Note: This PR is based on CONSOLE-5012 and includes changes from other PRs in that branch. The changes below are cumulative and may include work from multiple related PRs.

Changes

New Shared Utility

packages/console-shared/src/utils/error-modal-handler.ts

launchGlobalErrorModal() - Launch error modals from non-React contexts

useSetupGlobalErrorModalLauncher() - Hook to initialize the launcher

setGlobalErrorModalLauncher() - Manage global state

Migrated Packages

topology: Updated Topology.tsx, componentUtils.ts, edgeActions.ts

knative-plugin: Updated knativeComponentUtils.ts, create-connector-utils.ts

shipwright-plugin: Updated logs-utils.ts, BuildRunDetailsPage.tsx

dev-console: Updated pipeline-template-utils.ts, ImportPage.tsx, DeployImagePage.tsx

Launcher Initialization

Added useSetupGlobalErrorModalLauncher() in root components:

packages/topology/src/components/graph-view/Topology.tsx - For topology drag/drop contexts

packages/shipwright-plugin/src/components/buildrun-details/BuildRunDetailsPage.tsx - For standalone log viewing

packages/dev-console/src/components/import/ImportPage.tsx - For Git import flow

packages/dev-console/src/components/import/DeployImagePage.tsx - For deploy image flow

Cleanup

Removed topology-specific errorModalHandler implementation

Removed deprecated errorModal function from public/components/modals

Benefits

✅ Eliminates code duplication across packages

✅ Ensures error modals work in all contexts (topology, standalone pages, import flows)

✅ Single source of truth for error modal launching

✅ Proper initialization and cleanup via React hooks

Test plan

Test topology drag/drop operations that trigger errors

Test BuildRun log viewing with error conditions

Test Git import flow with route exposure errors

Test deploy image flow with pipeline trigger errors

Verify no console errors when error modals are triggered

Related

Jira: CONSOLE-5012

🤖 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-robot · 2026-01-23T15:21:12Z

@rhamilto: This pull request references CONSOLE-5012 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

Creates a shared global error modal launcher utility in the console-shared package to eliminate code duplication and ensure error modals work correctly across all contexts (topology, standalone pages, import flows).

Note: This PR is based on CONSOLE-5012 and includes changes from other PRs in that branch. The changes below are cumulative and may include work from multiple related PRs.

Changes

New Shared Utility

packages/console-shared/src/utils/error-modal-handler.ts

launchGlobalErrorModal() - Launch error modals from non-React contexts

useSetupGlobalErrorModalLauncher() - Hook to initialize the launcher

setGlobalErrorModalLauncher() - Manage global state

Migrated Packages

topology: Updated Topology.tsx, componentUtils.ts, edgeActions.ts

knative-plugin: Updated knativeComponentUtils.ts, create-connector-utils.ts

shipwright-plugin: Updated logs-utils.ts, BuildRunDetailsPage.tsx

dev-console: Updated pipeline-template-utils.ts, ImportPage.tsx, DeployImagePage.tsx

Launcher Initialization

Added useSetupGlobalErrorModalLauncher() in root components:

packages/topology/src/components/graph-view/Topology.tsx - For topology drag/drop contexts

packages/shipwright-plugin/src/components/buildrun-details/BuildRunDetailsPage.tsx - For standalone log viewing

packages/dev-console/src/components/import/ImportPage.tsx - For Git import flow

packages/dev-console/src/components/import/DeployImagePage.tsx - For deploy image flow

Cleanup

Removed topology-specific errorModalHandler implementation

Removed deprecated errorModal function from public/components/modals

Benefits

✅ Eliminates code duplication across packages

✅ Ensures error modals work in all contexts (topology, standalone pages, import flows)

✅ Single source of truth for error modal launching

✅ Proper initialization and cleanup via React hooks

Test plan

Test topology drag/drop operations that trigger errors

Test BuildRun log viewing with error conditions

Test Git import flow with route exposure errors

Test deploy image flow with pipeline trigger errors

Verify no console errors when error modals are triggered

Related

Jira: CONSOLE-5012

🤖 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-robot · 2026-01-23T15:22:50Z

@rhamilto: This pull request references CONSOLE-5012 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

Creates a shared global error modal launcher utility in the console-shared package to eliminate code duplication and ensure error modals work correctly across all contexts (topology, standalone pages, import flows).

Note: This PR builds on:

CONSOLE-5012: Migrate delete modals and PVC modals to overlay pattern #15932 (PVC modals, delete-modal, configure-update-strategy-modal, configure-ns-pull-secret-modal, configure-cluster-upstream-modal)

CONSOLE-5012: Migrate modals to overlay pattern #15939 (managed-resource-save-modal, rollback-modal)

CONSOLE-5012: Additional modal migrations to overlay pattern #15940 (additional modal migration)

Changes

New Shared Utility

packages/console-shared/src/utils/error-modal-handler.ts

launchGlobalErrorModal() - Launch error modals from non-React contexts

useSetupGlobalErrorModalLauncher() - Hook to initialize the launcher

setGlobalErrorModalLauncher() - Manage global state

Migrated Packages

topology: Updated Topology.tsx, componentUtils.ts, edgeActions.ts

knative-plugin: Updated knativeComponentUtils.ts, create-connector-utils.ts

shipwright-plugin: Updated logs-utils.ts, BuildRunDetailsPage.tsx

dev-console: Updated pipeline-template-utils.ts, ImportPage.tsx, DeployImagePage.tsx

Launcher Initialization

Added useSetupGlobalErrorModalLauncher() in root components:

packages/topology/src/components/graph-view/Topology.tsx - For topology drag/drop contexts

packages/shipwright-plugin/src/components/buildrun-details/BuildRunDetailsPage.tsx - For standalone log viewing

packages/dev-console/src/components/import/ImportPage.tsx - For Git import flow

packages/dev-console/src/components/import/DeployImagePage.tsx - For deploy image flow

Cleanup

Removed topology-specific errorModalHandler implementation

Removed deprecated errorModal function from public/components/modals

Benefits

✅ Eliminates code duplication across packages

✅ Ensures error modals work in all contexts (topology, standalone pages, import flows)

✅ Single source of truth for error modal launching

✅ Proper initialization and cleanup via React hooks

Test plan

Test topology drag/drop operations that trigger errors

Test BuildRun log viewing with error conditions

Test Git import flow with route exposure errors

Test deploy image flow with pipeline trigger errors

Verify no console errors when error modals are triggered

Related

Jira: CONSOLE-5012

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

This commit migrates all instances of confirmModal to use the modern overlay pattern with useWarningModal, completing the modal migration effort started in previous PRs. Changes: - Removed deprecated confirmModal launcher and confirm-modal.tsx file - Migrated topology moveNodeToGroup to use useWarningModal with proper cancel handling via global handler pattern - Updated StopNodeMaintenanceModal to remove deprecated imperative API and keep only the useStopNodeMaintenanceModal hook - Fixed useWarningModal to properly call closeOverlay() and filter it from props spread to prevent React DOM warnings - Added try-catch in topology drag-drop to prevent optimistic update when user cancels the move operation - Updated all metal3-plugin maintenance components to use the hook-based approach This PR builds upon and depends on: - openshift#15932 (ResourceLimitsModal migration) - openshift#15939 (DeletePDBModal migration) - openshift#15940 (ConfigureUnschedulableModal migration) - openshift#15946 (Global error modal utility) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>

rhamilto · 2026-01-24T01:05:43Z

/retest

rhamilto · 2026-01-24T13:25:00Z

/retest

rhamilto · 2026-01-25T02:16:55Z

/retest

This commit migrates all instances of confirmModal to use the modern overlay pattern with useWarningModal, completing the modal migration effort started in previous PRs. Changes: - Removed deprecated confirmModal launcher and confirm-modal.tsx file - Migrated topology moveNodeToGroup to use useWarningModal with proper cancel handling via global handler pattern - Updated StopNodeMaintenanceModal to remove deprecated imperative API and keep only the useStopNodeMaintenanceModal hook - Fixed useWarningModal to properly call closeOverlay() and filter it from props spread to prevent React DOM warnings - Added try-catch in topology drag-drop to prevent optimistic update when user cancels the move operation - Updated all metal3-plugin maintenance components to use the hook-based approach This PR builds upon and depends on: - openshift#15932 (ResourceLimitsModal migration) - openshift#15939 (DeletePDBModal migration) - openshift#15940 (ConfigureUnschedulableModal migration) - openshift#15946 (Global error modal utility) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>

rhamilto · 2026-01-26T14:42:48Z

/retest

This commit migrates all instances of confirmModal to use the modern overlay pattern with useWarningModal, completing the modal migration effort started in previous PRs. Changes: - Removed deprecated confirmModal launcher and confirm-modal.tsx file - Migrated topology moveNodeToGroup to use useWarningModal with proper cancel handling via global handler pattern - Updated StopNodeMaintenanceModal to remove deprecated imperative API and keep only the useStopNodeMaintenanceModal hook - Fixed useWarningModal to properly call closeOverlay() and filter it from props spread to prevent React DOM warnings - Added try-catch in topology drag-drop to prevent optimistic update when user cancels the move operation - Updated all metal3-plugin maintenance components to use the hook-based approach This PR builds upon and depends on: - openshift#15932 (ResourceLimitsModal migration) - openshift#15939 (DeletePDBModal migration) - openshift#15940 (ConfigureUnschedulableModal migration) - openshift#15946 (Global error modal utility) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>

rhamilto · 2026-01-29T00:03:10Z

/retest

rhamilto · 2026-01-29T12:58:50Z

/retest

rhamilto · 2026-01-29T16:40:36Z

/retest

rhamilto · 2026-02-02T17:17:33Z

/assign @yanpzhan
/assign @vojtechszocs

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

openshift-ci-robot · 2026-02-02T18:34:14Z

@rhamilto: This pull request references CONSOLE-5012 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

Creates a shared error modal launcher utility in the console-shared package using React Context to eliminate code duplication and ensure error modals work correctly across all contexts (topology, standalone pages, import flows).

Note: This PR builds on:

CONSOLE-5012: Migrate delete modals and PVC modals to overlay pattern #15932 (PVC modals, delete-modal, configure-update-strategy-modal, configure-ns-pull-secret-modal, configure-cluster-upstream-modal)

CONSOLE-5012: Migrate modals to overlay pattern #15939 (managed-resource-save-modal, rollback-modal)

CONSOLE-5012: Additional modal migrations to overlay pattern #15940 (additional modal migration)

Architecture

React Context Pattern

This implementation reuses the existing OverlayProvider instead of creating a new context provider:
<OverlayProvider>
 <SyncErrorModalLauncher />  {/* Zero-render sync component */}
 <App />
</OverlayProvider>
Dual API for Different Contexts

React Components - Use the hook:
const launchErrorModal = useErrorModalLauncher();
launchErrorModal({ title: 'Error', error: err.message });
Non-React Code (callbacks, promises, utilities) - Use the function:
createConnection(source, target).catch(err => {
 launchErrorModal({ title: 'Failed', error: err.message });
});
Changes

New Shared Utility

packages/console-shared/src/utils/error-modal-handler.tsx

SyncErrorModalLauncher - Component that syncs the launcher for non-React contexts

useErrorModalLauncher() - Hook for launching error modals from React components

launchErrorModal() - Function for launching from non-React contexts (callbacks, promises)

Test Coverage

packages/console-shared/src/utils/__tests__/error-modal-handler.spec.tsx

Unit tests covering all scenarios (5 tests, all passing)

Tests lifecycle (mount/unmount)

Tests error handling (uninitialized launcher)

packages/console-shared/src/utils/__mocks__/error-modal-handler.tsx

Mock utilities for testing components that use the error modal launcher

Single Initialization Point

public/components/app.tsx

Added <SyncErrorModalLauncher /> inside OverlayProvider

Single initialization point for the entire application

Removed Multiple Initialization Points

Removed useSetupGlobalErrorModalLauncher() calls from:

packages/topology/src/components/graph-view/Topology.tsx

packages/shipwright-plugin/src/components/buildrun-details/BuildRunDetailsPage.tsx

packages/dev-console/src/components/import/ImportPage.tsx

packages/dev-console/src/components/import/DeployImagePage.tsx

Migrated to New API

Updated launchGlobalErrorModal → launchErrorModal in:

topology: componentUtils.ts, edgeActions.ts

knative-plugin: knativeComponentUtils.ts, create-connector-utils.ts

shipwright-plugin: logs-utils.ts

dev-console: pipeline-template-utils.ts

Cleanup

Removed topology-specific errorModalHandler implementation

Removed deprecated errorModal function from public/components/modals

Benefits

✅ Eliminates global state race conditions - Single initialization point in app root

✅ Improves testability - OverlayProvider context can be mocked in tests

✅ No code duplication - Shared utility used across all packages

✅ Reuses existing infrastructure - No new providers, uses existing OverlayProvider

✅ Simpler architecture - No unnecessary provider nesting

✅ Type-safe - Full TypeScript support with proper generics

✅ Proper lifecycle - Cleanup on unmount via useEffect

✅ Backward compatible - Non-React code continues to work via module reference

✅ Comprehensive test coverage - 5 unit tests covering all scenarios

Test Plan

Automated Tests

✅ Unit tests pass (5/5 tests)

✅ TypeScript compilation succeeds

✅ ESLint passes

✅ Pre-commit hooks pass

Manual Testing

Test topology drag/drop operations that trigger errors

Test BuildRun log viewing with error conditions

Test Git import flow with route exposure errors

Test deploy image flow with pipeline trigger errors

Verify no console errors when error modals are triggered

Test error modal from React component using useErrorModalLauncher() hook

Test error modal from promise chain using launchErrorModal() function

Technical Details

Hybrid Approach

The implementation uses a hybrid pattern to support both React and non-React code:

React Components: Call useErrorModalLauncher() hook which directly uses useOverlay()

Non-React Code: Call launchErrorModal() function which accesses a module-level reference

Sync Component: SyncErrorModalLauncher syncs the launcher to the module-level variable

This approach:

Eliminates the need for a custom Context provider

Reuses the existing OverlayProvider infrastructure

Supports both React hooks and imperative API calls

Has proper cleanup via React lifecycle

Migration from Global State

Before:

Multiple initialization points (4 different files)

Global state directly managed outside React

No cleanup mechanism

Difficult to test

After:

Single initialization point (app.tsx)

React Context-based (via OverlayProvider)

Proper cleanup on unmount

Easy to test with mocks

Related

Jira: CONSOLE-5012

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

This commit migrates all instances of confirmModal to use the modern overlay pattern with useWarningModal, completing the modal migration effort started in previous PRs. Changes: - Removed deprecated confirmModal launcher and confirm-modal.tsx file - Migrated topology moveNodeToGroup to use useWarningModal with proper cancel handling via global handler pattern - Updated StopNodeMaintenanceModal to remove deprecated imperative API and keep only the useStopNodeMaintenanceModal hook - Fixed useWarningModal to properly call closeOverlay() and filter it from props spread to prevent React DOM warnings - Added try-catch in topology drag-drop to prevent optimistic update when user cancels the move operation - Updated all metal3-plugin maintenance components to use the hook-based approach This PR builds upon and depends on: - openshift#15932 (ResourceLimitsModal migration) - openshift#15939 (DeletePDBModal migration) - openshift#15940 (ConfigureUnschedulableModal migration) - openshift#15946 (Global error modal utility) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>

This commit refactors the moveNodeToGroup global handler pattern to use React Context instead of module-level variables, addressing architectural concerns and following the same pattern established in openshift#15946. Changes: - Created MoveNodeHandlersProvider using React Context - Created SyncMoveNodeHandlers component to sync handlers for non-React contexts - Added useMoveNodeHandlers() hook for accessing handlers - Refactored moveNodeToGroup to use context-based handlers - Wrapped Topology component with MoveNodeHandlersProvider - Deprecated old useSetupMoveNodeToGroupHandlers hooks with warnings - Added comprehensive unit tests (8 tests, all passing) Benefits: - Eliminates global state race conditions - Follows React Context pattern from error modal handler (openshift#15946) - Improves testability with mockable context - Single provider initialization around Topology component - Proper cleanup via React lifecycle - Type-safe with clear error messages - Maintains backward compatibility via deprecated hooks The hybrid approach (Context + module reference) supports both React components (via useMoveNodeHandlers hook) and non-React drag-drop callbacks (via moveNodeToGroup function), similar to the error modal handler pattern. Co-Authored-By: Claude Sonnet 4.5 <[email protected]>

rhamilto · 2026-02-03T00:15:28Z

/retest

openshift-ci-robot · 2026-02-03T14:50:45Z

@rhamilto: This pull request references CONSOLE-5012 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

Creates a shared error modal launcher utility in the console-shared package using React Context to eliminate code duplication and ensure error modals work correctly across all contexts (topology, standalone pages, import flows).

Note: This PR builds on:

CONSOLE-5012: Migrate delete modals and PVC modals to overlay pattern #15932 (PVC modals, delete-modal, configure-update-strategy-modal, configure-ns-pull-secret-modal, configure-cluster-upstream-modal)

CONSOLE-5012: Migrate modals to overlay pattern #15939 (managed-resource-save-modal, rollback-modal)

CONSOLE-5012: Additional modal migrations to overlay pattern #15940 (additional modal migration)

Architecture

React Context Pattern

This implementation reuses the existing OverlayProvider instead of creating a new context provider:
<OverlayProvider>
 <SyncErrorModalLauncher />  {/* Zero-render sync component */}
 <App />
</OverlayProvider>
Dual API for Different Contexts

React Components - Use the hook:
const launchErrorModal = useErrorModalLauncher();
launchErrorModal({ title: 'Error', error: err.message });
Non-React Code (callbacks, promises, utilities) - Use the function:
createConnection(source, target).catch(err => {
 launchErrorModal({ title: 'Failed', error: err.message });
});
Changes

New Shared Utility

packages/console-shared/src/utils/error-modal-handler.tsx

SyncErrorModalLauncher - Component that syncs the launcher for non-React contexts

useErrorModalLauncher() - Hook for launching error modals from React components

launchErrorModal() - Function for launching from non-React contexts (callbacks, promises)

Test Coverage

packages/console-shared/src/utils/__tests__/error-modal-handler.spec.tsx

Unit tests covering all scenarios (5 tests, all passing)

Tests lifecycle (mount/unmount)

Tests error handling (uninitialized launcher)

packages/console-shared/src/utils/__mocks__/error-modal-handler.tsx

Mock utilities for testing components that use the error modal launcher

Single Initialization Point

public/components/app.tsx

Added <SyncErrorModalLauncher /> inside OverlayProvider

Single initialization point for the entire application

Migrated to New API

Updated to use launchErrorModal in:

topology: componentUtils.ts, edgeActions.ts, moveNodeToGroup.tsx

knative-plugin: knativeComponentUtils.ts, create-connector-utils.ts

shipwright-plugin: logs-utils.ts

dev-console: pipeline-template-utils.ts

Cleanup

Removed deprecated errorModal function from public/components/modals

Updated exports in console-shared package

Benefits

✅ Eliminates global state race conditions - Single initialization point in app root

✅ Improves testability - OverlayProvider context can be mocked in tests

✅ No code duplication - Shared utility used across all packages

✅ Reuses existing infrastructure - No new providers, uses existing OverlayProvider

✅ Simpler architecture - No unnecessary provider nesting

✅ Type-safe - Full TypeScript support with proper generics

✅ Proper lifecycle - Cleanup on unmount via useEffect

✅ Backward compatible - Non-React code continues to work via module reference

✅ Comprehensive test coverage - 5 unit tests covering all scenarios

Test Plan

Automated Tests

✅ Unit tests pass (5/5 tests)

✅ TypeScript compilation succeeds

✅ ESLint passes

✅ Pre-commit hooks pass

Manual Testing

Test topology drag/drop operations that trigger errors

Test BuildRun log viewing with error conditions

Test Git import flow with route exposure errors

Test deploy image flow with pipeline trigger errors

Verify no console errors when error modals are triggered

Test error modal from React component using useErrorModalLauncher() hook

Test error modal from promise chain using launchErrorModal() function

Technical Details

Hybrid Approach

The implementation uses a hybrid pattern to support both React and non-React code:

React Components: Call useErrorModalLauncher() hook which directly uses useOverlay()

Non-React Code: Call launchErrorModal() function which accesses a module-level reference

Sync Component: SyncErrorModalLauncher syncs the launcher to the module-level variable

This approach:

Eliminates the need for a custom Context provider

Reuses the existing OverlayProvider infrastructure

Supports both React hooks and imperative API calls

Has proper cleanup via React lifecycle

Migration from Global State

Before:

No shared utility

Each package implemented its own error modal handling

Inconsistent patterns across codebase

After:

Single initialization point (app.tsx)

React Context-based (via OverlayProvider)

Proper cleanup on unmount

Easy to test with mocks

Consistent API across all packages

Related

Jira: CONSOLE-5012

Follow-up PR: [WIP] CONSOLE-5012: Migrate confirmModal to overlay pattern #15948 (uses same React Context pattern for confirmModal)

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

- Add error-modal-handler.tsx to console-shared package with: - SyncErrorModalLauncher - Zero-render component that syncs launcher for non-React contexts - useErrorModalLauncher() - Hook for launching error modals from React components - launchErrorModal() - Function for launching from non-React contexts (callbacks, promises) - Add SyncErrorModalLauncher to app.tsx inside OverlayProvider - Single initialization point for the entire application - Reuses existing OverlayProvider instead of creating new context - Migrate packages to use launchErrorModal: - topology: componentUtils.ts, edgeActions.ts - knative-plugin: knativeComponentUtils.ts, create-connector-utils.ts - shipwright-plugin: logs-utils.ts - dev-console: pipeline-template-utils.ts - Update moveNodeToGroup.tsx to support error handling: - Add setMoveNodeToGroupErrorHandler() for managing error handler - Add useSetupMoveNodeToGroupErrorHandler() hook for Topology component - Update moveNodeToGroup() to accept optional onError callback - Deprecate useMoveNodeToGroup() hook - Add comprehensive test coverage: - error-modal-handler.spec.tsx - 5 unit tests covering all scenarios - __mocks__/error-modal-handler.tsx - Mock utilities for testing - Remove deprecated errorModal() function from public/components/modals This establishes a React Context-based pattern for error modals that eliminates global state race conditions, improves testability, and provides a consistent API across all packages. The hybrid approach supports both React hooks and imperative API calls via module-level reference with proper cleanup via React lifecycle. Co-Authored-By: Claude Sonnet 4.5 <[email protected]>

openshift-ci-robot · 2026-02-03T14:53:08Z

@rhamilto: This pull request references CONSOLE-5012 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

Creates a shared error modal launcher utility in the console-shared package using React Context to eliminate code duplication and ensure error modals work correctly across all contexts (topology, standalone pages, import flows).

Note: This PR builds on:

CONSOLE-5012: Migrate delete modals and PVC modals to overlay pattern #15932 (PVC modals, delete-modal, configure-update-strategy-modal, configure-ns-pull-secret-modal, configure-cluster-upstream-modal)

CONSOLE-5012: Migrate modals to overlay pattern #15939 (managed-resource-save-modal, rollback-modal)

CONSOLE-5012: Additional modal migrations to overlay pattern #15940 (additional modal migration)

Architecture

React Context Pattern

This implementation reuses the existing OverlayProvider instead of creating a new context provider:
<OverlayProvider>
 <SyncErrorModalLauncher />  {/* Zero-render sync component */}
 <App />
</OverlayProvider>
Dual API for Different Contexts

React Components - Use the hook:
const launchErrorModal = useErrorModalLauncher();
launchErrorModal({ title: 'Error', error: err.message });
Non-React Code (callbacks, promises, utilities) - Use the function:
createConnection(source, target).catch(err => {
 launchErrorModal({ title: 'Failed', error: err.message });
});
Changes

New Shared Utility

packages/console-shared/src/utils/error-modal-handler.tsx

SyncErrorModalLauncher - Component that syncs the launcher for non-React contexts

useErrorModalLauncher() - Hook for launching error modals from React components

launchErrorModal() - Function for launching from non-React contexts (callbacks, promises)

Test Coverage

packages/console-shared/src/utils/__tests__/error-modal-handler.spec.tsx

Unit tests covering all scenarios (5 tests, all passing)

Tests lifecycle (mount/unmount)

Tests error handling (uninitialized launcher)

packages/console-shared/src/utils/__mocks__/error-modal-handler.tsx

Mock utilities for testing components that use the error modal launcher

Single Initialization Point

public/components/app.tsx

Added <SyncErrorModalLauncher /> inside OverlayProvider

Single initialization point for the entire application

Topology Move Node Error Handling

packages/topology/src/utils/moveNodeToGroup.tsx

Added setMoveNodeToGroupErrorHandler() for managing error handler

Added useSetupMoveNodeToGroupErrorHandler() hook called in Topology component

Updated moveNodeToGroup() to accept optional onError callback

Deprecated useMoveNodeToGroup() hook

packages/topology/src/components/graph-view/Topology.tsx

Added useSetupMoveNodeToGroupErrorHandler() call to initialize error handling

Note: This uses a global handler pattern instead of React Context. A follow-up PR (#15948) will refactor this to use the same React Context pattern as the error modal handler.

Migrated to New API

Updated to use launchErrorModal in:

topology: componentUtils.ts, edgeActions.ts

knative-plugin: knativeComponentUtils.ts, create-connector-utils.ts

shipwright-plugin: logs-utils.ts

dev-console: pipeline-template-utils.ts

Cleanup

Removed deprecated errorModal function from public/components/modals

Updated exports in console-shared package

Benefits

✅ Eliminates global state race conditions - Single initialization point in app root

✅ Improves testability - OverlayProvider context can be mocked in tests

✅ No code duplication - Shared utility used across all packages

✅ Reuses existing infrastructure - No new providers, uses existing OverlayProvider

✅ Simpler architecture - No unnecessary provider nesting

✅ Type-safe - Full TypeScript support with proper generics

✅ Proper lifecycle - Cleanup on unmount via useEffect

✅ Backward compatible - Non-React code continues to work via module reference

✅ Comprehensive test coverage - 5 unit tests covering all scenarios

Test Plan

Automated Tests

✅ Unit tests pass (5/5 tests)

✅ TypeScript compilation succeeds

✅ ESLint passes

✅ Pre-commit hooks pass

Manual Testing

Test topology drag/drop operations that trigger errors

Test BuildRun log viewing with error conditions

Test Git import flow with route exposure errors

Test deploy image flow with pipeline trigger errors

Verify no console errors when error modals are triggered

Test error modal from React component using useErrorModalLauncher() hook

Test error modal from promise chain using launchErrorModal() function

Test topology node move operations with error handling

Technical Details

Hybrid Approach

The implementation uses a hybrid pattern to support both React and non-React code:

React Components: Call useErrorModalLauncher() hook which directly uses useOverlay()

Non-React Code: Call launchErrorModal() function which accesses a module-level reference

Sync Component: SyncErrorModalLauncher syncs the launcher to the module-level variable

This approach:

Eliminates the need for a custom Context provider

Reuses the existing OverlayProvider infrastructure

Supports both React hooks and imperative API calls

Has proper cleanup via React lifecycle

Migration Path

Before:

No shared utility

Each package implemented its own error modal handling

Inconsistent patterns across codebase

Direct imports of deprecated errorModal function

After:

Single initialization point (app.tsx)

React Context-based (via OverlayProvider)

Proper cleanup on unmount

Easy to test with mocks

Consistent API across all packages

Related

Jira: CONSOLE-5012

Follow-up PR: [WIP] CONSOLE-5012: Migrate confirmModal to overlay pattern #15948 (refactors moveNodeToGroup to use React Context pattern and migrates confirmModal)

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

…veNodeToGroup This commit completes the migration of confirmModal to the modern overlay pattern and refactors moveNodeToGroup to use React Context, eliminating global state race conditions and improving testability. ## Changes ### Removed deprecated confirmModal - Deleted confirm-modal.tsx and its imperative launcher - Removed confirmModal from modals/index.ts exports - Removed translation key from public.json ### Migrated to useWarningModal overlay pattern - Updated topology moveNodeToGroup to use useWarningModal with proper cancel handling - Updated StopNodeMaintenanceModal to remove imperative API, keeping only hook-based approach - Updated all metal3-plugin maintenance components to use hook-based approach - Fixed useWarningModal to properly call closeOverlay() and filter it from props spread ### Refactored moveNodeToGroup to use React Context - Created MoveNodeHandlersProvider using React Context pattern - Created SyncMoveNodeHandlers component to sync handlers for non-React contexts - Added useMoveNodeHandlers() hook for accessing handlers - Wrapped Topology component with MoveNodeHandlersProvider - Deprecated old useSetupMoveNodeToGroupHandlers hooks with warnings - Added comprehensive unit tests (8 tests covering all scenarios) ### Fixed accessibility violation - Blur active element before launching confirmation modal - Prevents focus from remaining on SVG elements in topology graph - Fixes browser warning: "Blocked aria-hidden on an element because its descendant retained focus" ## Benefits - Eliminates global state race conditions - Follows React Context pattern established in openshift#15946 - Improves testability with mockable context - Single provider initialization around Topology component - Proper cleanup via React lifecycle - Type-safe with clear error messages - Maintains backward compatibility via deprecated hooks - Resolves accessibility violations with aria-hidden elements The hybrid approach (Context + module reference) supports both React components (via useMoveNodeHandlers hook) and non-React drag-drop callbacks (via moveNodeToGroup function), consistent with the error modal handler pattern. Co-Authored-By: Claude Sonnet 4.5 <[email protected]>

openshift-ci · 2026-02-03T15:27:12Z

@rhamilto: 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/images	`ed87acf`	link	true	`/test images`
ci/prow/e2e-gcp-console	`ed87acf`	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.

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 Jan 22, 2026

openshift-ci-robot added the jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. label Jan 22, 2026

openshift-ci bot added the component/core Related to console core functionality label Jan 22, 2026

rhamilto marked this pull request as ready for review January 23, 2026 15:17

openshift-ci bot requested review from jhadvig and krishagarwal278 January 23, 2026 15:17

rhamilto changed the title ~~WIP: CONSOLE-5012: Create shared global error modal launcher utility~~ [WIP] CONSOLE-5012: Create shared global error modal launcher utility Jan 23, 2026

rhamilto force-pushed the CONSOLE-5012-4 branch from ace764a to 0bbf1a7 Compare January 23, 2026 15:19

rhamilto force-pushed the CONSOLE-5012-4 branch from 0bbf1a7 to cd8a85e Compare January 23, 2026 20:28

openshift-ci bot added the kind/i18n Indicates issue or PR relates to internationalization or has content that needs to be translated label Jan 23, 2026

rhamilto mentioned this pull request Jan 23, 2026

[WIP] CONSOLE-5012: Migrate confirmModal to overlay pattern #15948

Open

15 tasks

rhamilto force-pushed the CONSOLE-5012-4 branch from d5aa79b to 6f9a46a Compare January 27, 2026 20:38

rhamilto force-pushed the CONSOLE-5012-4 branch from 6f9a46a to f071fd2 Compare January 28, 2026 16:22

openshift-ci bot assigned vojtechszocs and yanpzhan Feb 2, 2026

openshift-ci bot added px-approved Signifies that Product Support has signed off on this PR docs-approved Signifies that Docs has signed off on this PR labels Feb 2, 2026

rhamilto changed the title ~~[WIP] CONSOLE-5012: Create shared global error modal launcher utility~~ CONSOLE-5012: Create shared error modal launcher using React Context Feb 2, 2026

openshift-ci bot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Feb 2, 2026

rhamilto changed the title ~~CONSOLE-5012: Create shared error modal launcher using React Context~~ [WIP] CONSOLE-5012: Create shared error modal launcher using React Context Feb 2, 2026

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 Feb 2, 2026

openshift-merge-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Feb 3, 2026

rhamilto force-pushed the CONSOLE-5012-4 branch from 8f58f83 to ff66a27 Compare February 3, 2026 14:44

openshift-merge-robot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Feb 3, 2026

rhamilto force-pushed the CONSOLE-5012-4 branch from ff66a27 to ed87acf Compare February 3, 2026 14:52

[WIP] CONSOLE-5012: Create shared error modal launcher using React Context #15946

Are you sure you want to change the base?

[WIP] CONSOLE-5012: Create shared error modal launcher using React Context #15946

Conversation

rhamilto commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Architecture

React Context Pattern

Dual API for Different Contexts

Changes

New Shared Utility

Test Coverage

Single Initialization Point

Topology Move Node Error Handling

Migrated to New API

Cleanup

Benefits

Test Plan

Automated Tests

Manual Testing

Technical Details

Hybrid Approach

Migration Path

Related

Uh oh!

openshift-ci-robot commented Jan 22, 2026 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

New Shared Utility

Migrated Packages

Launcher Initialization

Cleanup

Benefits

Test plan

Related

Uh oh!

openshift-ci bot commented Jan 22, 2026

Uh oh!

openshift-ci-robot commented Jan 22, 2026 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

New Shared Utility

Migrated Packages

Launcher Initialization

Cleanup

Benefits

Test plan

Related

Uh oh!

openshift-ci bot commented Jan 22, 2026

Uh oh!

openshift-ci-robot commented Jan 23, 2026 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

New Shared Utility

Migrated Packages

Launcher Initialization

Cleanup

Benefits

Test plan

Related

Uh oh!

openshift-ci-robot commented Jan 23, 2026 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

New Shared Utility

Migrated Packages

Launcher Initialization

Cleanup

Benefits

Test plan

Related

Uh oh!

openshift-ci-robot commented Jan 23, 2026 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

rhamilto commented Jan 22, 2026 •

edited

Loading

openshift-ci-robot commented Jan 22, 2026 •

edited by openshift-ci bot

Loading

openshift-ci-robot commented Jan 22, 2026 •

edited by openshift-ci bot

Loading

openshift-ci-robot commented Jan 23, 2026 •

edited by openshift-ci bot

Loading

openshift-ci-robot commented Jan 23, 2026 •

edited by openshift-ci bot

Loading

openshift-ci-robot commented Jan 23, 2026 •

edited by openshift-ci bot

Loading

openshift-ci-robot commented Feb 2, 2026 •

edited by openshift-ci bot

Loading

openshift-ci-robot commented Feb 3, 2026 •

edited by openshift-ci bot

Loading