Possibility to filter when testing scripted fields (#35379) (#44220)

* Possibility to filter when testing scripted fields

* Possibility to filter when testing scripted fields

* Now the i18n test should pass

* use SearchBar instead of EuiFieldText input

* clean up

* test script design improvement

* Fixed SearchBar reference and updated the help_flyout tests

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Nathan Reese <reese.nathan@gmail.com>
Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>

src/legacy/ui/public/field_editor/_index.scss

@@ -1 +1,2 @@
 @import './components/field_format_editor/samples/index';
+@import './components/scripting_help/test_script';

src/legacy/ui/public/field_editor/components/scripting_help/_test_script.scss

@@ -0,0 +1,5 @@
+.testScript__searchBar {
+  .globalQueryBar { 
+    padding: $euiSize 0 0;
+  }
+}

src/legacy/ui/public/field_editor/components/scripting_help/help_flyout.test.js

@@ -26,6 +26,12 @@ jest.mock('ui/documentation_links', () => ({
   getDocLink: doc => `(docLink for ${doc})`,
 }));
 
+jest.mock('./test_script', () => ({
+  TestScript: () => {
+    return `<div>mockTestScript</div>`;
+  },
+}));
+
 const indexPatternMock = {};
 
 describe('ScriptingHelpFlyout', () => {

src/legacy/ui/public/field_editor/components/scripting_help/test_script.js

@@ -31,6 +31,13 @@ import {
   EuiCallOut,
 } from '@elastic/eui';
 
+import { npStart } from 'ui/new_platform';
+const { SearchBar } = npStart.plugins.data.ui;
+
+const { uiSettings } = npStart.core;
+
+import { esQuery } from '../../../../../../plugins/data/public';
+
 export class TestScript extends Component {
   state = {
     isLoading: false,
@@ -43,7 +50,7 @@ export class TestScript extends Component {
     }
   }
 
-  previewScript = async () => {
+  previewScript = async searchContext => {
     const { indexPattern, lang, name, script, executeScript } = this.props;
 
     if (!script || script.length === 0) {
@@ -54,11 +61,23 @@ export class TestScript extends Component {
       isLoading: true,
     });
 
+    let query;
+    if (searchContext) {
+      const esQueryConfigs = esQuery.getEsQueryConfig(uiSettings);
+      query = esQuery.buildEsQuery(
+        this.props.indexPattern,
+        searchContext.query,
+        null,
+        esQueryConfigs
+      );
+    }
+
     const scriptResponse = await executeScript({
       name,
       lang,
       script,
       indexPatternTitle: indexPattern.title,
+      query,
       additionalFields: this.state.additionalFields.map(option => {
         return option.value;
       }),
@@ -161,24 +180,36 @@ export class TestScript extends Component {
 
     return (
       <Fragment>
-        <EuiFormRow label="Additional fields">
+        <EuiFormRow label="Additional fields" fullWidth>
           <EuiComboBox
             placeholder="Select..."
             options={fields}
             selectedOptions={this.state.additionalFields}
             onChange={this.onAdditionalFieldsChange}
             data-test-subj="additionalFieldsSelect"
+            fullWidth
           />
         </EuiFormRow>
 
-        <EuiButton
-          onClick={this.previewScript}
-          disabled={this.props.script ? false : true}
-          isLoading={this.state.isLoading}
-          data-test-subj="runScriptButton"
-        >
-          Run script
-        </EuiButton>
+        <div className="testScript__searchBar">
+          <SearchBar
+            showFilterBar={false}
+            showDatePicker={false}
+            showQueryInput={true}
+            query={{ language: uiSettings.get('search:queryLanguage'), query: '' }}
+            onQuerySubmit={this.previewScript}
+            indexPatterns={[this.props.indexPattern]}
+            customSubmitButton={
+              <EuiButton
+                disabled={this.props.script ? false : true}
+                isLoading={this.state.isLoading}
+                data-test-subj="runScriptButton"
+              >
+                Run script
+              </EuiButton>
+            }
+          />
+        </div>
       </Fragment>
     );
   }
@@ -191,7 +222,8 @@ export class TestScript extends Component {
           <h3>Preview results</h3>
           <p>
             Run your script to preview the first 10 results. You can also select some additional
-            fields to include in your results to gain more context.
+            fields to include in your results to gain more context or add a query to filter on
+            specific documents.
           </p>
         </EuiText>
         <EuiSpacer />

src/legacy/ui/public/field_editor/lib/validate_script.js

@@ -24,6 +24,7 @@ export const executeScript = async ({
   lang,
   script,
   indexPatternTitle,
+  query,
   additionalFields = [],
 }) => {
   // Using _msearch because _search with index name in path dorks everything up
@@ -52,6 +53,10 @@ export const executeScript = async ({
     search._source = additionalFields;
   }
 
+  if (query) {
+    search.query = query;
+  }
+
   const body = `${JSON.stringify(header)}\n${JSON.stringify(search)}\n`;
   const esResp = await kfetch({ method: 'POST', pathname: '/elasticsearch/_msearch', body });
   // unwrap _msearch response