[8.x] [Discover] In-table search (#206454) (#208868)

# Backport This will backport the following commits from `main` to `8.x`: - [[Discover] In-table search (#206454)](#206454)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  --------- Co-authored-by: Julia Rechkunova <[email protected]> Co-authored-by: kibanamachine <[email protected]>
elastic · Jan 30, 2025 · c40c6d6 · c40c6d6
1 parent ad15e7d
commit c40c6d6
Show file tree

Hide file tree

Showing 48 changed files with 2,933 additions and 25 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -356,6 +356,7 @@ packages/kbn-cypress-config @elastic/kibana-operations
 x-pack/platform/plugins/shared/dashboard_enhanced @elastic/kibana-presentation
 src/platform/plugins/shared/dashboard @elastic/kibana-presentation
 x-pack/platform/packages/shared/kbn-data-forge @elastic/obs-ux-management-team
+src/platform/packages/shared/kbn-data-grid-in-table-search @elastic/kibana-data-discovery
 src/platform/plugins/shared/data @elastic/kibana-visualizations @elastic/kibana-data-discovery
 x-pack/platform/plugins/shared/data_quality @elastic/obs-ux-logs-team
 test/plugin_functional/plugins/data_search @elastic/kibana-data-discovery

diff --git a/.i18nrc.json b/.i18nrc.json
@@ -165,6 +165,7 @@
     "unifiedFieldList": "src/platform/packages/shared/kbn-unified-field-list",
     "unifiedHistogram": "src/platform/plugins/shared/unified_histogram",
     "unifiedDataTable": "src/platform/packages/shared/kbn-unified-data-table",
+    "dataGridInTableSearch": "src/platform/packages/shared/kbn-data-grid-in-table-search",
     "unsavedChangesBadge": "src/platform/packages/private/kbn-unsaved-changes-badge",
     "unsavedChangesPrompt": "src/platform/packages/shared/kbn-unsaved-changes-prompt",
     "managedContentBadge": "src/platform/packages/private/kbn-managed-content-badge",

diff --git a/package.json b/package.json
@@ -422,6 +422,7 @@
     "@kbn/dashboard-enhanced-plugin": "link:x-pack/platform/plugins/shared/dashboard_enhanced",
     "@kbn/dashboard-plugin": "link:src/platform/plugins/shared/dashboard",
     "@kbn/data-forge": "link:x-pack/platform/packages/shared/kbn-data-forge",
+    "@kbn/data-grid-in-table-search": "link:src/platform/packages/shared/kbn-data-grid-in-table-search",
     "@kbn/data-plugin": "link:src/platform/plugins/shared/data",
     "@kbn/data-quality-plugin": "link:x-pack/platform/plugins/shared/data_quality",
     "@kbn/data-search-plugin": "link:test/plugin_functional/plugins/data_search",

diff --git a/src/platform/packages/shared/kbn-data-grid-in-table-search/README.md b/src/platform/packages/shared/kbn-data-grid-in-table-search/README.md
@@ -0,0 +1,71 @@
+# @kbn/data-grid-in-table-search
+
+This package allows to extend `EuiDataGrid` with in-table search.
+
+If you are already using `UnifiedDataTable` component, you can enable in-table search simply by passing `enableInTableSearch` prop to it.
+
+```tsx
+    <UnifiedDataTable
+      enableInTableSearch={true}
+      // ... other props
+    />
+```
+
+If you are using `EuiDataGrid` directly, you can enable in-table search by importing this package and following these steps:
+
+1. include `useDataGridInTableSearch` hook in your component 
+2. pass `inTableSearchControl` to `EuiDataGrid` inside `additionalControls.right` prop or `renderCustomToolbar`
+3. pass `inTableSearchCss` to the grid container element as `css` prop
+4. update your `cellContext` prop with `cellContextWithInTableSearchSupport`
+5. update your `renderCellValue` prop with `renderCellValueWithInTableSearchSupport`.
+
+```tsx
+    import { useDataGridInTableSearch } from '@kbn/data-grid-in-table-search';
+
+    // ...
+
+    const dataGridRef = useRef<EuiDataGridRefProps>(null);
+    const [dataGridWrapper, setDataGridWrapper] = useState<HTMLElement | null>(null);
+
+    // ...
+
+    const { inTableSearchTermCss, inTableSearchControl, cellContextWithInTableSearchSupport, renderCellValueWithInTableSearchSupport } =
+      useDataGridInTableSearch({
+        dataGridWrapper,
+        dataGridRef,
+        visibleColumns,
+        rows,
+        cellContext,
+        renderCellValue,
+        pagination,
+      });
+
+    const toolbarVisibility: EuiDataGridProps['toolbarVisibility'] = useMemo(
+      () => ({
+        additionalControls: inTableSearchControl ? { right: inTableSearchControl } : false,
+        // ...
+      }),
+      [inTableSearchControl]
+    );
+
+    // ...
+    <div ref={(node) => setDataGridWrapper(node)} css={inTableSearchCss}>
+      <EuiDataGrid
+        ref={dataGridRef}
+        toolbarVisibility={toolbarVisibility}
+        renderCellValue={renderCellValueWithInTableSearchSupport}
+        cellContext={cellContextWithInTableSearchSupport}
+        pagination={pagination}
+        // ... other props
+      />
+    </div>
+```
+
+An example of how to use this package can be found in `kbn-data-grid-in-table-search/__mocks__/data_grid_example.tsx` 
+or in `kbn-unified-data-table` package.
+
+
+
+
+
+
diff --git a/src/platform/packages/shared/kbn-data-grid-in-table-search/index.ts b/src/platform/packages/shared/kbn-data-grid-in-table-search/index.ts
@@ -0,0 +1,23 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export {
+  useDataGridInTableSearch,
+  type UseDataGridInTableSearchProps,
+  type UseDataGridInTableSearchReturn,
+} from './src';
+
+export {
+  BUTTON_TEST_SUBJ,
+  COUNTER_TEST_SUBJ,
+  BUTTON_PREV_TEST_SUBJ,
+  BUTTON_NEXT_TEST_SUBJ,
+  INPUT_TEST_SUBJ,
+  HIGHLIGHT_CLASS_NAME,
+} from './src/constants';
diff --git a/src/platform/packages/shared/kbn-data-grid-in-table-search/jest.config.js b/src/platform/packages/shared/kbn-data-grid-in-table-search/jest.config.js
@@ -0,0 +1,14 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../../..',
+  roots: ['<rootDir>/src/platform/packages/shared/kbn-data-grid-in-table-search'],
+};
diff --git a/src/platform/packages/shared/kbn-data-grid-in-table-search/kibana.jsonc b/src/platform/packages/shared/kbn-data-grid-in-table-search/kibana.jsonc
@@ -0,0 +1,7 @@
+{
+  "type": "shared-browser",
+  "id": "@kbn/data-grid-in-table-search",
+  "owner": "@elastic/kibana-data-discovery",
+  "group": "platform",
+  "visibility": "shared"
+}
diff --git a/src/platform/packages/shared/kbn-data-grid-in-table-search/package.json b/src/platform/packages/shared/kbn-data-grid-in-table-search/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "@kbn/data-grid-in-table-search",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
+  "sideEffects": false
+}
diff --git a/src/platform/packages/shared/kbn-data-grid-in-table-search/src/__mocks__/data.ts b/src/platform/packages/shared/kbn-data-grid-in-table-search/src/__mocks__/data.ts
@@ -0,0 +1,22 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export const generateMockData = (rowsCount: number, columnsCount: number) => {
+  const testData: string[][] = [];
+
+  Array.from({ length: rowsCount }).forEach((_, i) => {
+    const row: string[] = [];
+    Array.from({ length: columnsCount }).forEach((__, j) => {
+      row.push(`cell-in-row-${i}-col-${j}`);
+    });
+    testData.push(row);
+  });
+
+  return testData;
+};
diff --git a/...latform/packages/shared/kbn-data-grid-in-table-search/src/__mocks__/data_grid_example.tsx b/...latform/packages/shared/kbn-data-grid-in-table-search/src/__mocks__/data_grid_example.tsx
@@ -0,0 +1,95 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useMemo, useRef, useState } from 'react';
+import { EuiDataGrid, EuiDataGridProps, EuiDataGridRefProps } from '@elastic/eui';
+import { generateMockData } from './data';
+import { getRenderCellValueMock } from './render_cell_value_mock';
+import { useDataGridInTableSearch } from '../use_data_grid_in_table_search';
+
+export interface DataGridWithInTableSearchExampleProps {
+  rowsCount: number;
+  columnsCount: number;
+  pageSize: number | null;
+}
+
+export const DataGridWithInTableSearchExample: React.FC<DataGridWithInTableSearchExampleProps> = ({
+  rowsCount,
+  columnsCount,
+  pageSize,
+}) => {
+  const dataGridRef = useRef<EuiDataGridRefProps>(null);
+  const [dataGridWrapper, setDataGridWrapper] = useState<HTMLElement | null>(null);
+
+  const sampleData = useMemo(
+    () => generateMockData(rowsCount, columnsCount),
+    [rowsCount, columnsCount]
+  );
+  const columns = useMemo(
+    () => Array.from({ length: columnsCount }, (_, i) => ({ id: `column-${i}` })),
+    [columnsCount]
+  );
+
+  const [visibleColumns, setVisibleColumns] = useState(columns.map(({ id }) => id));
+
+  const renderCellValue = useMemo(() => getRenderCellValueMock(sampleData), [sampleData]);
+
+  const isPaginationEnabled = typeof pageSize === 'number';
+  const [pageIndex, setPageIndex] = useState(0);
+  const pagination = useMemo(() => {
+    return isPaginationEnabled
+      ? {
+          onChangePage: setPageIndex,
+          onChangeItemsPerPage: () => {},
+          pageIndex,
+          pageSize,
+        }
+      : undefined;
+  }, [isPaginationEnabled, setPageIndex, pageSize, pageIndex]);
+
+  const {
+    inTableSearchTermCss,
+    inTableSearchControl,
+    cellContextWithInTableSearchSupport,
+    renderCellValueWithInTableSearchSupport,
+  } = useDataGridInTableSearch({
+    dataGridWrapper,
+    dataGridRef,
+    visibleColumns,
+    rows: sampleData,
+    cellContext: undefined,
+    renderCellValue,
+    pagination,
+  });
+
+  const toolbarVisibility: EuiDataGridProps['toolbarVisibility'] = useMemo(
+    () => ({
+      additionalControls: inTableSearchControl ? { right: inTableSearchControl } : false,
+    }),
+    [inTableSearchControl]
+  );
+
+  return (
+    <div ref={(node) => setDataGridWrapper(node)} css={inTableSearchTermCss}>
+      <EuiDataGrid
+        ref={dataGridRef}
+        aria-label="Data grid with in-table search"
+        columns={columns}
+        columnVisibility={{ visibleColumns, setVisibleColumns }}
+        toolbarVisibility={toolbarVisibility}
+        rowCount={rowsCount}
+        pagination={pagination}
+        cellContext={cellContextWithInTableSearchSupport}
+        renderCellValue={renderCellValueWithInTableSearchSupport}
+        width={800}
+        height={200}
+      />
+    </div>
+  );
+};
diff --git a/src/platform/packages/shared/kbn-data-grid-in-table-search/src/__mocks__/index.ts b/src/platform/packages/shared/kbn-data-grid-in-table-search/src/__mocks__/index.ts
@@ -0,0 +1,12 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { generateMockData } from './data';
+export { getRenderCellValueMock } from './render_cell_value_mock';
+export { DataGridWithInTableSearchExample } from './data_grid_example';
diff --git a/...rm/packages/shared/kbn-data-grid-in-table-search/src/__mocks__/render_cell_value_mock.tsx b/...rm/packages/shared/kbn-data-grid-in-table-search/src/__mocks__/render_cell_value_mock.tsx
@@ -0,0 +1,26 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import type { EuiDataGridCellValueElementProps } from '@elastic/eui';
+
+export function getRenderCellValueMock(testData: string[][]) {
+  return function OriginalRenderCellValue({
+    colIndex,
+    rowIndex,
+  }: EuiDataGridCellValueElementProps) {
+    const cellValue = testData[rowIndex][colIndex];
+
+    if (!cellValue) {
+      throw new Error('Testing unexpected errors');
+    }
+
+    return <div>{cellValue}</div>;
+  };
+}