Move canvas to use NP Expressions service (#58387)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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

@@ -20,3 +20,4 @@
 export { Registry } from './lib/registry';
 
 export { fromExpression, toExpression, Ast, ExpressionFunctionAST } from './lib/ast';
+export { getType } from './lib/get_type';

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

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export declare function getType(node: any): string;

x-pack/legacy/plugins/canvas/.storybook/webpack.config.js

@@ -49,7 +49,7 @@ module.exports = async ({ config }) => {
   // Parse props data for .tsx files
   // This is notoriously slow, and is making Storybook unusable.  Disabling for now.
   // See: https://github.com/storybookjs/storybook/issues/7998
-  // 
+  //
   // config.module.rules.push({
   //   test: /\.tsx$/,
   //   // Exclude example files, as we don't display props info for them
@@ -177,14 +177,6 @@ module.exports = async ({ config }) => {
   config.resolve.alias['ui/chrome'] = path.resolve(__dirname, '../tasks/mocks/uiChrome');
   config.resolve.alias.ui = path.resolve(KIBANA_ROOT, 'src/legacy/ui/public');
   config.resolve.alias.ng_mock$ = path.resolve(KIBANA_ROOT, 'src/test_utils/public/ng_mock');
-  config.resolve.alias['plugins/interpreter/interpreter'] = path.resolve(
-    KIBANA_ROOT,
-    'packages/kbn-interpreter/target/common'
-  );
-  config.resolve.alias['plugins/interpreter/registries'] = path.resolve(
-    KIBANA_ROOT,
-    'packages/kbn-interpreter/target/common/registries'
-  );
 
   return config;
 };

x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/staticColumn.ts

@@ -6,7 +6,11 @@
 
 // @ts-ignore untyped Elastic library
 import { getType } from '@kbn/interpreter/common';
-import { ExpressionFunctionDefinition, Datatable } from 'src/plugins/expressions/common';
+import {
+  ExpressionFunctionDefinition,
+  Datatable,
+  DatatableColumnType,
+} from 'src/plugins/expressions/common';
 import { getFunctionHelp } from '../../../i18n';
 
 interface Arguments {
@@ -42,7 +46,7 @@ export function staticColumn(): ExpressionFunctionDefinition<
     },
     fn: (input, args) => {
       const rows = input.rows.map(row => ({ ...row, [args.name]: args.value }));
-      const type = getType(args.value);
+      const type = getType(args.value) as DatatableColumnType;
       const columns = [...input.columns];
       const existingColumnIndex = columns.findIndex(({ name }) => name === args.name);
       const newColumn = { name: args.name, type };

x-pack/legacy/plugins/canvas/canvas_plugin_src/plugin.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { CoreSetup, CoreStart, Plugin } from 'src/core/public';
+import { CanvasSetup } from '../public';
+
+import { functions } from './functions/browser';
+import { typeFunctions } from './expression_types';
+// @ts-ignore: untyped local
+import { renderFunctions } from './renderers';
+
+import { elementSpecs } from './elements';
+// @ts-ignore Untyped Local
+import { transformSpecs } from './uis/transforms';
+// @ts-ignore Untyped Local
+import { datasourceSpecs } from './uis/datasources';
+// @ts-ignore Untyped Local
+import { modelSpecs } from './uis/models';
+// @ts-ignore Untyped Local
+import { viewSpecs } from './uis/views';
+// @ts-ignore Untyped Local
+import { args as argSpecs } from './uis/arguments';
+import { tagSpecs } from './uis/tags';
+import { templateSpecs } from './templates';
+
+interface SetupDeps {
+  canvas: CanvasSetup;
+}
+
+/** @internal */
+export class CanvasSrcPlugin implements Plugin<{}, {}, SetupDeps, {}> {
+  public setup(core: CoreSetup, plugins: SetupDeps) {
+    plugins.canvas.addFunctions(functions);
+    plugins.canvas.addTypes(typeFunctions);
+    plugins.canvas.addRenderers(renderFunctions);
+
+    plugins.canvas.addElements(elementSpecs);
+    plugins.canvas.addDatasourceUIs(datasourceSpecs);
+    plugins.canvas.addModelUIs(modelSpecs);
+    plugins.canvas.addViewUIs(viewSpecs);
+    plugins.canvas.addArgumentUIs(argSpecs);
+    plugins.canvas.addTagUIs(tagSpecs);
+    plugins.canvas.addTemplates(templateSpecs);
+    plugins.canvas.addTransformUIs(transformSpecs);
+
+    return {};
+  }
+
+  public start(core: CoreStart, plugins: {}) {
+    return {};
+  }
+}

x-pack/legacy/plugins/canvas/i18n/functions/dict/filters.ts

@@ -3,13 +3,12 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
 import { i18n } from '@kbn/i18n';
-import { filters } from '../../../public/functions/filters';
+import { filtersFunctionFactory } from '../../../public/functions/filters';
 import { FunctionHelp } from '../function_help';
 import { FunctionFactory } from '../../../types';
 
-export const help: FunctionHelp<FunctionFactory<typeof filters>> = {
+export const help: FunctionHelp<FunctionFactory<ReturnType<typeof filtersFunctionFactory>>> = {
   help: i18n.translate('xpack.canvas.functions.filtersHelpText', {
     defaultMessage:
       'Aggregates element filters from the workpad for use elsewhere, usually a data source.',

x-pack/legacy/plugins/canvas/i18n/functions/dict/to.ts

@@ -5,12 +5,12 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { to } from '../../../public/functions/to';
+import { toFunctionFactory } from '../../../public/functions/to';
 import { FunctionHelp } from '../function_help';
 import { FunctionFactory } from '../../../types';
 import { CONTEXT } from '../../constants';
 
-export const help: FunctionHelp<FunctionFactory<typeof to>> = {
+export const help: FunctionHelp<FunctionFactory<ReturnType<typeof toFunctionFactory>>> = {
   help: i18n.translate('xpack.canvas.functions.toHelpText', {
     defaultMessage: 'Explicitly casts the type of the {CONTEXT} to the specified type.',
     values: {

x-pack/legacy/plugins/canvas/index.js

@@ -26,11 +26,7 @@ export function canvas(kibana) {
         main: 'plugins/canvas/legacy_start',
         category: DEFAULT_APP_CATEGORIES.analyze,
       },
-      interpreter: [
-        'plugins/canvas/browser_functions',
-        'plugins/canvas/renderers',
-        'plugins/canvas/interpreter_expression_types',
-      ],
+      interpreter: ['plugins/canvas/legacy_register_interpreter'],
       styleSheetPaths: resolve(__dirname, 'public/style/index.scss'),
       hacks: [
         // window.onerror override

x-pack/legacy/plugins/canvas/public/application.tsx

@@ -12,13 +12,14 @@ import { Provider } from 'react-redux';
 
 import { AppMountParameters, CoreStart } from 'kibana/public';
 
+import { CanvasStartDeps } from './plugin';
 // @ts-ignore Untyped local
 import { App } from './components/app';
 import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
 
 export const renderApp = (
   coreStart: CoreStart,
-  plugins: object,
+  plugins: CanvasStartDeps,
   { element }: AppMountParameters,
   canvasStore: Store
 ) => {

x-pack/legacy/plugins/canvas/public/components/app/index.js

@@ -4,35 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { register, addRegistries } from '@kbn/interpreter/common';
 import { connect } from 'react-redux';
 import { compose, withProps } from 'recompose';
-import { registries } from 'plugins/interpreter/registries';
-import { getInterpreter } from 'plugins/interpreter/interpreter';
-import { loadLegacyServerFunctionWrappers } from 'plugins/interpreter/canvas/load_legacy_server_function_wrappers';
 import { getAppReady, getBasePath } from '../../state/selectors/app';
 import { appReady, appError } from '../../state/actions/app';
-import { elementsRegistry } from '../../lib/elements_registry';
-import { registerLanguage } from '../../lib/monaco_language_def';
-import { templatesRegistry } from '../../lib/templates_registry';
-import { tagsRegistry } from '../../lib/tags_registry';
-import { elementSpecs } from '../../../canvas_plugin_src/elements';
-import { transformSpecs } from '../../../canvas_plugin_src/uis/transforms';
-import { modelSpecs } from '../../../canvas_plugin_src/uis/models';
-import { viewSpecs } from '../../../canvas_plugin_src/uis/views';
-import { datasourceSpecs } from '../../../canvas_plugin_src/uis/datasources';
-import { args as argSpecs } from '../../../canvas_plugin_src/uis/arguments';
-import { tagSpecs } from '../../../canvas_plugin_src/uis/tags';
-import { templateSpecs } from '../../../canvas_plugin_src/templates';
-import { clientFunctions } from '../../functions';
 
-import {
-  argTypeRegistry,
-  datasourceRegistry,
-  modelRegistry,
-  transformRegistry,
-  viewRegistry,
-} from '../../expression_types';
 import { App as Component } from './app';
 import { trackRouteChange } from './track_route_change';
 
@@ -46,38 +22,9 @@ const mapStateToProps = state => {
   };
 };
 
-addRegistries(registries, {
-  elements: elementsRegistry,
-  transformUIs: transformRegistry,
-  datasourceUIs: datasourceRegistry,
-  modelUIs: modelRegistry,
-  viewUIs: viewRegistry,
-  argumentUIs: argTypeRegistry,
-  templates: templatesRegistry,
-  tagUIs: tagsRegistry,
-});
-
-register(registries, {
-  elements: elementSpecs,
-  transformUIs: transformSpecs,
-  modelUIs: modelSpecs,
-  viewUIs: viewSpecs,
-  datasourceUIs: datasourceSpecs,
-  argumentUIs: argSpecs,
-  browserFunctions: clientFunctions,
-  templates: templateSpecs,
-  tagUIs: tagSpecs,
-});
-
 const mapDispatchToProps = dispatch => ({
   setAppReady: () => async () => {
     try {
-      await loadLegacyServerFunctionWrappers();
-      await getInterpreter();
-
-      // Register the expression language with the Monaco Editor
-      registerLanguage();
-
       // set app state to ready
       dispatch(appReady());
     } catch (e) {

x-pack/legacy/plugins/canvas/public/components/datasource/datasource_preview/index.js

@@ -6,7 +6,7 @@
 
 import { pure, compose, lifecycle, withState, branch, renderComponent } from 'recompose';
 import { PropTypes } from 'prop-types';
-import { interpretAst } from 'plugins/interpreter/interpreter';
+import { interpretAst } from '../../../lib/run_interpreter';
 import { Loading } from '../../loading';
 import { DatasourcePreview as Component } from './datasource_preview';
 

x-pack/legacy/plugins/canvas/public/components/element_content/index.js

@@ -8,8 +8,8 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose, withProps } from 'recompose';
 import { get } from 'lodash';
-import { npStart } from 'ui/new_platform';
 import { getSelectedPage, getPageById } from '../../state/selectors/workpad';
+import { withKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { ElementContent as Component } from './element_content';
 
 const mapStateToProps = state => ({
@@ -18,8 +18,9 @@ const mapStateToProps = state => ({
 
 export const ElementContent = compose(
   connect(mapStateToProps),
-  withProps(({ renderable }) => ({
-    renderFunction: npStart.plugins.expressions.getRenderer(get(renderable, 'as')),
+  withKibana,
+  withProps(({ renderable, kibana }) => ({
+    renderFunction: kibana.services.expressions.getRenderer(get(renderable, 'as')),
   }))
 )(Component);
 

x-pack/legacy/plugins/canvas/public/components/expression/index.js

@@ -15,16 +15,15 @@ import {
   renderComponent,
 } from 'recompose';
 import { fromExpression } from '@kbn/interpreter/common';
+import { withKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { getSelectedPage, getSelectedElement } from '../../state/selectors/workpad';
 import { setExpression, flushContext } from '../../state/actions/elements';
-import { getFunctionDefinitions } from '../../lib/function_definitions';
 import { ElementNotSelected } from './element_not_selected';
 import { Expression as Component } from './expression';
 
 const mapStateToProps = state => ({
   pageId: getSelectedPage(state),
   element: getSelectedElement(state),
-  functionDefinitionsPromise: getFunctionDefinitions(state),
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -47,9 +46,12 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 
   const { expression } = element;
 
+  const functions = Object.values(allProps.kibana.services.expressions.getFunctions());
+
   return {
     ...allProps,
     expression,
+    functionDefinitions: functions,
     setExpression: dispatchProps.setExpression(element.id, pageId),
   };
 };
@@ -66,15 +68,11 @@ const expressionLifecycle = lifecycle({
       });
     }
   },
-  componentDidMount() {
-    const { functionDefinitionsPromise, setFunctionDefinitions } = this.props;
-    functionDefinitionsPromise.then(defs => setFunctionDefinitions(defs));
-  },
 });
 
 export const Expression = compose(
+  withKibana,
   connect(mapStateToProps, mapDispatchToProps, mergeProps),
-  withState('functionDefinitions', 'setFunctionDefinitions', []),
   withState('formState', 'setFormState', ({ expression }) => ({
     expression,
     dirty: false,

x-pack/legacy/plugins/canvas/public/components/function_form_list/index.js

@@ -7,7 +7,7 @@
 import { compose, withProps } from 'recompose';
 import { get } from 'lodash';
 import { toExpression } from '@kbn/interpreter/common';
-import { interpretAst } from 'plugins/interpreter/interpreter';
+import { interpretAst } from '../../lib/run_interpreter';
 import { modelRegistry, viewRegistry, transformRegistry } from '../../expression_types';
 import { FunctionFormList as Component } from './function_form_list';