From 563ed7adb3132e0d9fce071173631b0b33565c14 Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Fri, 12 Nov 2021 11:07:29 +0300 Subject: [PATCH] [Lens] Auto height setting for table (#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> --- .../common/expressions/datatable/datatable.ts | 5 ++ .../components/cell_value.tsx | 9 +++- .../components/table_basic.tsx | 18 ++++++- .../components/toolbar.tsx | 54 +++++++++++++++++++ .../datatable_visualization/visualization.tsx | 13 ++++- 5 files changed, 94 insertions(+), 5 deletions(-) create mode 100644 x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx diff --git a/x-pack/plugins/lens/common/expressions/datatable/datatable.ts b/x-pack/plugins/lens/common/expressions/datatable/datatable.ts index d9f1f9c1196ffb..7a6d68eaa65664 100644 --- 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 index 6d6b2e4b1013fa..a609b4b2a6e5fc 100644 --- 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>, columnConfig: ColumnConfig, DataContext: React.Context, - 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 index f627a3ef8ff91d..ec7a00442f950a 100644 --- 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) => { ) { + const { state, setState } = props; + + const onChange = useCallback(() => { + const current = state.fitRowToContent ?? false; + setState({ + ...state, + fitRowToContent: !current, + }); + }, [setState, state]); + + return ( + + + + + + + + ); +} diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx index b21b8b8e07b36d..a953da4c380f03 100644 --- 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( + + + , + domElement + ); + }, + onEditAction(state, event) { switch (event.data.action) { case 'sort':