import React , { memo , FC } from 'react' ; import { i18n } from '@kbn/i18n' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { EuiDescribedFormGroup , EuiFormRow } from '@elastic/eui' ; import { Validation } from '../../../../common/job_validator' ; interface Props { validation : Validation ; } export const Description = memo ( ( { children , validation } ) => { const title = i18n . translate ( 'xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.modelMemoryLimit.title' , { defaultMessage : 'Model memory limit' , } ) ; return ( < EuiDescribedFormGroup title = { < h3 > { title } < /h3>} description={<FormattedMessage id="xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.modelMemoryLimit.description" defaultMessage="Set an approximate upper limit for the amount of memory that can be used by the analytical models."/ > } > < EuiFormRow label = { title } error = { validation . message } isInvalid = { validation . valid === false } > < > { children } < /> < /EuiFormRow> < /EuiDescribedFormGroup>); } ) ;