import React from 'react' ; import { useActions } from 'kea' ; import { EuiFlyoutHeader , EuiTitle , EuiFlyoutBody , EuiFlyoutFooter , EuiButtonEmpty , } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { CANCEL_BUTTON_LABEL } from '../../../../shared/constants' ; import { FLYOUT_ARIA_LABEL_ID } from '../constants' ; import { DocumentCreationLogic , DocumentCreationButtons } from '../index' ; export const ShowCreationModes = ( ) => { const { closeDocumentCreation } = useActions ( DocumentCreationLogic ) ; return ( < > < EuiFlyoutHeader hasBorder > < EuiTitle size = "m" > < h2 id = { FLYOUT_ARIA_LABEL_ID } > { i18n . translate ( 'xpack.enterpriseSearch.appSearch.documentCreation.showCreationModes.title' , { defaultMessage : 'Add new documents' } ) } < /h2> < /EuiTitle> < /EuiFlyoutHeader> < EuiFlyoutBody > < DocumentCreationButtons /> < /EuiFlyoutBody> < EuiFlyoutFooter > < EuiButtonEmpty onClick = { closeDocumentCreation } > { CANCEL_BUTTON_LABEL } < /EuiButtonEmpty> < /EuiFlyoutFooter> < />); } ;