[ES|QL] add AST inspector to examples (elastic#182720)

## Summary

Something to get us started on the AST fun. At least until we contribute
ES|QL support to https://github.com/fkling/astexplorer :)



https://github.com/elastic/kibana/assets/315764/82c482b7-cd61-4440-b723-84f863c1b596

---------

Co-authored-by: kibanamachine <[email protected]>

.github/CODEOWNERS

@@ -406,6 +406,7 @@ packages/kbn-eslint-plugin-telemetry @elastic/obs-knowledge-team
 examples/eso_model_version_example @elastic/kibana-security
 x-pack/test/encrypted_saved_objects_api_integration/plugins/api_consumer_plugin @elastic/kibana-security
 packages/kbn-esql-ast @elastic/kibana-esql
+examples/esql_ast_inspector @elastic/kibana-esql
 packages/kbn-esql-utils @elastic/kibana-esql
 packages/kbn-esql-validation-autocomplete @elastic/kibana-esql
 examples/esql_validation_example @elastic/kibana-esql

examples/esql_ast_inspector/README.md

@@ -0,0 +1,9 @@
+# esql_ast_inspector
+
+ES|QL AST inspector tool
+
+To run this example, start kibana with the `--run-examples` flag.
+
+```bash
+yarn start --run-examples
+```

examples/esql_ast_inspector/kibana.jsonc

@@ -0,0 +1,17 @@
+{
+    "type": "plugin",
+    "id": "@kbn/esql-ast-inspector-plugin",
+    "owner": "@elastic/kibana-esql",
+    "plugin": {
+      "id": "esqlASTInspector",
+      "server": false,
+      "browser": true,
+      "configPath": [
+        "esql_ast_inspector"
+      ],
+      "requiredPlugins": [
+        "dataViews",
+        "developerExamples"
+      ]
+    }
+  }

examples/esql_ast_inspector/public/app.tsx

@@ -0,0 +1,89 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useRef, useState } from 'react';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageSection,
+  EuiPageHeader,
+  EuiSpacer,
+  EuiForm,
+  EuiTextArea,
+  EuiFormRow,
+  EuiButton,
+} from '@elastic/eui';
+
+import type { CoreStart } from '@kbn/core/public';
+
+import { EditorError, ESQLAst, getAstAndSyntaxErrors } from '@kbn/esql-ast';
+import { CodeEditor } from '@kbn/code-editor';
+import type { StartDependencies } from './plugin';
+
+export const App = (props: { core: CoreStart; plugins: StartDependencies }) => {
+  const [currentErrors, setErrors] = useState<EditorError[]>([]);
+  const [currentQuery, setQuery] = useState(
+    'from index1 | eval var0 = round(numberField, 2) | stats by stringField'
+  );
+
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const [ast, setAST] = useState<ESQLAst>(getAstAndSyntaxErrors(currentQuery).ast);
+
+  const parseQuery = (query: string) => {
+    const { ast: _ast, errors } = getAstAndSyntaxErrors(query);
+    setErrors(errors);
+    setAST(_ast);
+  };
+
+  return (
+    <EuiPage>
+      <EuiPageBody style={{ maxWidth: 800, margin: '0 auto' }}>
+        <EuiPageHeader paddingSize="s" bottomBorder={true} pageTitle="ES|QL AST Inspector" />
+        <EuiPageSection paddingSize="s">
+          <p>This app gives you the AST for a particular ES|QL query.</p>
+
+          <EuiSpacer />
+
+          <EuiForm>
+            <EuiFormRow
+              fullWidth
+              label="Query"
+              isInvalid={Boolean(currentErrors.length)}
+              error={currentErrors.map((error) => error.message)}
+            >
+              <EuiTextArea
+                inputRef={(node) => {
+                  inputRef.current = node;
+                }}
+                isInvalid={Boolean(currentErrors.length)}
+                fullWidth
+                value={currentQuery}
+                onChange={(e) => setQuery(e.target.value)}
+                css={{
+                  height: '5em',
+                }}
+              />
+            </EuiFormRow>
+            <EuiFormRow fullWidth>
+              <EuiButton fullWidth onClick={() => parseQuery(inputRef.current?.value ?? '')}>
+                Parse
+              </EuiButton>
+            </EuiFormRow>
+          </EuiForm>
+          <EuiSpacer />
+          <CodeEditor
+            allowFullScreen={true}
+            languageId={'json'}
+            value={JSON.stringify(ast, null, 2)}
+          />
+        </EuiPageSection>
+      </EuiPageBody>
+    </EuiPage>
+  );
+};

examples/esql_ast_inspector/public/index.tsx

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ESQLASTInspectorPlugin } from './plugin';
+
+export const plugin = () => new ESQLASTInspectorPlugin();

examples/esql_ast_inspector/public/mount.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import * as React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+
+import type { CoreSetup, AppMountParameters } from '@kbn/core/public';
+import type { StartDependencies } from './plugin';
+
+export const mount =
+  (coreSetup: CoreSetup<StartDependencies>) =>
+  async ({ element }: AppMountParameters) => {
+    const [core, plugins] = await coreSetup.getStartServices();
+    const { App } = await import('./app');
+
+    const i18nCore = core.i18n;
+
+    const reactElement = (
+      <i18nCore.Context>
+        <App core={core} plugins={plugins} />
+      </i18nCore.Context>
+    );
+
+    render(reactElement, element);
+    return () => {
+      unmountComponentAtNode(element);
+      plugins.data.search.session.clear();
+    };
+  };

examples/esql_ast_inspector/public/plugin.ts

@@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { Plugin, CoreSetup } from '@kbn/core/public';
+import { DataPublicPluginStart } from '@kbn/data-plugin/public';
+import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
+import { DeveloperExamplesSetup } from '@kbn/developer-examples-plugin/public';
+import { mount } from './mount';
+import image from './esql_ast_inspector.png';
+
+export interface SetupDependencies {
+  developerExamples: DeveloperExamplesSetup;
+}
+
+export interface StartDependencies {
+  data: DataPublicPluginStart;
+  dataViews: DataViewsPublicPluginStart;
+}
+
+export class ESQLASTInspectorPlugin
+  implements Plugin<void, void, SetupDependencies, StartDependencies>
+{
+  public setup(core: CoreSetup<StartDependencies>, { developerExamples }: SetupDependencies) {
+    core.application.register({
+      id: 'esql_ast_inspector',
+      title: 'ES|QL AST Inspector',
+      visibleIn: [],
+      mount: mount(core),
+    });
+
+    developerExamples.register({
+      appId: 'esql_ast_inspector',
+      title: 'ES|QL AST Inspector',
+      description: 'Inspect the ES|QL AST.',
+      image,
+      links: [
+        {
+          label: 'README',
+          href: 'https://github.com/elastic/kibana/tree/main/packages/kbn-esql-validation-autocomplete/README.md',
+          iconType: 'logoGithub',
+          size: 's',
+          target: '_blank',
+        },
+      ],
+    });
+  }
+
+  public start() {}
+
+  public stop() {}
+}

examples/esql_ast_inspector/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types"
+  },
+  "include": [
+    "index.ts",
+    "public/**/*.ts",
+    "public/**/*.tsx",
+    "server/**/*.ts",
+    "../../../typings/**/*"
+  ],
+  "exclude": [
+    "target/**/*",
+  ],
+  "kbn_references": [
+    "@kbn/core",
+    "@kbn/data-plugin",
+    "@kbn/data-views-plugin",
+    "@kbn/developer-examples-plugin",
+    "@kbn/esql-ast",
+    "@kbn/code-editor",
+  ]
+}

package.json

@@ -448,6 +448,7 @@
     "@kbn/eso-model-version-example": "link:examples/eso_model_version_example",
     "@kbn/eso-plugin": "link:x-pack/test/encrypted_saved_objects_api_integration/plugins/api_consumer_plugin",
     "@kbn/esql-ast": "link:packages/kbn-esql-ast",
+    "@kbn/esql-ast-inspector-plugin": "link:examples/esql_ast_inspector",
     "@kbn/esql-utils": "link:packages/kbn-esql-utils",
     "@kbn/esql-validation-autocomplete": "link:packages/kbn-esql-validation-autocomplete",
     "@kbn/esql-validation-example-plugin": "link:examples/esql_validation_example",

tsconfig.base.json

@@ -806,6 +806,8 @@
       "@kbn/eso-plugin/*": ["x-pack/test/encrypted_saved_objects_api_integration/plugins/api_consumer_plugin/*"],
       "@kbn/esql-ast": ["packages/kbn-esql-ast"],
       "@kbn/esql-ast/*": ["packages/kbn-esql-ast/*"],
+      "@kbn/esql-ast-inspector-plugin": ["examples/esql_ast_inspector"],
+      "@kbn/esql-ast-inspector-plugin/*": ["examples/esql_ast_inspector/*"],
       "@kbn/esql-utils": ["packages/kbn-esql-utils"],
       "@kbn/esql-utils/*": ["packages/kbn-esql-utils/*"],
       "@kbn/esql-validation-autocomplete": ["packages/kbn-esql-validation-autocomplete"],

yarn.lock

@@ -4658,6 +4658,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/esql-ast-inspector-plugin@link:examples/esql_ast_inspector":
+  version "0.0.0"
+  uid ""
+
 "@kbn/esql-ast@link:packages/kbn-esql-ast":
   version "0.0.0"
   uid ""