Description

The MigrationsRow component in the Migrations tab crashes with React error #130 ("Element type is invalid: expected a string or class/function but got: undefined") when a VirtualMachineInstanceMigration has a phase that is not mapped in iconMapper.

Root Cause

In MigrationsRow.tsx, the StatusIcon is resolved via:

const StatusIcon = iconMapper?.[migrationPhase];

If migrationPhase is not a key in iconMapper, StatusIcon is undefined. It is then passed to GenericStatus from @openshift-console/dynamic-plugin-sdk:

<GenericStatus Icon={StatusIcon} title={migrationPhase} />

GenericStatus unconditionally renders <Icon /> (line 21 of GenericStatus.js in the SDK), which causes React to crash when Icon is undefined.

Affected Files

• src/views/clusteroverview/MigrationsTab/components/MigrationsTable/MigrationsRow.tsx
• src/views/clusteroverview/MigrationsTab/components/MigrationsTable/utils/statuses.ts

Suggested Fix

Guard the Icon prop so it is only passed when StatusIcon is defined:

<GenericStatus {...(StatusIcon && { Icon: StatusIcon })} title={migrationPhase} />

Alternatively, ensure iconMapper has a fallback for unknown phases (e.g. default to UnknownIcon).

Steps to Reproduce

1. Navigate to the Cluster Overview > Migrations tab
2. Have a migration with an unmapped phase (or a phase that returns undefined from iconMapper)
3. Observe the React error #130 crash in the console

Expected Behavior

The component should render gracefully for any migration phase, showing a fallback icon for unmapped phases.

Actual Behavior

React crashes with error #130, rendering nothing for the affected row.