[Discover] Add a test and support header cells

elastic · Sep 11, 2024 · 22b1145 · 22b1145
1 parent 4a8c1d8
commit 22b1145
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 10 deletions.
diff --git a/packages/kbn-discover-utils/src/utils/override_grid_copy_event.ts b/packages/kbn-discover-utils/src/utils/override_grid_copy_event.ts
@@ -11,7 +11,7 @@ import { ClipboardEvent } from 'react';
 
 interface OverrideGridCopyEventParams {
   event: ClipboardEvent<HTMLDivElement>;
-  dataGridWrapper: HTMLElement | null;
+  dataGridWrapper: HTMLElement | null | Element;
 }
 
 export function overrideGridCopyEvent({ event, dataGridWrapper }: OverrideGridCopyEventParams) {
@@ -32,28 +32,38 @@ export function overrideGridCopyEvent({ event, dataGridWrapper }: OverrideGridCo
 
     const rows = dataGridWrapper.querySelectorAll('[role="row"]');
     rows.forEach((row) => {
-      const cells = row.querySelectorAll('[role="gridcell"]');
+      const isHeaderRow = row.classList?.contains('euiDataGridHeader');
+
+      const cells = row.querySelectorAll(
+        isHeaderRow ? '[role="columnheader"]' : '[role="gridcell"]'
+      );
 
       const cellsTextContent: string[] = [];
       let hasSelectedCellsInRow = false;
 
       cells.forEach((cell) => {
         if (
-          cell.classList?.contains?.('euiDataGridRowCell--controlColumn') &&
+          cell.classList?.contains?.(
+            isHeaderRow
+              ? 'euiDataGridHeaderCell--controlColumn'
+              : 'euiDataGridRowCell--controlColumn'
+          ) &&
           cell.getAttribute('data-gridcell-column-id') !== 'timeline-event-detail-row' // in Security Solution "Event renderes" are appended as control column
         ) {
           // skip controls
           return;
         }
 
-        const cellContent = cell.querySelector('.euiDataGridRowCell__content');
-        if (!cellContent) {
+        const cellContentElement = cell.querySelector(
+          isHeaderRow ? '.euiDataGridHeaderCell__content' : '.euiDataGridRowCell__content'
+        );
+        if (!cellContentElement) {
           return;
         }
 
         // get text content of selected cells
         if (ranges.some((range) => range?.intersectsNode(cell))) {
-          cellsTextContent.push(getCellTextContent(cellContent));
+          cellsTextContent.push(getCellTextContent(cellContentElement));
           hasSelectedCellsInRow = true;
           totalCellsCount++;
         } else {
@@ -100,7 +110,10 @@ function getCellTextContent(cell: Element) {
   replaceWithSrcTextNode(cellCloned, 'img');
   replaceWithSrcTextNode(cellCloned, 'audio');
 
-  return cellCloned.textContent || '';
+  // remove from the grid
+  dropBySelector(cellCloned, '.euiToolTipAnchor');
+
+  return (cellCloned.textContent || '').trim();
 }
 
 function replaceWithSrcTextNode(element: HTMLElement, tagName: 'img' | 'audio') {

diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, ClipboardEvent } from 'react';
 import { ReactWrapper } from 'enzyme';
 import {
   EuiButton,
@@ -29,7 +29,7 @@ import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { DataLoadingState, UnifiedDataTable, UnifiedDataTableProps } from './data_table';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { servicesMock } from '../../__mocks__/services';
-import { buildDataTableRecord, getDocId } from '@kbn/discover-utils';
+import { buildDataTableRecord, getDocId, overrideGridCopyEvent } from '@kbn/discover-utils';
 import type { DataTableRecord, EsHitRecord } from '@kbn/discover-utils/types';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import {
@@ -74,7 +74,18 @@ function getProps(): UnifiedDataTableProps {
     onResize: jest.fn(),
     onSetColumns: jest.fn(),
     onSort: jest.fn(),
-    rows: esHitsMock.map((hit) => buildDataTableRecord(hit, dataViewMock)),
+    rows: esHitsMock.map((hit) =>
+      buildDataTableRecord(
+        {
+          ...hit,
+          _source: {
+            ...hit._source,
+            '@timestamp': hit._source.date,
+          },
+        },
+        dataViewMock
+      )
+    ),
     sampleSizeState: 30,
     searchDescription: '',
     searchTitle: '',
@@ -1355,4 +1366,40 @@ describe('UnifiedDataTable', () => {
       EXTENDED_JEST_TIMEOUT
     );
   });
+
+  describe('copy action', () => {
+    it(
+      'should override the default copy action for a selected text in grid',
+      async () => {
+        await renderDataTable({ columns: ['name'] });
+
+        const dataGridWrapper = await screen.getByTestId('euiDataGridBody');
+
+        const selection = global.window.getSelection();
+        const range = document.createRange();
+        range.selectNode(dataGridWrapper);
+        selection!.removeAllRanges();
+        selection!.addRange(range);
+
+        const copyEvent = {
+          preventDefault: jest.fn(),
+          clipboardData: {
+            setData: jest.fn(),
+          },
+        };
+
+        overrideGridCopyEvent({
+          event: copyEvent as unknown as ClipboardEvent<HTMLDivElement>,
+          dataGridWrapper,
+        });
+
+        expect(copyEvent.preventDefault).toHaveBeenCalled();
+        expect(copyEvent.clipboardData.setData).toHaveBeenCalledWith(
+          'text/plain',
+          '@timestamp\tname'
+        );
+      },
+      EXTENDED_JEST_TIMEOUT
+    );
+  });
 });