import React from 'react' ; import { useValues } from 'kea' ; import { EuiFlexGroup , EuiSpacer , EuiEmptyPrompt } from '@elastic/eui' ; import { Results , Paging , ResultsPerPage } from '@elastic/react-search-ui' ; import { i18n } from '@kbn/i18n' ; import { Loading } from '../../../../shared/loading' ; import { EngineLogic } from '../../engine' ; import { Result } from '../../result/types' ; import { useSearchContextState } from './hooks' ; import { Pagination } from './pagination' ; import { ResultView } from './views' ; export const SearchExperienceContent = ( ) => { const { resultSearchTerm , totalResults , wasSearched } = useSearchContextState ( ) ; const { isMetaEngine , engine } = useValues ( EngineLogic ) ; if ( ! wasSearched ) return < Loading />; if ( totalResults ) { return ( < EuiFlexGroup direction = "column" gutterSize = "none" data - test - subj = "documentsSearchResults" > < Pagination aria - label = { i18n . translate ( 'xpack.enterpriseSearch.appSearch.documents.paging.ariaLabelTop' , { defaultMessage : 'Search results paging at top of results' , } ) } /> < EuiSpacer / > < Results titleField = "id" resultView = { ( { result } ) => { return ( < ResultView result = { result } schemaForTypeHighlights = { engine . schema } isMetaEngine = { isMetaEngine } / > ) ; } } /> < EuiSpacer / > < Pagination aria - label = { i18n . translate ( 'xpack.enterpriseSearch.appSearch.documents.paging.ariaLabelBottom' , { defaultMessage : 'Search results paging at bottom of results' , } ) } /> < /EuiFlexGroup>); } if ( resultSearchTerm ) { return ( < EuiEmptyPrompt data - test - subj = "documentsSearchNoResults" body = { i18n . translate ( 'xpack.enterpriseSearch.appSearch.documents.search.noResults' , { defaultMessage : 'No results for "{resultSearchTerm}" yet!' , values : { resultSearchTerm , } , } ) } / > ) ; } return null ; } ;