diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index 831d3d351de1f..5197f5872df9f 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -697,12 +697,14 @@ export const UnifiedDataTable = ({ [dataView, displayedColumns, shouldPrependTimeFieldColumn] ); + // When columns are modified, reset the last column to auto width if only absolute + // width columns remain, to ensure the columns fill the available grid space useDeepCompareEffect(() => { - const hasAutowidthColumn = visibleColumns.some( + const hasAutoWidthColumn = visibleColumns.some( (col) => settings?.columns?.[col]?.width == null ); - if (!hasAutowidthColumn) { + if (!hasAutoWidthColumn) { onResize?.({ columnId: visibleColumns[visibleColumns.length - 1] }); } }, [onResize, visibleColumns]); diff --git a/packages/kbn-unified-data-table/src/components/data_table_columns.tsx b/packages/kbn-unified-data-table/src/components/data_table_columns.tsx index 368bda5198766..7cec328f9c7c9 100644 --- a/packages/kbn-unified-data-table/src/components/data_table_columns.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table_columns.tsx @@ -12,6 +12,7 @@ import { type EuiDataGridColumn, type EuiDataGridColumnCellAction, EuiScreenReaderOnly, + EuiListGroupItemProps, } from '@elastic/eui'; import { type DataView, DataViewField } from '@kbn/data-views-plugin/public'; import { ToastsStart, IUiSettingsClient } from '@kbn/core/public'; @@ -145,6 +146,20 @@ function buildEuiGridColumn({ editField && dataViewField && buildEditFieldButton({ hasEditDataViewPermission, dataView, field: dataViewField, editField }); + const resetWidthButton: EuiListGroupItemProps | undefined = + onResize && columnWidth > 0 + ? { + label: i18n.translate('unifiedDataTable.grid.resetColumnWidthButton', { + defaultMessage: 'Reset width', + }), + iconType: 'refresh', + size: 'xs', + iconProps: { size: 'm' }, + onClick: () => { + onResize({ columnId: columnName }); + }, + } + : undefined; const columnDisplayName = getColumnDisplayName( columnName, @@ -196,21 +211,7 @@ function buildEuiGridColumn({ showMoveLeft: !defaultColumns, showMoveRight: !defaultColumns, additional: [ - ...(onResize && columnWidth > 0 - ? [ - { - label: i18n.translate('unifiedDataTable.resetWidthColumnLabel', { - defaultMessage: 'Reset width', - }), - iconType: 'refresh', - size: 'xs' as 'xs', - iconProps: { size: 'm' as 'm' }, - onClick: () => { - onResize({ columnId: columnName }); - }, - }, - ] - : []), + ...(resetWidthButton ? [resetWidthButton] : []), ...(columnName === '__source' ? [] : [ diff --git a/src/plugins/discover/public/application/main/state_management/utils/get_default_profile_state.test.ts b/src/plugins/discover/public/application/main/state_management/utils/get_default_profile_state.test.ts index 869be11d61159..bdf62d909d964 100644 --- a/src/plugins/discover/public/application/main/state_management/utils/get_default_profile_state.test.ts +++ b/src/plugins/discover/public/application/main/state_management/utils/get_default_profile_state.test.ts @@ -31,7 +31,6 @@ describe('getDefaultProfileState', () => { defaultColumns: ['messsage', 'bytes'], dataView: dataViewWithTimefieldMock, esqlQueryColumns: undefined, - records: [], }); expect(appState).toEqual({ columns: ['message', 'extension', 'bytes'], @@ -54,11 +53,13 @@ describe('getDefaultProfileState', () => { }, defaultColumns: ['messsage', 'bytes'], dataView: emptyDataView, - esqlQueryColumns: [{ id: '1', name: 'foo', meta: { type: 'string' } }], - records: [], + esqlQueryColumns: [ + { id: '1', name: 'foo', meta: { type: 'string' } }, + { id: '2', name: 'bar', meta: { type: 'string' } }, + ], }); expect(appState).toEqual({ - columns: ['foo'], + columns: ['foo', 'bar'], grid: { columns: { foo: { @@ -79,7 +80,6 @@ describe('getDefaultProfileState', () => { defaultColumns: [], dataView: dataViewWithTimefieldMock, esqlQueryColumns: undefined, - records: [], }); expect(appState).toEqual({ rowHeight: 3, @@ -96,7 +96,6 @@ describe('getDefaultProfileState', () => { defaultColumns: [], dataView: dataViewWithTimefieldMock, esqlQueryColumns: undefined, - records: [], }); expect(appState).toEqual(undefined); }); diff --git a/src/plugins/discover/public/context_awareness/__mocks__/index.tsx b/src/plugins/discover/public/context_awareness/__mocks__/index.tsx index 5d55dfa306b8e..873319c0e75ab 100644 --- a/src/plugins/discover/public/context_awareness/__mocks__/index.tsx +++ b/src/plugins/discover/public/context_awareness/__mocks__/index.tsx @@ -63,6 +63,10 @@ export const createContextAwarenessMocks = ({ name: 'foo', width: 300, }, + { + name: 'bar', + width: 400, + }, ], rowHeight: 3, })),