[Discover] [Unified Data Table] Improve absolute column width handling

packages/kbn-unified-data-table/src/components/data_table.test.tsx

@@ -5,7 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { ReactWrapper } from 'enzyme';
 import {
   EuiButton,
@@ -33,6 +33,7 @@ import { DatatableColumnType } from '@kbn/expressions-plugin/common';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { CELL_CLASS } from '../utils/get_render_cell_value';
+import { defaultTimeColumnWidth } from '../constants';
 
 const mockUseDataGridColumnsCellActions = jest.fn((prop: unknown) => []);
 jest.mock('@kbn/cell-actions', () => ({
@@ -90,6 +91,37 @@ const DataTable = (props: Partial<UnifiedDataTableProps>) => (
   </KibanaContextProvider>
 );
 
+const renderDataTable = (props: Partial<UnifiedDataTableProps>) => {
+  const DataTableWrapped = () => {
+    const [columns, setColumns] = useState(props.columns ?? []);
+    const [settings, setSettings] = useState(props.settings);
+
+    return (
+      <IntlProvider locale="en">
+        <DataTable
+          {...props}
+          columns={columns}
+          onSetColumns={setColumns}
+          settings={settings}
+          onResize={({ columnId, width }) => {
+            setSettings({
+              ...settings,
+              columns: {
+                ...settings?.columns,
+                [columnId]: {
+                  width,
+                },
+              },
+            });
+          }}
+        />
+      </IntlProvider>
+    );
+  };
+
+  render(<DataTableWrapped />);
+};
+
 async function getComponent(props: UnifiedDataTableProps = getProps()) {
   const component = mountWithIntl(<DataTable {...props} />);
   await act(async () => {
@@ -265,34 +297,19 @@ describe('UnifiedDataTable', () => {
 
   describe('edit field button', () => {
     it('should render the edit field button if onFieldEdited is provided', async () => {
-      const component = await getComponent({
-        ...getProps(),
-        columns: ['message'],
-        onFieldEdited: jest.fn(),
-      });
-      expect(findTestSubject(component, 'dataGridHeaderCellActionGroup-message').exists()).toBe(
-        false
-      );
-      findTestSubject(component, 'dataGridHeaderCell-message').find('button').simulate('click');
-      expect(findTestSubject(component, 'dataGridHeaderCellActionGroup-message').exists()).toBe(
-        true
-      );
-      expect(findTestSubject(component, 'gridEditFieldButton').exists()).toBe(true);
+      renderDataTable({ columns: ['message'], onFieldEdited: jest.fn() });
+      expect(screen.queryByTestId('dataGridHeaderCellActionGroup-message')).not.toBeInTheDocument();
+      userEvent.click(screen.getByRole('button', { name: 'message' }));
+      expect(screen.getByTestId('dataGridHeaderCellActionGroup-message')).toBeInTheDocument();
+      expect(screen.getByTestId('gridEditFieldButton')).toBeInTheDocument();
     });
 
     it('should not render the edit field button if onFieldEdited is not provided', async () => {
-      const component = await getComponent({
-        ...getProps(),
-        columns: ['message'],
-      });
-      expect(findTestSubject(component, 'dataGridHeaderCellActionGroup-message').exists()).toBe(
-        false
-      );
-      findTestSubject(component, 'dataGridHeaderCell-message').find('button').simulate('click');
-      expect(findTestSubject(component, 'dataGridHeaderCellActionGroup-message').exists()).toBe(
-        true
-      );
-      expect(findTestSubject(component, 'gridEditFieldButton').exists()).toBe(false);
+      renderDataTable({ columns: ['message'] });
+      expect(screen.queryByTestId('dataGridHeaderCellActionGroup-message')).not.toBeInTheDocument();
+      userEvent.click(screen.getByRole('button', { name: 'message' }));
+      expect(screen.getByTestId('dataGridHeaderCellActionGroup-message')).toBeInTheDocument();
+      expect(screen.queryByTestId('gridEditFieldButton')).not.toBeInTheDocument();
     });
   });
 
@@ -789,14 +806,6 @@ describe('UnifiedDataTable', () => {
   });
 
   describe('document comparison', () => {
-    const renderDataTable = (props: Partial<UnifiedDataTableProps>) => {
-      render(
-        <IntlProvider locale="en">
-          <DataTable {...props} />
-        </IntlProvider>
-      );
-    };
-
     const getSelectedDocumentsButton = () => screen.queryByTestId('unifiedDataTableSelectionBtn');
 
     const selectDocument = (document: EsHitRecord) =>
@@ -916,4 +925,75 @@ describe('UnifiedDataTable', () => {
       expect(findTestSubject(component, 'dataGridHeaderCell-colorIndicator').exists()).toBeFalsy();
     });
   });
+
+  describe('columns', () => {
+    // Default column width in EUI is hardcoded to 100px for Jest envs
+    const EUI_DEFAULT_COLUMN_WIDTH = '100px';
+    const getColumnHeader = (name: string) => screen.getByRole('columnheader', { name });
+    const queryColumnHeader = (name: string) => screen.queryByRole('columnheader', { name });
+    const getButton = (name: string) => screen.getByRole('button', { name });
+    const queryButton = (name: string) => screen.queryByRole('button', { name });
+
+    it('should reset the last column to auto width when removing the only auto width column', async () => {
+      renderDataTable({
+        columns: ['message', 'extension', 'bytes'],
+        settings: {
+          columns: {
+            extension: { width: 50 },
+            bytes: { width: 50 },
+          },
+        },
+      });
+      expect(getColumnHeader('message')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH });
+      expect(getColumnHeader('extension')).toHaveStyle({ width: '50px' });
+      expect(getColumnHeader('bytes')).toHaveStyle({ width: '50px' });
+      userEvent.click(getButton('message'));
+      userEvent.click(getButton('Remove column'), undefined, { skipPointerEventsCheck: true });
+      expect(queryColumnHeader('message')).not.toBeInTheDocument();
+      expect(getColumnHeader('extension')).toHaveStyle({ width: '50px' });
+      expect(getColumnHeader('bytes')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH });
+    });
+
+    it('should not reset the last column to auto width when there are multiple auto width columns', async () => {
+      renderDataTable({
+        columns: ['message', 'extension', 'bytes'],
+        settings: {
+          columns: {
+            bytes: { width: 50 },
+          },
+        },
+      });
+      expect(getColumnHeader('message')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH });
+      expect(getColumnHeader('extension')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH });
+      expect(getColumnHeader('bytes')).toHaveStyle({ width: '50px' });
+      userEvent.click(getButton('message'));
+      userEvent.click(getButton('Remove column'), undefined, { skipPointerEventsCheck: true });
+      expect(queryColumnHeader('message')).not.toBeInTheDocument();
+      expect(getColumnHeader('extension')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH });
+      expect(getColumnHeader('bytes')).toHaveStyle({ width: '50px' });
+    });
+
+    it('should show the reset width button only for absolute width columns, and allow resetting to default width', async () => {
+      renderDataTable({
+        columns: ['message', 'extension'],
+        settings: {
+          columns: {
+            '@timestamp': { width: 50 },
+            extension: { width: 50 },
+          },
+        },
+      });
+      expect(getColumnHeader('@timestamp')).toHaveStyle({ width: '50px' });
+      userEvent.click(getButton('@timestamp'));
+      userEvent.click(getButton('Reset width'), undefined, { skipPointerEventsCheck: true });
+      expect(getColumnHeader('@timestamp')).toHaveStyle({ width: `${defaultTimeColumnWidth}px` });
+      expect(getColumnHeader('message')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH });
+      userEvent.click(getButton('message'));
+      expect(queryButton('Reset width')).not.toBeInTheDocument();
+      expect(getColumnHeader('extension')).toHaveStyle({ width: '50px' });
+      userEvent.click(getButton('extension'));
+      userEvent.click(getButton('Reset width'), undefined, { skipPointerEventsCheck: true });
+      expect(getColumnHeader('extension')).toHaveStyle({ width: EUI_DEFAULT_COLUMN_WIDTH });
+    });
+  });
 });

packages/kbn-unified-data-table/src/components/data_table.tsx

@@ -45,6 +45,7 @@ import type { ThemeServiceStart } from '@kbn/react-kibana-context-common';
 import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import { AdditionalFieldGroups } from '@kbn/unified-field-list';
+import { isEqual } from 'lodash';
 import {
   UnifiedDataTableSettings,
   ValueToStringConverter,
@@ -163,7 +164,7 @@ export interface UnifiedDataTableProps {
   /**
    * Function triggered when a column is resized by the user
    */
-  onResize?: (colSettings: { columnId: string; width: number }) => void;
+  onResize?: (colSettings: { columnId: string; width?: number }) => void;
   /**
    * Function to set all columns
    */
@@ -778,6 +779,7 @@ export const UnifiedDataTable = ({
         showColumnTokens,
         headerRowHeightLines,
         customGridColumnsConfiguration,
+        onResize,
       }),
     [
       columnsMeta,
@@ -792,6 +794,7 @@ export const UnifiedDataTable = ({
       isPlainRecord,
       isSortEnabled,
       onFilter,
+      onResize,
       settings,
       showColumnTokens,
       toastNotifications,
@@ -814,6 +817,26 @@ export const UnifiedDataTable = ({
     [visibleColumns, onSetColumns, 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
+  const prevColumns = useRef<string[]>();
+
+  useEffect(() => {
+    if (isEqual(prevColumns.current, visibleColumns)) {
+      return;
+    }
+
+    prevColumns.current = visibleColumns;
+
+    const hasAutoWidthColumn = visibleColumns.some(
+      (colId) => euiGridColumns.find((col) => col.id === colId)?.initialWidth == null
+    );
+
+    if (!hasAutoWidthColumn) {
+      onResize?.({ columnId: visibleColumns[visibleColumns.length - 1] });
+    }
+  }, [euiGridColumns, onResize, visibleColumns]);
+
   /**
    * Sorting
    */

packages/kbn-unified-data-table/src/components/data_table_columns.test.tsx

@@ -50,6 +50,7 @@ describe('Data table columns', function () {
         hasEditDataViewPermission: () =>
           servicesMock.dataViewFieldEditor.userPermissions.editIndexPattern(),
         onFilter: () => {},
+        onResize: () => {},
       });
       expect(actual).toMatchSnapshot();
     });
@@ -72,6 +73,7 @@ describe('Data table columns', function () {
         hasEditDataViewPermission: () =>
           servicesMock.dataViewFieldEditor.userPermissions.editIndexPattern(),
         onFilter: () => {},
+        onResize: () => {},
       });
       expect(actual).toMatchSnapshot();
     });
@@ -99,6 +101,7 @@ describe('Data table columns', function () {
           message: { type: 'string', esType: 'keyword' },
           timestamp: { type: 'date', esType: 'dateTime' },
         },
+        onResize: () => {},
       });
       expect(actual).toMatchSnapshot();
     });
@@ -297,6 +300,7 @@ describe('Data table columns', function () {
         hasEditDataViewPermission: () =>
           servicesMock.dataViewFieldEditor.userPermissions.editIndexPattern(),
         onFilter: () => {},
+        onResize: () => {},
       });
       expect(actual).toMatchSnapshot();
     });
@@ -324,6 +328,7 @@ describe('Data table columns', function () {
         hasEditDataViewPermission: () =>
           servicesMock.dataViewFieldEditor.userPermissions.editIndexPattern(),
         onFilter: () => {},
+        onResize: () => {},
       });
       expect(actual).toMatchSnapshot();
     });
@@ -356,6 +361,7 @@ describe('Data table columns', function () {
         columnsMeta: {
           extension: { type: 'string' },
         },
+        onResize: () => {},
       });
       expect(gridColumns[1].schema).toBe('string');
     });
@@ -386,6 +392,7 @@ describe('Data table columns', function () {
         columnsMeta: {
           var_test: { type: 'number' },
         },
+        onResize: () => {},
       });
       expect(gridColumns[1].schema).toBe('numeric');
     });
@@ -412,6 +419,7 @@ describe('Data table columns', function () {
           extension: { type: 'string' },
           message: { type: 'string', esType: 'keyword' },
         },
+        onResize: () => {},
       });
 
       const extensionGridColumn = gridColumns[0];
@@ -442,6 +450,7 @@ describe('Data table columns', function () {
           extension: { type: 'string' },
           message: { type: 'string', esType: 'keyword' },
         },
+        onResize: () => {},
       });
 
       expect(customizedGridColumns).toMatchSnapshot();
@@ -484,6 +493,7 @@ describe('Data table columns', function () {
         },
         hasEditDataViewPermission: () =>
           servicesMock.dataViewFieldEditor.userPermissions.editIndexPattern(),
+        onResize: () => {},
       });
       const columnDisplayNames = customizedGridColumns.map((column) => column.displayAsText);
       expect(columnDisplayNames.includes('test_column_one')).toBeTruthy();