import React , { useEffect } from 'react' ; import { useActions , useValues } from 'kea' ; import { EuiFlexGroup , EuiFlexItem , EuiButton , EuiButtonEmpty } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { SAVE_BUTTON_LABEL } from '../../../shared/constants' ; import { UnsavedChangesPrompt } from '../../../shared/unsaved_changes_prompt' ; import { RESTORE_DEFAULTS_BUTTON_LABEL } from '../../constants' ; import { getEngineBreadcrumbs } from '../engine' ; import { AppSearchPageTemplate } from '../layout' ; import { EmptyState } from './components' ; import { RESULT_SETTINGS_TITLE } from './constants' ; import { ResultSettingsTable } from './result_settings_table' ; import { SampleResponse } from './sample_response' ; import { ResultSettingsLogic } from '.' ; const CLEAR_BUTTON_LABEL = i18n . translate ( 'xpack.enterpriseSearch.appSearch.engine.resultSettings.clearButtonLabel' , { defaultMessage : 'Clear all values' } ) ; const UNSAVED_MESSAGE = i18n . translate ( 'xpack.enterpriseSearch.appSearch.engine.resultSettings.unsavedChangesMessage' , { defaultMessage : 'Result Settings have not been saved. Are you sure you want to leave?' } ) ; export const ResultSettings = ( ) => { const { dataLoading , schema , stagedUpdates , resultFieldsAtDefaultSettings , resultFieldsEmpty } = useValues ( ResultSettingsLogic ) ; const { initializeResultSettingsData , saveResultSettings , confirmResetAllFields , clearAllFields , } = useActions ( ResultSettingsLogic ) ; useEffect ( ( ) => { initializeResultSettingsData ( ) ; } , [ ] ) ; const hasSchema = Object . keys ( schema ) . length > 0 ; return ( < AppSearchPageTemplate pageChrome = { getEngineBreadcrumbs ( [ RESULT_SETTINGS_TITLE ] ) } pageHeader = { { pageTitle : RESULT_SETTINGS_TITLE , description : i18n . translate ( 'xpack.enterpriseSearch.appSearch.engine.resultSettings.pageDescription' , { defaultMessage : 'Enrich search results and select which fields will appear.' } ) , rightSideItems : hasSchema ? [ < EuiButton data - test - subj = "SaveResultSettings" color = "primary" fill onClick = { saveResultSettings } disabled = { resultFieldsEmpty || ! stagedUpdates } > { SAVE_BUTTON_LABEL } < /EuiButton>, < EuiButton data - test - subj = "ResetResultSettings" color = "danger" onClick = { confirmResetAllFields } disabled = { resultFieldsAtDefaultSettings } > { RESTORE_DEFAULTS_BUTTON_LABEL } < /EuiButton>, < EuiButtonEmpty data - test - subj = "ClearResultSettings" onClick = { clearAllFields } > { CLEAR_BUTTON_LABEL } < /EuiButtonEmpty>, ] : [ ] , } } isLoading = { dataLoading } isEmptyState = { ! hasSchema } emptyState = { < EmptyState / > } > < UnsavedChangesPrompt hasUnsavedChanges = { stagedUpdates } messageText = { UNSAVED_MESSAGE } / > < EuiFlexGroup alignItems = "flexStart" > < EuiFlexItem grow = { 5 } > < ResultSettingsTable /> < /EuiFlexItem> < EuiFlexItem grow = { 3 } > < SampleResponse /> < /EuiFlexItem> < /EuiFlexGroup> < /AppSearchPageTemplate>); } ;