elastic · logeekal · Apr 2, 2024 · Jan 16, 2024 · Jan 22, 2024 · Jan 24, 2024
diff --git a/packages/kbn-cell-actions/src/hooks/use_data_grid_column_cell_actions.test.tsx b/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 },
+      });
     });
   });
 

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

@@ -74,6 +74,9 @@ function getProps(): UnifiedDataTableProps {
       data: services.data,
       theme: services.theme,
     },
+    cellActionsMetadata: {
+      someKey: 'someValue',
+    },
   };
 }
 
@@ -254,13 +257,16 @@ 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: {
+          dataViewId: 'the-data-view-id',
+          someKey: 'someValue',
+        },
+      });
     });
 
     it('should call useDataGridColumnsCellActions properly when cellActionsTriggerId defined', async () => {
@@ -270,16 +276,19 @@ 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: {
+          dataViewId: 'the-data-view-id',
+          someKey: 'someValue',
+        },
+      });
     });
   });
 

@@ -367,6 +367,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);
@@ -430,11 +436,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[]>([]);
@@ -671,14 +679,17 @@ export const UnifiedDataTable = ({
         : undefined,
     [cellActionsTriggerId, isPlainRecord, visibleColumns, dataView]
   );
-  const cellActionsMetadata = useMemo(() => ({ dataViewId: dataView.id }), [dataView]);
+  const allCellActionsMetadata = useMemo(
+    () => ({ dataViewId: dataView.id, ...(cellActionsMetadata ?? {}) }),
+    [dataView, cellActionsMetadata]
+  );
 
   const columnsCellActions = useDataGridColumnsCellActions({
     fields: cellActionsFields,
     getCellValue,
     triggerId: cellActionsTriggerId,
     dataGridRef,
-    metadata: cellActionsMetadata,
+    metadata: allCellActionsMetadata,
   });
 
   const {
@@ -730,6 +741,7 @@ export const UnifiedDataTable = ({
         customGridColumnsConfiguration,
       }),
     [
+      showColumnTokens,
       columnsMeta,
       columnsCellActions,
       customGridColumnsConfiguration,
@@ -743,7 +755,6 @@ export const UnifiedDataTable = ({
       isSortEnabled,
       onFilter,
       settings,
-      showColumnTokens,
       toastNotifications,
       uiSettings,
       valueToStringConverter,

@@ -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: 'unifiedDataTable__cell--selected',
       });
     } else {
       setCellProps({ style: undefined });

@@ -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';
@@ -27,13 +26,11 @@ export const ExpandButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
   useEffect(() => {
     if (current.isAnchor) {
       setCellProps({
-        className: 'dscDocsGrid__cell--highlight',
+        className: 'unifiedDataTable__cell--highlight',
       });
     } else if (expanded && current && expanded.id === current.id) {
       setCellProps({
-        style: {
-          backgroundColor: isDarkMode ? themeDark.euiColorHighlight : themeLight.euiColorHighlight,
-        },
+        className: 'unifiedDataTable__cell--expanded',
       });
     } else {
       setCellProps({ style: undefined });

@@ -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,22 +61,16 @@ 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: 'unifiedDataTable__cell--highlight',
+        });
+      } else if (ctx.expanded && row && ctx.expanded.id === row.id) {
+        setCellProps({
+          className: 'unifiedDataTable__cell--expanded',
+        });
+      } else {
+        setCellProps({ style: undefined });
       }
     }, [ctx, row, setCellProps]);
 
@@ -87,7 +80,7 @@ export const getRenderCellValueFn = ({
 
     if (!!externalCustomRenderers && !!externalCustomRenderers[columnId]) {
       return (
-        <>
+        <span className={CELL_CLASS}>
           {externalCustomRenderers[columnId]({
             rowIndex,
             columnId,
@@ -101,7 +94,7 @@ export const getRenderCellValueFn = ({
             fieldFormats,
             closePopover,
           })}
-        </>
+        </span>
       );
     }
 

@@ -354,6 +354,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',