import React , { useState } from 'react' ; import { EuiCopy , EuiButton , EuiButtonIcon , EuiSpacer , EuiCodeBlock , EuiPopover , } from '@elastic/eui' ; import { COPY_TEXT , STATUS_POPOVER_TOOLTIP } from '../../../constants' ; interface StatusItemProps { details : string [ ] ; } export const StatusItem = ( { details } ) => { const [ isPopoverOpen , setIsPopoverOpen ] = useState ( false ) ; const onButtonClick = ( ) => setIsPopoverOpen ( ( isOpen ) => ! isOpen ) ; const closePopover = ( ) => setIsPopoverOpen ( false ) ; const formattedDetails = details . join ( '\n' ) ; const popoverTrigger = ( < EuiButtonIcon onClick = { onButtonClick } color = "text" iconType = "questionInCircle" aria - label = { STATUS_POPOVER_TOOLTIP } />); const infoPopover = ( < EuiPopover button = { popoverTrigger } isOpen = { isPopoverOpen } closePopover = { closePopover } > < EuiCodeBlock language = "bash" fontSize = "m" paddingSize = "m" style = { { maxWidth : 300 } } isCopyable > { formattedDetails } < /EuiCodeBlock> < EuiSpacer size = "s" / > < EuiCopy textToCopy = { formattedDetails } > { ( copy ) => ( < EuiButton size = "s" iconType = "copy" onClick = { copy } > { COPY_TEXT } < /EuiButton>)} < /EuiCopy> < /EuiPopover>); return infoPopover ; } ;