[Security Solution] Integrate Vanilla Unified Data Table in Timeline

packages/kbn-cell-actions/src/hooks/use_data_grid_column_cell_actions.test.tsx

@@ -161,45 +161,49 @@ describe('useDataGridColumnsCellActions', () => {
     cellAction1.getByTestId(`dataGridColumnCellAction-${action1.id}`).click();
 
     await waitFor(() => {
-      expect(action1.execute).toHaveBeenCalledWith(
-        expect.objectContaining({
-          data: [
-            {
-              value: fieldValues[field1.name][1],
-              field: {
-                name: field1.name,
-                type: field1.type,
-                aggregatable: true,
-                searchable: true,
-              },
+      expect(action1.execute).toHaveBeenCalledWith({
+        data: [
+          {
+            value: fieldValues[field1.name][1],
+            field: {
+              name: field1.name,
+              type: field1.type,
+              aggregatable: true,
+              searchable: true,
             },
-          ],
-          trigger: { id: useDataGridColumnsCellActionsProps.triggerId },
-        })
-      );
+          },
+        ],
+        metadata: {
+          some: 'value',
+        },
+        nodeRef: expect.any(Object),
+        trigger: { id: useDataGridColumnsCellActionsProps.triggerId },
+      });
     });
 
     const cellAction2 = renderCellAction(result.current[1][1], { rowIndex: 2 });
 
     cellAction2.getByTestId(`dataGridColumnCellAction-${action2.id}`).click();
 
     await waitFor(() => {
-      expect(action2.execute).toHaveBeenCalledWith(
-        expect.objectContaining({
-          data: [
-            {
-              value: fieldValues[field2.name][2],
-              field: {
-                name: field2.name,
-                type: field2.type,
-                aggregatable: true,
-                searchable: true,
-              },
+      expect(action2.execute).toHaveBeenCalledWith({
+        data: [
+          {
+            value: fieldValues[field2.name][2],
+            field: {
+              name: field2.name,
+              type: field2.type,
+              aggregatable: true,
+              searchable: true,
             },
-          ],
-          trigger: { id: useDataGridColumnsCellActionsProps.triggerId },
-        })
-      );
+          },
+        ],
+        metadata: {
+          some: 'value',
+        },
+        nodeRef: expect.any(Object),
+        trigger: { id: useDataGridColumnsCellActionsProps.triggerId },
+      });
     });
   });
 

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

@@ -9,6 +9,14 @@
   font-family: $euiCodeFontFamily;
 }
 
+.dscDocsGrid__cell--expanded {
+  background-color: $euiColorHighlight;
+}
+
+.dscDocsGrid__cell--selected {
+  background-color: $euiColorHighlight;
+}
+
 .unifiedDataTable__cellPopover {
   // Fixes https://github.com/elastic/kibana/issues/145216 in Chrome
   .lines-content.monaco-editor-background {

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

@@ -73,6 +73,9 @@ function getProps(): UnifiedDataTableProps {
       data: services.data,
       theme: services.theme,
     },
+    cellActionsMetadata: {
+      someKey: 'someValue',
+    },
   };
 }
 
@@ -253,13 +256,15 @@ describe('UnifiedDataTable', () => {
         columns: ['message'],
         onFieldEdited: jest.fn(),
       });
-      expect(mockUseDataGridColumnsCellActions).toHaveBeenCalledWith(
-        expect.objectContaining({
-          triggerId: undefined,
-          getCellValue: expect.any(Function),
-          fields: undefined,
-        })
-      );
+      expect(mockUseDataGridColumnsCellActions).toHaveBeenCalledWith({
+        triggerId: undefined,
+        getCellValue: expect.any(Function),
+        fields: undefined,
+        dataGridRef: expect.any(Object),
+        metadata: {
+          someKey: 'someValue',
+        },
+      });
     });
 
     it('should call useDataGridColumnsCellActions properly when cellActionsTriggerId defined', async () => {
@@ -269,16 +274,18 @@ describe('UnifiedDataTable', () => {
         onFieldEdited: jest.fn(),
         cellActionsTriggerId: 'test',
       });
-      expect(mockUseDataGridColumnsCellActions).toHaveBeenCalledWith(
-        expect.objectContaining({
-          triggerId: 'test',
-          getCellValue: expect.any(Function),
-          fields: [
-            dataViewMock.getFieldByName('@timestamp')?.toSpec(),
-            dataViewMock.getFieldByName('message')?.toSpec(),
-          ],
-        })
-      );
+      expect(mockUseDataGridColumnsCellActions).toHaveBeenCalledWith({
+        triggerId: 'test',
+        getCellValue: expect.any(Function),
+        fields: [
+          dataViewMock.getFieldByName('@timestamp')?.toSpec(),
+          dataViewMock.getFieldByName('message')?.toSpec(),
+        ],
+        dataGridRef: expect.any(Object),
+        metadata: {
+          someKey: 'someValue',
+        },
+      });
     });
   });
 

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

@@ -366,6 +366,12 @@ export interface UnifiedDataTableProps {
    * Optional row line height override. Default is 1.6em.
    */
   rowLineHeightOverride?: string;
+  /**
+   * Custom set of properties used by some actions.
+   * An action might require a specific set of metadata properties to render.
+   * This data is sent directly to actions.
+   */
+  cellActionsMetadata?: Record<string, unknown>;
 }
 
 export const EuiDataGridMemoized = React.memo(EuiDataGrid);
@@ -429,11 +435,13 @@ export const UnifiedDataTable = ({
   componentsTourSteps,
   gridStyleOverride,
   rowLineHeightOverride,
+  cellActionsMetadata,
   customGridColumnsConfiguration,
   customControlColumnsConfiguration,
 }: UnifiedDataTableProps) => {
   const { fieldFormats, toastNotifications, dataViewFieldEditor, uiSettings, storage, data } =
     services;
+
   const { darkMode } = useObservable(services.theme?.theme$ ?? of(themeDefault), themeDefault);
   const dataGridRef = useRef<EuiDataGridRefProps>(null);
   const [selectedDocs, setSelectedDocs] = useState<string[]>([]);
@@ -668,6 +676,7 @@ export const UnifiedDataTable = ({
     getCellValue,
     triggerId: cellActionsTriggerId,
     dataGridRef,
+    metadata: cellActionsMetadata,
   });
 
   const {
@@ -715,11 +724,14 @@ export const UnifiedDataTable = ({
         visibleCellActions,
         columnTypes,
         showColumnTokens,
+        headerRowHeight,
         headerRowHeightLines,
         customGridColumnsConfiguration,
       }),
     [
       columnTypes,
+      showColumnTokens,
+      headerRowHeight,
       columnsCellActions,
       customGridColumnsConfiguration,
       dataView,
@@ -732,7 +744,6 @@ export const UnifiedDataTable = ({
       isSortEnabled,
       onFilter,
       settings,
-      showColumnTokens,
       toastNotifications,
       uiSettings,
       valueToStringConverter,

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

@@ -19,7 +19,6 @@ import {
   useEuiTheme,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { euiDarkVars as themeDark, euiLightVars as themeLight } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
@@ -40,9 +39,7 @@ export const SelectButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
   useEffect(() => {
     if (expanded && doc && expanded.id === doc.id) {
       setCellProps({
-        style: {
-          backgroundColor: isDarkMode ? themeDark.euiColorHighlight : themeLight.euiColorHighlight,
-        },
+        className: 'dscDocsGrid__cell--selected',
       });
     } else {
       setCellProps({ style: undefined });

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

@@ -8,7 +8,6 @@
 
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { EuiButtonIcon, EuiDataGridCellValueElementProps, EuiToolTip } from '@elastic/eui';
-import { euiLightVars as themeLight, euiDarkVars as themeDark } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
 import { UnifiedDataTableContext } from '../table_context';
 import { DataTableRowControl } from './data_table_row_control';
@@ -31,9 +30,7 @@ export const ExpandButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
       });
     } else if (expanded && current && expanded.id === current.id) {
       setCellProps({
-        style: {
-          backgroundColor: isDarkMode ? themeDark.euiColorHighlight : themeLight.euiColorHighlight,
-        },
+        className: 'dscDocsGrid__cell--expanded',
       });
     } else {
       setCellProps({ style: undefined });

packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx

@@ -8,7 +8,6 @@
 
 import React, { useContext, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
-import { euiLightVars as themeLight, euiDarkVars as themeDark } from '@kbn/ui-theme';
 import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
 import {
   EuiDataGridCellValueElementProps,
@@ -62,32 +61,22 @@ export const getRenderCellValueFn = ({
     const ctx = useContext(UnifiedDataTableContext);
 
     useEffect(() => {
-      if (!externalCustomRenderers) {
-        if (row?.isAnchor) {
-          setCellProps({
-            className: 'dscDocsGrid__cell--highlight',
-          });
-        } else if (ctx.expanded && row && ctx.expanded.id === row.id) {
-          setCellProps({
-            style: {
-              backgroundColor: ctx.isDarkMode
-                ? themeDark.euiColorHighlight
-                : themeLight.euiColorHighlight,
-            },
-          });
-        } else {
-          setCellProps({ style: undefined });
-        }
+      if (row?.isAnchor) {
+        setCellProps({
+          className: 'dscDocsGrid__cell--highlight',
+        });
+      } else if (ctx.expanded && row && ctx.expanded.id === row.id) {
+        setCellProps({
+          className: 'dscDocsGrid__cell--expanded',
+        });
+      } else {
+        setCellProps({ style: undefined });
       }
     }, [ctx, row, setCellProps]);
 
-    if (typeof row === 'undefined') {
-      return <span className={CELL_CLASS}>-</span>;
-    }
-
     if (!!externalCustomRenderers && !!externalCustomRenderers[columnId]) {
       return (
-        <>
+        <span className={CELL_CLASS}>
           {externalCustomRenderers[columnId]({
             rowIndex,
             columnId,
@@ -101,10 +90,14 @@ export const getRenderCellValueFn = ({
             fieldFormats,
             closePopover,
           })}
-        </>
+        </span>
       );
     }
 
+    if (typeof row === 'undefined') {
+      return <span className={CELL_CLASS}>-</span>;
+    }
+
     /**
      * when using the fields api this code is used to show top level objects
      * this is used for legacy stuff like displaying products of our ecommerce dataset

packages/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar.tsx

@@ -345,6 +345,7 @@ export const UnifiedFieldListSidebarComponent: React.FC<UnifiedFieldListSidebarP
     'data-test-subj':
       stateService.creationOptions.dataTestSubj?.fieldListAddFieldButtonTestSubj ??
       'unifiedFieldListAddField',
+    className: 'unifiedFieldListSidebar__addBtn',
   };
   const buttonAddFieldLabel = i18n.translate(
     'unifiedFieldList.fieldListSidebar.addFieldButtonLabel',