import React , { useEffect } from 'react' ; import { useActions , useValues } from 'kea' ; import { EuiBasicTable , EuiBasicTableColumn } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { convertMetaToPagination , handlePageChange , } from '../../../../../../../shared/table_pagination' ; import { DataPanel } from '../../../../../data_panel' ; import { IgnoredQueriesLogic } from './ignored_queries_logic' ; export const IgnoredQueriesPanel = ( ) => { const { dataLoading , ignoredQueries , meta } = useValues ( IgnoredQueriesLogic ) ; const { allowIgnoredQuery , loadIgnoredQueries , onPaginate } = useActions ( IgnoredQueriesLogic ) ; useEffect ( ( ) => { loadIgnoredQueries ( ) ; } , [ meta . page . current ] ) ; const columns = [ { render : ( query ) => query , name : i18n . translate ( 'xpack.enterpriseSearch.appSearch.curations.ignoredSuggestionsPanel.queryColumnName' , { defaultMessage : 'Query' , } ) , } , { actions : [ { type : 'button' , name : i18n . translate ( 'xpack.enterpriseSearch.appSearch.curations.ignoredSuggestions.allowButtonLabel' , { defaultMessage : 'Allow' , } ) , description : i18n . translate ( 'xpack.enterpriseSearch.appSearch.curations.ignoredSuggestions.allowButtonDescription' , { defaultMessage : 'Enable suggestions for this query' , } ) , onClick : ( query ) => allowIgnoredQuery ( query ) , color : 'primary' , } , ] , } , ] ; return ( < DataPanel isLoading = { dataLoading } title = { < h2 > { i18n . translate ( 'xpack.enterpriseSearch.appSearch.curations.ignoredSuggestionsPanel.title' , { defaultMessage : 'Ignored queries' , } ) } < /h2>} subtitle={<span> { i18n . translate ( 'xpack.enterpriseSearch.appSearch.curations.ignoredSuggestionsPanel.description' , { defaultMessage : 'You won’t be notified about suggestions for these queries' , } ) } < /span>} iconType="eyeClosed" hasBorder> < EuiBasicTable items = { ignoredQueries } itemId = "query" columns = { columns } hasActions pagination = { { ... convertMetaToPagination ( meta ) , hidePerPageOptions : true , } } onChange = { handlePageChange ( onPaginate ) } / > < /DataPanel>); } ;