import 'brace/mode/json' ; import React , { useState , useMemo , useCallback } from 'react' ; import { EuiFormRow , EuiIconTip , EuiCodeEditor , EuiScreenReaderOnly } from '@elastic/eui' ; import { i18n } from '@osd/i18n' ; import { AggParamEditorProps } from '../agg_param_props' ; import 'brace/theme/github' ; function RawJsonParamEditor ( { showValidation , value = '' , setValidity , setValue , setTouched , } ) { const [ isFieldValid , setFieldValidity ] = useState ( true ) ; const [ editorReady , setEditorReady ] = useState ( false ) ; const editorTooltipText = useMemo ( ( ) => i18n . translate ( 'visDefaultEditor.controls.jsonInputTooltip' , { defaultMessage : "Any JSON formatted properties you add here will be merged with the opensearch aggregation definition for this section. For example 'shard_size' on a terms aggregation." , } ) , [ ] ) ; const jsonEditorLabelText = useMemo ( ( ) => i18n . translate ( 'visDefaultEditor.controls.jsonInputLabel' , { defaultMessage : 'JSON input' , } ) , [ ] ) ; const label = useMemo ( ( ) => ( < > { jsonEditorLabelText } { ' ' } < EuiIconTip position = "right" content = { editorTooltipText } type = "questionInCircle" / > < />), [jsonEditorLabelText, editorTooltipText]); const onEditorValidate = useCallback ( ( annotations ) => { if ( editorReady ) { const validity = annotations . length === 0 ; setFieldValidity ( validity ) ; setValidity ( validity ) ; } else { setEditorReady ( true ) ; } } , [ setValidity , editorReady ] ) ; return ( < EuiFormRow label = { label } isInvalid = { showValidation ? ! isFieldValid : false } fullWidth = { true } compressed > < > < EuiCodeEditor mode = "json" theme = "github" width = "100%" height = "250px" value = { value } onValidate = { onEditorValidate } setOptions = { { fontSize : '14px' , } } onChange = { setValue } onBlur = { setTouched } aria - label = { jsonEditorLabelText } aria - describedby = "jsonEditorDescription" / > < EuiScreenReaderOnly > < p id = "jsonEditorDescription" > { editorTooltipText } < /p> < /EuiScreenReaderOnly> < /> < /EuiFormRow>); } export { RawJsonParamEditor } ;