[Discover] Display a warning and a tooltip for the _score column in the grid (#211013)

Resolves: https://github.com/elastic/kibana/issues/167271



https://github.com/user-attachments/assets/f21be330-a85d-471c-a6c3-d172ff7a15d2

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

@@ -580,6 +580,8 @@ export const UnifiedDataTable = ({
     onSort,
   });
 
+  const { columns: sortedColumns } = sorting ?? {};
+
   const displayedRows = useMemo(() => {
     if (!sortedRows) {
       return [];
@@ -890,6 +892,7 @@ export const UnifiedDataTable = ({
         headerRowHeightLines,
         customGridColumnsConfiguration,
         onResize,
+        sortedColumns,
       }),
     [
       cellActionsHandling,
@@ -913,6 +916,7 @@ export const UnifiedDataTable = ({
       valueToStringConverter,
       visibleCellActions,
       visibleColumns,
+      sortedColumns,
     ]
   );
 

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

@@ -136,3 +136,42 @@ export const DataTableTimeColumnHeader = ({
     </div>
   );
 };
+
+export const DataTableScoreColumnHeader = ({
+  isSorted,
+  showColumnTokens,
+  columnName,
+  columnsMeta,
+  dataView,
+  headerRowHeight,
+  columnDisplayName,
+}: DataTableColumnHeaderProps & { isSorted?: boolean }) => {
+  const tooltipContent = i18n.translate('unifiedDataTable.tableHeader.scoreFieldIconTooltip', {
+    defaultMessage: 'In order to retrieve values for _score, you must sort by it.',
+  });
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <ColumnHeaderTruncateContainer headerRowHeight={headerRowHeight}>
+      {showColumnTokens && isSorted && (
+        <DataTableColumnToken
+          columnName={columnName}
+          columnsMeta={columnsMeta}
+          dataView={dataView}
+        />
+      )}
+      {!isSorted && (
+        <span css={{ paddingRight: euiTheme.size.xs }}>
+          <EuiIconTip
+            content={tooltipContent}
+            color="warning"
+            size="s"
+            type="alert"
+            position="left"
+          />
+        </span>
+      )}
+      <DataTableColumnTitle columnDisplayName={columnDisplayName} />
+    </ColumnHeaderTruncateContainer>
+  );
+};

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

@@ -14,6 +14,7 @@ import {
   type EuiDataGridColumnCellAction,
   EuiScreenReaderOnly,
   EuiListGroupItemProps,
+  type EuiDataGridColumnSortingConfig,
 } from '@elastic/eui';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { getDataViewFieldOrCreateFromColumnMeta } from '@kbn/data-view-utils';
@@ -30,10 +31,15 @@ import {
   defaultTimeColumnWidth,
   ROWS_HEIGHT_OPTIONS,
   DEFAULT_CONTROL_COLUMN_WIDTH,
+  SCORE_COLUMN_NAME,
 } 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,
+  DataTableScoreColumnHeader,
+  DataTableTimeColumnHeader,
+} from './data_table_column_header';
 import { UnifiedDataTableProps } from './data_table';
 
 export const getColumnDisplayName = (
@@ -56,6 +62,7 @@ export const getColumnDisplayName = (
 
 const DataTableColumnHeaderMemoized = React.memo(DataTableColumnHeader);
 const DataTableTimeColumnHeaderMemoized = React.memo(DataTableTimeColumnHeader);
+const DataTableScoreColumnHeaderMemoized = React.memo(DataTableScoreColumnHeader);
 
 export const OPEN_DETAILS = 'openDetails';
 export const SELECT_ROW = 'select';
@@ -118,6 +125,7 @@ function buildEuiGridColumn({
   customGridColumnsConfiguration,
   columnDisplay,
   onResize,
+  sortedColumns,
 }: {
   numberOfColumns: number;
   columnName: string;
@@ -141,6 +149,7 @@ function buildEuiGridColumn({
   customGridColumnsConfiguration?: CustomGridColumnsConfiguration;
   columnDisplay?: string;
   onResize: UnifiedDataTableProps['onResize'];
+  sortedColumns?: EuiDataGridColumnSortingConfig[];
 }) {
   const dataViewField = getDataViewFieldOrCreateFromColumnMeta({
     dataView,
@@ -178,6 +187,8 @@ function buildEuiGridColumn({
     columnDisplay
   );
 
+  const isSorted = sortedColumns?.some((column) => column.id === columnName);
+
   let cellActions: EuiDataGridColumnCellAction[];
 
   if (columnCellActions?.length && cellActionsHandling === 'replace') {
@@ -270,6 +281,20 @@ function buildEuiGridColumn({
     }
   }
 
+  if (column.id === SCORE_COLUMN_NAME) {
+    column.display = (
+      <DataTableScoreColumnHeaderMemoized
+        columnDisplayName={columnDisplayName}
+        isSorted={isSorted}
+        showColumnTokens={showColumnTokens}
+        dataView={dataView}
+        headerRowHeight={headerRowHeight}
+        columnName={columnName}
+        columnsMeta={columnsMeta}
+      />
+    );
+  }
+
   if (columnWidth > 0) {
     column.initialWidth = Number(columnWidth);
   }
@@ -309,6 +334,7 @@ export function getEuiGridColumns({
   headerRowHeightLines,
   customGridColumnsConfiguration,
   onResize,
+  sortedColumns,
 }: {
   columns: string[];
   columnsCellActions?: EuiDataGridColumnCellAction[][];
@@ -333,6 +359,7 @@ export function getEuiGridColumns({
   headerRowHeightLines: number;
   customGridColumnsConfiguration?: CustomGridColumnsConfiguration;
   onResize: UnifiedDataTableProps['onResize'];
+  sortedColumns?: EuiDataGridColumnSortingConfig[];
 }) {
   const getColWidth = (column: string) => settings?.columns?.[column]?.width ?? 0;
   const headerRowHeight = deserializeHeaderRowHeight(headerRowHeightLines);
@@ -362,6 +389,7 @@ export function getEuiGridColumns({
       customGridColumnsConfiguration,
       columnDisplay: settings?.columns?.[column]?.display,
       onResize,
+      sortedColumns,
     })
   );
 }

src/platform/packages/shared/kbn-unified-data-table/src/constants.ts

@@ -11,6 +11,8 @@ import type { EuiDataGridStyle } from '@elastic/eui';
 
 export const DEFAULT_CONTROL_COLUMN_WIDTH = 24;
 
+export const SCORE_COLUMN_NAME = '_score';
+
 export const DEFAULT_ROWS_PER_PAGE = 100;
 export const MAX_LOADED_GRID_ROWS = 10000;
 export const ROWS_PER_PAGE_OPTIONS = [10, 25, 50, DEFAULT_ROWS_PER_PAGE, 250, 500];