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/util/runtime_field_utils' ; import { XJsonModeType } from './runtime_mappings' ; interface Props { convertToJson : ( data : string ) => string ; setAdvancedRuntimeMappingsConfig : React . Dispatch < string > ; setIsRuntimeMappingsEditorApplyButtonEnabled : React . Dispatch < React . SetStateAction < boolean > > ; advancedEditorRuntimeMappingsLastApplied : string | undefined ; advancedRuntimeMappingsConfig : string ; xJsonMode : XJsonModeType ; } export const RuntimeMappingsEditor = memo ( ( { convertToJson , xJsonMode , setAdvancedRuntimeMappingsConfig , setIsRuntimeMappingsEditorApplyButtonEnabled , advancedEditorRuntimeMappingsLastApplied , advancedRuntimeMappingsConfig , } ) => { return ( < div data - test - subj = "mlDataFrameAnalyticsAdvancedRuntimeMappingsEditor" > < CodeEditor height = { 250 } languageId = { 'json' } onChange = { ( d ) => { setAdvancedRuntimeMappingsConfig ( d ) ; if ( advancedEditorRuntimeMappingsLastApplied === d ) { setIsRuntimeMappingsEditorApplyButtonEnabled ( false ) ; return ; } if ( d === '' ) { setIsRuntimeMappingsEditorApplyButtonEnabled ( true ) ; return ; } try { const parsedJson = JSON . parse ( convertToJson ( d ) ) ; setIsRuntimeMappingsEditorApplyButtonEnabled ( isRuntimeMappings ( parsedJson ) ) ; } catch ( e ) { setIsRuntimeMappingsEditorApplyButtonEnabled ( false ) ; } } } options = { { ariaLabel : i18n . translate ( 'xpack.ml.dataframe.analytics.createWizard.runtimeMappings.advancedEditorAriaLabel' , { defaultMessage : 'Advanced runtime 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 . advancedEditorRuntimeMappingsLastApplied , props . advancedRuntimeMappingsConfig ] ; }