[Lens] Navigate from discover to lens

src/plugins/ui_actions/public/index.ts

@@ -59,6 +59,7 @@ export {
   VisualizeFieldContext,
   ACTION_VISUALIZE_FIELD,
   ACTION_VISUALIZE_GEO_FIELD,
+  ACTION_VISUALIZE_LENS_FIELD,
 } from './types';
 export {
   ActionByType,

src/plugins/ui_actions/public/types.ts

@@ -57,10 +57,12 @@ export interface TriggerContextMapping {
 const DEFAULT_ACTION = '';
 export const ACTION_VISUALIZE_FIELD = 'ACTION_VISUALIZE_FIELD';
 export const ACTION_VISUALIZE_GEO_FIELD = 'ACTION_VISUALIZE_GEO_FIELD';
+export const ACTION_VISUALIZE_LENS_FIELD = 'ACTION_VISUALIZE_LENS_FIELD';
 export type ActionType = keyof ActionContextMapping;
 
 export interface ActionContextMapping {
   [DEFAULT_ACTION]: BaseContext;
   [ACTION_VISUALIZE_FIELD]: VisualizeFieldContext;
   [ACTION_VISUALIZE_GEO_FIELD]: VisualizeFieldContext;
+  [ACTION_VISUALIZE_LENS_FIELD]: VisualizeFieldContext;
 }

src/plugins/visualize/public/actions/visualize_field_action.ts

@@ -34,6 +34,7 @@ import { AGGS_TERMS_SIZE_SETTING } from '../../common/constants';
 
 export const visualizeFieldAction = createAction<typeof ACTION_VISUALIZE_FIELD>({
   type: ACTION_VISUALIZE_FIELD,
+  id: ACTION_VISUALIZE_FIELD,
   getDisplayName: () =>
     i18n.translate('visualize.discover.visualizeFieldLabel', {
       defaultMessage: 'Visualize field',

x-pack/plugins/lens/kibana.json

@@ -11,7 +11,8 @@
     "urlForwarding",
     "visualizations",
     "dashboard",
-    "charts"
+    "charts",
+    "uiActions"
   ],
   "optionalPlugins": ["embeddable", "usageCollection", "taskManager", "uiActions", "globalSearch"],
   "configPath": ["xpack", "lens"],

x-pack/plugins/lens/public/app_plugin/app.test.tsx

@@ -288,6 +288,7 @@ describe('Lens App', () => {
             },
             "savedQuery": undefined,
             "showNoDataPopover": [Function],
+            "visualizeTriggerFieldContext": undefined,
           },
         ],
       ]

x-pack/plugins/lens/public/app_plugin/app.tsx

@@ -45,6 +45,7 @@ export function App({
   incomingState,
   redirectToOrigin,
   setHeaderActionMenu,
+  visualizeTriggerFieldContext,
 }: LensAppProps) {
   const {
     data,
@@ -65,7 +66,9 @@ export function App({
   const [state, setState] = useState<LensAppState>(() => {
     const currentRange = data.query.timefilter.timefilter.getTime();
     return {
-      query: data.query.queryString.getDefaultQuery(),
+      query: visualizeTriggerFieldContext
+        ? data.query.queryString.getQuery()
+        : data.query.queryString.getDefaultQuery(),
       filters: data.query.filterManager.getFilters(),
       isLoading: Boolean(initialInput),
       indexPatternsForTopNav: [],
@@ -140,7 +143,10 @@ export function App({
 
   useEffect(() => {
     // Clear app-specific filters when navigating to Lens. Necessary because Lens
-    // can be loaded without a full page refresh
+    // can be loaded without a full page refresh. If the user navigates to Lens from Discover
+    // we keep the filters
+    if (visualizeTriggerFieldContext) return;
+
     data.query.filterManager.setAppFilters([]);
 
     const filterSubscription = data.query.filterManager.getUpdates$().subscribe({
@@ -185,6 +191,7 @@ export function App({
     uiSettings,
     data.query,
     history,
+    visualizeTriggerFieldContext,
   ]);
 
   useEffect(() => {
@@ -574,6 +581,7 @@ export function App({
               doc: state.persistedDoc,
               onError,
               showNoDataPopover,
+              visualizeTriggerFieldContext,
               onChange: ({ filterableIndexPatterns, doc, isSaveable }) => {
                 if (isSaveable !== state.isSaveable) {
                   setState((s) => ({ ...s, isSaveable }));

x-pack/plugins/lens/public/app_plugin/mounter.tsx

@@ -26,6 +26,7 @@ import {
   LensByReferenceInput,
   LensByValueInput,
 } from '../editor_frame_service/embeddable/embeddable';
+import { VisualizeFieldContext } from '../../../../../src/plugins/ui_actions/public';
 import { LensAttributeService } from '../lens_attribute_service';
 import { LensAppServices, RedirectToOriginProps } from './types';
 import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
@@ -46,6 +47,7 @@ export async function mountApp(
   const instance = await createEditorFrame();
   const storage = new Storage(localStorage);
   const stateTransfer = embeddable?.getStateTransfer(params.history);
+  const historyLocationState = params.history.location.state as VisualizeFieldContext;
   const embeddableEditorIncomingState = stateTransfer?.getIncomingEditorState();
 
   const lensServices: LensAppServices = {
@@ -132,6 +134,11 @@ export async function mountApp(
         onAppLeave={params.onAppLeave}
         setHeaderActionMenu={params.setHeaderActionMenu}
         history={routeProps.history}
+        visualizeTriggerFieldContext={
+          historyLocationState && 'indexPatternId' in historyLocationState
+            ? historyLocationState
+            : undefined
+        }
       />
     );
   };

x-pack/plugins/lens/public/app_plugin/types.ts

@@ -28,6 +28,7 @@ import { NavigationPublicPluginStart } from '../../../../../src/plugins/navigati
 import { LensAttributeService } from '../lens_attribute_service';
 import { IStorageWrapper } from '../../../../../src/plugins/kibana_utils/public';
 import { DashboardFeatureFlagConfig } from '../../../../../src/plugins/dashboard/public';
+import { VisualizeFieldContext } from '../../../../../src/plugins/ui_actions/public';
 import { EmbeddableEditorState } from '../../../../../src/plugins/embeddable/public';
 import { EditorFrameInstance } from '..';
 
@@ -75,6 +76,7 @@ export interface LensAppProps {
 
   // State passed in by the container which is used to determine the id of the Originating App.
   incomingState?: EmbeddableEditorState;
+  visualizeTriggerFieldContext?: VisualizeFieldContext;
 }
 
 export interface LensAppServices {

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

@@ -184,8 +184,8 @@ describe('editor_frame', () => {
           />
         );
       });
-      expect(mockDatasource.initialize).toHaveBeenCalledWith(datasource1State, []);
-      expect(mockDatasource2.initialize).toHaveBeenCalledWith(datasource2State, []);
+      expect(mockDatasource.initialize).toHaveBeenCalledWith(datasource1State, [], undefined);
+      expect(mockDatasource2.initialize).toHaveBeenCalledWith(datasource2State, [], undefined);
       expect(mockDatasource3.initialize).not.toHaveBeenCalled();
     });
 
@@ -972,6 +972,32 @@ describe('editor_frame', () => {
   });
 
   describe('suggestions', () => {
+    it('should fetch suggestions of currently active datasource when initializes from visualization trigger', async () => {
+      await act(async () => {
+        mount(
+          <EditorFrame
+            {...getDefaultProps()}
+            visualizeTriggerFieldContext={{
+              indexPatternId: '1',
+              fieldName: 'test',
+            }}
+            visualizationMap={{
+              testVis: mockVisualization,
+            }}
+            datasourceMap={{
+              testDatasource: mockDatasource,
+              testDatasource2: mockDatasource2,
+            }}
+            initialDatasourceId="testDatasource"
+            initialVisualizationId="testVis"
+            ExpressionRenderer={expressionRendererMock}
+          />
+        );
+      });
+
+      expect(mockDatasource.getDatasourceSuggestionsForVisualizeField).toHaveBeenCalled();
+    });
+
     it('should fetch suggestions of currently active datasource', async () => {
       await act(async () => {
         mount(
@@ -1208,6 +1234,7 @@ describe('editor_frame', () => {
                 ...mockDatasource,
                 getDatasourceSuggestionsForField: () => [generateSuggestion()],
                 getDatasourceSuggestionsFromCurrentState: () => [generateSuggestion()],
+                getDatasourceSuggestionsForVisualizeField: () => [generateSuggestion()],
               },
             }}
             initialDatasourceId="testDatasource"
@@ -1274,6 +1301,7 @@ describe('editor_frame', () => {
                 ...mockDatasource,
                 getDatasourceSuggestionsForField: () => [generateSuggestion()],
                 getDatasourceSuggestionsFromCurrentState: () => [generateSuggestion()],
+                getDatasourceSuggestionsForVisualizeField: () => [generateSuggestion()],
                 renderDataPanel: (_element, { dragDropContext: { setDragging, dragging } }) => {
                   if (dragging !== 'draggedField') {
                     setDragging('draggedField');
@@ -1370,6 +1398,7 @@ describe('editor_frame', () => {
                 ...mockDatasource,
                 getDatasourceSuggestionsForField: () => [generateSuggestion()],
                 getDatasourceSuggestionsFromCurrentState: () => [generateSuggestion()],
+                getDatasourceSuggestionsForVisualizeField: () => [generateSuggestion()],
                 renderDataPanel: (_element, { dragDropContext: { setDragging, dragging } }) => {
                   if (dragging !== 'draggedField') {
                     setDragging('draggedField');

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

@@ -19,6 +19,7 @@ import { RootDragDropProvider } from '../../drag_drop';
 import { getSavedObjectFormat } from './save';
 import { generateId } from '../../id_generator';
 import { Filter, Query, SavedQuery } from '../../../../../../src/plugins/data/public';
+import { VisualizeFieldContext } from '../../../../../../src/plugins/ui_actions/public';
 import { EditorFrameStartPlugins } from '../service';
 import { initializeDatasources, createDatasourceLayers } from './state_helpers';
 
@@ -45,6 +46,7 @@ export interface EditorFrameProps {
     isSaveable: boolean;
   }) => void;
   showNoDataPopover: () => void;
+  visualizeTriggerFieldContext?: VisualizeFieldContext;
 }
 
 export function EditorFrame(props: EditorFrameProps) {
@@ -63,7 +65,12 @@ export function EditorFrame(props: EditorFrameProps) {
       // prevents executing dispatch on unmounted component
       let isUnmounted = false;
       if (!allLoaded) {
-        initializeDatasources(props.datasourceMap, state.datasourceStates, props.doc?.references)
+        initializeDatasources(
+          props.datasourceMap,
+          state.datasourceStates,
+          props.doc?.references,
+          props.visualizeTriggerFieldContext
+        )
           .then((result) => {
             if (!isUnmounted) {
               Object.entries(result).forEach(([datasourceId, { state: datasourceState }]) => {
@@ -84,7 +91,6 @@ export function EditorFrame(props: EditorFrameProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [allLoaded, onError]
   );
-
   const datasourceLayers = createDatasourceLayers(props.datasourceMap, state.datasourceStates);
 
   const framePublicAPI: FramePublicAPI = {
@@ -275,6 +281,7 @@ export function EditorFrame(props: EditorFrameProps) {
               ExpressionRenderer={props.ExpressionRenderer}
               core={props.core}
               plugins={props.plugins}
+              visualizeTriggerFieldContext={props.visualizeTriggerFieldContext}
             />
           )
         }

x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts

@@ -9,18 +9,24 @@ import { Ast } from '@kbn/interpreter/common';
 import { Datasource, DatasourcePublicAPI, Visualization } from '../../types';
 import { buildExpression } from './expression_helpers';
 import { Document } from '../../persistence/saved_object_store';
+import { VisualizeFieldContext } from '../../../../../../src/plugins/ui_actions/public';
 
 export async function initializeDatasources(
   datasourceMap: Record<string, Datasource>,
   datasourceStates: Record<string, { state: unknown; isLoading: boolean }>,
-  references?: SavedObjectReference[]
+  references?: SavedObjectReference[],
+  visualizeTriggerFieldContext?: VisualizeFieldContext
 ) {
   const states: Record<string, { isLoading: boolean; state: unknown }> = {};
   await Promise.all(
     Object.entries(datasourceMap).map(([datasourceId, datasource]) => {
       if (datasourceStates[datasourceId]) {
         return datasource
-          .initialize(datasourceStates[datasourceId].state || undefined, references)
+          .initialize(
+            datasourceStates[datasourceId].state || undefined,
+            references,
+            visualizeTriggerFieldContext
+          )
           .then((datasourceState) => {
             states[datasourceId] = { isLoading: false, state: datasourceState };
           });

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

@@ -173,6 +173,75 @@ describe('suggestion helpers', () => {
     expect(multiDatasourceMap.mock3.getDatasourceSuggestionsForField).not.toHaveBeenCalled();
   });
 
+  it('should call getDatasourceSuggestionsForVisualizeField when a visualizeTriggerField is passed', () => {
+    datasourceMap.mock.getDatasourceSuggestionsForVisualizeField.mockReturnValue([
+      generateSuggestion(),
+    ]);
+    getSuggestions({
+      visualizationMap: {
+        vis1: createMockVisualization(),
+      },
+      activeVisualizationId: 'vis1',
+      visualizationState: {},
+      datasourceMap,
+      datasourceStates,
+      visualizeTriggerFieldContext: {
+        indexPatternId: '1',
+        fieldName: 'test',
+      },
+    });
+    expect(datasourceMap.mock.getDatasourceSuggestionsForVisualizeField).toHaveBeenCalledWith(
+      datasourceStates.mock.state,
+      '1',
+      'test'
+    );
+  });
+
+  it('should call getDatasourceSuggestionsForVisualizeField from all datasources with a state', () => {
+    const multiDatasourceStates = {
+      mock: {
+        isLoading: false,
+        state: {},
+      },
+      mock2: {
+        isLoading: false,
+        state: {},
+      },
+    };
+    const multiDatasourceMap = {
+      mock: createMockDatasource('a'),
+      mock2: createMockDatasource('a'),
+      mock3: createMockDatasource('a'),
+    };
+    const visualizeTriggerField = {
+      indexPatternId: '1',
+      fieldName: 'test',
+    };
+    getSuggestions({
+      visualizationMap: {
+        vis1: createMockVisualization(),
+      },
+      activeVisualizationId: 'vis1',
+      visualizationState: {},
+      datasourceMap: multiDatasourceMap,
+      datasourceStates: multiDatasourceStates,
+      visualizeTriggerFieldContext: visualizeTriggerField,
+    });
+    expect(multiDatasourceMap.mock.getDatasourceSuggestionsForVisualizeField).toHaveBeenCalledWith(
+      multiDatasourceStates.mock.state,
+      '1',
+      'test'
+    );
+    expect(multiDatasourceMap.mock2.getDatasourceSuggestionsForVisualizeField).toHaveBeenCalledWith(
+      multiDatasourceStates.mock2.state,
+      '1',
+      'test'
+    );
+    expect(
+      multiDatasourceMap.mock3.getDatasourceSuggestionsForVisualizeField
+    ).not.toHaveBeenCalled();
+  });
+
   it('should rank the visualizations by score', () => {
     const mockVisualization1 = createMockVisualization();
     const mockVisualization2 = createMockVisualization();

x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.ts

@@ -7,6 +7,7 @@
 import _ from 'lodash';
 import { Ast } from '@kbn/interpreter/common';
 import { IconType } from '@elastic/eui/src/components/icon/icon';
+import { VisualizeFieldContext } from '../../../../../../src/plugins/ui_actions/public';
 import {
   Visualization,
   Datasource,
@@ -47,6 +48,7 @@ export function getSuggestions({
   subVisualizationId,
   visualizationState,
   field,
+  visualizeTriggerFieldContext,
 }: {
   datasourceMap: Record<string, Datasource>;
   datasourceStates: Record<
@@ -61,6 +63,7 @@ export function getSuggestions({
   subVisualizationId?: string;
   visualizationState: unknown;
   field?: unknown;
+  visualizeTriggerFieldContext?: VisualizeFieldContext;
 }): Suggestion[] {
   const datasources = Object.entries(datasourceMap).filter(
     ([datasourceId]) => datasourceStates[datasourceId] && !datasourceStates[datasourceId].isLoading
@@ -70,10 +73,16 @@ export function getSuggestions({
   const datasourceTableSuggestions = _.flatten(
     datasources.map(([datasourceId, datasource]) => {
       const datasourceState = datasourceStates[datasourceId].state;
-      return (field
+      const dataSourceSuggestions = visualizeTriggerFieldContext
+        ? datasource.getDatasourceSuggestionsForVisualizeField(
+            datasourceState,
+            visualizeTriggerFieldContext.indexPatternId,
+            visualizeTriggerFieldContext.fieldName
+          )
+        : field
         ? datasource.getDatasourceSuggestionsForField(datasourceState, field)
-        : datasource.getDatasourceSuggestionsFromCurrentState(datasourceState)
-      ).map((suggestion) => ({ ...suggestion, datasourceId }));
+        : datasource.getDatasourceSuggestionsFromCurrentState(datasourceState);
+      return dataSourceSuggestions.map((suggestion) => ({ ...suggestion, datasourceId }));
     })
   );