import React , { memo , FC } from 'react' ; import { i18n } from '@kbn/i18n' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { EuiDescribedFormGroup , EuiFormRow } from '@elastic/eui' ; export const Description = memo ( ( { children } ) => { const title = i18n . translate ( 'xpack.ml.newJob.wizard.pickFieldsStep.influencers.title' , { defaultMessage : 'Influencers' , } ) ; return ( < EuiDescribedFormGroup title = { < h3 > { title } < /h3>} description={<FormattedMessage id="xpack.ml.newJob.wizard.pickFieldsStep.influencers.description" defaultMessage="Select which categorical fields have influence on the results. Who/what might you 'blame' for an anomaly ? Recommend 1 - 3 influencers . "/>}> < EuiFormRow label = { title } > < > { children } < /> < /EuiFormRow> < /EuiDescribedFormGroup>); } ) ;