Enhancement - EUICodeEditor for Visualize JSON

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

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

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

@@ -53,7 +53,7 @@ export { toAbsoluteDates } from './buckets/lib/date_utils';
 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';
 

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,65 +17,91 @@
  * under the License.
  */
 
-import React, { useEffect } from 'react';
+import React, { useState, useMemo, useCallback } 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({
-  agg,
   showValidation,
   value = '',
   setValidity,
   setValue,
   setTouched,
 }: AggParamEditorProps<string>) {
-  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"
-      />
-    </>
+  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 elasticsearch aggregation definition for this section. For example 'shard_size' on a terms aggregation.",
+      }),
+    []
   );
-  const isValid = isValidJson(value);
 
-  const onChange = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const textValue = ev.target.value;
-    setValue(textValue);
-    setValidity(isValidJson(textValue));
-  };
+  const jsonEditorLabelText = useMemo(
+    () =>
+      i18n.translate('visDefaultEditor.controls.jsonInputLabel', {
+        defaultMessage: 'JSON input',
+      }),
+    []
+  );
 
-  useEffect(() => {
-    setValidity(isValid);
-  }, [isValid]);
+  const label = useMemo(
+    () => (
+      <>
+        {jsonEditorLabelText}{' '}
+        <EuiIconTip position="right" content={editorTooltipText} type="questionInCircle" />
+      </>
+    ),
+    [jsonEditorLabelText, editorTooltipText]
+  );
+
+  const onEditorValidate = useCallback(
+    (annotations: unknown[]) => {
+      // The first onValidate returned from EuiCodeEditor is a false negative
+      if (editorReady) {
+        const validity = annotations.length === 0;
+        setFieldValidity(validity);
+        setValidity(validity);
+      } else {
+        setEditorReady(true);
+      }
+    },
+    [setValidity, editorReady]
+  );
 
   return (
     <EuiFormRow
       label={label}
-      isInvalid={showValidation ? !isValid : false}
+      isInvalid={showValidation ? !isFieldValid : 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
+          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>
   );
 }

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

@@ -42,7 +42,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

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