Enhancement - EUICodeEditor for Visualize JSON

src/legacy/core_plugins/data/public/index.ts

@@ -71,7 +71,6 @@ export {
   isStringType,
   isType,
   isValidInterval,
-  isValidJson,
   METRIC_TYPES,
   OptionedParamType,
   parentPipelineType,

src/legacy/core_plugins/data/public/search/aggs/agg_types.ts

@@ -108,7 +108,7 @@ export { convertDateRangeToString } from './buckets/date_range';
 export { convertIPRangeToString } from './buckets/ip_range';
 export { aggTypeFilters, propFilter } from './filter';
 export { OptionedParamType } from './param_types/optioned';
-export { isValidJson, isValidInterval } from './utils';
+export { isValidInterval } from './utils';
 export { BUCKET_TYPES } from './buckets/bucket_agg_types';
 export { METRIC_TYPES } from './metrics/metric_agg_types';
 export { ISchemas, Schema, Schemas } from './schemas';

src/legacy/core_plugins/data/public/search/aggs/index.ts

@@ -51,7 +51,7 @@ export { convertDateRangeToString } from './buckets/date_range';
 export { convertIPRangeToString } from './buckets/ip_range';
 export { aggTypeFilters, propFilter } from './filter';
 export { OptionedParamType } from './param_types/optioned';
-export { isValidJson, isValidInterval } from './utils';
+export { isValidInterval } from './utils';
 export { BUCKET_TYPES } from './buckets/bucket_agg_types';
 export { METRIC_TYPES } from './metrics/metric_agg_types';
 export { ISchemas, Schema, Schemas } from './schemas';

src/legacy/core_plugins/data/public/search/aggs/utils.ts

@@ -20,35 +20,6 @@
 import { leastCommonInterval } from 'ui/vis/lib/least_common_interval';
 import { isValidEsInterval } from '../../../common';
 
-/**
- * Check a string if it's a valid JSON.
- *
- * @param {string} value a string that should be validated
- * @returns {boolean} true if value is a valid JSON or if value is an empty string, or a string with whitespaces, otherwise false
- */
-export function isValidJson(value: string): boolean {
-  if (!value || value.length === 0) {
-    return true;
-  }
-
-  const trimmedValue = value.trim();
-
-  if (trimmedValue.length === 0) {
-    return true;
-  }
-
-  if (trimmedValue[0] === '{' || trimmedValue[0] === '[') {
-    try {
-      JSON.parse(trimmedValue);
-      return true;
-    } catch (e) {
-      return false;
-    }
-  } else {
-    return false;
-  }
-}
-
 export function isValidInterval(value: string, baseInterval?: string) {
   if (baseInterval) {
     return _parseWithBase(value, baseInterval);

src/legacy/core_plugins/vis_default_editor/public/components/controls/raw_json.tsx

@@ -17,13 +17,11 @@
  * under the License.
  */
 
-import React, { useEffect } from 'react';
+import React, { useState } from 'react';
 
-import { EuiFormRow, EuiIconTip, EuiTextArea } from '@elastic/eui';
+import { EuiFormRow, EuiIconTip, EuiCodeEditor, EuiScreenReaderOnly } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
 
-import { isValidJson } from '../../legacy_imports';
 import { AggParamEditorProps } from '../agg_param_props';
 
 function RawJsonParamEditor({
@@ -34,48 +32,69 @@ function RawJsonParamEditor({
   setValue,
   setTouched,
 }: AggParamEditorProps<string>) {
+  const [isFormValid, setFormValidity] = useState(true);
+  const [editorReady, setEditorReady] = useState(false);
+
+  const editorTooltipText = i18n.translate('visDefaultEditor.controls.jsonInputTooltip', {
+    defaultMessage:
+      "Any JSON formatted properties you add here will be merged with the elasticsearch aggregation definition for this section. For example 'shard_size' on a terms aggregation.",
+  });
+
+  const jsonEditorLabelText = i18n.translate('visDefaultEditor.controls.jsonInputLabel', {
+    defaultMessage: 'JSON input',
+  });
+
   const label = (
     <>
-      <FormattedMessage id="visDefaultEditor.controls.jsonInputLabel" defaultMessage="JSON input" />{' '}
-      <EuiIconTip
-        position="right"
-        content={i18n.translate('visDefaultEditor.controls.jsonInputTooltip', {
-          defaultMessage:
-            "Any JSON formatted properties you add here will be merged with the elasticsearch aggregation definition for this section. For example 'shard_size' on a terms aggregation.",
-        })}
-        type="questionInCircle"
-      />
+      {jsonEditorLabelText}{' '}
+      <EuiIconTip position="right" content={editorTooltipText} type="questionInCircle" />
     </>
   );
-  const isValid = isValidJson(value);
 
-  const onChange = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const textValue = ev.target.value;
-    setValue(textValue);
-    setValidity(isValidJson(textValue));
+  const onChange = (newValue: string) => {
+    setValue(newValue);
   };
 
-  useEffect(() => {
-    setValidity(isValid);
-  }, [isValid]);
+  const onEditorValidate = (annotations: unknown[]) => {
+    // The first onValidate returned from EuiCodeEditor is a false positive
+    if (editorReady) {
+      const validity = annotations.length === 0;
+      setFormValidity(validity);
+      setValidity(validity);
+    } else {
+      setEditorReady(true);
+    }
+  };
 
   return (
     <EuiFormRow
       label={label}
-      isInvalid={showValidation ? !isValid : false}
+      isInvalid={showValidation ? !isFormValid : false}
       fullWidth={true}
       compressed
     >
-      <EuiTextArea
-        id={`visEditorRawJson${agg.id}`}
-        isInvalid={showValidation ? !isValid : false}
-        value={value}
-        onChange={onChange}
-        rows={2}
-        fullWidth={true}
-        onBlur={setTouched}
-        compressed
-      />
+      <>
+        <EuiCodeEditor
+          id={`visEditorRawJson${agg.id}`}
+          mode="json"
+          theme="github"
+          width="100%"
+          height="250px"
+          value={value}
+          onValidate={onEditorValidate}
+          setOptions={{
+            fontSize: '14px',
+          }}
+          onChange={onChange}
+          fullWidth={true}
+          onBlur={setTouched}
+          aria-label={jsonEditorLabelText}
+          aria-describedby="jsonEditorDescription"
+        />
+        <EuiScreenReaderOnly>
+          <p id="jsonEditorDescription">{editorTooltipText}</p>
+        </EuiScreenReaderOnly>
+      </>
     </EuiFormRow>
   );
 }

src/legacy/core_plugins/vis_default_editor/public/legacy_imports.ts

@@ -44,7 +44,7 @@ export { parentPipelineType } from 'ui/agg_types';
 export { siblingPipelineType } from 'ui/agg_types';
 export { isType, isStringType } from 'ui/agg_types';
 export { OptionedValueProp, OptionedParamEditorProps, OptionedParamType } from 'ui/agg_types';
-export { isValidJson, isValidInterval } from 'ui/agg_types';
+export { isValidInterval } from 'ui/agg_types';
 export { AggParamOption } from 'ui/agg_types';
 export { CidrMask } from 'ui/agg_types';
 

src/legacy/ui/public/agg_types/index.ts

@@ -75,7 +75,6 @@ export {
   isStringType,
   isType,
   isValidInterval,
-  isValidJson,
   OptionedParamType,
   parentPipelineType,
   propFilter,