[8.15] [Unified Data Table] Prevent undefined errors when row accessed via rows[rowIndex] (#193791)

packages/kbn-unified-data-table/__mocks__/table_context.ts

@@ -14,17 +14,13 @@ import { servicesMock } from './services';
 import { DataTableContext } from '../src/table_context';
 import { convertValueToString } from '../src/utils/convert_value_to_string';
 import { buildDataTableRecord } from '@kbn/discover-utils';
-import type { EsHitRecord } from '@kbn/discover-utils/types';
-
-const buildTableContext = (dataView: DataView, rows: EsHitRecord[]): DataTableContext => {
-  const usedRows = rows.map((row) => {
-    return buildDataTableRecord(row, dataView);
-  });
+import type { DataTableRecord } from '@kbn/discover-utils/types';
 
+const buildTableContext = (dataView: DataView, rows: DataTableRecord[]): DataTableContext => {
   return {
     expanded: undefined,
     setExpanded: jest.fn(),
-    rows: usedRows,
+    getRowByIndex: jest.fn((index) => rows[index]),
     onFilter: jest.fn(),
     dataView,
     isDarkMode: false,
@@ -35,13 +31,24 @@ const buildTableContext = (dataView: DataView, rows: EsHitRecord[]): DataTableCo
         rowIndex,
         columnId,
         fieldFormats: servicesMock.fieldFormats,
-        rows: usedRows,
+        rows,
         dataView,
         options,
       }),
   };
 };
 
-export const dataTableContextMock = buildTableContext(dataViewMock, esHitsMock);
+export const dataTableContextRowsMock = esHitsMock.map((row) =>
+  buildDataTableRecord(row, dataViewMock)
+);
+
+export const dataTableContextMock = buildTableContext(dataViewMock, dataTableContextRowsMock);
+
+export const dataTableContextComplexRowsMock = esHitsComplex.map((row) =>
+  buildDataTableRecord(row, dataViewComplexMock)
+);
 
-export const dataTableContextComplexMock = buildTableContext(dataViewComplexMock, esHitsComplex);
+export const dataTableContextComplexMock = buildTableContext(
+  dataViewComplexMock,
+  dataTableContextComplexRowsMock
+);

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

@@ -66,7 +66,7 @@ import {
   getVisibleColumns,
   canPrependTimeFieldColumn,
 } from './data_table_columns';
-import { UnifiedDataTableContext } from '../table_context';
+import { DataTableContext, UnifiedDataTableContext } from '../table_context';
 import { getSchemaDetectors } from './data_table_schema';
 import {
   DataTableCompareToolbarBtn,
@@ -510,11 +510,11 @@ export const UnifiedDataTable = ({
     [displayedRows, dataView, fieldFormats]
   );
 
-  const unifiedDataTableContextValue = useMemo(
+  const unifiedDataTableContextValue = useMemo<DataTableContext>(
     () => ({
       expanded: expandedDoc,
       setExpanded: setExpandedDoc,
-      rows: displayedRows,
+      getRowByIndex: (index: number) => displayedRows[index],
       onFilter,
       dataView,
       isDarkMode: darkMode,

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

@@ -13,7 +13,7 @@ import {
   DataTableDocumentToolbarBtn,
   SelectButton,
 } from './data_table_document_selection';
-import { dataTableContextMock } from '../../__mocks__/table_context';
+import { dataTableContextMock, dataTableContextRowsMock } from '../../__mocks__/table_context';
 import { UnifiedDataTableContext } from '../table_context';
 import { getDocId } from '@kbn/discover-utils';
 import { render, screen } from '@testing-library/react';
@@ -142,7 +142,7 @@ describe('document selection', () => {
       const props = {
         isPlainRecord: false,
         isFilterActive: false,
-        rows: dataTableContextMock.rows,
+        rows: dataTableContextRowsMock,
         selectedDocs: ['i::1::'],
         setIsFilterActive: jest.fn(),
         setSelectedDocs: jest.fn(),

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

@@ -26,10 +26,10 @@ import { UnifiedDataTableContext } from '../table_context';
 
 export const SelectButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueElementProps) => {
   const { euiTheme } = useEuiTheme();
-  const { selectedDocs, expanded, rows, isDarkMode, setSelectedDocs } =
+  const { selectedDocs, expanded, getRowByIndex, isDarkMode, setSelectedDocs } =
     useContext(UnifiedDataTableContext);
-  const doc = useMemo(() => rows[rowIndex], [rows, rowIndex]);
-  const checked = useMemo(() => selectedDocs.includes(doc.id), [selectedDocs, doc.id]);
+  const doc = useMemo(() => getRowByIndex(rowIndex), [getRowByIndex, rowIndex]);
+  const checked = useMemo(() => (doc ? selectedDocs.includes(doc.id) : false), [doc, selectedDocs]);
 
   const toggleDocumentSelectionLabel = i18n.translate('unifiedDataTable.grid.selectDoc', {
     defaultMessage: `Select document ''{rowNumber}''`,
@@ -46,6 +46,10 @@ export const SelectButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
     }
   }, [expanded, doc, setCellProps, isDarkMode]);
 
+  if (!doc) {
+    return null;
+  }
+
   return (
     <EuiFlexGroup
       responsive={false}

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

@@ -34,12 +34,12 @@ describe('Data table view button ', function () {
     );
     const button = findTestSubject(component, 'docTableExpandToggleColumn');
     await button.simulate('click');
-    expect(contextMock.setExpanded).toHaveBeenCalledWith(dataTableContextMock.rows[0]);
+    expect(contextMock.setExpanded).toHaveBeenCalledWith(dataTableContextMock.getRowByIndex(0));
   });
   it('when the current document is expanded, setExpanded is called with undefined', async () => {
     const contextMock = {
       ...dataTableContextMock,
-      expanded: dataTableContextMock.rows[0],
+      expanded: dataTableContextMock.getRowByIndex(0),
     };
 
     const component = mountWithIntl(
@@ -62,7 +62,7 @@ describe('Data table view button ', function () {
   it('when another document is expanded, setExpanded is called with the current document', async () => {
     const contextMock = {
       ...dataTableContextMock,
-      expanded: dataTableContextMock.rows[0],
+      expanded: dataTableContextMock.getRowByIndex(0),
     };
 
     const component = mountWithIntl(
@@ -80,6 +80,6 @@ describe('Data table view button ', function () {
     );
     const button = findTestSubject(component, 'docTableExpandToggleColumn');
     await button.simulate('click');
-    expect(contextMock.setExpanded).toHaveBeenCalledWith(dataTableContextMock.rows[1]);
+    expect(contextMock.setExpanded).toHaveBeenCalledWith(dataTableContextMock.getRowByIndex(1));
   });
 });

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

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { EuiButtonIcon, EuiDataGridCellValueElementProps, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { UnifiedDataTableContext } from '../table_context';
@@ -18,13 +18,13 @@ import { DataTableRowControl } from './data_table_row_control';
 export const ExpandButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueElementProps) => {
   const toolTipRef = useRef<EuiToolTip>(null);
   const [pressed, setPressed] = useState<boolean>(false);
-  const { expanded, setExpanded, rows, isDarkMode, componentsTourSteps } =
+  const { expanded, setExpanded, getRowByIndex, isDarkMode, componentsTourSteps } =
     useContext(UnifiedDataTableContext);
-  const current = rows[rowIndex];
+  const current = useMemo(() => getRowByIndex(rowIndex), [getRowByIndex, rowIndex]);
 
   const tourStep = componentsTourSteps ? componentsTourSteps.expandButton : undefined;
   useEffect(() => {
-    if (current.isAnchor) {
+    if (current?.isAnchor) {
       setCellProps({
         className: 'unifiedDataTable__cell--highlight',
       });
@@ -42,7 +42,7 @@ export const ExpandButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
     defaultMessage: 'Toggle dialog with details',
   });
 
-  const testSubj = current.isAnchor
+  const testSubj = current?.isAnchor
     ? 'docTableExpandToggleColumnAnchor'
     : 'docTableExpandToggleColumn';
 
@@ -55,7 +55,7 @@ export const ExpandButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
     }
   }, [isCurrentRowExpanded, setPressed, pressed]);
 
-  if (!setExpanded) {
+  if (!setExpanded || !current) {
     return null;
   }
 

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

@@ -23,10 +23,10 @@ function onFilterCell(
   mode: '+' | '-',
   field: DataViewField
 ) {
-  const row = context.rows[rowIndex];
-  const value = row.flattened[columnId];
+  const row = context.getRowByIndex(rowIndex);
 
-  if (field && context.onFilter) {
+  if (row && field && context.onFilter) {
+    const value = row.flattened[columnId];
     context.onFilter(field, value, mode);
   }
 }

packages/kbn-unified-data-table/src/table_context.tsx

@@ -15,7 +15,7 @@ import type { ValueToStringConverter } from './types';
 export interface DataTableContext {
   expanded?: DataTableRecord | undefined;
   setExpanded?: (hit?: DataTableRecord) => void;
-  rows: DataTableRecord[];
+  getRowByIndex: (index: number) => DataTableRecord | undefined;
   onFilter?: DocViewFilterFn;
   dataView: DataView;
   isDarkMode: boolean;