wrap three lines with icon. Correct time field. Correct numeric fields

elastic · Jan 3, 2024 · 9468980 · 9468980
1 parent 0eb5621
commit 9468980
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 38 deletions.
diff --git a/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx b/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx
@@ -8,10 +8,11 @@
 
 import React, { useMemo } from 'react';
 import { css } from '@emotion/react';
-import { EuiFlexGroup, EuiFlexItem, EuiTextBlockTruncate } from '@elastic/eui';
-import type { DataView } from '@kbn/data-views-plugin/common';
+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 type { DataTableColumnTypes } from '../types';
 
 interface DataTableColumnHeaderProps {
@@ -34,19 +35,7 @@ export const DataTableColumnHeader: React.FC<DataTableColumnHeaderProps> = (prop
   } = props;
 
   return (
-    <EuiTextBlockTruncate
-      lines={headerRowHeight}
-      css={css`
-        overflow-wrap: anywhere;
-        overflow: auto;
-        white-space: normal;
-        word-break: break-all;
-        line-height: 16px;
-        .euiDataGridHeaderCell--numeric & {
-          justify-content: flex-end;
-        }
-      `}
-    >
+    <ColumnHeaderTruncateContainer headerRowHeight={headerRowHeight}>
       {showColumnTokens && (
         <DataTableColumnToken
           columnName={columnName}
@@ -55,7 +44,7 @@ export const DataTableColumnHeader: React.FC<DataTableColumnHeaderProps> = (prop
         />
       )}
       <DataTableColumnTitle columnDisplayName={columnDisplayName} />
-    </EuiTextBlockTruncate>
+    </ColumnHeaderTruncateContainer>
   );
 };
 
@@ -115,3 +104,61 @@ function getRenderedToken({
 
   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: 16px;
+        .euiDataGridHeaderCell--numeric & {
+          text-align: 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}>
+      <EuiToolTip content={primaryTimeTooltip}>
+        <ColumnHeaderTruncateContainer headerRowHeight={headerRowHeight}>
+          {timeFieldName} <EuiIcon type="clock" />
+        </ColumnHeaderTruncateContainer>
+      </EuiToolTip>
+    </div>
+  );
+};
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
@@ -11,9 +11,7 @@ import { i18n } from '@kbn/i18n';
 import {
   type EuiDataGridColumn,
   type EuiDataGridColumnCellAction,
-  EuiIcon,
   EuiScreenReaderOnly,
-  EuiToolTip,
 } from '@elastic/eui';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { ToastsStart, IUiSettingsClient } from '@kbn/core/public';
@@ -27,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',
@@ -181,29 +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}>
-        <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);
   }