import React , { Fragment , FC , useState , useContext } from 'react' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { EuiFlyout , EuiFlyoutFooter , EuiFlexGroup , EuiFlexItem , EuiButtonEmpty , EuiFlyoutBody , } from '@elastic/eui' ; import { JobCreatorContext } from '../../job_creator_context' ; import { DatafeedPreview } from './datafeed_preview' ; export enum EDITOR_MODE { HIDDEN , READONLY , EDITABLE } interface Props { isDisabled : boolean ; } export const DatafeedPreviewFlyout = ( { isDisabled } ) => { const { jobCreator } = useContext ( JobCreatorContext ) ; const [ showFlyout , setShowFlyout ] = useState ( false ) ; function toggleFlyout ( ) { setShowFlyout ( ! showFlyout ) ; } return ( < Fragment > < FlyoutButton onClick = { toggleFlyout } isDisabled = { isDisabled } / > { showFlyout === true && isDisabled === false && ( < EuiFlyout onClose = { ( ) => setShowFlyout ( false ) } hideCloseButton size = "m" > < EuiFlyoutBody > < DatafeedPreview combinedJob = { { ... jobCreator . jobConfig , datafeed_config : jobCreator . datafeedConfig , } } /> < /EuiFlyoutBody> < EuiFlyoutFooter > < EuiFlexGroup justifyContent = "spaceBetween" > < EuiFlexItem grow = { false } > < EuiButtonEmpty iconType = "cross" onClick = { ( ) => setShowFlyout ( false ) } flush = "left" > < FormattedMessage id = "xpack.ml.newJob.wizard.datafeedPreviewFlyout.closeButton" defaultMessage = "Close" / > < /EuiButtonEmpty> < /EuiFlexItem> < /EuiFlexGroup> < /EuiFlyoutFooter> < /EuiFlyout>)} < /Fragment>); } ; const FlyoutButton = ( { isDisabled , onClick } ) => { return ( < EuiButtonEmpty onClick = { onClick } isDisabled = { isDisabled } data - test - subj = "mlJobWizardButtonPreviewJobJson" > < FormattedMessage id = "xpack.ml.newJob.wizard.datafeedPreviewFlyout.showButton" defaultMessage = "Datafeed preview" / > < /EuiButtonEmpty>); } ;