[Discover][DocViewer] Limit the height of long field values by default

docs/management/advanced-options.asciidoc

@@ -209,7 +209,7 @@ The default refresh interval for the time filter. Example:
 The default selection in the time filter.
 
 [[truncate-maxheight]]`truncate:maxHeight`::
-The maximum height that a cell occupies in a table. Set to 0 to disable
+deprecated:[8.16.0]The maximum height that a cell occupies in a table. Set to 0 to disable
 truncation.
 
 [[enableESQL]]`enableESQL`::

packages/kbn-discover-utils/index.ts

@@ -28,6 +28,7 @@ export {
   SHOW_MULTIFIELDS,
   SORT_DEFAULT_ORDER_SETTING,
   TRUNCATE_MAX_HEIGHT,
+  TRUNCATE_MAX_HEIGHT_DEFAULT_VALUE,
   IgnoredReason,
   buildDataTableRecord,
   buildDataTableRecordList,

packages/kbn-discover-utils/src/constants.ts

@@ -26,3 +26,4 @@ export const SHOW_FIELD_STATISTICS = 'discover:showFieldStatistics';
 export const SHOW_MULTIFIELDS = 'discover:showMultiFields';
 export const SORT_DEFAULT_ORDER_SETTING = 'discover:sort:defaultOrder';
 export const TRUNCATE_MAX_HEIGHT = 'truncate:maxHeight';
+export const TRUNCATE_MAX_HEIGHT_DEFAULT_VALUE = 115;

src/plugins/discover/server/ui_settings.ts

@@ -28,6 +28,7 @@ import {
   MAX_DOC_FIELDS_DISPLAYED,
   SHOW_MULTIFIELDS,
   TRUNCATE_MAX_HEIGHT,
+  TRUNCATE_MAX_HEIGHT_DEFAULT_VALUE,
   SHOW_FIELD_STATISTICS,
   ROW_HEIGHT_OPTION,
 } from '@kbn/discover-utils';
@@ -318,13 +319,19 @@ export const getUiSettings: (
     name: i18n.translate('discover.advancedSettings.params.maxCellHeightTitle', {
       defaultMessage: 'Maximum cell height in the classic table',
     }),
-    value: 115,
+    value: TRUNCATE_MAX_HEIGHT_DEFAULT_VALUE,
     category: ['discover'],
     description: i18n.translate('discover.advancedSettings.params.maxCellHeightText', {
       defaultMessage:
         'The maximum height that a cell in a table should occupy. Set to 0 to disable truncation.',
     }),
     schema: schema.number({ min: 0 }),
     requiresPageReload: true,
+    deprecation: {
+      message: i18n.translate('discover.advancedSettings.discover.maxCellHeightDeprecation', {
+        defaultMessage: 'This setting is deprecated and will be removed in Kibana 9.0.',
+      }),
+      docLinksKey: 'discoverSettings',
+    },
   },
 });

src/plugins/unified_doc_viewer/public/components/doc_viewer_table/legacy/table_columns.tsx

@@ -105,6 +105,8 @@ export const MAIN_COLUMNS: Array<EuiBasicTableColumn<FieldRecordLegacy>> = [
           formattedValue={formattedValue}
           rawValue={flattenedField}
           ignoreReason={ignored}
+          isDetails={false}
+          isLegacy={true}
         />
       );
     },

src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx

@@ -37,15 +37,9 @@ import {
   isNestedFieldParent,
   usePager,
 } from '@kbn/discover-utils';
-import {
-  FieldDescription,
-  getFieldSearchMatchingHighlight,
-  getTextBasedColumnIconType,
-} from '@kbn/field-utils';
+import { getTextBasedColumnIconType } from '@kbn/field-utils';
 import type { DocViewRenderProps } from '@kbn/unified-doc-viewer/types';
-import { FieldName } from '@kbn/unified-doc-viewer';
 import { getUnifiedDocViewerServices } from '../../plugin';
-import { TableFieldValue } from './table_cell_value';
 import {
   type TableRow,
   getFieldCellActions,
@@ -58,6 +52,7 @@ import {
   getTabContentAvailableHeight,
 } from '../doc_viewer_source/get_height';
 import { TableFilters, TableFiltersProps, useTableFilters } from './table_filters';
+import { TableCell } from './table_cell';
 
 export type FieldRecord = TableRow;
 
@@ -137,7 +132,7 @@ export const DocViewerTable = ({
 }: DocViewRenderProps) => {
   const isEsqlMode = Array.isArray(textBasedHits);
   const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);
-  const { fieldFormats, storage, uiSettings, fieldsMetadata } = getUnifiedDocViewerServices();
+  const { fieldFormats, storage, uiSettings } = getUnifiedDocViewerServices();
   const showMultiFields = uiSettings.get(SHOW_MULTIFIELDS);
   const currentDataViewId = dataView.id!;
 
@@ -375,60 +370,17 @@ export const DocViewerTable = ({
 
   const renderCellValue: EuiDataGridProps['renderCellValue'] = useCallback(
     ({ rowIndex, columnId, isDetails }) => {
-      const row = rows[rowIndex];
-
-      if (!row) {
-        return null;
-      }
-
-      const {
-        action: { flattenedField },
-        field: { field, fieldMapping, fieldType, scripted, pinned },
-        value: { formattedValue, ignored },
-      } = row;
-
-      if (columnId === 'name') {
-        return (
-          <div>
-            <FieldName
-              fieldName={field}
-              fieldType={fieldType}
-              fieldMapping={fieldMapping}
-              scripted={scripted}
-              highlight={getFieldSearchMatchingHighlight(
-                fieldMapping?.displayName ?? field,
-                tableFiltersProps.searchTerm
-              )}
-              isPinned={pinned}
-            />
-
-            {isDetails && !!fieldMapping ? (
-              <div>
-                <FieldDescription
-                  fieldsMetadataService={fieldsMetadata}
-                  field={fieldMapping}
-                  truncate={false}
-                />
-              </div>
-            ) : null}
-          </div>
-        );
-      }
-
-      if (columnId === 'value') {
-        return (
-          <TableFieldValue
-            field={field}
-            formattedValue={formattedValue}
-            rawValue={flattenedField}
-            ignoreReason={ignored}
-          />
-        );
-      }
-
-      return null;
+      return (
+        <TableCell
+          searchTerm={tableFiltersProps.searchTerm}
+          rows={rows}
+          rowIndex={rowIndex}
+          columnId={columnId}
+          isDetails={isDetails}
+        />
+      );
     },
-    [rows, tableFiltersProps.searchTerm, fieldsMetadata]
+    [rows, tableFiltersProps.searchTerm]
   );
 
   const renderCellPopover = useCallback(
@@ -528,6 +480,7 @@ export const DocViewerTable = ({
             `}
           >
             <EuiDataGrid
+              key={`fields-table-${hit.id}`}
               {...GRID_PROPS}
               aria-label={i18n.translate('unifiedDocViewer.fieldsTable.ariaLabel', {
                 defaultMessage: 'Field values',

src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table_cell.tsx

@@ -0,0 +1,82 @@
+/*
+ * 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 { FieldName } from '@kbn/unified-doc-viewer';
+import { FieldDescription, getFieldSearchMatchingHighlight } from '@kbn/field-utils';
+import { TableFieldValue } from './table_cell_value';
+import type { TableRow } from './table_cell_actions';
+import { getUnifiedDocViewerServices } from '../../plugin';
+
+interface TableCellProps {
+  searchTerm: string;
+  rows: TableRow[];
+  rowIndex: number;
+  columnId: string;
+  isDetails: boolean;
+}
+
+export const TableCell: React.FC<TableCellProps> = React.memo(
+  ({ searchTerm, rows, rowIndex, columnId, isDetails }) => {
+    const { fieldsMetadata } = getUnifiedDocViewerServices();
+
+    const row = rows[rowIndex];
+
+    if (!row) {
+      return null;
+    }
+
+    const {
+      action: { flattenedField },
+      field: { field, fieldMapping, fieldType, scripted, pinned },
+      value: { formattedValue, ignored },
+    } = row;
+
+    if (columnId === 'name') {
+      return (
+        <div>
+          <FieldName
+            fieldName={field}
+            fieldType={fieldType}
+            fieldMapping={fieldMapping}
+            scripted={scripted}
+            highlight={getFieldSearchMatchingHighlight(
+              fieldMapping?.displayName ?? field,
+              searchTerm
+            )}
+            isPinned={pinned}
+          />
+
+          {isDetails && !!fieldMapping ? (
+            <div>
+              <FieldDescription
+                fieldsMetadataService={fieldsMetadata}
+                field={fieldMapping}
+                truncate={false}
+              />
+            </div>
+          ) : null}
+        </div>
+      );
+    }
+
+    if (columnId === 'value') {
+      return (
+        <TableFieldValue
+          field={field}
+          formattedValue={formattedValue}
+          rawValue={flattenedField}
+          ignoreReason={ignored}
+          isDetails={isDetails}
+        />
+      );
+    }
+
+    return null;
+  }
+);