[Lens] Expression rendering

x-pack/plugins/lens/index.ts

@@ -17,7 +17,7 @@ export const lens: LegacyPluginInitializer = kibana => {
   return new kibana.Plugin({
     id: PLUGIN_ID,
     configPrefix: `xpack.${PLUGIN_ID}`,
-    require: ['kibana', 'elasticsearch', 'xpack_main', 'interpreter'],
+    require: ['kibana', 'elasticsearch', 'xpack_main', 'interpreter', 'data'],
     publicDir: resolve(__dirname, 'public'),
 
     uiExports: {

x-pack/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.test.tsx

@@ -10,7 +10,12 @@ import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { EditorFrame } from './editor_frame';
 import { Visualization, Datasource, DatasourcePublicAPI, DatasourceSuggestion } from '../../types';
 import { act } from 'react-dom/test-utils';
-import { createMockVisualization, createMockDatasource } from '../mock_extensions';
+import {
+  createMockVisualization,
+  createMockDatasource,
+  createExpressionRendererMock,
+} from '../mocks';
+import { ExpressionRenderer } from 'src/legacy/core_plugins/data/public';
 
 // calling this function will wait for all pending Promises from mock
 // datasources to be processed by its callers.
@@ -34,12 +39,16 @@ describe('editor_frame', () => {
   let mockVisualization2: Visualization;
   let mockDatasource2: Datasource;
 
+  let expressionRendererMock: ExpressionRenderer;
+
   beforeEach(() => {
     mockVisualization = createMockVisualization();
     mockVisualization2 = createMockVisualization();
 
     mockDatasource = createMockDatasource();
     mockDatasource2 = createMockDatasource();
+
+    expressionRendererMock = createExpressionRendererMock();
   });
 
   describe('initialization', () => {
@@ -55,6 +64,7 @@ describe('editor_frame', () => {
             }}
             initialDatasourceId="testDatasource"
             initialVisualizationId="testVis"
+            ExpressionRenderer={expressionRendererMock}
           />
         );
       });
@@ -75,6 +85,7 @@ describe('editor_frame', () => {
             }}
             initialDatasourceId={null}
             initialVisualizationId={null}
+            ExpressionRenderer={expressionRendererMock}
           />
         );
       });
@@ -95,6 +106,7 @@ describe('editor_frame', () => {
             }}
             initialDatasourceId="testDatasource"
             initialVisualizationId="testVis"
+            ExpressionRenderer={expressionRendererMock}
           />
         );
       });
@@ -124,6 +136,7 @@ describe('editor_frame', () => {
             }}
             initialDatasourceId="testDatasource"
             initialVisualizationId="testVis"
+            ExpressionRenderer={expressionRendererMock}
           />
         );
       });
@@ -153,6 +166,7 @@ describe('editor_frame', () => {
           }}
           initialDatasourceId="testDatasource"
           initialVisualizationId="testVis"
+          ExpressionRenderer={expressionRendererMock}
         />
       );
 
@@ -177,6 +191,7 @@ describe('editor_frame', () => {
           }}
           initialDatasourceId="testDatasource"
           initialVisualizationId="testVis"
+          ExpressionRenderer={expressionRendererMock}
         />
       );
 
@@ -212,6 +227,7 @@ describe('editor_frame', () => {
           }}
           initialDatasourceId="testDatasource"
           initialVisualizationId="testVis"
+          ExpressionRenderer={expressionRendererMock}
         />
       );
 
@@ -244,6 +260,7 @@ describe('editor_frame', () => {
           }}
           initialDatasourceId="testDatasource"
           initialVisualizationId="testVis"
+          ExpressionRenderer={expressionRendererMock}
         />
       );
 
@@ -286,6 +303,7 @@ describe('editor_frame', () => {
           }}
           initialDatasourceId="testDatasource"
           initialVisualizationId="testVis"
+          ExpressionRenderer={expressionRendererMock}
         />
       );
 
@@ -311,6 +329,7 @@ describe('editor_frame', () => {
           }}
           initialDatasourceId="testDatasource"
           initialVisualizationId="testVis"
+          ExpressionRenderer={expressionRendererMock}
         />
       );
 
@@ -333,6 +352,7 @@ describe('editor_frame', () => {
           }}
           initialDatasourceId="testDatasource"
           initialVisualizationId="testVis"
+          ExpressionRenderer={expressionRendererMock}
         />
       );
 
@@ -367,6 +387,7 @@ describe('editor_frame', () => {
           }}
           initialDatasourceId="testDatasource"
           initialVisualizationId="testVis"
+          ExpressionRenderer={expressionRendererMock}
         />
       );
       await waitForPromises();
@@ -447,6 +468,7 @@ describe('editor_frame', () => {
           }}
           initialDatasourceId="testDatasource"
           initialVisualizationId="testVis"
+          ExpressionRenderer={expressionRendererMock}
         />
       );
 
@@ -469,6 +491,7 @@ describe('editor_frame', () => {
           }}
           initialDatasourceId="testDatasource"
           initialVisualizationId="testVis"
+          ExpressionRenderer={expressionRendererMock}
         />
       );
 
@@ -525,6 +548,7 @@ describe('editor_frame', () => {
           }}
           initialDatasourceId="testDatasource"
           initialVisualizationId="testVis"
+          ExpressionRenderer={expressionRendererMock}
         />
       );
 
@@ -568,6 +592,7 @@ describe('editor_frame', () => {
           }}
           initialDatasourceId="testDatasource"
           initialVisualizationId="testVis2"
+          ExpressionRenderer={expressionRendererMock}
         />
       );
 
@@ -628,6 +653,7 @@ describe('editor_frame', () => {
           }}
           initialDatasourceId="testDatasource"
           initialVisualizationId="testVis"
+          ExpressionRenderer={expressionRendererMock}
         />
       );
 
@@ -691,6 +717,7 @@ describe('editor_frame', () => {
           }}
           initialDatasourceId="testDatasource"
           initialVisualizationId="testVis"
+          ExpressionRenderer={expressionRendererMock}
         />
       );
 

x-pack/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.tsx

@@ -5,6 +5,7 @@
  */
 
 import React, { useEffect, useReducer, useMemo } from 'react';
+import { ExpressionRenderer } from '../../../../../../src/legacy/core_plugins/data/public';
 import { Datasource, Visualization } from '../../types';
 import { reducer, getInitialState } from './state_management';
 import { DataPanelWrapper } from './data_panel_wrapper';
@@ -19,6 +20,8 @@ export interface EditorFrameProps {
 
   initialDatasourceId: string | null;
   initialVisualizationId: string | null;
+
+  ExpressionRenderer: ExpressionRenderer;
 }
 
 export function EditorFrame(props: EditorFrameProps) {
@@ -99,6 +102,7 @@ export function EditorFrame(props: EditorFrameProps) {
             visualizationState={state.visualization.state}
             visualizationMap={props.visualizationMap}
             dispatch={dispatch}
+            ExpressionRenderer={props.ExpressionRenderer}
           />
         }
         suggestionsPanel={

x-pack/plugins/lens/public/editor_frame_plugin/editor_frame/state_management.test.ts

@@ -7,6 +7,7 @@
 import { getInitialState, reducer } from './state_management';
 import { EditorFrameProps } from '.';
 import { Datasource, Visualization } from '../../types';
+import { createExpressionRendererMock } from '../mocks';
 
 describe('editor_frame state management', () => {
   describe('initialization', () => {
@@ -18,6 +19,7 @@ describe('editor_frame state management', () => {
         visualizationMap: { testVis: ({ initialize: jest.fn() } as unknown) as Visualization },
         initialDatasourceId: 'testDatasource',
         initialVisualizationId: 'testVis',
+        ExpressionRenderer: createExpressionRendererMock(),
       };
     });
 

x-pack/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_helpers.test.ts

@@ -5,7 +5,7 @@
  */
 
 import { getSuggestions } from './suggestion_helpers';
-import { createMockVisualization } from '../mock_extensions';
+import { createMockVisualization } from '../mocks';
 import { TableSuggestion } from '../../types';
 
 const generateSuggestion = (datasourceSuggestionId: number = 1, state = {}) => ({

x-pack/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.tsx

@@ -7,6 +7,7 @@
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
+import { ExpressionRenderer } from '../../../../../../src/legacy/core_plugins/data/public';
 import { Action } from './state_management';
 import { Datasource, Visualization, DatasourcePublicAPI } from '../../types';
 import { DragDrop } from '../../drag_drop';
@@ -20,16 +21,7 @@ export interface WorkspacePanelProps {
   visualizationState: unknown;
   datasourcePublicAPI: DatasourcePublicAPI;
   dispatch: (action: Action) => void;
-}
-
-interface ExpressionRendererProps {
-  expression: string;
-}
-
-function ExpressionRenderer(props: ExpressionRendererProps) {
-  // TODO: actually render the expression and move this to a generic folder as it can be re-used for
-  // suggestion rendering
-  return <span>{props.expression}</span>;
+  ExpressionRenderer: ExpressionRenderer;
 }
 
 export function WorkspacePanel({
@@ -40,6 +32,7 @@ export function WorkspacePanel({
   visualizationState,
   datasourcePublicAPI,
   dispatch,
+  ExpressionRenderer: ExpressionRendererComponent,
 }: WorkspacePanelProps) {
   function onDrop() {
     const datasourceSuggestions = activeDatasource.getDatasourceSuggestionsForField(
@@ -88,7 +81,7 @@ export function WorkspacePanel({
     );
     const expression = `${datasourceExpression} | ${visualizationExpression}`;
 
-    return <ExpressionRenderer expression={expression} />;
+    return <ExpressionRendererComponent expression={expression} />;
   }
 
   return (

x-pack/plugins/lens/public/editor_frame_plugin/mock_extensions.ts → x-pack/plugins/lens/public/editor_frame_plugin/mocks.ts

@@ -4,7 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { DataSetup } from 'src/legacy/core_plugins/data/public';
 import { DatasourcePublicAPI, Visualization, Datasource } from '../types';
+import { EditorFrameSetupPlugins } from './plugin';
 
 export function createMockVisualization(): jest.Mocked<Visualization> {
   return {
@@ -44,3 +46,24 @@ export function createMockDatasource(): DatasourceMock {
     publicAPIMock,
   };
 }
+
+type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+
+export type MockedDependencies = Omit<EditorFrameSetupPlugins, 'data'> & {
+  data: Omit<DataSetup, 'expressions'> & { expressions: jest.Mocked<DataSetup['expressions']> };
+};
+
+export function createExpressionRendererMock() {
+  return jest.fn(() => null);
+}
+
+export function createMockDependencies() {
+  return ({
+    data: {
+      expressions: {
+        ExpressionRenderer: createExpressionRendererMock(),
+        run: jest.fn(_ => Promise.resolve({ type: 'render', as: 'test', value: undefined })),
+      },
+    },
+  } as unknown) as MockedDependencies;
+}