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

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';
@@ -316,9 +317,9 @@ export const getUiSettings: (
   },
   [TRUNCATE_MAX_HEIGHT]: {
     name: i18n.translate('discover.advancedSettings.params.maxCellHeightTitle', {
-      defaultMessage: 'Maximum cell height in the classic table',
+      defaultMessage: 'Maximum cell height in the table',
     }),
-    value: 115,
+    value: TRUNCATE_MAX_HEIGHT_DEFAULT_VALUE,
     category: ['discover'],
     description: i18n.translate('discover.advancedSettings.params.maxCellHeightText', {
       defaultMessage:

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

@@ -12,7 +12,11 @@ import { findTestSubject } from '@elastic/eui/lib/test';
 import { DocViewerLegacyTable } from './table';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { DocViewRenderProps } from '@kbn/unified-doc-viewer/types';
-import { buildDataTableRecord } from '@kbn/discover-utils';
+import {
+  buildDataTableRecord,
+  TRUNCATE_MAX_HEIGHT,
+  TRUNCATE_MAX_HEIGHT_DEFAULT_VALUE,
+} from '@kbn/discover-utils';
 import { setUnifiedDocViewerServices } from '../../../plugin';
 import type { UnifiedDocViewerServices } from '../../../types';
 
@@ -22,6 +26,9 @@ const services = {
       if (key === 'discover:showMultiFields') {
         return true;
       }
+      if (key === TRUNCATE_MAX_HEIGHT) {
+        return TRUNCATE_MAX_HEIGHT_DEFAULT_VALUE;
+      }
     },
   },
   fieldFormats: {
@@ -127,34 +134,39 @@ describe('DocViewTable at Discover', () => {
     {
       _property: '_index',
       addInclusiveFilterButton: true,
+      ['toggleLongFieldValue-message']: false,
       noMappingWarning: false,
       toggleColumnButton: true,
       underscoreWarning: false,
     },
     {
       _property: 'message',
       addInclusiveFilterButton: false,
+      ['toggleLongFieldValue-message']: true,
       noMappingWarning: false,
       toggleColumnButton: true,
       underscoreWarning: false,
     },
     {
       _property: '_underscore',
       addInclusiveFilterButton: false,
+      ['toggleLongFieldValue-message']: false,
       noMappingWarning: false,
       toggleColumnButton: true,
       underScoreWarning: true,
     },
     {
       _property: 'scripted',
       addInclusiveFilterButton: false,
+      ['toggleLongFieldValue-message']: false,
       noMappingWarning: false,
       toggleColumnButton: true,
       underScoreWarning: false,
     },
     {
       _property: 'not_mapped',
       addInclusiveFilterButton: false,
+      ['toggleLongFieldValue-message']: false,
       noMappingWarning: true,
       toggleColumnButton: true,
       underScoreWarning: false,
@@ -166,21 +178,26 @@ describe('DocViewTable at Discover', () => {
       expect(rowComponent.length).toBe(1);
     });
 
-    (['addInclusiveFilterButton', 'toggleColumnButton', 'underscoreWarning'] as const).forEach(
-      (element) => {
-        const elementExist = check[element];
-
-        if (typeof elementExist === 'boolean') {
-          const btn = findTestSubject(rowComponent, element, '^=');
-
-          it(`renders ${element} for '${check._property}' correctly`, () => {
-            const disabled = btn.length ? btn.props().disabled : true;
-            const clickAble = btn.length && !disabled ? true : false;
-            expect(clickAble).toBe(elementExist);
-          });
-        }
+    (
+      [
+        'addInclusiveFilterButton',
+        'toggleLongFieldValue-message',
+        'toggleColumnButton',
+        'underscoreWarning',
+      ] as const
+    ).forEach((element) => {
+      const elementExist = check[element];
+
+      if (typeof elementExist === 'boolean') {
+        const btn = findTestSubject(rowComponent, element, '^=');
+
+        it(`renders ${element} for '${check._property}' correctly`, () => {
+          const disabled = btn.length ? btn.props().disabled : true;
+          const clickAble = btn.length && !disabled ? true : false;
+          expect(clickAble).toBe(elementExist);
+        });
       }
-    );
+    });
   });
 });
 
@@ -226,6 +243,17 @@ describe('DocViewTable at Discover Context', () => {
     btn.simulate('click');
     expect(props.filter).toBeCalled();
   });
+
+  it(`renders functional collapse button`, () => {
+    const btn = findTestSubject(component, 'toggleLongFieldValue-message');
+    const html = component.html();
+
+    expect(html).toContain('kbnDocViewer__value--truncated');
+
+    expect(btn.length).toBe(1);
+    btn.simulate('click');
+    expect(component.html() !== html).toBeTruthy();
+  });
 });
 
 describe('DocViewTable at Discover Doc', () => {

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

@@ -427,6 +427,7 @@ export const DocViewerTable = ({
             formattedValue={formattedValue}
             rawValue={flattenedField}
             ignoreReason={ignored}
+            isDetails={isDetails}
           />
         );
       }

src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table_cell_value.test.tsx

@@ -0,0 +1,99 @@
+/*
+ * 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 { render, screen } from '@testing-library/react';
+import type { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
+import { TRUNCATE_MAX_HEIGHT, TRUNCATE_MAX_HEIGHT_DEFAULT_VALUE } from '@kbn/discover-utils';
+import { TableFieldValue } from './table_cell_value';
+import { setUnifiedDocViewerServices } from '../../plugin';
+import { mockUnifiedDocViewerServices } from '../../__mocks__';
+
+const mockServices = {
+  ...mockUnifiedDocViewerServices,
+};
+
+mockServices.uiSettings.get = ((key: string) => {
+  if (key === TRUNCATE_MAX_HEIGHT) {
+    return TRUNCATE_MAX_HEIGHT_DEFAULT_VALUE;
+  }
+  return;
+}) as IUiSettingsClient['get'];
+
+setUnifiedDocViewerServices(mockUnifiedDocViewerServices);
+
+describe('TableFieldValue', () => {
+  it('should render correctly', async () => {
+    render(
+      <TableFieldValue
+        formattedValue="100,000"
+        rawValue={10000}
+        field="bytes"
+        isDetails={false}
+        ignoreReason={undefined}
+      />
+    );
+
+    expect(screen.getByText('100,000')).toBeInTheDocument();
+    expect(screen.queryByTestId('toggleLongFieldValue-bytes')).toBeNull();
+  });
+
+  it('should truncate a long value correctly', async () => {
+    const value = 'long value'.repeat(300);
+    render(
+      <TableFieldValue
+        formattedValue={value}
+        rawValue={value}
+        field="message"
+        isDetails={false}
+        ignoreReason={undefined}
+      />
+    );
+
+    expect(screen.getByText(value)).toBeInTheDocument();
+
+    let toggleButton = screen.getByTestId('toggleLongFieldValue-message');
+    expect(toggleButton).toBeInTheDocument();
+    expect(toggleButton.getAttribute('aria-expanded')).toBe('false');
+
+    let valueElement = screen.getByTestId('tableDocViewRow-message-value');
+    expect(valueElement.getAttribute('css')).toBeDefined();
+    expect(valueElement.classList.contains('kbnDocViewer__value--truncated')).toBe(true);
+
+    toggleButton.click();
+
+    toggleButton = screen.getByTestId('toggleLongFieldValue-message');
+    expect(toggleButton).toBeInTheDocument();
+    expect(toggleButton.getAttribute('aria-expanded')).toBe('true');
+
+    valueElement = screen.getByTestId('tableDocViewRow-message-value');
+    expect(valueElement.getAttribute('css')).toBeNull();
+    expect(valueElement.classList.contains('kbnDocViewer__value--truncated')).toBe(false);
+  });
+
+  it('should not truncate a long value when inside a popover', async () => {
+    const value = 'long value'.repeat(300);
+    render(
+      <TableFieldValue
+        formattedValue={value}
+        rawValue={value}
+        field="message"
+        isDetails={true}
+        ignoreReason={undefined}
+      />
+    );
+
+    expect(screen.getByText(value)).toBeInTheDocument();
+
+    expect(screen.queryByTestId('toggleLongFieldValue-bytes')).toBeNull();
+
+    const valueElement = screen.getByTestId('tableDocViewRow-message-value');
+    expect(valueElement.getAttribute('css')).toBeNull();
+    expect(valueElement.classList.contains('kbnDocViewer__value--truncated')).toBe(false);
+  });
+});