import React , { ReactNode , useState } from 'react' ; import { EuiButton , EuiButtonEmpty , EuiFieldText , EuiFormRow , EuiModal , EuiModalBody , EuiModalFooter , EuiModalHeader , EuiModalHeaderTitle , EuiSpacer , EuiText , } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { CANCEL_BUTTON_LABEL } from '../../../../shared/constants' ; interface GenericConfirmationModalProps { description : ReactNode ; subheading : ReactNode ; target : string ; title : string ; onClose ( ) : void ; onSave ( ) : void ; } export const GenericConfirmationModal = ( { description , onClose , onSave , subheading , target , title , } ) => { const [ inputValue , setInputValue ] = useState ( '' ) ; const onConfirm = ( ) => { setInputValue ( '' ) ; onSave ( ) ; } ; return ( < EuiModal onClose = { onClose } initialFocus = ".euiFieldText" aria - label = { title } > < EuiModalHeader > < EuiModalHeaderTitle > { title } < /EuiModalHeaderTitle> < /EuiModalHeader> < EuiModalBody > < EuiText > < p > < strong > { subheading } < /strong> < /p> { description } < /EuiText> < EuiSpacer / > < EuiFormRow label = { i18n . translate ( 'xpack.enterpriseSearch.appSearch.settings.logRetention.modal.prompt' , { defaultMessage : 'Type "{target}" to confirm.' , values : { target } , } ) } > < EuiFieldText data - test - subj = "GenericConfirmationModalInput" value = { inputValue } onChange = { ( e ) => setInputValue ( e . target . value ) } /> < /EuiFormRow> < /EuiModalBody> < EuiModalFooter > < EuiButtonEmpty data - test - subj = "GenericConfirmationModalCancel" onClick = { onClose } > { CANCEL_BUTTON_LABEL } < /EuiButtonEmpty> < EuiButton data - test - subj = "GenericConfirmationModalSave" onClick = { onConfirm } disabled = { inputValue . toLowerCase ( ) !== target . toLowerCase ( ) } > { i18n . translate ( 'xpack.enterpriseSearch.appSearch.settings.logRetention.modal.save' , { defaultMessage : 'Save setting' , } ) } < /EuiButton> < /EuiModalFooter> < /EuiModal>); } ;