[Discover] [Unified Data Table] Support the field stats popover in data grid column headers

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

@@ -186,6 +186,15 @@
   }
 }
 
+.unifiedDataTable__columnHeaderInfoButton {
+  display: none;
+
+  .unifiedDataTable__headerCell:hover &,
+  .unifiedDataTable__headerCell:focus-within & {
+    display: block;
+  }
+}
+
 @include euiBreakpoint('xs', 's', 'm') {
   // EUI issue to hide 'of' text https://github.com/elastic/eui/issues/4654
   .unifiedDataTable__flyoutDocumentNavigation .euiPagination__compressedText {

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

@@ -58,6 +58,7 @@ import {
   DataTableColumnsMeta,
   CustomCellRenderer,
   CustomGridColumnsConfiguration,
+  RenderCustomGridColumnInfoPopover,
 } from '../types';
 import { getDisplayedColumns } from '../utils/columns';
 import { convertValueToString } from '../utils/convert_value_to_string';
@@ -385,6 +386,10 @@ export interface UnifiedDataTableProps {
    * An optional settings for customising the column
    */
   customGridColumnsConfiguration?: CustomGridColumnsConfiguration;
+  /**
+   * Provide a custom popover component to be used for the column info icon
+   */
+  renderCustomGridColumnInfoPopover?: RenderCustomGridColumnInfoPopover;
   /**
    * Name of the UnifiedDataTable consumer component or application
    */
@@ -487,6 +492,7 @@ export const UnifiedDataTable = ({
   gridStyleOverride,
   rowLineHeightOverride,
   customGridColumnsConfiguration,
+  renderCustomGridColumnInfoPopover,
   enableComparisonMode,
   cellContext,
   renderCellPopover,
@@ -845,13 +851,15 @@ export const UnifiedDataTable = ({
         showColumnTokens,
         headerRowHeightLines,
         customGridColumnsConfiguration,
+        renderCustomGridColumnInfoPopover,
         onResize,
       }),
     [
       cellActionsHandling,
       columnsMeta,
       columnsCellActions,
       customGridColumnsConfiguration,
+      renderCustomGridColumnInfoPopover,
       dataView,
       dataViewFieldEditor,
       defaultColumns,

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

@@ -7,60 +7,86 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, ReactElement } from 'react';
 import { css, CSSObject } from '@emotion/react';
-import { EuiIconTip } from '@elastic/eui';
-import type { DataView, DataViewField } from '@kbn/data-views-plugin/common';
+import { EuiIconTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import type { DataView } from '@kbn/data-views-plugin/common';
 import { FieldIcon, getFieldIconProps, getTextBasedColumnIconType } from '@kbn/field-utils';
 import { isNestedFieldParent } from '@kbn/discover-utils';
 import { i18n } from '@kbn/i18n';
 import { euiThemeVars } from '@kbn/ui-theme';
-import type { DataTableColumnsMeta } from '../types';
+import type { RenderCustomGridColumnInfoPopover, DataTableColumnsMeta } from '../types';
 import ColumnHeaderTruncateContainer from './column_header_truncate_container';
 
-interface DataTableColumnHeaderProps {
+export interface DataTableColumnHeaderProps {
   dataView: DataView;
   columnName: string | null;
   columnDisplayName: string;
   columnsMeta?: DataTableColumnsMeta;
   headerRowHeight?: number;
   showColumnTokens?: boolean;
+  customColumnToken?: ReactElement;
+  renderCustomGridColumnInfoPopover?: RenderCustomGridColumnInfoPopover;
 }
 
 export const DataTableColumnHeader: React.FC<DataTableColumnHeaderProps> = ({
   columnDisplayName,
   showColumnTokens,
+  customColumnToken,
   columnName,
   columnsMeta,
   dataView,
   headerRowHeight,
+  renderCustomGridColumnInfoPopover,
 }) => {
   return (
-    <ColumnHeaderTruncateContainer headerRowHeight={headerRowHeight}>
-      {showColumnTokens && (
-        <DataTableColumnToken
-          columnName={columnName}
-          columnsMeta={columnsMeta}
-          dataView={dataView}
-        />
-      )}
-      <DataTableColumnTitle columnDisplayName={columnDisplayName} />
-    </ColumnHeaderTruncateContainer>
+    <EuiFlexGroup
+      alignItems="center"
+      justifyContent="spaceBetween"
+      direction="row"
+      responsive={false}
+      gutterSize="xs"
+    >
+      <EuiFlexItem grow={false}>
+        <ColumnHeaderTruncateContainer headerRowHeight={headerRowHeight}>
+          {showColumnTokens && (
+            <DataTableColumnToken
+              columnName={columnName}
+              columnsMeta={columnsMeta}
+              dataView={dataView}
+              customColumnToken={customColumnToken}
+            />
+          )}
+          <DataTableColumnTitle columnDisplayName={columnDisplayName} />
+        </ColumnHeaderTruncateContainer>
+      </EuiFlexItem>
+      {typeof renderCustomGridColumnInfoPopover === 'function' && columnName ? (
+        <EuiFlexItem grow={false} className="unifiedDataTable__columnHeaderInfoButton">
+          {renderCustomGridColumnInfoPopover({ dataView, columnName, columnsMeta })}
+        </EuiFlexItem>
+      ) : null}
+    </EuiFlexGroup>
   );
 };
 
+const tokenCss = css`
+  padding-right: ${euiThemeVars.euiSizeXS};
+`;
+
 const DataTableColumnToken: React.FC<
-  Pick<DataTableColumnHeaderProps, 'columnName' | 'columnsMeta' | 'dataView'>
+  Pick<DataTableColumnHeaderProps, 'columnName' | 'columnsMeta' | 'dataView' | 'customColumnToken'>
 > = (props) => {
-  const { columnName, columnsMeta, dataView } = props;
+  const { columnName, columnsMeta, dataView, customColumnToken } = props;
   const columnToken = useMemo(
     () => getRenderedToken({ columnName, columnsMeta, dataView }),
     [columnName, columnsMeta, dataView]
   );
 
-  return columnToken ? (
-    <span css={{ paddingRight: euiThemeVars.euiSizeXS }}>{columnToken}</span>
-  ) : null;
+  if (customColumnToken) {
+    return <span css={tokenCss}>{customColumnToken}</span>;
+  }
+
+  return columnToken ? <span css={tokenCss}>{columnToken}</span> : null;
 };
 
 const DataTableColumnTitle: React.FC<Pick<DataTableColumnHeaderProps, 'columnDisplayName'>> = ({
@@ -102,39 +128,19 @@ function getRenderedToken({
   return null;
 }
 
-export const DataTableTimeColumnHeader = ({
-  dataView,
-  dataViewField,
-  headerRowHeight = 1,
-  columnLabel,
-}: {
-  dataView: DataView;
-  dataViewField?: DataViewField;
-  headerRowHeight?: number;
-  columnLabel?: string;
-}) => {
-  const timeFieldName = columnLabel || (dataViewField?.customLabel ?? dataView.timeFieldName);
-  const primaryTimeAriaLabel = i18n.translate(
-    'unifiedDataTable.tableHeader.timeFieldIconTooltipAriaLabel',
-    {
-      defaultMessage: '{timeFieldName} - this field represents the time that events occurred.',
-      values: { timeFieldName },
-    }
-  );
+export const DataTableTimeColumnHeader: React.FC<DataTableColumnHeaderProps> = (props) => {
   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;
-      `}
-    >
-      <ColumnHeaderTruncateContainer headerRowHeight={headerRowHeight}>
-        {timeFieldName} <EuiIconTip type="clock" content={primaryTimeTooltip} />
-      </ColumnHeaderTruncateContainer>
-    </div>
+    <DataTableColumnHeader
+      {...props}
+      customColumnToken={
+        <>
+          <EuiIconTip type="clock" content={primaryTimeTooltip} />{' '}
+        </>
+      }
+    />
   );
 };

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

@@ -21,7 +21,11 @@ import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import type { DataTableRecord } from '@kbn/discover-utils';
 import { ExpandButton } from './data_table_expand_button';
 import { CustomGridColumnsConfiguration, UnifiedDataTableSettings } from '../types';
-import type { ValueToStringConverter, DataTableColumnsMeta } from '../types';
+import type {
+  ValueToStringConverter,
+  DataTableColumnsMeta,
+  RenderCustomGridColumnInfoPopover,
+} from '../types';
 import { buildCellActions } from './default_cell_actions';
 import { getSchemaByKbnType } from './data_table_schema';
 import { SelectButton, getSelectAllButton } from './data_table_document_selection';
@@ -32,7 +36,11 @@ import {
 } from '../constants';
 import { buildCopyColumnNameButton, buildCopyColumnValuesButton } from './build_copy_column_button';
 import { buildEditFieldButton } from './build_edit_field_button';
-import { DataTableColumnHeader, DataTableTimeColumnHeader } from './data_table_column_header';
+import {
+  DataTableColumnHeader,
+  DataTableColumnHeaderProps,
+  DataTableTimeColumnHeader,
+} from './data_table_column_header';
 import { UnifiedDataTableProps } from './data_table';
 
 export const getColumnDisplayName = (
@@ -115,6 +123,7 @@ function buildEuiGridColumn({
   showColumnTokens,
   headerRowHeight,
   customGridColumnsConfiguration,
+  renderCustomGridColumnInfoPopover,
   columnDisplay,
   onResize,
 }: {
@@ -138,6 +147,7 @@ function buildEuiGridColumn({
   showColumnTokens?: boolean;
   headerRowHeight?: number;
   customGridColumnsConfiguration?: CustomGridColumnsConfiguration;
+  renderCustomGridColumnInfoPopover?: RenderCustomGridColumnInfoPopover;
   columnDisplay?: string;
   onResize: UnifiedDataTableProps['onResize'];
 }) {
@@ -205,6 +215,16 @@ function buildEuiGridColumn({
 
   const columnType = columnsMeta?.[columnName]?.type ?? dataViewField?.type;
 
+  const columnHeaderCommonProps: DataTableColumnHeaderProps = {
+    dataView,
+    columnName,
+    columnDisplayName,
+    columnsMeta,
+    showColumnTokens,
+    headerRowHeight,
+    renderCustomGridColumnInfoPopover,
+  };
+
   const column: EuiDataGridColumn = {
     id: columnName,
     schema: getSchemaByKbnType(columnType),
@@ -214,14 +234,7 @@ function buildEuiGridColumn({
       ((isPlainRecord && columnName !== '_source') || dataViewField?.sortable === true),
     display:
       showColumnTokens || headerRowHeight !== 1 ? (
-        <DataTableColumnHeaderMemoized
-          dataView={dataView}
-          columnName={columnName}
-          columnDisplayName={columnDisplayName}
-          columnsMeta={columnsMeta}
-          showColumnTokens={showColumnTokens}
-          headerRowHeight={headerRowHeight}
-        />
+        <DataTableColumnHeaderMemoized {...columnHeaderCommonProps} />
       ) : undefined,
     displayAsText: columnDisplayName,
     actions: {
@@ -262,14 +275,7 @@ function buildEuiGridColumn({
   };
 
   if (column.id === dataView.timeFieldName) {
-    column.display = (
-      <DataTableTimeColumnHeaderMemoized
-        dataView={dataView}
-        dataViewField={dataViewField}
-        headerRowHeight={headerRowHeight}
-        columnLabel={columnDisplay}
-      />
-    );
+    column.display = <DataTableTimeColumnHeaderMemoized {...columnHeaderCommonProps} />;
     if (numberOfColumns > 1) {
       column.initialWidth = defaultTimeColumnWidth;
     }
@@ -315,6 +321,7 @@ export function getEuiGridColumns({
   showColumnTokens,
   headerRowHeightLines,
   customGridColumnsConfiguration,
+  renderCustomGridColumnInfoPopover,
   onResize,
 }: {
   columns: string[];
@@ -339,6 +346,7 @@ export function getEuiGridColumns({
   showColumnTokens?: boolean;
   headerRowHeightLines: number;
   customGridColumnsConfiguration?: CustomGridColumnsConfiguration;
+  renderCustomGridColumnInfoPopover?: RenderCustomGridColumnInfoPopover;
   onResize: UnifiedDataTableProps['onResize'];
 }) {
   const getColWidth = (column: string) => settings?.columns?.[column]?.width ?? 0;
@@ -367,6 +375,7 @@ export function getEuiGridColumns({
       showColumnTokens,
       headerRowHeight,
       customGridColumnsConfiguration,
+      renderCustomGridColumnInfoPopover,
       columnDisplay: settings?.columns?.[column]?.display,
       onResize,
     })

packages/kbn-unified-data-table/src/types.ts

@@ -9,7 +9,7 @@
 
 import type { ReactElement } from 'react';
 import type { EuiDataGridCellValueElementProps, EuiDataGridColumn } from '@elastic/eui';
-import type { DataTableRecord } from '@kbn/discover-utils/src/types';
+import type { DataTableRecord, DataTableColumnsMeta } from '@kbn/discover-utils/src/types';
 import type { DataView } from '@kbn/data-views-plugin/common';
 import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
 export type { DataTableColumnsMeta } from '@kbn/discover-utils/types';
@@ -60,3 +60,9 @@ export type CustomGridColumnsConfiguration = Record<
   string,
   (props: CustomGridColumnProps) => EuiDataGridColumn
 >;
+
+export type RenderCustomGridColumnInfoPopover = (props: {
+  dataView: DataView;
+  columnName: string;
+  columnsMeta?: DataTableColumnsMeta;
+}) => ReactElement | null;

packages/kbn-unified-field-list/index.ts

@@ -93,5 +93,10 @@ export {
   type UnifiedFieldListSidebarContainerProps,
 } from './src/containers/unified_field_list_sidebar';
 
+export {
+  UnifiedFieldListItemPopover,
+  type UnifiedFieldListItemPopoverProps,
+} from './src/containers/unified_field_list_item/field_list_item_popover_lazy';
+
 export * from './src/utils/fallback_fields';
 export { SmartFieldFallbackTooltip } from './src/components/fallback_fields';

packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.test.tsx

@@ -71,7 +71,7 @@ async function getComponent({
 
   const props: UnifiedFieldListItemProps = {
     services: getServicesMock(),
-    stateService,
+    options: stateService.creationOptions,
     searchMode: 'documents',
     dataView: stubDataView,
     field: finalField,