import { EuiFlyout , EuiFlyoutHeader , EuiTitle , EuiFlyoutBody } from '@elastic/eui' ; import React from 'react' ; import styled from 'styled-components' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { LiveQuery } from '../../live_queries' ; import { useFormData } from '../../shared_imports' ; const StyledEuiFlyoutHeader = styled ( EuiFlyoutHeader ) `
  &.euiFlyoutHeader.euiFlyoutHeader--hasBorder {
    padding-top: 21px;
    padding-bottom: 20px;
  }
` ; interface PlaygroundFlyoutProps { enabled ? : boolean ; onClose : ( ) => void ; } const PlaygroundFlyoutComponent = ( { enabled , onClose } ) => { const [ { query , ecs_mapping , savedQueryId } ] = useFormData ( { watch : [ 'query' , 'ecs_mapping' , 'savedQueryId' ] , } ) ; return ( < EuiFlyout type = "push" size = "m" onClose = { onClose } > < StyledEuiFlyoutHeader hasBorder > < EuiTitle size = "s" > < h5 > < FormattedMessage id = "xpack.osquery.queryPlaygroundFlyout.title" defaultMessage = "Test query" / > < /h5> < /EuiTitle> < /StyledEuiFlyoutHeader> < EuiFlyoutBody > < LiveQuery enabled = { enabled } formType = "simple" query = { query } ecs_mapping = { ecs_mapping } savedQueryId = { savedQueryId } queryField = { false } ecsMappingField = { false } / > < /EuiFlyoutBody> < /EuiFlyout>); } ; export const PlaygroundFlyout = React . memo ( PlaygroundFlyoutComponent ) ;