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

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 Shared Pattern

packages/topology/src/utils/moveNodeToGroup.tsx

Migrated from custom globalErrorHandler to shared launchErrorModal()
Removed setMoveNodeToGroupErrorHandler() and useSetupMoveNodeToGroupErrorHandler()
Removed deprecated useMoveNodeToGroup() hook
Now uses consistent pattern with rest of codebase

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

Removed useSetupMoveNodeToGroupErrorHandler() initialization (no longer needed)

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
Removed redundant resetErrorModalMocks() helper from mock file
Updated exports in console-shared package

Benefits

✅ Eliminates global state race conditions - Single initialization point in app root
✅ Consistent pattern across codebase - All error modals use the same shared utility
✅ 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 or custom error handlers
✅ 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 (custom global handlers, direct imports)
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
No custom error handler patterns

Summary by CodeRabbit

New Features
- Added improved error modal handling system with enhanced initialization and non-React context support
- Added new error message for connector deletion workflows
Bug Fixes
- Enhanced error handling in drag-and-drop and routing operations to use centralized launcher
Tests
- Added comprehensive test coverage for new error modal utilities and handlers
Refactor
- Migrated error modal usage across multiple components to use new centralized launcher
- Removed deprecated error modal implementation in favor of new handler

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

@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: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-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 <noreply@anthropic.com>

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 <noreply@anthropic.com>

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

/retest

openshift-ci-robot · 2026-02-03T19:33:41Z

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

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 Shared Pattern

packages/topology/src/utils/moveNodeToGroup.tsx

Migrated from custom globalErrorHandler to shared launchErrorModal()

Removed setMoveNodeToGroupErrorHandler() and useSetupMoveNodeToGroupErrorHandler()

Removed deprecated useMoveNodeToGroup() hook

Now uses consistent pattern with rest of codebase

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

Removed useSetupMoveNodeToGroupErrorHandler() initialization (no longer needed)

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

Removed redundant resetErrorModalMocks() helper from mock file

Updated exports in console-shared package

Benefits

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

✅ Consistent pattern across codebase - All error modals use the same shared utility

✅ 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 or custom error handlers

✅ 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 (custom global handlers, direct imports)

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

No custom error handler patterns

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.

…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. - Deleted confirm-modal.tsx and its imperative launcher - Removed confirmModal from modals/index.ts exports - Removed translation key from public.json - 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 - 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) - 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" - 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 <noreply@anthropic.com>

rhamilto · 2026-02-04T13:11:51Z

/retest

vojtechszocs · 2026-02-04T19:51:28Z

/lgtm

rhamilto · 2026-02-04T19:52:24Z

@yanpzhan, this is ready for verification when you are.

frontend/packages/console-shared/src/utils/index.ts

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

- 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 <noreply@anthropic.com>

logonoff · 2026-02-04T20:02:05Z

/lgtm

openshift-ci · 2026-02-04T20:03:24Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff, rhamilto, vojtechszocs

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~~ [logonoff,rhamilto,vojtechszocs]

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-02-04T20:04:17Z

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

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 Shared Pattern

packages/topology/src/utils/moveNodeToGroup.tsx

Migrated from custom globalErrorHandler to shared launchErrorModal()

Removed setMoveNodeToGroupErrorHandler() and useSetupMoveNodeToGroupErrorHandler()

Removed deprecated useMoveNodeToGroup() hook

Now uses consistent pattern with rest of codebase

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

Removed useSetupMoveNodeToGroupErrorHandler() initialization (no longer needed)

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

Removed redundant resetErrorModalMocks() helper from mock file

Updated exports in console-shared package

Benefits

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

✅ Consistent pattern across codebase - All error modals use the same shared utility

✅ 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 or custom error handlers

✅ 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 (custom global handlers, direct imports)

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

No custom error handler patterns

Related

Jira: CONSOLE-5012

🤖 Generated with Claude Code

Summary by CodeRabbit

New Features

Added improved error modal handling system with enhanced initialization and non-React context support

Added new error message for connector deletion workflows

Bug Fixes

Enhanced error handling in drag-and-drop and routing operations to use centralized launcher

Tests

Added comprehensive test coverage for new error modal utilities and handlers

Refactor

Migrated error modal usage across multiple components to use new centralized launcher

Removed deprecated error modal implementation in favor of new handler

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 · 2026-02-04T20:05:39Z

📝 Walkthrough

Walkthrough

This change introduces a new centralized error modal handler utility providing both React and non-React interfaces for error modal launching. A new SyncErrorModalLauncher React component initializes the handler within the app's provider tree, while useErrorModalLauncher hook and launchErrorModal function accommodate React and non-React contexts respectively. The deprecated errorModal launcher is removed from the public API, and all existing call sites across multiple packages migrate to the new launchErrorModal function. The moveNodeToGroup utility gains an optional onError callback for custom error handling. New test coverage and mock implementations support the refactoring.

🚥 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 clearly summarizes the main objective: introducing a shared error modal launcher utility leveraging React Context for centralized modal handling.
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.}

…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. - Deleted confirm-modal.tsx and its imperative launcher - Removed confirmModal from modals/index.ts exports - Removed translation key from public.json - 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 - 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) - 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" - 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 <noreply@anthropic.com>

rhamilto · 2026-02-05T12:51:06Z

/retest

rhamilto · 2026-02-05T13:14:19Z

/retest

openshift-ci · 2026-02-05T18:13:42Z

@rhamilto: all tests passed!

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.

yanpzhan · 2026-02-10T07:21:04Z

Regression test passed on cluster launched against the pr.
/verified by yanpzhan

openshift-ci-robot · 2026-02-10T07:21:16Z

@yanpzhan: This PR has been marked as verified by yanpzhan.

Details

In response to this:

Regression test passed on cluster launched against the pr.
/verified by yanpzhan

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

openshift-ci bot added the do-not-merge/work-in-progress 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

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

16 tasks

rhamilto force-pushed the CONSOLE-5012-4 branch from cd8a85e to d5aa79b Compare January 26, 2026 14:44

rhamilto force-pushed the CONSOLE-5012-4 branch from ed87acf to 9360bd7 Compare February 3, 2026 19:32

rhamilto changed the title ~~[WIP] CONSOLE-5012: Create shared error modal launcher using React Context~~ CONSOLE-5012: Create shared error modal launcher using React Context Feb 3, 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 3, 2026

rhamilto mentioned this pull request Feb 4, 2026

CONSOLE-5012: Migrate remaining modals to useOverlay pattern #15990

Open

12 tasks

openshift-ci bot added the lgtm Indicates that a PR is ready to be merged. label Feb 4, 2026

logonoff reviewed Feb 4, 2026

View reviewed changes

frontend/packages/console-shared/src/utils/index.ts Outdated Show resolved Hide resolved

logonoff reviewed Feb 4, 2026

View reviewed changes

frontend/packages/console-shared/src/utils/error-modal-handler.tsx Show resolved Hide resolved

rhamilto force-pushed the CONSOLE-5012-4 branch from 9360bd7 to ca5fb20 Compare February 4, 2026 20:01

openshift-ci bot removed the lgtm Indicates that a PR is ready to be merged. label Feb 4, 2026

openshift-ci bot assigned logonoff Feb 4, 2026

openshift-ci bot added the lgtm Indicates that a PR is ready to be merged. label Feb 4, 2026

openshift-ci-robot added the verified Signifies that the PR passed pre-merge verification criteria label Feb 10, 2026

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

Are you sure you want to change the base?

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

Conversation

rhamilto commented Jan 22, 2026 • edited by coderabbitai bot 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

Migrated to Shared Pattern

Migrated to New API

Cleanup

Benefits

Test Plan

Automated Tests

Manual Testing

Technical Details

Hybrid Approach

Migration Path

Related

Summary by CodeRabbit

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-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!

Summary

rhamilto commented Jan 22, 2026 •

edited by coderabbitai bot

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 3, 2026 •

edited by openshift-ci bot

Loading

openshift-ci-robot commented Feb 4, 2026 •

edited by openshift-ci bot

Loading