[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

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

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

This commit refactors configure-update-strategy-modal to use the OverlayComponent pattern, eliminating createModalLauncher. Changes: - Refactored configure-update-strategy-modal.tsx to use OverlayComponent - Added ConfigureUpdateStrategyModalProvider with ModalWrapper - Added LazyConfigureUpdateStrategyModalProvider with React.lazy() - Updated useDeploymentActions to use the new lazy provider - Removed deprecated configureUpdateStrategyModal from index.ts This change maintains backward compatibility through default exports and preserves lazy loading functionality. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

This commit migrates the configure namespace pull secret modal from the legacy createModalLauncher pattern to the new OverlayComponent pattern. Changes: - Exported ConfigureNamespacePullSecretModalProvider as OverlayComponent - Updated index.ts to lazy-load the modal provider - Modified namespace.jsx to use useOverlay hook instead of direct modal call Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

…tern This commit migrates the configure cluster upstream modal from the legacy createModalLauncher pattern to the new OverlayComponent pattern and fixes react-modal accessibility warnings. Changes: - Exported ConfigureClusterUpstreamModalProvider as OverlayComponent - Updated index.ts to lazy-load the modal provider - Modified details-page.tsx to use useOverlay hook instead of direct modal call - Removed unnecessary TFunction prop from modal type definition - Fixed react-modal warnings by using useLayoutEffect for global app element setup - Added explicit appElement prop to ModalWrapper for robust timing handling Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

This commit migrates the managed resource save modal from the legacy createModalLauncher pattern to the new OverlayComponent pattern. Changes: - Exported ManagedResourceSaveModalProvider as OverlayComponent - Updated index.ts to lazy-load the modal provider - Modified edit-yaml.tsx to use useOverlay hook instead of direct modal call - Removed unnecessary 'kind' prop from modal invocation - Updated type definition to extend ModalComponentProps Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

The remove-user-modal was already replaced by useWarningModal in group.tsx and is no longer used anywhere in the codebase. Changes: - Deleted remove-user-modal.tsx - Removed LazyRemoveUserModalProvider export from index.ts Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

This commit migrates the ConfigureUnschedulableModal from the legacy createModalLauncher pattern to the new OverlayComponent pattern. Changes: - Exported ConfigureUnschedulableModalProvider as OverlayComponent - Updated modals/index.ts to lazy-load the modal provider - Modified useNodeActions hook to use useOverlay hook - Removed createModalLauncher usage Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

- Add error-modal-handler.ts to console-shared package with: - launchGlobalErrorModal() for launching modals from non-React contexts - useSetupGlobalErrorModalLauncher() hook for initialization - setGlobalErrorModalLauncher() for managing global state - Migrate all packages to use shared launcher: - topology: Update Topology.tsx, componentUtils.ts, edgeActions.ts - knative-plugin: Update knativeComponentUtils.ts, create-connector-utils.ts - shipwright-plugin: Update logs-utils.ts, BuildRunDetailsPage.tsx - dev-console: Update pipeline-template-utils.ts, ImportPage.tsx, DeployImagePage.tsx - Initialize launcher in root components: - topology: Topology.tsx (for topology drag/drop contexts) - shipwright-plugin: BuildRunDetailsPage.tsx (for standalone log viewing) - dev-console: ImportPage.tsx, DeployImagePage.tsx (for import flows) - Remove topology-specific errorModalHandler implementation - Remove deprecated errorModal function from public/components/modals This consolidates error modal launching into a single reusable utility, eliminating code duplication across packages and ensuring error modals work correctly in all contexts (topology, standalone pages, import flows). Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

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

This commit refactors the global error modal launcher implementation to use React Context instead of module-level global state, addressing architectural concerns about race conditions and testability. The implementation reuses the existing OverlayProvider instead of creating a separate provider, using a lightweight sync component to bridge React and non-React contexts. Changes: - Refactored error-modal-handler to use OverlayProvider directly - Created SyncErrorModalLauncher - zero-render component to sync module variable - Added useErrorModalLauncher() hook that wraps useOverlay() - Added launchErrorModal() function for non-React contexts (callbacks, utilities) - Renamed launchGlobalErrorModal → launchErrorModal - Removed useSetupGlobalErrorModalLauncher() initialization hook - Added SyncErrorModalLauncher to app.tsx inside OverlayProvider - Removed initialization calls from Topology.tsx, ImportPage.tsx, DeployImagePage.tsx, and BuildRunDetailsPage.tsx Benefits: - Eliminates global state race conditions - Improves testability (overlay context can be mocked) - Single initialization point in app root - Reuses existing OverlayProvider infrastructure - No unnecessary provider nesting - Simpler architecture with fewer concepts - Maintains backward compatibility for non-React contexts via module reference - Proper lifecycle management via useEffect cleanup The hybrid approach ensures both React components (via useErrorModalLauncher hook) and non-React utilities (via launchErrorModal function) can launch error modals. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

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

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

openshift-ci · 2026-02-02T23:55:02Z

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

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

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

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

/retest

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

13 tasks

rhamilto and others added 9 commits January 28, 2026 11:09

CONSOLE-5012: Migrate DeletePDBModal to overlay pattern

d2f9962

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

CONSOLE-5012: Migrate ResourceLimitsModal to overlay pattern

eab5b4c

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

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

[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

Uh oh!

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

Removed Multiple Initialization Points

Migrated to New API

Cleanup

Benefits

Test Plan

Automated Tests

Manual Testing

Technical Details

Hybrid Approach

Migration from Global State

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.

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