import React , { ChangeEvent } from 'react' ; import { useActions , useValues } from 'kea' ; import { EuiFieldSearch , EuiFlexGroup , EuiFlexItem } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { GroupsLogic } from '../groups_logic' ; import { TableFilterSourcesDropdown } from './table_filter_sources_dropdown' ; const FILTER_GROUPS_PLACEHOLDER = i18n . translate ( 'xpack.enterpriseSearch.workplaceSearch.groups.filterGroups.placeholder' , { defaultMessage : 'Filter groups by name...' , } ) ; export const TableFilters = ( ) => { const { setFilterValue } = useActions ( GroupsLogic ) ; const { filterValue } = useValues ( GroupsLogic ) ; const handleSearchChange = ( e ) => setFilterValue ( e . target . value ) ; return ( < EuiFlexGroup justifyContent = "spaceBetween" gutterSize = "none" > < EuiFlexItem grow = { false } > < EuiFlexGroup gutterSize = "m" > < EuiFlexItem className = "user-groups-filters__search-bar" > < EuiFieldSearch value = { filterValue } onChange = { handleSearchChange } fullWidth placeholder = { FILTER_GROUPS_PLACEHOLDER } / > < /EuiFlexItem> < EuiFlexItem className = "user-groups-filters__filter-sources" > < TableFilterSourcesDropdown /> < /EuiFlexItem> < /EuiFlexGroup> < /EuiFlexItem> < /EuiFlexGroup>); } ;