[Lens] Auto height setting for table (elastic#116156)

* Add setting which allow user to fit row to content * Fix lint * Change icon * Fix switch behavior * Fix some nits * Fix comments * Fix lint * Fix lint Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
fkanout · Nov 17, 2021 · 2ab505a · 2ab505a
1 parent 4446c63
commit 2ab505a
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 5 deletions.
diff --git a/x-pack/plugins/lens/common/expressions/datatable/datatable.ts b/x-pack/plugins/lens/common/expressions/datatable/datatable.ts
@@ -22,6 +22,7 @@ export interface DatatableArgs {
   columns: ColumnConfigArg[];
   sortingColumnId: SortingState['columnId'];
   sortingDirection: SortingState['direction'];
+  fitRowToContent?: boolean;
 }
 
 export const getDatatable = (
@@ -57,6 +58,10 @@ export const getDatatable = (
       types: ['string'],
       help: '',
     },
+    fitRowToContent: {
+      types: ['boolean'],
+      help: '',
+    },
   },
   async fn(...args) {
     /** Build optimization: prevent adding extra code into initial bundle **/

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
@@ -8,6 +8,7 @@
 import React, { useContext, useEffect } from 'react';
 import { EuiDataGridCellValueElementProps } from '@elastic/eui';
 import { IUiSettingsClient } from 'kibana/public';
+import classNames from 'classnames';
 import type { FormatFactory } from '../../../common';
 import { getOriginalId } from '../../../common/expressions';
 import type { ColumnConfig } from '../../../common/expressions';
@@ -18,7 +19,8 @@ export const createGridCell = (
   formatters: Record<string, ReturnType<FormatFactory>>,
   columnConfig: ColumnConfig,
   DataContext: React.Context<DataContextType>,
-  uiSettings: IUiSettingsClient
+  uiSettings: IUiSettingsClient,
+  fitRowToContent?: boolean
 ) => {
   // Changing theme requires a full reload of the page, so we can cache here
   const IS_DARK_THEME = uiSettings.get('theme:darkMode');
@@ -28,6 +30,9 @@ export const createGridCell = (
     const content = formatters[columnId]?.convert(rowValue, 'html');
     const currentAlignment = alignments && alignments[columnId];
     const alignmentClassName = `lnsTableCell--${currentAlignment}`;
+    const className = classNames(alignmentClassName, {
+      lnsTableCell: !fitRowToContent,
+    });
 
     const { colorMode, palette } =
       columnConfig.columns.find(({ columnId: id }) => id === columnId) || {};
@@ -75,7 +80,7 @@ export const createGridCell = (
          */
         dangerouslySetInnerHTML={{ __html: content }} // eslint-disable-line react/no-danger
         data-test-subj="lnsTableCellContent"
-        className={`lnsTableCell ${alignmentClassName}`}
+        className={className}
       />
     );
   };

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx
@@ -262,8 +262,15 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
   }, [firstTableRef, onRowContextMenuClick, columnConfig, hasAtLeastOneRowClickAction]);
 
   const renderCellValue = useMemo(
-    () => createGridCell(formatters, columnConfig, DataContext, props.uiSettings),
-    [formatters, columnConfig, props.uiSettings]
+    () =>
+      createGridCell(
+        formatters,
+        columnConfig,
+        DataContext,
+        props.uiSettings,
+        props.args.fitRowToContent
+      ),
+    [formatters, columnConfig, props.uiSettings, props.args.fitRowToContent]
   );
 
   const columnVisibility = useMemo(
@@ -349,6 +356,13 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
         <EuiDataGrid
           aria-label={dataGridAriaLabel}
           data-test-subj="lnsDataTable"
+          rowHeightsOptions={
+            props.args.fitRowToContent
+              ? {
+                  defaultHeight: 'auto',
+                }
+              : undefined
+          }
           columns={columns}
           columnVisibility={columnVisibility}
           trailingControlColumns={trailingControlColumns}

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiFlexGroup, EuiFormRow, EuiSwitch } from '@elastic/eui';
+import { ToolbarPopover } from '../../shared_components';
+import type { VisualizationToolbarProps } from '../../types';
+import type { DatatableVisualizationState } from '../visualization';
+
+export function DataTableToolbar(props: VisualizationToolbarProps<DatatableVisualizationState>) {
+  const { state, setState } = props;
+
+  const onChange = useCallback(() => {
+    const current = state.fitRowToContent ?? false;
+    setState({
+      ...state,
+      fitRowToContent: !current,
+    });
+  }, [setState, state]);
+
+  return (
+    <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" responsive={false}>
+      <ToolbarPopover
+        title={i18n.translate('xpack.lens.table.valuesVisualOptions', {
+          defaultMessage: 'Visual options',
+        })}
+        type="visualOptions"
+        groupPosition="none"
+        buttonDataTestSubj="lnsVisualOptionsButton"
+      >
+        <EuiFormRow
+          label={i18n.translate('xpack.lens.table.visualOptionsFitRowToContentLabel', {
+            defaultMessage: 'Fit row to content',
+          })}
+          display="columnCompressedSwitch"
+        >
+          <EuiSwitch
+            compressed
+            data-test-subj="lens-legend-auto-height-switch"
+            label=""
+            showLabel={false}
+            checked={Boolean(state.fitRowToContent)}
+            onChange={onChange}
+          />
+        </EuiFormRow>
+      </ToolbarPopover>
+    </EuiFlexGroup>
+  );
+}
diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
@@ -24,12 +24,13 @@ import { getStopsForFixedMode } from '../shared_components';
 import { LayerType, layerTypes } from '../../common';
 import { getDefaultSummaryLabel } from '../../common/expressions';
 import type { ColumnState, SortingState } from '../../common/expressions';
-
+import { DataTableToolbar } from './components/toolbar';
 export interface DatatableVisualizationState {
   columns: ColumnState[];
   layerId: string;
   layerType: LayerType;
   sorting?: SortingState;
+  fitRowToContent?: boolean;
 }
 
 const visualizationLabel = i18n.translate('xpack.lens.datatable.label', {
@@ -389,6 +390,7 @@ export const getDatatableVisualization = ({
             }),
             sortingColumnId: [state.sorting?.columnId || ''],
             sortingDirection: [state.sorting?.direction || 'none'],
+            fitRowToContent: [state.fitRowToContent ?? false],
           },
         },
       ],
@@ -399,6 +401,15 @@ export const getDatatableVisualization = ({
     return undefined;
   },
 
+  renderToolbar(domElement, props) {
+    render(
+      <I18nProvider>
+        <DataTableToolbar {...props} />
+      </I18nProvider>,
+      domElement
+    );
+  },
+
   onEditAction(state, event) {
     switch (event.data.action) {
       case 'sort':