diff --git a/x-pack/solutions/security/plugins/security_solution/public/siem_migrations/common/components/header_buttons/index.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/siem_migrations/common/components/header_buttons/index.test.tsx index f78766e593373..7cb2553bf4ddd 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/siem_migrations/common/components/header_buttons/index.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/siem_migrations/common/components/header_buttons/index.test.tsx @@ -28,6 +28,37 @@ describe('HeaderButtons', () => { expect(getByTestId('siemMigrationsSelectMigrationButton')).toBeInTheDocument(); }); + it('marks only the option with the selected migration id as selected when names are duplicated', () => { + const [first, second] = getMigrationsStatsMock(); + const migrationsWithDuplicateNames = [ + { ...first, name: 'Same name', id: '1' }, + { ...second, name: 'Same name', id: '2' }, + ]; + + const { getByTestId } = render( + + + + ); + + const siemMigrationsSelectMigrationButton = getByTestId('siemMigrationsSelectMigrationButton'); + const comboBoxToggleListButton = within(siemMigrationsSelectMigrationButton).getByTestId( + 'comboBoxToggleListButton' + ); + fireEvent.click(comboBoxToggleListButton); + + const option1 = getByTestId('migrationSelectionOption-1'); + const option2 = getByTestId('migrationSelectionOption-2'); + + expect(option1).toHaveAttribute('aria-selected', 'true'); + expect(option2).toHaveAttribute('aria-selected', 'false'); + }); + it('calls onMigrationIdChange when a migration is selected', () => { const { getByTestId, getByText } = render( diff --git a/x-pack/solutions/security/plugins/security_solution/public/siem_migrations/common/components/header_buttons/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/siem_migrations/common/components/header_buttons/index.tsx index 5efbca8c07309..74e46939144c9 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/siem_migrations/common/components/header_buttons/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/siem_migrations/common/components/header_buttons/index.tsx @@ -31,6 +31,7 @@ export const SIEM_MIGRATIONS_SELECT_MIGRATION_BUTTON_ID = 'siemMigrationsSelectM const migrationStatsToComboBoxOption = ( stats: MigrationTaskStats ): EuiComboBoxOptionOption => ({ + key: stats.id, value: stats.id, label: stats.name, 'data-test-subj': `migrationSelectionOption-${stats.id}`, @@ -60,8 +61,10 @@ export const HeaderButtons: React.FC = React.memo( const migrationVendor = useMemo(() => selectedMigrationStats?.vendor, [selectedMigrationStats]); const selectedMigrationOption = useMemo>>(() => { - return selectedMigrationStats ? [migrationStatsToComboBoxOption(selectedMigrationStats)] : []; - }, [selectedMigrationStats]); + if (!selectedMigrationId) return []; + const selected = migrationOptions.find((opt) => opt.value === selectedMigrationId); + return selected ? [selected] : []; + }, [migrationOptions, selectedMigrationId]); const onChange = (selected: Array>) => { onMigrationIdChange(selected[0].value);