[Lens] Improve Datatable content height with custom row height

x-pack/plugins/lens/common/expressions/datatable/datatable.ts

@@ -28,6 +28,7 @@ export interface DatatableArgs {
   sortingColumnId: SortingState['columnId'];
   sortingDirection: SortingState['direction'];
   fitRowToContent?: boolean;
+  rowHeightLines?: number;
   pageSize?: PagingState['size'];
 }
 
@@ -68,6 +69,10 @@ export const getDatatable = (
       types: ['boolean'],
       help: '',
     },
+    rowHeightLines: {
+      types: ['number'],
+      help: '',
+    },
     pageSize: {
       types: ['number'],
       help: '',

x-pack/plugins/lens/public/datatable_visualization/components/cell_value.test.tsx

@@ -127,6 +127,7 @@ describe('datatable cell renderer', () => {
         ],
         sortingColumnId: '',
         sortingDirection: 'none',
+        rowHeightLines: 1,
       };
     }
 

x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx

@@ -84,6 +84,7 @@ function sampleArgs() {
     ],
     sortingColumnId: '',
     sortingDirection: 'none',
+    rowHeightLines: 1,
   };
 
   return { data, args };
@@ -299,6 +300,7 @@ describe('DatatableComponent', () => {
       ],
       sortingColumnId: '',
       sortingDirection: 'none',
+      rowHeightLines: 1,
     };
 
     const wrapper = mountWithIntl(

x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx

@@ -414,13 +414,15 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
         <EuiDataGrid
           aria-label={dataGridAriaLabel}
           data-test-subj="lnsDataTable"
-          rowHeightsOptions={
-            props.args.fitRowToContent
+          rowHeightsOptions={{
+            defaultHeight: props.args.fitRowToContent
+              ? 'auto'
+              : props.args.rowHeightLines
               ? {
-                  defaultHeight: 'auto',
+                  lineCount: props.args.rowHeightLines,
                 }
-              : undefined
-          }
+              : undefined,
+          }}
           columns={columns}
           columnVisibility={columnVisibility}
           trailingControlColumns={trailingControlColumns}

x-pack/plugins/lens/public/datatable_visualization/components/toolbar.test.tsx

@@ -5,14 +5,27 @@
  * 2.0.
  */
 
-import React, { FormEvent } from 'react';
+import React, { ChangeEvent, FormEvent } from 'react';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { DataTableToolbar } from './toolbar';
 import { DatatableVisualizationState } from '../visualization';
 import { FramePublicAPI, VisualizationToolbarProps } from '../../types';
 import { ToolbarButton } from 'src/plugins/kibana_react/public';
 import { ReactWrapper } from 'enzyme';
 import { PagingState } from '../../../common/expressions';
+import { EuiButtonGroup, EuiRange } from '@elastic/eui';
+
+// mocking random id generator function
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+
+  return {
+    ...original,
+    htmlIdGenerator: (fn: unknown) => {
+      return () => '';
+    },
+  };
+});
 
 class Harness {
   wrapper: ReactWrapper;
@@ -25,12 +38,25 @@ class Harness {
     this.wrapper.find(ToolbarButton).simulate('click');
   }
 
-  public get fitRowToContentSwitch() {
-    return this.wrapper.find('EuiSwitch[data-test-subj="lens-legend-auto-height-switch"]');
+  public get rowHeight() {
+    return this.wrapper.find(EuiButtonGroup);
   }
 
-  toggleFitRowToContent() {
-    this.fitRowToContentSwitch.prop('onChange')!({} as FormEvent);
+  changeRowHeight(newMode: 'single' | 'auto' | 'custom') {
+    this.rowHeight.prop('onChange')!(newMode);
+  }
+
+  public get rowHeightLines() {
+    return this.wrapper.find(EuiRange);
+  }
+
+  changeRowHeightLines(lineCount: number) {
+    this.rowHeightLines.prop('onChange')!(
+      {
+        currentTarget: { value: lineCount },
+      } as unknown as ChangeEvent<HTMLInputElement>,
+      true
+    );
   }
 
   public get paginationSwitch() {
@@ -56,7 +82,7 @@ describe('datatable toolbar', () => {
       setState: jest.fn(),
       frame: {} as FramePublicAPI,
       state: {
-        fitRowToContent: false,
+        rowHeight: 'single',
       } as DatatableVisualizationState,
     };
 
@@ -66,37 +92,55 @@ describe('datatable toolbar', () => {
   it('should reflect state in the UI', async () => {
     harness.togglePopover();
 
-    expect(harness.fitRowToContentSwitch.prop('checked')).toBe(false);
+    expect(harness.rowHeight.prop('idSelected')).toBe('single');
     expect(harness.paginationSwitch.prop('checked')).toBe(false);
 
     harness.wrapper.setProps({
       state: {
-        fitRowToContent: true,
+        rowHeight: 'auto',
         paging: defaultPagingState,
       },
     });
 
-    expect(harness.fitRowToContentSwitch.prop('checked')).toBe(true);
+    expect(harness.rowHeight.prop('idSelected')).toBe('auto');
     expect(harness.paginationSwitch.prop('checked')).toBe(true);
   });
 
-  it('should toggle fit-row-to-content', async () => {
+  it('should change row height to "Auto" mode', async () => {
     harness.togglePopover();
 
-    harness.toggleFitRowToContent();
+    harness.changeRowHeight('auto');
 
     expect(defaultProps.setState).toHaveBeenCalledTimes(1);
     expect(defaultProps.setState).toHaveBeenNthCalledWith(1, {
-      fitRowToContent: true,
+      rowHeight: 'auto',
+      rowHeightLines: undefined,
     });
 
-    harness.wrapper.setProps({ state: { fitRowToContent: true } }); // update state manually
-    harness.toggleFitRowToContent(); // turn it off
+    harness.wrapper.setProps({ state: { rowHeight: 'auto' } }); // update state manually
+    harness.changeRowHeight('single'); // turn it off
 
     expect(defaultProps.setState).toHaveBeenCalledTimes(2);
     expect(defaultProps.setState).toHaveBeenNthCalledWith(2, {
-      fitRowToContent: false,
+      rowHeight: 'single',
+      rowHeightLines: 1,
+    });
+  });
+
+  it('should change row height to "Custom" mode', async () => {
+    harness.togglePopover();
+
+    harness.changeRowHeight('custom');
+
+    expect(defaultProps.setState).toHaveBeenCalledTimes(1);
+    expect(defaultProps.setState).toHaveBeenNthCalledWith(1, {
+      rowHeight: 'custom',
+      rowHeightLines: 2,
     });
+
+    harness.wrapper.setProps({ state: { rowHeight: 'custom' } }); // update state manually
+
+    expect(harness.rowHeightLines.prop('value')).toBe(2);
   });
 
   it('should toggle table pagination', async () => {
@@ -107,18 +151,18 @@ describe('datatable toolbar', () => {
     expect(defaultProps.setState).toHaveBeenCalledTimes(1);
     expect(defaultProps.setState).toHaveBeenNthCalledWith(1, {
       paging: defaultPagingState,
-      fitRowToContent: false,
+      rowHeight: 'single',
     });
 
     // update state manually
     harness.wrapper.setProps({
-      state: { fitRowToContent: false, paging: defaultPagingState },
+      state: { rowHeight: 'single', paging: defaultPagingState },
     });
     harness.togglePagination(); // turn it off. this should disable pagination but preserve the default page size
 
     expect(defaultProps.setState).toHaveBeenCalledTimes(2);
     expect(defaultProps.setState).toHaveBeenNthCalledWith(2, {
-      fitRowToContent: false,
+      rowHeight: 'single',
       paging: { ...defaultPagingState, enabled: false },
     });
   });