[lens] Support layers for visualizing results of multiple queries

x-pack/legacy/plugins/lens/mappings.json

@@ -7,7 +7,7 @@
       "visualizationType": {
         "type": "keyword"
       },
-      "datasourceType": {
+      "activeDatasourceId": {
         "type": "keyword"
       },
       "state": {

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

@@ -9,7 +9,7 @@ import ReactDOM from 'react-dom';
 import { i18n } from '@kbn/i18n';
 import { EuiBasicTable } from '@elastic/eui';
 import { ExpressionFunction } from 'src/legacy/core_plugins/interpreter/types';
-import { KibanaDatatable } from '../types';
+import { KibanaDatatable, LensMultiTable } from '../types';
 import { RenderFunction } from '../interpreter_types';
 
 export interface DatatableColumns {
@@ -22,7 +22,7 @@ interface Args {
 }
 
 export interface DatatableProps {
-  data: KibanaDatatable;
+  data: LensMultiTable;
   args: Args;
 }
 
@@ -56,7 +56,7 @@ export const datatable: ExpressionFunction<
     },
   },
   context: {
-    types: ['kibana_datatable'],
+    types: ['lens_multitable'],
   },
   fn(data: KibanaDatatable, args: Args) {
     return {
@@ -106,11 +106,6 @@ export const datatableColumns: ExpressionFunction<
   },
 };
 
-export interface DatatableProps {
-  data: KibanaDatatable;
-  args: Args;
-}
-
 export const datatableRenderer: RenderFunction<DatatableProps> = {
   name: 'lens_datatable_renderer',
   displayName: i18n.translate('xpack.lens.datatable.visualizationName', {
@@ -125,17 +120,20 @@ export const datatableRenderer: RenderFunction<DatatableProps> = {
 };
 
 function DatatableComponent(props: DatatableProps) {
+  const [firstTable] = Object.values(props.data.tables);
+
   return (
     <EuiBasicTable
+      className="lnsDataTable"
       columns={props.args.columns.columnIds
-        .map((id, index) => {
+        .map((field, index) => {
           return {
-            field: props.args.columns.columnIds[index],
+            field,
             name: props.args.columns.labels[index],
           };
         })
         .filter(({ field }) => !!field)}
-      items={props.data.rows}
+      items={firstTable ? firstTable.rows : []}
     />
   );
 }

x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/index.scss

@@ -0,0 +1,3 @@
+.lnsDataTable {
+  align-self: flex-start;
+}

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

@@ -8,79 +8,81 @@ import React from 'react';
 import { createMockDatasource } from '../editor_frame_plugin/mocks';
 import {
   DatatableVisualizationState,
-  DatatableConfigPanel,
   datatableVisualization,
+  DataTableLayer,
 } from './visualization';
 import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import { Operation, DataType } from '../types';
+import { Operation, DataType, FramePublicAPI } from '../types';
 import { generateId } from '../id_generator';
 
 jest.mock('../id_generator');
 
+function mockFrame(): FramePublicAPI {
+  return {
+    addNewLayer: () => 'aaa',
+    removeLayer: () => {},
+    datasourceLayers: {},
+  };
+}
+
 describe('Datatable Visualization', () => {
   describe('#initialize', () => {
     it('should initialize from the empty state', () => {
-      const datasource = createMockDatasource();
       (generateId as jest.Mock).mockReturnValueOnce('id');
-      expect(datatableVisualization.initialize(datasource.publicAPIMock)).toEqual({
-        columns: [{ id: 'id', label: '' }],
+      expect(datatableVisualization.initialize(mockFrame(), undefined)).toEqual({
+        layers: [
+          {
+            layerId: 'aaa',
+            columns: ['id'],
+          },
+        ],
       });
     });
 
     it('should initialize from a persisted state', () => {
-      const datasource = createMockDatasource();
       const expectedState: DatatableVisualizationState = {
-        columns: [{ id: 'saved', label: 'label' }],
+        layers: [
+          {
+            layerId: 'foo',
+            columns: ['saved'],
+          },
+        ],
       };
-      expect(datatableVisualization.initialize(datasource.publicAPIMock, expectedState)).toEqual(
-        expectedState
-      );
+      expect(datatableVisualization.initialize(mockFrame(), expectedState)).toEqual(expectedState);
     });
   });
 
   describe('#getPersistableState', () => {
     it('should persist the internal state', () => {
       const expectedState: DatatableVisualizationState = {
-        columns: [{ id: 'saved', label: 'label' }],
+        layers: [
+          {
+            layerId: 'baz',
+            columns: ['a', 'b', 'c'],
+          },
+        ],
       };
       expect(datatableVisualization.getPersistableState(expectedState)).toEqual(expectedState);
     });
   });
 
-  describe('DatatableConfigPanel', () => {
-    it('should update the column label', () => {
-      const setState = jest.fn();
-      const wrapper = mount(
-        <DatatableConfigPanel
-          dragDropContext={{ dragging: undefined, setDragging: () => {} }}
-          datasource={createMockDatasource().publicAPIMock}
-          setState={setState}
-          state={{ columns: [{ id: 'saved', label: 'label' }] }}
-        />
-      );
-
-      const labelEditor = wrapper.find('[data-test-subj="lnsDatatable-columnLabel"]').at(1);
-
-      act(() => {
-        labelEditor.simulate('change', { target: { value: 'New Label' } });
-      });
-
-      expect(setState).toHaveBeenCalledWith({
-        columns: [{ id: 'saved', label: 'New Label' }],
-      });
-    });
-
-    it('should allow all operations to be shown', () => {
+  describe('DataTableLayer', () => {
+    it('allows all kinds of operations', () => {
       const setState = jest.fn();
       const datasource = createMockDatasource();
+      const layer = { layerId: 'a', columns: ['b', 'c'] };
 
       mount(
-        <DatatableConfigPanel
+        <DataTableLayer
           dragDropContext={{ dragging: undefined, setDragging: () => {} }}
-          datasource={datasource.publicAPIMock}
+          frame={{
+            addNewLayer: jest.fn(),
+            removeLayer: jest.fn(),
+            datasourceLayers: { a: datasource.publicAPIMock },
+          }}
+          layer={layer}
           setState={setState}
-          state={{ columns: [{ id: 'saved', label: 'label' }] }}
+          state={{ layers: [layer] }}
         />
       );
 
@@ -105,52 +107,74 @@ describe('Datatable Visualization', () => {
       );
     });
 
-    it('should remove a column', () => {
+    it('allows columns to be removed', () => {
       const setState = jest.fn();
-      const wrapper = mount(
-        <DatatableConfigPanel
+      const datasource = createMockDatasource();
+      const layer = { layerId: 'a', columns: ['b', 'c'] };
+      const component = mount(
+        <DataTableLayer
           dragDropContext={{ dragging: undefined, setDragging: () => {} }}
-          datasource={createMockDatasource().publicAPIMock}
+          frame={{
+            addNewLayer: jest.fn(),
+            removeLayer: jest.fn(),
+            datasourceLayers: { a: datasource.publicAPIMock },
+          }}
+          layer={layer}
           setState={setState}
-          state={{ columns: [{ id: 'saved', label: '' }, { id: 'second', label: '' }] }}
+          state={{ layers: [layer] }}
         />
       );
 
-      act(() => {
-        wrapper
-          .find('[data-test-subj="lnsDatatable_dimensionPanelRemove_saved"]')
-          .first()
-          .simulate('click');
-      });
+      const onRemove = component
+        .find('[data-test-subj="datatable_multicolumnEditor"]')
+        .first()
+        .prop('onRemove') as (k: string) => {};
+
+      onRemove('b');
 
       expect(setState).toHaveBeenCalledWith({
-        columns: [{ id: 'second', label: '' }],
+        layers: [
+          {
+            layerId: 'a',
+            columns: ['c'],
+          },
+        ],
       });
     });
 
-    it('should be able to add more columns', () => {
+    it('allows columns to be added', () => {
+      (generateId as jest.Mock).mockReturnValueOnce('d');
       const setState = jest.fn();
       const datasource = createMockDatasource();
-      const wrapper = mount(
-        <DatatableConfigPanel
+      const layer = { layerId: 'a', columns: ['b', 'c'] };
+      const component = mount(
+        <DataTableLayer
           dragDropContext={{ dragging: undefined, setDragging: () => {} }}
-          datasource={datasource.publicAPIMock}
+          frame={{
+            addNewLayer: jest.fn(),
+            removeLayer: jest.fn(),
+            datasourceLayers: { a: datasource.publicAPIMock },
+          }}
+          layer={layer}
           setState={setState}
-          state={{ columns: [{ id: 'saved', label: 'label' }] }}
+          state={{ layers: [layer] }}
         />
       );
 
-      (generateId as jest.Mock).mockReturnValueOnce('newId');
+      const onAdd = component
+        .find('[data-test-subj="datatable_multicolumnEditor"]')
+        .first()
+        .prop('onAdd') as () => {};
 
-      act(() => {
-        wrapper
-          .find('[data-test-subj="lnsDatatable_dimensionPanel_add"]')
-          .first()
-          .simulate('click');
-      });
+      onAdd();
 
       expect(setState).toHaveBeenCalledWith({
-        columns: [{ id: 'saved', label: 'label' }, { id: 'newId', label: '' }],
+        layers: [
+          {
+            layerId: 'a',
+            columns: ['b', 'c', 'd'],
+          },
+        ],
       });
     });
   });