import React , { ReactElement , useState } from 'react' ; import { EuiButton } from '@elastic/eui' ; import { EuiContextMenuPanel } from '@elastic/eui' ; import { EuiPopover } from '@elastic/eui' ; import { FormattedMessage } from '@osd/i18n/react' ; interface Props { menuItems : ReactElement [ ] ; } export function SavedObjectFinderCreateNew ( { menuItems } ) { const [ isCreateMenuOpen , setCreateMenuOpen ] = useState ( false ) ; const toggleCreateMenu = ( ) => { setCreateMenuOpen ( ! isCreateMenuOpen ) ; } ; const closeCreateMenu = ( ) => { setCreateMenuOpen ( false ) ; } ; return ( < EuiPopover id = "createNew" button = { < EuiButton data - test - subj = "createNew" iconType = "plusInCircle" iconSide = "left" onClick = { toggleCreateMenu } fill > < FormattedMessage id = "embeddableApi.addPanel.createNewDefaultOption" defaultMessage = "Create new" / > < /EuiButton>} isOpen={isCreateMenuOpen} closePopover={closeCreateMenu} panelPaddingSize="none" anchorPosition="downRight"> < EuiContextMenuPanel items = { menuItems } / > < /EuiPopover>); }