import { EuiSelect } from '@elastic/eui' ; import React , { FormEvent , useCallback } from 'react' ; import { useHistory } from 'react-router-dom' ; import styled from 'styled-components' ; import { useApmServiceContext } from '../../context/apm_service/use_apm_service_context' ; import { useBreakpoints } from '../../hooks/use_breakpoints' ; import * as urlHelpers from './links/url_helpers' ; const EuiSelectWithWidth = styled ( EuiSelect ) `
  min-width: 200px;
` ; export function TransactionTypeSelect ( ) { const { isSmall } = useBreakpoints ( ) ; const { transactionTypes , transactionType } = useApmServiceContext ( ) ; const history = useHistory ( ) ; const handleChange = useCallback ( ( event ) => { const selectedTransactionType = event . currentTarget . value ; urlHelpers . push ( history , { query : { transactionType : selectedTransactionType } , } ) ; } , [ history ] ) ; const options = transactionTypes . map ( ( t ) => ( { text : t , value : t } ) ) ; return ( < > < EuiSelectWithWidth fullWidth = { isSmall } data - test - subj = "headerFilterTransactionType" onChange = { handleChange } options = { options } value = { transactionType } / > < />); }