import React , { FC } from 'react' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { EuiButton , EuiModal , EuiModalHeader , EuiModalHeaderTitle , EuiModalBody , EuiModalFooter , EuiButtonEmpty , } from '@elastic/eui' ; const MAX_MODAL_WIDTH = 1200 ; interface Props { onCreateClick ( ) : void ; closeModal ( ) : void ; saveEnabled : boolean ; } export const ModalWrapper = ( { onCreateClick , closeModal , saveEnabled , children } ) => { return ( < EuiModal onClose = { closeModal } maxWidth = { MAX_MODAL_WIDTH } data - test - subj = "mlCreateDetectorModal" > < EuiModalHeader > < EuiModalHeaderTitle > < FormattedMessage id = "xpack.ml.newJob.wizard.pickFieldsStep.advancedDetectorModal.title" defaultMessage = "Create detector" / > < /EuiModalHeaderTitle> < /EuiModalHeader> < EuiModalBody > { children } < /EuiModalBody> < EuiModalFooter > < EuiButtonEmpty onClick = { closeModal } data - test - subj = "mlCreateDetectorModalCancelButton" > < FormattedMessage id = "xpack.ml.newJob.wizard.pickFieldsStep.advancedDetectorModal.cancelButton" defaultMessage = "Cancel" / > < /EuiButtonEmpty> < EuiButton onClick = { onCreateClick } isDisabled = { saveEnabled === false } fill data - test - subj = "mlCreateDetectorModalSaveButton" > < FormattedMessage id = "xpack.ml.newJob.wizard.pickFieldsStep.advancedDetectorModal.saveButton" defaultMessage = "Save" / > < /EuiButton> < /EuiModalFooter> < /EuiModal>); } ;