[OneDiscover][Extension] DataTable Row Actions

packages/kbn-unified-data-table/README.md

@@ -41,13 +41,12 @@ Props description:
 | **configRowHeight** | (optional)number | Optional value for providing configuration setting for UnifiedDataTable rows height. |
 | **showMultiFields** | (optional)boolean | Optional value for providing configuration setting for enabling to display the complex fields in the table. Default is true. |
 | **maxDocFieldsDisplayed** | (optional)number | Optional value for providing configuration setting for maximum number of document fields to display in the table. Default is 50. |
-| **externalControlColumns** | (optional)EuiDataGridControlColumn[] | Optional value for providing EuiDataGridControlColumn list of the additional leading control columns. UnifiedDataTable includes two control columns: Open Details and Select. |
+| **rowAdditionalLeadingControls** | (optional)RowControlColumn[] | Optional value for providing an list of the additional leading control columns. UnifiedDataTable includes two control columns: Open Details and Select. |
 | **totalHits** | (optional)number | Number total hits from ES. |
 | **onFetchMoreRecords** | (optional)() => void | To fetch more. |
 | **externalAdditionalControls** | (optional)React.ReactNode | Optional value for providing the additional controls available in the UnifiedDataTable toolbar to manage it's records or state. UnifiedDataTable includes Columns, Sorting and Bulk Actions. |
 | **rowsPerPageOptions** | (optional)number[] | Optional list of number type values to set custom UnifiedDataTable paging options to display the records per page. |
 | **renderCustomGridBody** | (optional)(args: EuiDataGridCustomBodyProps) => React.ReactNode; | An optional function called to completely customize and control the rendering of EuiDataGrid's body and cell placement. |
-| **trailingControlColumns** | (optional)EuiDataGridControlColumn[] | An optional list of the EuiDataGridControlColumn type for setting trailing control columns standard for EuiDataGrid. |
 | **visibleCellActions** | (optional)number | An optional value for a custom number of the visible cell actions in the table. By default is up to 3. |
 | **externalCustomRenderers** | (optional)Record<string,(props: EuiDataGridCellValueElementProps) => React.ReactNode>; | An optional settings for a specified fields rendering like links. Applied only for the listed fields rendering. |
 | **consumer** | (optional)string | Name of the UnifiedDataTable consumer component or application. |
@@ -141,9 +140,7 @@ Usage example:
                 [browserFields, handleOnPanelClosed, runtimeMappings, timelineId]
             );
       }
-      externalControlColumns={leadingControlColumns}
       externalAdditionalControls={additionalControls}
-      trailingControlColumns={trailingControlColumns}
       renderCustomGridBody={renderCustomGridBody}
       rowsPerPageOptions={[10, 30, 40, 100]}
       showFullScreenButton={false}

packages/kbn-unified-data-table/__mocks__/external_control_columns.tsx

@@ -17,6 +17,7 @@ import {
   EuiSpacer,
   EuiDataGridControlColumn,
 } from '@elastic/eui';
+import type { RowControlColumn } from '../src/types';
 
 const SelectionHeaderCell = () => {
   return (
@@ -116,3 +117,22 @@ export const testLeadingControlColumn: EuiDataGridControlColumn = {
   rowCellRender: SelectionRowCell,
   width: 100,
 };
+
+export const mockRowAdditionalLeadingControls = ['visBarVerticalStacked', 'heart', 'inspect'].map(
+  (iconType, index): RowControlColumn => ({
+    id: `exampleControl_${iconType}`,
+    headerAriaLabel: `Example Row Control ${iconType}`,
+    renderControl: (Control, rowProps) => {
+      return (
+        <Control
+          data-test-subj={`exampleRowControl-${iconType}`}
+          label={`Example ${iconType}`}
+          iconType={iconType}
+          onClick={() => {
+            alert(`Example "${iconType}" control clicked. Row index: ${rowProps.rowIndex}`);
+          }}
+        />
+      );
+    },
+  })
+);

packages/kbn-unified-data-table/index.ts

@@ -25,7 +25,7 @@ export { getRowsPerPageOptions } from './src/utils/rows_per_page';
 export { popularizeField } from './src/utils/popularize_field';
 
 export { useColumns } from './src/hooks/use_data_grid_columns';
-export { OPEN_DETAILS, SELECT_ROW } from './src/components/data_table_columns';
+export { OPEN_DETAILS, SELECT_ROW } from './src/components/data_table_columns'; // TODO: deprecate?
 export { DataTableRowControl } from './src/components/data_table_row_control';
 
 export type {

packages/kbn-unified-data-table/src/components/custom_control_columns/additional_row_control/get_additional_row_control_columns.test.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { getAdditionalRowControlColumns } from './get_additional_row_control_columns';
+import { mockRowAdditionalLeadingControls } from '../../../../__mocks__/external_control_columns';
+
+describe('getAdditionalRowControlColumns', () => {
+  it('should work correctly for 0 controls', () => {
+    const columns = getAdditionalRowControlColumns([]);
+
+    expect(columns).toHaveLength(0);
+  });
+
+  it('should work correctly for 1 control', () => {
+    const columns = getAdditionalRowControlColumns([mockRowAdditionalLeadingControls[0]]);
+
+    expect(columns.map((column) => column.id)).toEqual([
+      `additionalRowControl_${mockRowAdditionalLeadingControls[0].id}`,
+    ]);
+  });
+
+  it('should work correctly for 2 controls', () => {
+    const columns = getAdditionalRowControlColumns([
+      mockRowAdditionalLeadingControls[0],
+      mockRowAdditionalLeadingControls[1],
+    ]);
+
+    expect(columns.map((column) => column.id)).toEqual([
+      `additionalRowControl_${mockRowAdditionalLeadingControls[0].id}`,
+      `additionalRowControl_${mockRowAdditionalLeadingControls[1].id}`,
+    ]);
+  });
+
+  it('should work correctly for 3 and more controls', () => {
+    const columns = getAdditionalRowControlColumns([
+      mockRowAdditionalLeadingControls[0],
+      mockRowAdditionalLeadingControls[1],
+      mockRowAdditionalLeadingControls[2],
+    ]);
+
+    expect(columns.map((column) => column.id)).toEqual([
+      `additionalRowControl_${mockRowAdditionalLeadingControls[0].id}`,
+      `additionalRowControl_menuControl`,
+    ]);
+  });
+});

packages/kbn-unified-data-table/src/components/custom_control_columns/additional_row_control/get_additional_row_control_columns.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { EuiDataGridControlColumn } from '@elastic/eui';
+import type { RowControlColumn } from '../../../types';
+import { getRowControlColumn } from './row_control_column';
+import { getRowMenuControlColumn } from './row_menu_control_column';
+
+export const getAdditionalRowControlColumns = (
+  rowControlColumns: RowControlColumn[]
+): EuiDataGridControlColumn[] => {
+  if (rowControlColumns.length <= 2) {
+    return rowControlColumns.map(getRowControlColumn);
+  }
+
+  return [
+    getRowControlColumn(rowControlColumns[0]),
+    getRowMenuControlColumn(rowControlColumns.slice(1)),
+  ];
+};

packages/kbn-unified-data-table/src/components/custom_control_columns/additional_row_control/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { getAdditionalRowControlColumns } from './get_additional_row_control_columns';

packages/kbn-unified-data-table/src/components/custom_control_columns/additional_row_control/row_control_column.test.tsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { EuiDataGridCellValueElementProps } from '@elastic/eui';
+import { render, screen } from '@testing-library/react';
+import { getRowControlColumn } from './row_control_column';
+import { dataTableContextMock } from '../../../../__mocks__/table_context';
+import { UnifiedDataTableContext } from '../../../table_context';
+
+describe('getRowControlColumn', () => {
+  const contextMock = {
+    ...dataTableContextMock,
+  };
+
+  it('should render the component', () => {
+    const mockClick = jest.fn();
+    const props = {
+      id: 'test_row_control',
+      headerAriaLabel: 'row control',
+      renderControl: jest.fn((Control, rowProps) => (
+        <Control label={`test-${rowProps.rowIndex}`} iconType="heart" onClick={mockClick} />
+      )),
+    };
+    const rowControlColumn = getRowControlColumn(props);
+    const RowControlColumn =
+      rowControlColumn.rowCellRender as React.FC<EuiDataGridCellValueElementProps>;
+    render(
+      <UnifiedDataTableContext.Provider value={contextMock}>
+        <RowControlColumn
+          rowIndex={1}
+          setCellProps={jest.fn()}
+          columnId={props.id}
+          colIndex={0}
+          isDetails={false}
+          isExpandable={false}
+          isExpanded={false}
+        />
+      </UnifiedDataTableContext.Provider>
+    );
+    const button = screen.getByTestId('unifiedDataTable_rowControl_test_row_control');
+    expect(button).toBeInTheDocument();
+
+    button.click();
+
+    expect(mockClick).toHaveBeenCalledWith({ record: contextMock.rows[1], rowIndex: 1 });
+  });
+});

packages/kbn-unified-data-table/src/components/custom_control_columns/additional_row_control/row_control_column.tsx

@@ -0,0 +1,77 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useMemo } from 'react';
+import {
+  EuiButtonIcon,
+  EuiDataGridCellValueElementProps,
+  EuiDataGridControlColumn,
+  EuiScreenReaderOnly,
+  EuiToolTip,
+} from '@elastic/eui';
+import { DataTableRowControl, Size } from '../../data_table_row_control';
+import type { RowControlColumn, RowControlProps } from '../../../types';
+import { DEFAULT_CONTROL_COLUMN_WIDTH } from '../../../constants';
+import { useControlColumn } from '../../../hooks/use_control_column';
+
+export const RowControlCell = ({
+  renderControl,
+  ...props
+}: EuiDataGridCellValueElementProps & {
+  renderControl: RowControlColumn['renderControl'];
+}) => {
+  const rowProps = useControlColumn(props);
+
+  const Control: React.FC<RowControlProps> = useMemo(
+    () =>
+      ({ 'data-test-subj': dataTestSubj, color, disabled, label, iconType, onClick }) => {
+        return (
+          <DataTableRowControl size={Size.normal}>
+            <EuiToolTip content={label} delay="long">
+              <EuiButtonIcon
+                data-test-subj={dataTestSubj ?? `unifiedDataTable_rowControl_${props.columnId}`}
+                disabled={disabled}
+                size="xs"
+                iconSize="s"
+                iconType={iconType}
+                color={color ?? 'text'}
+                aria-label={label}
+                onClick={() => {
+                  onClick?.(rowProps);
+                }}
+              />
+            </EuiToolTip>
+          </DataTableRowControl>
+        );
+      },
+    [props.columnId, rowProps]
+  );
+
+  return renderControl(Control, rowProps);
+};
+
+export const getRowControlColumn = (
+  rowControlColumn: RowControlColumn
+): EuiDataGridControlColumn => {
+  const { id, headerAriaLabel, headerCellRender, renderControl } = rowControlColumn;
+
+  return {
+    id: `additionalRowControl_${id}`,
+    width: DEFAULT_CONTROL_COLUMN_WIDTH,
+    headerCellRender:
+      headerCellRender ??
+      (() => (
+        <EuiScreenReaderOnly>
+          <span>{headerAriaLabel}</span>
+        </EuiScreenReaderOnly>
+      )),
+    rowCellRender: (props) => {
+      return <RowControlCell {...props} renderControl={renderControl} />;
+    },
+  };
+};

packages/kbn-unified-data-table/src/components/custom_control_columns/additional_row_control/row_menu_control_column.test.tsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { EuiDataGridCellValueElementProps } from '@elastic/eui';
+import { render, screen } from '@testing-library/react';
+import { getRowMenuControlColumn } from './row_menu_control_column';
+import { dataTableContextMock } from '../../../../__mocks__/table_context';
+import { mockRowAdditionalLeadingControls } from '../../../../__mocks__/external_control_columns';
+import { UnifiedDataTableContext } from '../../../table_context';
+
+describe('getRowMenuControlColumn', () => {
+  const contextMock = {
+    ...dataTableContextMock,
+  };
+
+  it('should render the component', () => {
+    const mockClick = jest.fn();
+    const props = {
+      id: 'test_row_menu_control',
+      headerAriaLabel: 'row control',
+      renderControl: jest.fn((Control, rowProps) => (
+        <Control label={`test-${rowProps.rowIndex}`} iconType="heart" onClick={mockClick} />
+      )),
+    };
+    const rowMenuControlColumn = getRowMenuControlColumn([
+      props,
+      mockRowAdditionalLeadingControls[0],
+      mockRowAdditionalLeadingControls[1],
+    ]);
+    const RowMenuControlColumn =
+      rowMenuControlColumn.rowCellRender as React.FC<EuiDataGridCellValueElementProps>;
+    render(
+      <UnifiedDataTableContext.Provider value={contextMock}>
+        <RowMenuControlColumn
+          rowIndex={1}
+          setCellProps={jest.fn()}
+          columnId={props.id}
+          colIndex={0}
+          isDetails={false}
+          isExpandable={false}
+          isExpanded={false}
+        />
+      </UnifiedDataTableContext.Provider>
+    );
+    const menuButton = screen.getByTestId('unifiedDataTable_test_row_menu_control');
+    expect(menuButton).toBeInTheDocument();
+
+    menuButton.click();
+
+    expect(screen.getByTestId('exampleRowControl-visBarVerticalStacked')).toBeInTheDocument();
+    expect(screen.getByTestId('exampleRowControl-heart')).toBeInTheDocument();
+
+    const button = screen.getByTestId('unifiedDataTable_rowMenu_test_row_menu_control');
+    expect(button).toBeInTheDocument();
+
+    button.click();
+    expect(mockClick).toHaveBeenCalledWith({ record: contextMock.rows[1], rowIndex: 1 });
+  });
+});