[DataTable] Add rowHeightsOptions to table (#114637)

* Upgraded the version of EUI to 38.2.0 from 38.0.1

* Updated the i18n mappings required for EUI v.38.2.0

* Update i18n snapshots and resolve linting error

* Removed html_id_generator mocks.

Current mock was failing due to missing useGeneratedHtmlId export. This is safe to remove because EUI contains a .testenv that contains an mock for html_id_generator. More info at https://github.com/elastic/eui/blob/master/src/services/accessibility/html_id_generator.testenv.ts

* Resolve linting error in i18n mapping file

* Removed html_id_generator mocks.

Current mock was failing due to missing useGeneratedHtmlId export. This is safe to remove because EUI contains a .testenv that contains a mock for html_id_generator. More info at https://github.com/elastic/eui/blob/master/src/services/accessibility/html_id_generator.testenv.ts

* Update plugin snapshots

* Resolve merge conflict in license_checker config.ts file

* Upgrade EUI to version 39.0.0 from the original target (38.2.0) to handle an issue found with a functional test during the original upgrade

* Updated the i18n mapping for EUI v.39.0.0

* Update various snapshots to account for the an i18n translation token addition in EUI v. 39.0.0

* Updated test cases marked as obsolete by CI

* Update src/dev/license_checker/config.ts

Removing TODO comments from src/dev/license_checker/config.ts as they are no longer needed.

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

* Add option auto fit row to content

* Fix tests

* Fix tests

* Add temp fix for correct rendering grid with auto-height when changing data or setting

* Fix lint

* Fix lint and tests

* Adds new dependency for temp fix

Co-authored-by: Brianna Hall <briannajdhall@gmail.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Bree Hall <40739624+breehall@users.noreply.github.com>
Co-authored-by: Constance <constancecchen@users.noreply.github.com>

src/plugins/vis_types/table/common/types.ts

@@ -24,5 +24,6 @@ export interface TableVisParams {
   showTotal: boolean;
   totalFunc: AggTypes;
   percentageCol: string;
+  autoFitRowToContent?: boolean;
   row?: boolean;
 }

src/plugins/vis_types/table/public/__snapshots__/table_vis_fn.test.ts.snap

@@ -26,6 +26,7 @@ Object {
   "type": "render",
   "value": Object {
     "visConfig": Object {
+      "autoFitRowToContent": false,
       "buckets": Array [],
       "metrics": Array [
         Object {

src/plugins/vis_types/table/public/components/__snapshots__/table_vis_basic.test.tsx.snap

@@ -17,6 +17,7 @@ exports[`TableVisBasic should init data grid 1`] = `
         "header": "underline",
       }
     }
+    key="0"
     minSizeForControls={1}
     onColumnResize={[Function]}
     renderCellValue={[Function]}
@@ -55,6 +56,7 @@ exports[`TableVisBasic should init data grid with title provided - for split mod
         "header": "underline",
       }
     }
+    key="0"
     minSizeForControls={1}
     onColumnResize={[Function]}
     renderCellValue={[Function]}
@@ -86,6 +88,7 @@ exports[`TableVisBasic should render the toolbar 1`] = `
         "header": "underline",
       }
     }
+    key="0"
     minSizeForControls={1}
     onColumnResize={[Function]}
     renderCellValue={[Function]}

src/plugins/vis_types/table/public/components/table_vis_basic.test.tsx

@@ -67,6 +67,7 @@ describe('TableVisBasic', () => {
   });
 
   it('should sort rows by column and pass the sorted rows for consumers', () => {
+    (createTableVisCell as jest.Mock).mockClear();
     const uiStateProps = {
       ...props.uiStateProps,
       sort: {
@@ -96,7 +97,7 @@ describe('TableVisBasic', () => {
         visConfig={{ ...props.visConfig, showToolbar: true }}
       />
     );
-    expect(createTableVisCell).toHaveBeenCalledWith(sortedRows, table.formattedColumns);
+    expect(createTableVisCell).toHaveBeenCalledWith(sortedRows, table.formattedColumns, undefined);
     expect(createGridColumns).toHaveBeenCalledWith(
       table.columns,
       sortedRows,

src/plugins/vis_types/table/public/components/table_vis_basic.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useMemo, useEffect, useState, useRef } from 'react';
 import { EuiDataGrid, EuiDataGridProps, EuiDataGridSorting, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { orderBy } from 'lodash';
@@ -47,8 +47,16 @@ export const TableVisBasic = memo(
 
     // renderCellValue is a component which renders a cell based on column and row indexes
     const renderCellValue = useMemo(
-      () => createTableVisCell(sortedRows, formattedColumns),
-      [formattedColumns, sortedRows]
+      () => createTableVisCell(sortedRows, formattedColumns, visConfig.autoFitRowToContent),
+      [formattedColumns, sortedRows, visConfig.autoFitRowToContent]
+    );
+
+    const rowHeightsOptions = useMemo(
+      () =>
+        visConfig.autoFitRowToContent
+          ? ({ defaultHeight: 'auto' } as unknown as EuiDataGridProps['rowHeightsOptions'])
+          : undefined,
+      [visConfig.autoFitRowToContent]
     );
 
     // Columns config
@@ -103,6 +111,26 @@ export const TableVisBasic = memo(
       [columns, setColumnsWidth]
     );
 
+    const firstRender = useRef(true);
+    const [dataGridUpdateCounter, setDataGridUpdateCounter] = useState(0);
+
+    // key was added as temporary solution to force re-render if we change autoFitRowToContent or we get new data
+    // cause we have problem with correct updating height cache in EUI datagrid when we use auto-height
+    // will be removed as soon as fix problem on EUI side
+    useEffect(() => {
+      // skip first render
+      if (firstRender.current) {
+        firstRender.current = false;
+        return;
+      }
+      // skip if auto height was turned off
+      if (!visConfig.autoFitRowToContent) {
+        return;
+      }
+      // update counter to remount grid from scratch
+      setDataGridUpdateCounter((counter) => counter + 1);
+    }, [visConfig.autoFitRowToContent, table, sort, pagination, columnsWidth]);
+
     return (
       <>
         {title && (
@@ -111,12 +139,14 @@ export const TableVisBasic = memo(
           </EuiTitle>
         )}
         <EuiDataGrid
+          key={String(dataGridUpdateCounter)}
           aria-label={dataGridAriaLabel}
           columns={gridColumns}
           gridStyle={{
             border: 'horizontal',
             header: 'underline',
           }}
+          rowHeightsOptions={rowHeightsOptions}
           rowCount={rows.length}
           columnVisibility={{
             visibleColumns: columns.map(({ id }) => id),

src/plugins/vis_types/table/public/components/table_vis_cell.tsx

@@ -13,7 +13,7 @@ import { DatatableRow } from 'src/plugins/expressions';
 import { FormattedColumns } from '../types';
 
 export const createTableVisCell =
-  (rows: DatatableRow[], formattedColumns: FormattedColumns) =>
+  (rows: DatatableRow[], formattedColumns: FormattedColumns, autoFitRowToContent?: boolean) =>
   ({ rowIndex, columnId }: EuiDataGridCellValueElementProps) => {
     const rowValue = rows[rowIndex][columnId];
     const column = formattedColumns[columnId];
@@ -28,7 +28,7 @@ export const createTableVisCell =
          */
         dangerouslySetInnerHTML={{ __html: content }} // eslint-disable-line react/no-danger
         data-test-subj="tbvChartCellContent"
-        className="tbvChartCellContent"
+        className={autoFitRowToContent ? '' : 'tbvChartCellContent'}
       />
     );
 

src/plugins/vis_types/table/public/components/table_vis_options.tsx

@@ -93,6 +93,16 @@ function TableOptions({
         data-test-subj="showMetricsAtAllLevels"
       />
 
+      <SwitchOption
+        label={i18n.translate('visTypeTable.params.autoFitRow', {
+          defaultMessage: 'Auto fit rows to content',
+        })}
+        paramName="autoFitRowToContent"
+        value={stateParams.autoFitRowToContent}
+        setValue={setValue}
+        data-test-subj="autoFitRowToContent"
+      />
+
       <SwitchOption
         label={i18n.translate('visTypeTable.params.showPartialRowsLabel', {
           defaultMessage: 'Show partial rows',

src/plugins/vis_types/table/public/table_vis_fn.test.ts

@@ -36,6 +36,7 @@ describe('interpreter/functions#table', () => {
     splitColumn: undefined,
     splitRow: undefined,
     showMetricsAtAllLevels: false,
+    autoFitRowToContent: false,
     sort: {
       columnIndex: null,
       direction: null,

src/plugins/vis_types/table/public/table_vis_fn.ts

@@ -118,6 +118,11 @@ export const createTableVisFn = (): TableExpressionFunctionDefinition => ({
         defaultMessage: 'Specifies calculating function for the total row. Possible options are: ',
       }),
     },
+    autoFitRowToContent: {
+      types: ['boolean'],
+      help: '',
+      default: false,
+    },
   },
   fn(input, args, handlers) {
     const convertedData = tableVisResponseHandler(input, args);

src/plugins/vis_types/table/public/table_vis_type.ts

@@ -35,6 +35,7 @@ export const tableVisTypeDefinition: VisTypeDefinition<TableVisParams> = {
       showToolbar: false,
       totalFunc: 'sum',
       percentageCol: '',
+      autoFitRowToContent: false,
     },
   },
   editorConfig: {

src/plugins/vis_types/table/public/to_ast.ts

@@ -64,6 +64,7 @@ export const toExpressionAst: VisToExpressionAst<TableVisParams> = (vis, params)
     showMetricsAtAllLevels: vis.params.showMetricsAtAllLevels,
     showToolbar: vis.params.showToolbar,
     showTotal: vis.params.showTotal,
+    autoFitRowToContent: vis.params.autoFitRowToContent,
     totalFunc: vis.params.totalFunc,
     title: vis.title,
     metrics: metrics.map(prepareDimension),