Possibility to filter when testing scripted fields (#35379)

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/test_script.js

@@ -31,6 +31,13 @@ import {
   EuiCallOut,
 } from '@elastic/eui';
 
+import { start as data } from '../../../../../core_plugins/data/public/legacy';
+const { SearchBar } = data.ui;
+import { npStart } from 'ui/new_platform';
+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,
@@ -60,11 +67,18 @@ 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;
       })
@@ -171,24 +185,38 @@ export class TestScript extends Component {
       <Fragment>
         <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>
     );
   }
@@ -201,7 +229,7 @@ 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.
+            additional 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

@@ -19,7 +19,7 @@
 
 import { kfetch } from 'ui/kfetch';
 
-export const executeScript = async ({ name, lang, script, indexPatternTitle, additionalFields = [] }) => {
+export const executeScript = async ({ name, lang, script, indexPatternTitle, query, additionalFields = [] }) => {
   // Using _msearch because _search with index name in path dorks everything up
   const header = {
     index: indexPatternTitle,
@@ -46,6 +46,10 @@ export const executeScript = async ({ name, lang, script, indexPatternTitle, add
     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