expression service (#42337)

packages/kbn-interpreter/src/common/index.d.ts

@@ -19,4 +19,4 @@
 
 export { Registry } from './lib/registry';
 
-export { fromExpression, Ast } from './lib/ast';
+export { fromExpression, toExpression, Ast } from './lib/ast';

packages/kbn-interpreter/src/common/lib/ast.d.ts

@@ -20,3 +20,4 @@
 export type Ast = unknown;
 
 export declare function fromExpression(expression: string): Ast;
+export declare function toExpression(astObj: Ast, type?: string): string;

src/legacy/core_plugins/data/public/expressions/expression_renderer.tsx

@@ -19,47 +19,60 @@
 
 import { useRef, useEffect } from 'react';
 import React from 'react';
-import { Ast } from '@kbn/interpreter/common';
 
-import { ExpressionRunnerOptions, ExpressionRunner } from './expression_runner';
-import { Result } from './expressions_service';
+import { ExpressionAST, IExpressionLoaderParams, IInterpreterResult } from './lib/_types';
+import { IExpressionLoader, ExpressionLoader } from './lib/loader';
 
 // Accept all options of the runner as props except for the
 // dom element which is provided by the component itself
-export type ExpressionRendererProps = Pick<
-  ExpressionRunnerOptions,
-  Exclude<keyof ExpressionRunnerOptions, 'element'>
-> & {
-  expression: string | Ast;
+export interface ExpressionRendererProps extends IExpressionLoaderParams {
+  className: 'string';
+  expression: string | ExpressionAST;
   /**
    * If an element is specified, but the response of the expression run can't be rendered
    * because it isn't a valid response or the specified renderer isn't available,
    * this callback is called with the given result.
    */
-  onRenderFailure?: (result: Result) => void;
-};
+  onRenderFailure?: (result: IInterpreterResult) => void;
+}
 
 export type ExpressionRenderer = React.FC<ExpressionRendererProps>;
 
-export const createRenderer = (run: ExpressionRunner): ExpressionRenderer => ({
+export const createRenderer = (loader: IExpressionLoader): ExpressionRenderer => ({
+  className,
   expression,
   onRenderFailure,
   ...options
 }: ExpressionRendererProps) => {
   const mountpoint: React.MutableRefObject<null | HTMLDivElement> = useRef(null);
 
+  const handlerRef: React.MutableRefObject<null | ExpressionLoader> = useRef(null);
+
   useEffect(() => {
     if (mountpoint.current) {
-      run(expression, { ...options, element: mountpoint.current }).catch(result => {
+      if (!handlerRef.current) {
+        handlerRef.current = loader(mountpoint.current, expression, options);
+      } else {
+        handlerRef.current.update(expression, options);
+      }
+      handlerRef.current.data$.toPromise().catch(result => {
         if (onRenderFailure) {
           onRenderFailure(result);
         }
       });
     }
-  }, [expression, mountpoint.current]);
+  }, [
+    expression,
+    options.searchContext,
+    options.context,
+    options.variables,
+    options.disableCaching,
+    mountpoint.current,
+  ]);
 
   return (
     <div
+      className={className}
       ref={el => {
         mountpoint.current = el;
       }}