[Security Solution] integrate CellActions in Events/Alerts DataTables

x-pack/plugins/security_solution/common/types/header_actions/index.ts

@@ -83,7 +83,6 @@ export type ColumnHeaderOptions = Pick<
   | 'isResizable'
 > & {
   aggregatable?: boolean;
-  dataTableCellActions?: DataTableCellAction[];
   category?: string;
   columnHeaderType: ColumnHeaderType;
   description?: string | null;

x-pack/plugins/security_solution/common/types/timeline/cells/index.ts

@@ -6,7 +6,6 @@
  */
 
 import type { EuiDataGridCellValueElementProps } from '@elastic/eui';
-import type { Filter } from '@kbn/es-query';
 import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
 import type { ColumnHeaderOptions, RowRenderer } from '../..';
 import type { BrowserFields, TimelineNonEcsData } from '../../../search_strategy';
@@ -18,7 +17,6 @@ export type CellValueElementProps = EuiDataGridCellValueElementProps & {
   data: TimelineNonEcsData[];
   ecsData?: Ecs;
   eventId: string; // _id
-  globalFilters?: Filter[];
   header: ColumnHeaderOptions;
   isDraggable: boolean;
   isTimeline?: boolean; // Default cell renderer is used for both the alert table and timeline. This allows us to cheaply separate concerns
@@ -30,5 +28,4 @@ export type CellValueElementProps = EuiDataGridCellValueElementProps & {
   truncate?: boolean;
   key?: string;
   closeCellPopover?: () => void;
-  enableActions?: boolean;
 };

x-pack/plugins/security_solution/cypress/screens/alerts_details.ts

@@ -50,7 +50,7 @@ export const CELL_EXPAND_VALUE = '[data-test-subj="euiDataGridCellExpandButton"]
 
 export const CELL_EXPANSION_POPOVER = '[data-test-subj="euiDataGridExpansionPopover"]';
 
-export const USER_DETAILS_LINK = '[data-test-subj="data-grid-user-details"]';
+export const USER_DETAILS_LINK = '[data-test-subj="users-link-anchor"]';
 
 export const TABLE_TAB = '[data-test-subj="tableTab"]';
 

x-pack/plugins/security_solution/cypress/screens/timeline.ts

@@ -294,7 +294,8 @@ export const ALERT_TABLE_FILE_NAME_HEADER = '[data-gridcell-column-id="file.name
 export const ALERT_TABLE_FILE_NAME_VALUES =
   '[data-gridcell-column-id="file.name"][data-test-subj="dataGridRowCell"]'; // empty column for the test data
 
-export const ALERT_TABLE_CELL_ACTIONS_ADD_TO_TIMELINE = '[data-test-subj="add-to-timeline"]';
+export const ALERT_TABLE_CELL_ACTIONS_ADD_TO_TIMELINE =
+  '[data-test-subj="dataGridColumnCellAction-security_addToTimeline"]';
 
 export const ACTIVE_TIMELINE_BOTTOM_BAR =
   '[data-test-subj="flyoutBottomBar"]  .active-timeline-button';

x-pack/plugins/security_solution/cypress/tasks/search_bar.ts

@@ -40,7 +40,7 @@ export const fillAddFilterForm = ({ key, value, operator }: SearchBarFilter) =>
   cy.get(ADD_FILTER_FORM_FIELD_INPUT).should('be.visible');
   cy.get(ADD_FILTER_FORM_FIELD_INPUT).type(`${key}{downarrow}`);
   cy.get(ADD_FILTER_FORM_FIELD_INPUT).click();
-  cy.get(ADD_FILTER_FORM_FIELD_OPTION(key)).click({ force: true });
+  cy.get(ADD_FILTER_FORM_FIELD_OPTION(key)).click();
   if (!operator) {
     cy.get(ADD_FILTER_FORM_OPERATOR_FIELD).click();
     cy.get(ADD_FILTER_FORM_OPERATOR_OPTION_IS).click();

x-pack/plugins/security_solution/public/common/components/control_columns/transform_control_columns.test.tsx

@@ -19,7 +19,6 @@ describe('transformControlColumns', () => {
     setEventsDeleted: jest.fn(),
     columnHeaders: [],
     controlColumns: [],
-    disabledCellActions: [],
     selectedEventIds: {},
     tabType: '',
     isSelectAllChecked: false,

x-pack/plugins/security_solution/public/common/components/control_columns/transform_control_columns.tsx

@@ -34,7 +34,6 @@ export interface TransformColumnsProps {
   columnHeaders: ColumnHeaderOptions[];
   controlColumns: ControlColumnProps[];
   data: TimelineItem[];
-  disabledCellActions: string[];
   fieldBrowserOptions?: FieldBrowserOptions;
   loadingEventIds: string[];
   onRowSelected: OnRowSelected;

x-pack/plugins/security_solution/public/common/components/data_table/index.test.tsx

@@ -14,21 +14,32 @@ import { REMOVE_COLUMN } from './column_headers/translations';
 import { useMountAppended } from '../../utils/use_mount_appended';
 import type { EuiDataGridColumn } from '@elastic/eui';
 import { defaultHeaders, mockGlobalState, mockTimelineData, TestProviders } from '../../mock';
-import { defaultColumnHeaderType } from '../../store/data_table/defaults';
 import { mockBrowserFields } from '../../containers/source/mock';
 import { getMappedNonEcsValue } from '../../../timelines/components/timeline/body/data_driven_columns';
 import type { CellValueElementProps } from '../../../../common/types';
 import { TableId } from '../../../../common/types';
+import { CELL_ACTIONS_DEFAULT_TRIGGER } from '../../../../common/constants';
 
 const mockDispatch = jest.fn();
-jest.mock('react-redux', () => {
-  const original = jest.requireActual('react-redux');
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: () => mockDispatch,
+}));
 
-  return {
-    ...original,
-    useDispatch: () => mockDispatch,
-  };
-});
+const mockUseDataGridColumnsCellActions = jest.fn(
+  (_: object): Array<Array<() => JSX.Element>> => []
+);
+jest.mock('@kbn/cell-actions', () => ({
+  ...jest.requireActual('@kbn/cell-actions'),
+  useDataGridColumnsCellActions: (params: object) => mockUseDataGridColumnsCellActions(params),
+}));
+
+const headersJustTimestamp = defaultHeaders.filter((h) => h.id === '@timestamp');
+const mockGetColumnHeaders = jest.fn(() => headersJustTimestamp);
+jest.mock('./column_headers/helpers', () => ({
+  ...jest.requireActual('./column_headers/helpers'),
+  getColumnHeaders: () => mockGetColumnHeaders(),
+}));
 
 jest.mock('@kbn/kibana-react-plugin/public', () => {
   const originalModule = jest.requireActual('@kbn/kibana-react-plugin/public');
@@ -80,8 +91,6 @@ describe('DataTable', () => {
   const props: DataTableProps = {
     browserFields: mockBrowserFields,
     data: mockTimelineData,
-    defaultCellActions: [],
-    disabledCellActions: ['signal.rule.risk_score', 'signal.reason'],
     id: TableId.test,
     loadPage: jest.fn(),
     renderCellValue: TestCellRenderer,
@@ -98,10 +107,14 @@ describe('DataTable', () => {
   };
 
   beforeEach(() => {
-    mockDispatch.mockReset();
+    mockDispatch.mockClear();
   });
 
   describe('rendering', () => {
+    beforeEach(() => {
+      mockDispatch.mockClear();
+    });
+
     test('it renders the body data grid', () => {
       const wrapper = mount(
         <TestProviders>
@@ -142,10 +155,8 @@ describe('DataTable', () => {
     });
 
     test('it renders cell value', () => {
-      const headersJustTimestamp = defaultHeaders.filter((h) => h.id === '@timestamp');
       const testProps = {
         ...props,
-        columnHeaders: headersJustTimestamp,
         data: mockTimelineData.slice(0, 1),
       };
       const wrapper = mount(
@@ -163,49 +174,51 @@ describe('DataTable', () => {
           .text()
       ).toEqual(mockTimelineData[0].ecs.timestamp);
     });
+  });
 
-    test('timestamp column renders cell actions', () => {
-      const headersJustTimestamp = defaultHeaders.filter((h) => h.id === '@timestamp');
-      const testProps = {
-        ...props,
-        columnHeaders: headersJustTimestamp,
-        data: mockTimelineData.slice(0, 1),
-      };
+  describe('cellActions', () => {
+    beforeEach(() => {
+      mockDispatch.mockClear();
+    });
+
+    test('calls useDataGridColumnsCellActions properly', () => {
+      const data = mockTimelineData.slice(0, 1);
       const wrapper = mount(
         <TestProviders>
-          <DataTableComponent {...testProps} />
+          <DataTableComponent {...props} data={data} />
         </TestProviders>
       );
       wrapper.update();
 
-      expect(
-        wrapper
-          .find('[data-test-subj="body-data-grid"]')
-          .first()
-          .prop<EuiDataGridColumn[]>('columns')
-          .find((c) => c.id === '@timestamp')?.cellActions
-      ).toBeDefined();
+      expect(mockUseDataGridColumnsCellActions).toHaveBeenCalledWith({
+        triggerId: CELL_ACTIONS_DEFAULT_TRIGGER,
+        fields: [{ name: '@timestamp', values: [data[0]?.data[0]?.value], type: 'date' }],
+        metadata: {
+          scopeId: 'table-test',
+        },
+      });
     });
 
-    test("signal.rule.risk_score column doesn't render cell actions", () => {
-      const columnHeaders = [
-        {
-          category: 'signal',
-          columnHeaderType: defaultColumnHeaderType,
-          id: 'signal.rule.risk_score',
-          type: 'number',
-          aggregatable: true,
-          initialWidth: 105,
-        },
-      ];
-      const testProps = {
-        ...props,
-        columnHeaders,
-        data: mockTimelineData.slice(0, 1),
-      };
+    test('does not render cell actions if disableCellActions is true', () => {
       const wrapper = mount(
         <TestProviders>
-          <DataTableComponent {...testProps} />
+          <DataTableComponent {...props} data={mockTimelineData.slice(0, 1)} disableCellActions />
+        </TestProviders>
+      );
+      wrapper.update();
+
+      expect(mockUseDataGridColumnsCellActions).toHaveBeenCalledWith(
+        expect.objectContaining({
+          fields: [],
+        })
+      );
+    });
+
+    test('does not render cell actions if empty actions returned', () => {
+      mockUseDataGridColumnsCellActions.mockReturnValueOnce([]);
+      const wrapper = mount(
+        <TestProviders>
+          <DataTableComponent {...props} data={mockTimelineData.slice(0, 1)} />
         </TestProviders>
       );
       wrapper.update();
@@ -215,29 +228,15 @@ describe('DataTable', () => {
           .find('[data-test-subj="body-data-grid"]')
           .first()
           .prop<EuiDataGridColumn[]>('columns')
-          .find((c) => c.id === 'signal.rule.risk_score')?.cellActions
-      ).toBeUndefined();
+          .find((c) => c.id === '@timestamp')?.cellActions
+      ).toHaveLength(0);
     });
 
-    test("signal.reason column doesn't render cell actions", () => {
-      const columnHeaders = [
-        {
-          category: 'signal',
-          columnHeaderType: defaultColumnHeaderType,
-          id: 'signal.reason',
-          type: 'string',
-          aggregatable: true,
-          initialWidth: 450,
-        },
-      ];
-      const testProps = {
-        ...props,
-        columnHeaders,
-        data: mockTimelineData.slice(0, 1),
-      };
+    test('renders returned cell actions', () => {
+      mockUseDataGridColumnsCellActions.mockReturnValueOnce([[() => <div />]]);
       const wrapper = mount(
         <TestProviders>
-          <DataTableComponent {...testProps} />
+          <DataTableComponent {...props} data={mockTimelineData.slice(0, 1)} />
         </TestProviders>
       );
       wrapper.update();
@@ -247,43 +246,11 @@ describe('DataTable', () => {
           .find('[data-test-subj="body-data-grid"]')
           .first()
           .prop<EuiDataGridColumn[]>('columns')
-          .find((c) => c.id === 'signal.reason')?.cellActions
-      ).toBeUndefined();
+          .find((c) => c.id === '@timestamp')?.cellActions
+      ).toHaveLength(1);
     });
   });
 
-  test("signal.rule.risk_score column doesn't render cell actions", () => {
-    const columnHeaders = [
-      {
-        category: 'signal',
-        columnHeaderType: defaultColumnHeaderType,
-        id: 'signal.rule.risk_score',
-        type: 'number',
-        aggregatable: true,
-        initialWidth: 105,
-      },
-    ];
-    const testProps = {
-      ...props,
-      columnHeaders,
-      data: mockTimelineData.slice(0, 1),
-    };
-    const wrapper = mount(
-      <TestProviders>
-        <DataTableComponent {...testProps} />
-      </TestProviders>
-    );
-    wrapper.update();
-
-    expect(
-      wrapper
-        .find('[data-test-subj="body-data-grid"]')
-        .first()
-        .prop<EuiDataGridColumn[]>('columns')
-        .find((c) => c.id === 'signal.rule.risk_score')?.cellActions
-    ).toBeUndefined();
-  });
-
   test('it does NOT render switches for hiding columns in the `EuiDataGrid` `Columns` popover', async () => {
     render(
       <TestProviders>