DO NOT MERGE - Timeline New UI + Modal + Unified components

packages/kbn-management/settings/setting_ids/index.ts

@@ -167,6 +167,8 @@ export const SECURITY_SOLUTION_DEFAULT_ALERT_TAGS_KEY = 'securitySolution:alertT
 /** This Kibana Advanced Setting allows users to enable/disable the Expandable Flyout */
 export const SECURITY_SOLUTION_ENABLE_EXPANDABLE_FLYOUT_SETTING =
   'securitySolution:enableExpandableFlyout' as const;
+export const SECURITY_SOLUTION_USE_DISCOVER_COMPONENTS_IN_TIMELINE =
+  'securitySolution:useDiscoverComponentsInTimeline';
 
 // Timelion settings
 export const TIMELION_ES_DEFAULT_INDEX_ID = 'timelion:es.default_index';

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

@@ -9,6 +9,10 @@
   font-family: $euiCodeFontFamily;
 }
 
+.dscDocsGrid__cell--expanded {
+  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.tsx

@@ -339,6 +339,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);
@@ -399,9 +405,11 @@ export const UnifiedDataTable = ({
   componentsTourSteps,
   gridStyleOverride,
   rowLineHeightOverride,
+  cellActionsMetadata,
 }: 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[]>([]);
@@ -649,6 +657,7 @@ export const UnifiedDataTable = ({
     getCellValue,
     triggerId: cellActionsTriggerId,
     dataGridRef,
+    metadata: cellActionsMetadata,
   });
 
   const euiGridColumns = useMemo(

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

@@ -21,7 +21,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';
@@ -42,9 +41,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--expanded',
       });
     } 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';
 
@@ -30,9 +29,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

@@ -9,7 +9,6 @@
 import React, { Fragment, useContext, useEffect } from 'react';
 import classnames from 'classnames';
 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,
@@ -67,21 +66,6 @@ export const getRenderCellValueFn = ({
     isExpandable,
     isExpanded,
   }: EuiDataGridCellValueElementProps) => {
-    if (!!externalCustomRenderers && !!externalCustomRenderers[columnId]) {
-      return (
-        <>
-          {externalCustomRenderers[columnId]({
-            rowIndex,
-            columnId,
-            isDetails,
-            setCellProps,
-            isExpandable,
-            isExpanded,
-            colIndex,
-          })}
-        </>
-      );
-    }
     const row = rows ? rows[rowIndex] : undefined;
 
     const field = dataView.fields.getByName(columnId);
@@ -94,17 +78,29 @@ export const getRenderCellValueFn = ({
         });
       } else if (ctx.expanded && row && ctx.expanded.id === row.id) {
         setCellProps({
-          style: {
-            backgroundColor: ctx.isDarkMode
-              ? themeDark.euiColorHighlight
-              : themeLight.euiColorHighlight,
-          },
+          className: 'dscDocsGrid__cell--expanded',
         });
       } else {
         setCellProps({ style: undefined });
       }
     }, [ctx, row, setCellProps]);
 
+    if (!!externalCustomRenderers && !!externalCustomRenderers[columnId]) {
+      return (
+        <span className={CELL_CLASS}>
+          {externalCustomRenderers[columnId]({
+            rowIndex,
+            columnId,
+            isDetails,
+            setCellProps,
+            isExpandable,
+            isExpanded,
+            colIndex,
+          })}
+        </span>
+      );
+    }
+
     if (typeof row === 'undefined') {
       return <span className={CELL_CLASS}>-</span>;
     }

packages/kbn-unified-data-table/tsconfig.json

@@ -16,7 +16,6 @@
     "@kbn/expressions-plugin",
     "@kbn/test-jest-helpers",
     "@kbn/i18n-react",
-    "@kbn/ui-theme",
     "@kbn/field-types",
     "@kbn/kibana-utils-plugin",
     "@kbn/cell-actions",