[Vis: Default editor] EUIficate raw json control (elastic#32888)

* EUIficate raw json control

* Remove unused validate-json directive

* Update tests

* Update styles

* Move validation logic down to control

* Fix type

src/legacy/core_plugins/kibana/public/discover/controllers/discover.js

@@ -28,7 +28,6 @@ import dateMath from '@elastic/datemath';
 import 'ui/doc_table';
 import 'ui/visualize';
 import 'ui/fixed_scroll';
-import 'ui/directives/validate_json';
 import 'ui/filters/moment';
 import 'ui/index_patterns';
 import 'ui/state_management/app_state';

src/legacy/ui/public/agg_types/__tests__/utils.test.tsx

@@ -0,0 +1,49 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { isValidJson } from '../utils';
+
+const input = {
+  valid: '{ "test": "json input" }',
+  invalid: 'strings are not json',
+};
+
+describe('AggType utils', () => {
+  describe('isValidJson', () => {
+    it('should return true when empty string', () => {
+      expect(isValidJson('')).toBe(true);
+    });
+
+    it('should return true when undefine', () => {
+      expect(isValidJson(undefined as any)).toBe(true);
+    });
+
+    it('should return false when invalid string', () => {
+      expect(isValidJson(input.invalid)).toBe(false);
+    });
+
+    it('should return true when valid string', () => {
+      expect(isValidJson(input.valid)).toBe(true);
+    });
+
+    it('should return false if a number', () => {
+      expect(isValidJson('0')).toBe(false);
+    });
+  });
+});

src/legacy/ui/public/agg_types/controls/raw_json.tsx

@@ -0,0 +1,76 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+
+import { EuiFormRow, EuiIconTip, EuiTextArea } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { AggParamEditorProps } from '../../vis/editors/default';
+import { isValidJson } from '../utils';
+
+function RawJsonParamEditor({
+  agg,
+  value,
+  setValue,
+  isInvalid,
+  setValidity,
+}: AggParamEditorProps<string>) {
+  const label = (
+    <>
+      <FormattedMessage id="common.ui.aggTypes.jsonInputLabel" defaultMessage="JSON input" />{' '}
+      <EuiIconTip
+        position="right"
+        content={i18n.translate('common.ui.aggTypes.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 onChange = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const textValue = ev.target.value;
+    setValue(textValue);
+    setValidity(isValidJson(textValue));
+  };
+
+  setValidity(isValidJson(value));
+
+  return (
+    <EuiFormRow
+      label={label}
+      isInvalid={isInvalid}
+      fullWidth={true}
+      className="visEditorSidebar__aggParamFormRow"
+    >
+      <EuiTextArea
+        id={`visEditorRawJson${agg.id}`}
+        isInvalid={isInvalid}
+        value={value || ''}
+        onChange={onChange}
+        rows={2}
+        fullWidth={true}
+      />
+    </EuiFormRow>
+  );
+}
+
+export { RawJsonParamEditor };

src/legacy/ui/public/agg_types/param_types/json.js

@@ -18,7 +18,7 @@
  */
 
 import _ from 'lodash';
-import editorHtml from '../controls/raw_json.html';
+import { RawJsonParamEditor } from '../controls/raw_json';
 import { BaseParamType } from './base';
 import { createLegacyClass } from '../../utils/legacy_class';
 
@@ -30,7 +30,7 @@ function JsonParamType(config) {
   JsonParamType.Super.call(this, config);
 }
 
-JsonParamType.prototype.editor = editorHtml;
+JsonParamType.prototype.editorComponent = RawJsonParamEditor;
 
 /**
  * Write the aggregation parameter.

src/legacy/ui/public/agg_types/utils.tsx

@@ -0,0 +1,39 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+function isValidJson(value: string): boolean {
+  if (!value || value.length === 0) {
+    return true;
+  }
+
+  const trimmedValue = value.trim();
+
+  if (trimmedValue[0] === '{' || trimmedValue[0] === '[') {
+    try {
+      JSON.parse(trimmedValue);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  } else {
+    return false;
+  }
+}
+
+export { isValidJson };