scripted fields preview and validate script before saving (elastic#20746

)

* add preview for creating scripted fields

* Move previewed results into flyout.  (#25)

* Move previewed results into flyout. Execute script as soon as the tab is selected.

* Format error in a danger callout.

* add functional test for preview

* move executeScript functionallity into lib so it can be used to validate on save

* validate script on save

* add functional test for script validation during save

* fix jest tests

* fix jest tests

* only validate script when field is scripted

* only add script callouts and help flyout to DOM for scripted fields

* move scripting stuff to its own render method

* right justify delete button to have same style as delete button for user management

* use data-test-subj key to find invalid script error msg in functional tests

* move help flyout link out of formRow help text and into its own row

src/ui/public/field_editor/components/field_format_editor/editors/default/default.js

@@ -20,9 +20,26 @@
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
-import {
-  convertSampleInput
-} from '../../../../lib';
+export const convertSampleInput = (converter, inputs) => {
+  let error = null;
+  let samples = [];
+
+  try {
+    samples = inputs.map(input => {
+      return {
+        input,
+        output: converter(input),
+      };
+    });
+  } catch(e) {
+    error = `An error occurred while trying to use this format configuration: ${e.message}`;
+  }
+
+  return {
+    error,
+    samples,
+  };
+};
 
 export class DefaultFormatEditor extends PureComponent {
   static propTypes = {

src/ui/public/field_editor/components/field_format_editor/editors/default/default.test.js

@@ -20,7 +20,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { DefaultFormatEditor } from './default';
+import { DefaultFormatEditor, convertSampleInput } from './default';
 
 const fieldType = 'number';
 const format = {
@@ -31,6 +31,39 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('DefaultFormatEditor', () => {
+
+  describe('convertSampleInput', () => {
+    const converter = (input) => {
+      if(isNaN(input)) {
+        throw {
+          message: 'Input is not a number'
+        };
+      } else {
+        return input * 2;
+      }
+    };
+
+    it('should convert a set of inputs', () => {
+      const inputs = [1, 10, 15];
+      const output = convertSampleInput(converter, inputs);
+
+      expect(output.error).toEqual(null);
+      expect(JSON.stringify(output.samples)).toEqual(JSON.stringify([
+        { input: 1, output: 2 },
+        { input: 10, output: 20 },
+        { input: 15, output: 30 },
+      ]));
+    });
+
+    it('should return error if converter throws one', () => {
+      const inputs = [1, 10, 15, 'invalid'];
+      const output = convertSampleInput(converter, inputs);
+
+      expect(output.error).toEqual('An error occurred while trying to use this format configuration: Input is not a number');
+      expect(JSON.stringify(output.samples)).toEqual(JSON.stringify([]));
+    });
+  });
+
   it('should render nothing', async () => {
     const component = shallow(
       <DefaultFormatEditor

src/ui/public/field_editor/components/scripting_call_outs/index.js

@@ -19,4 +19,3 @@
 
 export { ScriptingDisabledCallOut } from './disabled_call_out';
 export { ScriptingWarningCallOut } from './warning_call_out';
-export { ScriptingHelpFlyout } from './help_flyout';

src/ui/public/field_editor/components/scripting_help/__snapshots__/help_flyout.test.js.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScriptingHelpFlyout should render normally 1`] = `
+<EuiFlyout
+  data-test-subj="scriptedFieldsHelpFlyout"
+  hideCloseButton={false}
+  onClose={[Function]}
+  ownFocus={false}
+  size="m"
+>
+  <EuiFlyoutBody>
+    <EuiTabbedContent
+      initialSelectedTab={
+        Object {
+          "content": <Unknown />,
+          "data-test-subj": "syntaxTab",
+          "id": "syntax",
+          "name": "Syntax",
+        }
+      }
+      tabs={
+        Array [
+          Object {
+            "content": <Unknown />,
+            "data-test-subj": "syntaxTab",
+            "id": "syntax",
+            "name": "Syntax",
+          },
+          Object {
+            "content": <TestScript
+              executeScript={[Function]}
+              indexPattern={Object {}}
+              lang="painless"
+              name="myScriptedField"
+              script={undefined}
+            />,
+            "data-test-subj": "testTab",
+            "id": "test",
+            "name": "Preview results",
+          },
+        ]
+      }
+    />
+  </EuiFlyoutBody>
+</EuiFlyout>
+`;
+
+exports[`ScriptingHelpFlyout should render nothing if not visible 1`] = `""`;