[Discover] [Unified Data Table] Add document comparison mode

packages/kbn-discover-utils/src/__mocks__/es_hits.ts

@@ -6,6 +6,10 @@
  * Side Public License, v 1.
  */
 
+import type { DataView, DataViewField } from '@kbn/data-views-plugin/common';
+import { KBN_FIELD_TYPES } from '@kbn/field-types';
+import type { EsHitRecord } from '../types';
+
 export const esHitsMock = [
   {
     _index: 'i',
@@ -54,3 +58,36 @@ export const esHitsMockWithSort = esHitsMock.map((hit) => ({
   ...hit,
   sort: [hit._source.date], // some `sort` param should be specified for "fetch more" to work
 }));
+
+const baseDate = new Date('2024-01-1').getTime();
+const dateInc = 100_000_000;
+
+const generateFieldValue = (field: DataViewField, index: number) => {
+  switch (field.type) {
+    case KBN_FIELD_TYPES.BOOLEAN:
+      return index % 2 === 0;
+    case KBN_FIELD_TYPES.DATE:
+      return new Date(baseDate + index * dateInc).toISOString();
+    case KBN_FIELD_TYPES.NUMBER:
+      return Array.from(field.name).reduce((sum, char) => sum + char.charCodeAt(0) + index, 0);
+    case KBN_FIELD_TYPES.STRING:
+      return `${field.name}_${index}`;
+    default:
+      throw new Error(`Unsupported type ${field.type}`);
+  }
+};
+
+export const generateEsHits = (dataView: DataView, count: number): EsHitRecord[] => {
+  return Array.from({ length: count }, (_, i) => ({
+    _index: 'i',
+    _id: i.toString(),
+    _score: 1,
+    fields: dataView.fields.reduce<Record<string, any>>(
+      (source, field) => ({
+        ...source,
+        [field.name]: [generateFieldValue(field, i)],
+      }),
+      {}
+    ),
+  }));
+};

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

@@ -7,11 +7,7 @@
  */
 
 export { UnifiedDataTable, DataLoadingState } from './src/components/data_table';
-export type {
-  UnifiedDataTableProps,
-  UnifiedDataTableRenderCustomToolbar,
-  UnifiedDataTableRenderCustomToolbarProps,
-} from './src/components/data_table';
+export type { UnifiedDataTableProps } from './src/components/data_table';
 export {
   RowHeightSettings,
   type RowHeightSettingsProps,
@@ -31,3 +27,12 @@ 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 { DataTableRowControl } from './src/components/data_table_row_control';
+
+export type {
+  UnifiedDataTableRenderCustomToolbar,
+  UnifiedDataTableRenderCustomToolbarProps,
+} from './src/components/custom_toolbar/render_custom_toolbar';
+export {
+  getRenderCustomToolbarWithElements,
+  renderCustomToolbar,
+} from './src/components/custom_toolbar/render_custom_toolbar';

packages/kbn-unified-data-table/src/components/compare_documents/compare_documents.test.tsx

@@ -0,0 +1,160 @@
+/*
+ * 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 { EuiDataGridProps } from '@elastic/eui';
+import { buildDataTableRecord } from '@kbn/discover-utils';
+import { generateEsHits } from '@kbn/discover-utils/src/__mocks__';
+import { render } from '@testing-library/react';
+import { omit } from 'lodash';
+import React from 'react';
+import { dataViewWithTimefieldMock } from '../../../__mocks__/data_view_with_timefield';
+import CompareDocuments from './compare_documents';
+import { useComparisonFields } from './hooks/use_comparison_fields';
+
+let mockLocalStorage: Record<string, string> = {};
+
+jest.mock('react-use/lib/useLocalStorage', () =>
+  jest.fn((key: string, value: unknown) => {
+    mockLocalStorage[key] = JSON.stringify(value);
+    return [value, jest.fn()];
+  })
+);
+
+let mockDataGridProps: EuiDataGridProps | undefined;
+
+jest.mock('@elastic/eui', () => ({
+  ...jest.requireActual('@elastic/eui'),
+  EuiDataGrid: jest.fn((props) => {
+    mockDataGridProps = props;
+    return <></>;
+  }),
+}));
+
+jest.mock('./hooks/use_comparison_fields', () => {
+  const originalModule = jest.requireActual('./hooks/use_comparison_fields');
+  return {
+    ...originalModule,
+    useComparisonFields: jest.fn(originalModule.useComparisonFields),
+  };
+});
+
+const docs = generateEsHits(dataViewWithTimefieldMock, 5).map((hit) =>
+  buildDataTableRecord(hit, dataViewWithTimefieldMock)
+);
+
+const getDocById = (id: string) => docs.find((doc) => doc.raw._id === id);
+
+const renderCompareDocuments = ({
+  forceShowAllFields = false,
+}: { forceShowAllFields?: boolean } = {}) => {
+  const setSelectedDocs = jest.fn();
+  render(
+    <CompareDocuments
+      id="test"
+      wrapper={document.body}
+      consumer="test"
+      ariaDescribedBy="test"
+      ariaLabelledBy="test"
+      dataView={dataViewWithTimefieldMock}
+      isPlainRecord={false}
+      selectedFieldNames={['message', 'extension', 'bytes']}
+      selectedDocs={['0', '1', '2']}
+      schemaDetectors={[]}
+      forceShowAllFields={forceShowAllFields}
+      showFullScreenButton={true}
+      fieldFormats={{} as any}
+      getDocById={getDocById}
+      setSelectedDocs={setSelectedDocs}
+      setIsCompareActive={jest.fn()}
+    />
+  );
+  return { setSelectedDocs };
+};
+
+describe('CompareDocuments', () => {
+  beforeEach(() => {
+    mockLocalStorage = {};
+    mockDataGridProps = undefined;
+  });
+
+  it('should pass expected grid props', () => {
+    renderCompareDocuments();
+    expect(mockDataGridProps).toBeDefined();
+    expect(mockDataGridProps?.columns).toBeDefined();
+    expect(mockDataGridProps?.css).toBeDefined();
+    expect(omit(mockDataGridProps, 'columns', 'css')).toMatchInlineSnapshot(`
+      Object {
+        "aria-describedby": "test",
+        "aria-labelledby": "test",
+        "columnVisibility": Object {
+          "setVisibleColumns": [Function],
+          "visibleColumns": Array [
+            "fields_generated-id",
+            "0",
+            "1",
+            "2",
+          ],
+        },
+        "data-test-subj": "unifiedDataTableCompareDocuments",
+        "gridStyle": Object {
+          "border": "horizontal",
+          "cellPadding": "l",
+          "fontSize": "s",
+          "header": "underline",
+          "rowHover": "highlight",
+          "stripes": undefined,
+        },
+        "id": "test",
+        "inMemory": Object {
+          "level": "sorting",
+        },
+        "renderCellValue": [Function],
+        "renderCustomToolbar": [Function],
+        "rowCount": 3,
+        "rowHeightsOptions": Object {
+          "defaultHeight": "auto",
+        },
+        "schemaDetectors": Array [],
+        "toolbarVisibility": Object {
+          "showColumnSelector": false,
+          "showDisplaySelector": false,
+          "showFullScreenSelector": true,
+        },
+      }
+    `);
+  });
+
+  it('should get values from local storage', () => {
+    renderCompareDocuments();
+    expect(mockLocalStorage).toEqual({
+      'test:dataGridComparisonDiffMode': '"basic"',
+      'test:dataGridComparisonShowAllFields': 'false',
+      'test:dataGridComparisonShowDiff': 'true',
+      'test:dataGridComparisonShowDiffDecorations': 'true',
+      'test:dataGridComparisonShowMatchingValues': 'true',
+    });
+  });
+
+  it('should set selected docs when columns change', () => {
+    const { setSelectedDocs } = renderCompareDocuments();
+    const visibleColumns = ['fields_generated-id', '0', '1', '2'];
+    mockDataGridProps?.columnVisibility.setVisibleColumns(visibleColumns);
+    expect(setSelectedDocs).toHaveBeenCalledWith(visibleColumns.slice(1));
+  });
+
+  it('should force show all fields when prop is true', () => {
+    renderCompareDocuments();
+    expect(useComparisonFields).toHaveBeenLastCalledWith(
+      expect.objectContaining({ showAllFields: false })
+    );
+    renderCompareDocuments({ forceShowAllFields: true });
+    expect(useComparisonFields).toHaveBeenLastCalledWith(
+      expect.objectContaining({ showAllFields: true })
+    );
+  });
+});