[Discover] Truncate table header to 3 lines

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

@@ -36,6 +36,10 @@
     border-top: $euiBorderThin;
   }
 
+  .euiDataGridHeaderCell {
+    align-items: start;
+  }
+
   .euiDataGrid--headerUnderline .euiDataGridHeaderCell {
     border-bottom: $euiBorderThin;
   }

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

@@ -126,6 +126,10 @@ export interface UnifiedDataTableProps {
    * Field tokens could be rendered in column header next to the field name.
    */
   showColumnTokens?: boolean;
+  /**
+   * Determines number of rows of a column header
+   */
+  headerRowHeight?: number;
   /**
    * If set, the given document is displayed in a flyout
    */
@@ -355,6 +359,7 @@ export const UnifiedDataTable = ({
   columns,
   columnTypes,
   showColumnTokens,
+  headerRowHeight,
   controlColumnIds = CONTROL_COLUMN_IDS_DEFAULT,
   dataView,
   loadingState,
@@ -665,6 +670,7 @@ export const UnifiedDataTable = ({
         visibleCellActions,
         columnTypes,
         showColumnTokens,
+        headerRowHeight,
       }),
     [
       onFilter,
@@ -684,6 +690,7 @@ export const UnifiedDataTable = ({
       visibleCellActions,
       columnTypes,
       showColumnTokens,
+      headerRowHeight,
     ]
   );
 

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

@@ -66,6 +66,7 @@ describe('DataTableColumnHeader', function () {
         columnName="bytes"
         columnDisplayName="bytesDisplayName"
         dataView={stubLogstashDataView}
+        showColumnTokens
       />
     );
     expect(component.text()).toBe('NumberbytesDisplayName');
@@ -81,6 +82,7 @@ describe('DataTableColumnHeader', function () {
           bytes: 'keyword',
         }}
         dataView={stubLogstashDataView}
+        showColumnTokens
       />
     );
     expect(component.text()).toBe('KeywordbytesDisplayName');
@@ -93,6 +95,7 @@ describe('DataTableColumnHeader', function () {
         columnName="_source"
         columnDisplayName="Document"
         dataView={stubLogstashDataView}
+        showColumnTokens
       />
     );
     expect(component.text()).toBe('Document');
@@ -105,6 +108,7 @@ describe('DataTableColumnHeader', function () {
         columnName="nested_user"
         columnDisplayName="Nested User"
         dataView={stubDataViewWithNested}
+        showColumnTokens
       />
     );
     expect(component.text()).toBe('NestedNested User');

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

@@ -7,52 +7,70 @@
  */
 
 import React, { useMemo } from 'react';
-import { css } from '@emotion/react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import type { DataView } from '@kbn/data-views-plugin/common';
+import { css, CSSObject } from '@emotion/react';
+import { EuiIcon, EuiTextBlockTruncate, EuiToolTip } from '@elastic/eui';
+import type { DataView, DataViewField } from '@kbn/data-views-plugin/common';
 import { FieldIcon, getFieldIconProps } from '@kbn/field-utils';
 import { isNestedFieldParent } from '@kbn/discover-utils';
+import { i18n } from '@kbn/i18n';
+import { euiThemeVars } from '@kbn/ui-theme';
 import type { DataTableColumnTypes } from '../types';
 
 interface DataTableColumnHeaderProps {
   dataView: DataView;
   columnName: string | null;
   columnDisplayName: string;
   columnTypes?: DataTableColumnTypes;
+  headerRowHeight?: number;
+  showColumnTokens?: boolean;
 }
 
 export const DataTableColumnHeader: React.FC<DataTableColumnHeaderProps> = (props) => {
-  const { columnDisplayName, columnName, columnTypes, dataView } = props;
+  const {
+    columnDisplayName,
+    showColumnTokens,
+    columnName,
+    columnTypes,
+    dataView,
+    headerRowHeight = 1,
+  } = props;
+
+  return (
+    <ColumnHeaderTruncateContainer headerRowHeight={headerRowHeight}>
+      {showColumnTokens && (
+        <DataTableColumnToken
+          columnName={columnName}
+          columnTypes={columnTypes}
+          dataView={dataView}
+        />
+      )}
+      <DataTableColumnTitle columnDisplayName={columnDisplayName} />
+    </ColumnHeaderTruncateContainer>
+  );
+};
+
+const DataTableColumnToken: React.FC<
+  Pick<DataTableColumnHeaderProps, 'columnName' | 'columnTypes' | 'dataView'>
+> = (props) => {
+  const { columnName, columnTypes, dataView } = props;
   const columnToken = useMemo(
     () => getRenderedToken({ columnName, columnTypes, dataView }),
     [columnName, columnTypes, dataView]
   );
 
-  return (
-    <EuiFlexGroup
-      direction="row"
-      wrap={false}
-      responsive={false}
-      alignItems="center"
-      gutterSize="xs"
-      css={css`
-        .euiDataGridHeaderCell--numeric & {
-          justify-content: flex-end;
-        }
-      `}
-    >
-      {columnToken && <EuiFlexItem grow={false}>{columnToken}</EuiFlexItem>}
-      <EuiFlexItem
-        grow={false}
-        className="eui-displayInline eui-textTruncate"
-        data-test-subj="unifiedDataTableColumnTitle"
-      >
-        {columnDisplayName}
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
+  return columnToken ? (
+    <span css={{ paddingRight: euiThemeVars.euiSizeXS }}>{columnToken}</span>
+  ) : null;
+};
+
+const DataTableColumnTitle: React.FC<Pick<DataTableColumnHeaderProps, 'columnDisplayName'>> = ({
+  columnDisplayName,
+}) => {
+  return <span data-test-subj="unifiedDataTableColumnTitle">{columnDisplayName}</span>;
 };
 
+const fieldIconCss: CSSObject = { verticalAlign: 'bottom' };
+
 function getRenderedToken({
   dataView,
   columnName,
@@ -65,19 +83,83 @@ function getRenderedToken({
   // for text-based searches
   if (columnTypes) {
     return columnTypes[columnName] && columnTypes[columnName] !== 'unknown' ? ( // renders an icon or nothing
-      <FieldIcon type={columnTypes[columnName]} />
+      <FieldIcon type={columnTypes[columnName]} css={fieldIconCss} />
     ) : null;
   }
 
   const dataViewField = dataView.getFieldByName(columnName);
 
   if (dataViewField) {
-    return <FieldIcon {...getFieldIconProps(dataViewField)} />;
+    return <FieldIcon {...getFieldIconProps(dataViewField)} css={fieldIconCss} />;
   }
 
   if (isNestedFieldParent(columnName, dataView)) {
-    return <FieldIcon type="nested" />;
+    return <FieldIcon type="nested" css={fieldIconCss} />;
   }
 
   return null;
 }
+
+const ColumnHeaderTruncateContainer = ({
+  headerRowHeight = 1,
+  children,
+}: {
+  headerRowHeight: number;
+  children: React.ReactNode;
+}) => {
+  return (
+    <EuiTextBlockTruncate
+      lines={headerRowHeight}
+      css={css`
+        overflow-wrap: anywhere;
+        overflow: auto;
+        white-space: normal;
+        word-break: break-all;
+        line-height: ${euiThemeVars.euiSize};
+        text-align: left;
+        .euiDataGridHeaderCell--numeric & {
+          float: right;
+        }
+      `}
+    >
+      {children}
+    </EuiTextBlockTruncate>
+  );
+};
+
+export const DataTableTimeColumnHeader = ({
+  dataView,
+  dataViewField,
+  headerRowHeight = 1,
+}: {
+  dataView: DataView;
+  dataViewField?: DataViewField;
+  headerRowHeight?: number;
+}) => {
+  const timeFieldName = dataViewField?.customLabel ?? dataView.timeFieldName;
+  const primaryTimeAriaLabel = i18n.translate(
+    'unifiedDataTable.tableHeader.timeFieldIconTooltipAriaLabel',
+    {
+      defaultMessage: '{timeFieldName} - this field represents the time that events occurred.',
+      values: { timeFieldName },
+    }
+  );
+  const primaryTimeTooltip = i18n.translate('unifiedDataTable.tableHeader.timeFieldIconTooltip', {
+    defaultMessage: 'This field represents the time that events occurred.',
+  });
+
+  return (
+    <div
+      aria-label={primaryTimeAriaLabel}
+      css={css`
+        text-align: left;
+      `}
+    >
+      <EuiToolTip content={primaryTimeTooltip}>
+        <ColumnHeaderTruncateContainer headerRowHeight={headerRowHeight}>
+          {timeFieldName} <EuiIcon type="clock" />
+        </ColumnHeaderTruncateContainer>
+      </EuiToolTip>
+    </div>
+  );
+};

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

@@ -11,11 +11,8 @@ import { i18n } from '@kbn/i18n';
 import {
   type EuiDataGridColumn,
   type EuiDataGridColumnCellAction,
-  EuiIcon,
   EuiScreenReaderOnly,
-  EuiToolTip,
 } from '@elastic/eui';
-import { css } from '@emotion/react';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { ToastsStart, IUiSettingsClient } from '@kbn/core/public';
 import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
@@ -28,9 +25,10 @@ import { SelectButton } from './data_table_document_selection';
 import { defaultTimeColumnWidth } from '../constants';
 import { buildCopyColumnNameButton, buildCopyColumnValuesButton } from './build_copy_column_button';
 import { buildEditFieldButton } from './build_edit_field_button';
-import { DataTableColumnHeader } from './data_table_column_header';
+import { DataTableColumnHeader, DataTableTimeColumnHeader } from './data_table_column_header';
 
 const DataTableColumnHeaderMemoized = React.memo(DataTableColumnHeader);
+const DataTableTimeColumnHeaderMemoized = React.memo(DataTableTimeColumnHeader);
 
 const openDetails = {
   id: 'openDetails',
@@ -86,6 +84,7 @@ function buildEuiGridColumn({
   visibleCellActions,
   columnTypes,
   showColumnTokens,
+  headerRowHeight,
 }: {
   columnName: string;
   columnWidth: number | undefined;
@@ -103,6 +102,7 @@ function buildEuiGridColumn({
   visibleCellActions?: number;
   columnTypes?: DataTableColumnTypes;
   showColumnTokens?: boolean;
+  headerRowHeight?: number;
 }) {
   const dataViewField = dataView.getFieldByName(columnName);
   const editFieldButton =
@@ -132,14 +132,17 @@ function buildEuiGridColumn({
     id: columnName,
     schema: getSchemaByKbnType(columnType),
     isSortable: isSortEnabled && (isPlainRecord || dataViewField?.sortable === true),
-    display: showColumnTokens ? (
-      <DataTableColumnHeaderMemoized
-        dataView={dataView}
-        columnName={columnName}
-        columnDisplayName={columnDisplayName}
-        columnTypes={columnTypes}
-      />
-    ) : undefined,
+    display:
+      showColumnTokens || (headerRowHeight && headerRowHeight !== 1) ? (
+        <DataTableColumnHeaderMemoized
+          dataView={dataView}
+          columnName={columnName}
+          columnDisplayName={columnDisplayName}
+          columnTypes={columnTypes}
+          showColumnTokens={showColumnTokens}
+          headerRowHeight={headerRowHeight}
+        />
+      ) : undefined,
     displayAsText: columnDisplayName,
     actions: {
       showHide:
@@ -177,34 +180,16 @@ function buildEuiGridColumn({
   };
 
   if (column.id === dataView.timeFieldName) {
-    const timeFieldName = dataViewField?.customLabel ?? dataView.timeFieldName;
-    const primaryTimeAriaLabel = i18n.translate(
-      'unifiedDataTable.tableHeader.timeFieldIconTooltipAriaLabel',
-      {
-        defaultMessage: '{timeFieldName} - this field represents the time that events occurred.',
-        values: { timeFieldName },
-      }
-    );
-    const primaryTimeTooltip = i18n.translate('unifiedDataTable.tableHeader.timeFieldIconTooltip', {
-      defaultMessage: 'This field represents the time that events occurred.',
-    });
-
     column.display = (
-      <div
-        aria-label={primaryTimeAriaLabel}
-        css={css`
-          text-align: left;
-        `}
-      >
-        <EuiToolTip content={primaryTimeTooltip}>
-          <>
-            {timeFieldName} <EuiIcon type="clock" />
-          </>
-        </EuiToolTip>
-      </div>
+      <DataTableTimeColumnHeaderMemoized
+        dataView={dataView}
+        dataViewField={dataViewField}
+        headerRowHeight={headerRowHeight}
+      />
     );
     column.initialWidth = defaultTimeColumnWidth;
   }
+
   if (columnWidth > 0) {
     column.initialWidth = Number(columnWidth);
   }
@@ -228,6 +213,7 @@ export function getEuiGridColumns({
   visibleCellActions,
   columnTypes,
   showColumnTokens,
+  headerRowHeight,
 }: {
   columns: string[];
   columnsCellActions?: EuiDataGridColumnCellAction[][];
@@ -248,6 +234,7 @@ export function getEuiGridColumns({
   visibleCellActions?: number;
   columnTypes?: DataTableColumnTypes;
   showColumnTokens?: boolean;
+  headerRowHeight?: number;
 }) {
   const getColWidth = (column: string) => settings?.columns?.[column]?.width ?? 0;
 
@@ -269,6 +256,7 @@ export function getEuiGridColumns({
       visibleCellActions,
       columnTypes,
       showColumnTokens,
+      headerRowHeight,
     })
   );
 }