[Vis: Default editor] EUIficate raw json control

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/controls/raw_json.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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, EuiIcon, EuiTextArea, EuiToolTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { AggParamRequiredEditorProps } from '../../vis/editors/default';
+
+function RawJsonParamEditor({
+  agg,
+  value,
+  setValue,
+  isInvalid,
+}: AggParamRequiredEditorProps<string>) {
+  const label = (
+    <>
+      <FormattedMessage id="common.ui.aggTypes.jsonInputLabel" defaultMessage="JSON input" />{' '}
+      <EuiToolTip
+        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.",
+        })}
+      >
+        <EuiIcon type="questionInCircle" />
+      </EuiToolTip>
+    </>
+  );
+
+  return (
+    <EuiFormRow label={label} isInvalid={isInvalid} fullWidth={true}>
+      <EuiTextArea
+        id={`visEditorRawJson${agg.id}`}
+        isInvalid={isInvalid}
+        value={value || ''}
+        onChange={ev => setValue(ev.target.value)}
+        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/vis/editors/default/__tests__/utils.test.tsx

@@ -0,0 +1,50 @@
+/*
+ * 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 expect from 'expect.js';
+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('')).to.be(true);
+    });
+
+    it('should return true when undefine', () => {
+      expect(isValidJson(undefined as any)).to.be(true);
+    });
+
+    it('should return fasle when invalid string', () => {
+      expect(isValidJson(input.invalid)).to.be(false);
+    });
+
+    it('should return true when valid string', () => {
+      expect(isValidJson(input.valid)).to.be(true);
+    });
+
+    it('should return fasle if a number', () => {
+      expect(isValidJson('0')).to.be(false);
+    });
+  });
+});

src/legacy/ui/public/vis/editors/default/_agg_select.scss

@@ -20,3 +20,4 @@
 .visEditorAggSelect__helpLink {
   @include euiFontSizeXS;
 }
+

src/legacy/ui/public/vis/editors/default/_sidebar.scss

@@ -221,3 +221,6 @@
   }
 }
 
+vis-agg-param-react-wrapper .euiFormRow {
+  margin-bottom: 7px;
+}