import React , { FC } from 'react' ; import { i18n } from '@kbn/i18n' ; import { CodeEditor } from '../../../../../../../../../src/plugins/kibana_react/public' ; import { StepDefineFormHook } from '../step_define' ; export const AdvancedSourceEditor = ( { searchBar : { actions : { setSearchString } , } , advancedSourceEditor : { actions : { setAdvancedEditorSourceConfig , setAdvancedSourceEditorApplyButtonEnabled } , state : { advancedEditorSourceConfig , advancedEditorSourceConfigLastApplied } , } , } ) => { return ( < div data - test - subj = "transformAdvancedRuntimeMappingsEditor" > < CodeEditor height = { 250 } languageId = { 'json' } onChange = { ( d ) => { setSearchString ( undefined ) ; setAdvancedEditorSourceConfig ( d ) ; if ( advancedEditorSourceConfigLastApplied === d ) { setAdvancedSourceEditorApplyButtonEnabled ( false ) ; return ; } try { JSON . parse ( d ) ; setAdvancedSourceEditorApplyButtonEnabled ( true ) ; } catch ( e ) { setAdvancedSourceEditorApplyButtonEnabled ( false ) ; } } } options = { { ariaLabel : i18n . translate ( 'xpack.transform.stepDefineForm.advancedSourceEditorAriaLabel' , { defaultMessage : 'Advanced query editor' , } ) , automaticLayout : true , fontSize : 12 , scrollBeyondLastLine : false , quickSuggestions : true , minimap : { enabled : false , } , wordWrap : 'on' , wrappingIndent : 'indent' , } } value = { advancedEditorSourceConfig } / > < /div>); } ;