import React from 'react' ; import { EuiFormRow , EuiRadioGroup } from '@elastic/eui' ; import { RoleOptionLabel } from './role_option_label' ; interface RoleOption { id : string ; description : string ; disabled ? : boolean ; } interface Props { disabled ? : boolean ; roleType ? : string ; roleOptions : RoleOption [ ] ; label : string ; onChange ( id ) : void ; } export const RoleSelector = ( { label , roleType , roleOptions , onChange } ) => { const options = roleOptions . map ( ( { id , description , disabled } ) => ( { id , label : < RoleOptionLabel label = { id } description = { description } / > , disabled , } ) ) ; return ( < EuiFormRow > < EuiRadioGroup options = { options } idSelected = { roleOptions . filter ( ( r ) => r . id === roleType ) [ 0 ] . id } onChange = { ( id ) => { onChange ( id ) ; } } legend = { { children : < span > { label } < /span>, } } /> < /EuiFormRow>); } ;