[Lens] Suggestion preview rendering

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

@@ -37,13 +37,15 @@ export type ExpressionRendererProps = Pick<
    * this callback is called with the given result.
    */
   onRenderFailure?: (result: Result) => void;
+  className?: string;
 };
 
 export type ExpressionRenderer = React.FC<ExpressionRendererProps>;
 
 export const createRenderer = (run: ExpressionRunner): ExpressionRenderer => ({
   expression,
   onRenderFailure,
+  className,
   ...options
 }: ExpressionRendererProps) => {
   const mountpoint: React.MutableRefObject<null | HTMLDivElement> = useRef(null);
@@ -63,6 +65,7 @@ export const createRenderer = (run: ExpressionRunner): ExpressionRenderer => ({
 
   return (
     <div
+      className={className}
       ref={el => {
         mountpoint.current = el;
       }}

x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.tsx

@@ -158,7 +158,7 @@ export const datatableVisualization: Visualization<
   > {
     return tables.map(table => {
       const title = i18n.translate('xpack.lens.datatable.visualizationOf', {
-        defaultMessage: 'Table: ${operations}',
+        defaultMessage: 'Table: {operations}',
         values: {
           operations: table.columns.map(col => col.operation.label).join(' & '),
         },
@@ -174,6 +174,7 @@ export const datatableVisualization: Visualization<
             label: col.operation.label,
           })),
         },
+        previewIcon: 'visTable',
       };
     });
   },

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

@@ -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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+const actual = jest.requireActual('../suggestion_helpers');
+
+jest.spyOn(actual, 'getSuggestions');
+
+export const { getSuggestions, toSwitchAction } = actual;

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

@@ -23,18 +23,21 @@ function getSuggestedVisualizationState(
   visualization: Visualization,
   datasource: DatasourcePublicAPI
 ) {
-  const suggestions = visualization.getSuggestions({
-    tables: [
-      {
-        datasourceSuggestionId: 0,
-        isMultiRow: true,
-        columns: datasource.getTableSpec().map(col => ({
-          ...col,
-          operation: datasource.getOperationForColumnId(col.columnId)!,
-        })),
-      },
-    ],
-  });
+  const suggestions = visualization.getSuggestions(
+    {
+      tables: [
+        {
+          datasourceSuggestionId: 0,
+          isMultiRow: true,
+          columns: datasource.getTableSpec().map(col => ({
+            ...col,
+            operation: datasource.getOperationForColumnId(col.columnId)!,
+          })),
+        },
+      ],
+    },
+    datasource
+  );
 
   if (!suggestions.length) {
     return visualization.initialize(datasource);

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

@@ -529,6 +529,7 @@ Object {
           score: 1,
           datasourceSuggestionId: 0,
           state: initialState,
+          previewIcon: 'empty',
         },
       ]);
 
@@ -627,12 +628,14 @@ Object {
                   score: 0.5,
                   state: {},
                   title: 'Suggestion2',
+                  previewIcon: 'empty',
                 },
                 {
                   datasourceSuggestionId: 0,
                   score: 0.8,
                   state: {},
                   title: 'Suggestion1',
+                  previewIcon: 'empty',
                 },
               ],
             },
@@ -644,12 +647,14 @@ Object {
                   score: 0.4,
                   state: {},
                   title: 'Suggestion4',
+                  previewIcon: 'empty',
                 },
                 {
                   datasourceSuggestionId: 0,
                   score: 0.45,
                   state: {},
                   title: 'Suggestion3',
+                  previewIcon: 'empty',
                 },
               ],
             },
@@ -670,7 +675,7 @@ Object {
 
       // TODO why is this necessary?
       instance.update();
-      const suggestions = instance.find('[data-test-subj="suggestion"]');
+      const suggestions = instance.find('[data-test-subj="suggestion-title"]');
       expect(suggestions.map(el => el.text())).toEqual([
         'Suggestion1',
         'Suggestion2',
@@ -693,6 +698,7 @@ Object {
                   score: 0.8,
                   state: suggestionVisState,
                   title: 'Suggestion1',
+                  previewIcon: 'empty',
                 },
               ],
             },
@@ -716,7 +722,7 @@ Object {
       instance.update();
 
       act(() => {
-        instance.find('[data-test-subj="suggestion"]').simulate('click');
+        instance.find('[data-test-subj="suggestion-title"]').simulate('click');
       });
 
       expect(mockVisualization.renderConfigPanel).toHaveBeenCalledTimes(1);
@@ -747,12 +753,14 @@ Object {
                   score: 0.2,
                   state: {},
                   title: 'Suggestion1',
+                  previewIcon: 'empty',
                 },
                 {
                   datasourceSuggestionId: 0,
                   score: 0.8,
                   state: suggestionVisState,
                   title: 'Suggestion2',
+                  previewIcon: 'empty',
                 },
               ],
             },
@@ -801,12 +809,14 @@ Object {
                   score: 0.2,
                   state: {},
                   title: 'Suggestion1',
+                  previewIcon: 'empty',
                 },
                 {
                   datasourceSuggestionId: 0,
                   score: 0.6,
                   state: {},
                   title: 'Suggestion2',
+                  previewIcon: 'empty',
                 },
               ],
             },
@@ -818,6 +828,7 @@ Object {
                   score: 0.8,
                   state: suggestionVisState,
                   title: 'Suggestion3',
+                  previewIcon: 'empty',
                 },
               ],
             },

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

@@ -129,10 +129,12 @@ export function EditorFrame(props: EditorFrameProps) {
           <SuggestionPanel
             activeDatasource={props.datasourceMap[state.datasource.activeId]}
             activeVisualizationId={state.visualization.activeId}
+            datasourcePublicAPI={datasourcePublicAPI!}
             datasourceState={state.datasource.state}
             visualizationState={state.visualization.state}
             visualizationMap={props.visualizationMap}
             dispatch={dispatch}
+            ExpressionRenderer={props.ExpressionRenderer}
           />
         }
       />

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/expression_helpers.ts

@@ -7,21 +7,12 @@
 import { Ast, fromExpression } from '@kbn/interpreter/common';
 import { Visualization, Datasource, DatasourcePublicAPI } from '../../types';
 
-export function buildExpression(
-  visualization: Visualization | null,
-  visualizationState: unknown,
+export function prependDatasourceExpression(
+  visualizationExpression: Ast | string | null,
   datasource: Datasource,
-  datasourceState: unknown,
-  datasourcePublicAPI: DatasourcePublicAPI
+  datasourceState: unknown
 ): Ast | null {
-  if (visualization === null) {
-    return null;
-  }
   const datasourceExpression = datasource.toExpression(datasourceState);
-  const visualizationExpression = visualization.toExpression(
-    visualizationState,
-    datasourcePublicAPI
-  );
 
   if (datasourceExpression === null || visualizationExpression === null) {
     return null;
@@ -40,3 +31,21 @@ export function buildExpression(
     chain: [...parsedDatasourceExpression.chain, ...parsedVisualizationExpression.chain],
   };
 }
+
+export function buildExpression(
+  visualization: Visualization | null,
+  visualizationState: unknown,
+  datasource: Datasource,
+  datasourceState: unknown,
+  datasourcePublicAPI: DatasourcePublicAPI
+): Ast | null {
+  if (visualization === null) {
+    return null;
+  }
+  const visualizationExpression = visualization.toExpression(
+    visualizationState,
+    datasourcePublicAPI
+  );
+
+  return prependDatasourceExpression(visualizationExpression, datasource, datasourceState);
+}

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/index.scss

@@ -0,0 +1,2 @@
+@import './workspace_panel.scss';
+@import './suggestion_panel.scss';