import { isEqual } from 'lodash' ; import React , { memo , FC } from 'react' ; import { i18n } from '@kbn/i18n' ; import { CodeEditor } from '../../../../../../../../../src/plugins/kibana_react/public' ; import { isRuntimeMappings } from '../../../../../../common/shared_imports' ; import { StepDefineFormHook } from '../step_define' ; export const AdvancedRuntimeMappingsEditor = memo ( ( { actions : { convertToJson , setAdvancedRuntimeMappingsConfig , setRuntimeMappingsEditorApplyButtonEnabled , } , state : { advancedEditorRuntimeMappingsLastApplied , advancedRuntimeMappingsConfig , xJsonMode } , } ) => { return ( < div data - test - subj = "transformAdvancedRuntimeMappingsEditor" > < CodeEditor height = { 250 } languageId = { 'json' } onChange = { ( d ) => { setAdvancedRuntimeMappingsConfig ( d ) ; if ( advancedEditorRuntimeMappingsLastApplied === d ) { setRuntimeMappingsEditorApplyButtonEnabled ( false ) ; return ; } try { const isEmptyStr = d === '' ; const parsedJson = isEmptyStr ? { } : JSON . parse ( convertToJson ( d ) ) ; setRuntimeMappingsEditorApplyButtonEnabled ( isEmptyStr || isRuntimeMappings ( parsedJson ) ) ; } catch ( e ) { setRuntimeMappingsEditorApplyButtonEnabled ( false ) ; } } } options = { { ariaLabel : i18n . translate ( 'xpack.transform.stepDefineForm.advancedEditorAriaLabel' , { defaultMessage : 'Advanced pivot editor' , } ) , automaticLayout : true , fontSize : 12 , scrollBeyondLastLine : false , quickSuggestions : true , minimap : { enabled : false , } , wordWrap : 'on' , wrappingIndent : 'indent' , } } value = { advancedRuntimeMappingsConfig } / > < /div>); } , ( prevProps , nextProps ) => isEqual ( pickProps ( prevProps ) , pickProps ( nextProps ) ) ) ; function pickProps ( props ) { return [ props . state . advancedEditorRuntimeMappingsLastApplied , props . state . advancedRuntimeMappingsConfig , ] ; }