import React , { useCallback , useMemo } from 'react' ; import { i18n } from '@kbn/i18n' ; export const filterForValueButtonLabel = i18n . translate ( 'xpack.observability.hoverActions.filterForValueButtonLabel' , { defaultMessage : 'Filter in' , } ) ; import { EuiButtonIcon , EuiButtonEmpty } from '@elastic/eui' ; interface FilterForValueProps { Component ? : typeof EuiButtonEmpty | typeof EuiButtonIcon ; field : string ; value : string [ ] | string | null | undefined ; addToQuery : ( value : string ) => void ; } const FilterForValueButton = React . memo ( ( { Component , field , value , addToQuery } ) => { const text = useMemo ( ( ) => `${ field }${ value != null ? `: "${ value }"` : '' }` , [ field , value ] ) ; const onClick = useCallback ( ( ) => { addToQuery ( text ) ; } , [ text , addToQuery ] ) ; const button = useMemo ( ( ) => Component ? ( < Component aria - label = { filterForValueButtonLabel } data - test - subj = "filterForValue" iconType = "plusInCircle" onClick = { onClick } title = { filterForValueButtonLabel } > { filterForValueButtonLabel } < /Component>) : (<EuiButtonIcon aria-label={filterForValueButtonLabel} className="timelines__hoverActionButton" data-test-subj="filterForValue" iconSize="s" iconType="plusInCircle" onClick={onClick}/ > ) , [ Component , onClick ] ) ; return button ; } ) ; FilterForValueButton . displayName = 'FilterForValueButton' ; export { FilterForValueButton as default } ;