[Discover] Move truncate-by-height into Discover

src/plugins/discover/common/index.ts

@@ -20,4 +20,5 @@ export const MODIFY_COLUMNS_ON_SWITCH = 'discover:modifyColumnsOnSwitch';
 export const SEARCH_FIELDS_FROM_SOURCE = 'discover:searchFieldsFromSource';
 export const MAX_DOC_FIELDS_DISPLAYED = 'discover:maxDocFieldsDisplayed';
 export const SHOW_MULTIFIELDS = 'discover:showMultiFields';
+export const TRUNCATE_MAX_HEIGHT = 'truncate:maxHeight';
 export const SEARCH_EMBEDDABLE_TYPE = 'search';

src/plugins/discover/public/application/apps/main/components/doc_table/_doc_table.scss

@@ -103,10 +103,6 @@
   text-align: center;
 }
 
-.truncate-by-height {
-  overflow: hidden;
-}
-
 .table {
   // Nesting
   .table {

src/plugins/discover/public/application/apps/main/components/doc_table/components/table_row.test.tsx

@@ -16,8 +16,8 @@ import { indexPatternWithTimefieldMock } from '../../../../../../__mocks__/index
 import { uiSettingsMock } from '../../../../../../__mocks__/ui_settings';
 import { DocViewsRegistry } from '../../../../../doc_views/doc_views_registry';
 
-jest.mock('../lib/row_formatter', () => {
-  const originalModule = jest.requireActual('../lib/row_formatter');
+jest.mock('../lib/formatters/row_formatter', () => {
+  const originalModule = jest.requireActual('../lib/formatters/row_formatter');
   return {
     ...originalModule,
     formatRow: () => <span>mocked_document_cell</span>,

src/plugins/discover/public/application/apps/main/components/doc_table/components/table_row.tsx

@@ -17,7 +17,8 @@ import { ElasticSearchHit, DocViewFilterFn } from '../../../../../doc_views/doc_
 import { getContextUrl } from '../../../../../helpers/get_context_url';
 import { getSingleDocUrl } from '../../../../../helpers/get_single_doc_url';
 import { TableRowDetails } from './table_row_details';
-import { formatRow, formatTopLevelObject } from '../lib/row_formatter';
+import { formatRow, formatTopLevelObject } from '../lib/formatters/row_formatter';
+import { formatSource } from '../lib/formatters/source_formatter';
 
 export type DocTableRow = ElasticSearchHit & {
   isAnchor?: boolean;
@@ -32,6 +33,7 @@ export interface TableRowProps {
   onRemoveColumn?: (column: string) => void;
   useNewFieldsApi: boolean;
   hideTimeColumn: boolean;
+  isShortDots: boolean;
   filterManager: FilterManager;
   addBasePath: (path: string) => string;
   fieldsToShow: string[];
@@ -45,6 +47,7 @@ export const TableRow = ({
   useNewFieldsApi,
   fieldsToShow,
   hideTimeColumn,
+  isShortDots,
   onAddColumn,
   onRemoveColumn,
   filterManager,
@@ -63,18 +66,23 @@ export const TableRow = ({
   // toggle display of the rows details, a full list of the fields from each row
   const toggleRow = () => setOpen((prevOpen) => !prevOpen);
 
-  /**
-   * Fill an element with the value of a field
-   */
-  const displayField = (fieldName: string) => {
+  const formatField = (fieldName: string) => {
+    if (fieldName === '_source') {
+      return formatSource({
+        hit: row,
+        indexPattern,
+        isShortDots,
+      });
+    }
+
     const formattedField = indexPattern.formatField(row, fieldName);
 
     // field formatters take care of escaping
     // eslint-disable-next-line react/no-danger
-    const fieldElement = <span dangerouslySetInnerHTML={{ __html: formattedField }} />;
-
-    return <div className="truncate-by-height">{fieldElement}</div>;
+    const element = <span dangerouslySetInnerHTML={{ __html: formattedField }} />;
+    return <div className="truncate-by-height">{element}</div>;
   };
+
   const inlineFilter = useCallback(
     (column: string, type: '+' | '-') => {
       const field = indexPattern.fields.getByName(column);
@@ -116,7 +124,7 @@ export const TableRow = ({
       <TableCell
         key={indexPattern.timeFieldName}
         timefield={true}
-        formatted={displayField(indexPattern.timeFieldName)}
+        formatted={formatField(indexPattern.timeFieldName)}
         filterable={Boolean(mapping(indexPattern.timeFieldName)?.filterable && filter)}
         column={indexPattern.timeFieldName}
         inlineFilter={inlineFilter}
@@ -166,7 +174,7 @@ export const TableRow = ({
             key={column}
             timefield={false}
             sourcefield={column === '_source'}
-            formatted={displayField(column)}
+            formatted={formatField(column)}
             filterable={isFilterable}
             column={column}
             inlineFilter={inlineFilter}

src/plugins/discover/public/application/apps/main/components/doc_table/doc_table_wrapper.tsx

@@ -10,13 +10,15 @@ import React, { forwardRef, useCallback, useMemo } from 'react';
 import { EuiIcon, EuiSpacer, EuiText } from '@elastic/eui';
 import type { IndexPattern, IndexPatternField } from 'src/plugins/data/common';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { css, Global } from '@emotion/react';
 import { TableHeader } from './components/table_header/table_header';
 import { FORMATS_UI_SETTINGS } from '../../../../../../../field_formats/common';
 import {
   DOC_HIDE_TIME_COLUMN_SETTING,
   SAMPLE_SIZE_SETTING,
   SHOW_MULTIFIELDS,
   SORT_DEFAULT_ORDER_SETTING,
+  TRUNCATE_MAX_HEIGHT,
 } from '../../../../../../common';
 import { getServices } from '../../../../../kibana_services';
 import { SortOrder } from './components/table_header/helpers';
@@ -99,6 +101,8 @@ export interface DocTableWrapperProps extends DocTableProps {
   render: (params: DocTableRenderProps) => JSX.Element;
 }
 
+const TRUNCATE_GRADIENT_HEIGHT = 15;
+
 const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 export const DocTableWrapper = forwardRef(
@@ -128,6 +132,7 @@ export const DocTableWrapper = forwardRef(
       isShortDots,
       sampleSize,
       showMultiFields,
+      maxHeight,
       filterManager,
       addBasePath,
     ] = useMemo(() => {
@@ -138,6 +143,7 @@ export const DocTableWrapper = forwardRef(
         services.uiSettings.get(FORMATS_UI_SETTINGS.SHORT_DOTS_ENABLE),
         services.uiSettings.get(SAMPLE_SIZE_SETTING, 500),
         services.uiSettings.get(SHOW_MULTIFIELDS, false),
+        services.uiSettings.get(TRUNCATE_MAX_HEIGHT),
         services.filterManager,
         services.addBasePath,
       ];
@@ -205,6 +211,7 @@ export const DocTableWrapper = forwardRef(
             row={current}
             useNewFieldsApi={useNewFieldsApi}
             hideTimeColumn={hideTimeColumn}
+            isShortDots={isShortDots}
             onAddColumn={onAddColumn}
             onRemoveColumn={onRemoveColumn}
             filterManager={filterManager}
@@ -223,10 +230,41 @@ export const DocTableWrapper = forwardRef(
         onRemoveColumn,
         filterManager,
         addBasePath,
+        isShortDots,
         fieldsToShow,
       ]
     );
 
+    const truncateStyles = (
+      <Global
+        styles={css`
+          .truncate-by-height {
+            overflow: hidden;
+            max-height: ${maxHeight > 0 ? `${maxHeight}px !important` : 'none'};
+            display: inline-block;
+          }
+          .truncate-by-height:before {
+            top: ${maxHeight > 0
+              ? maxHeight - TRUNCATE_GRADIENT_HEIGHT
+              : TRUNCATE_GRADIENT_HEIGHT * -1}px;
+          }
+        `}
+      />
+    );
+
+    const noResultsError = (
+      <div className="kbnDocTable__error">
+        <EuiText size="xs" color="subdued">
+          <EuiIcon type="visualizeApp" size="m" color="subdued" />
+          <EuiSpacer size="m" />
+          <FormattedMessage
+            id="discover.docTable.noResultsTitle"
+            defaultMessage="No results found"
+          />
+        </EuiText>
+      </div>
+    );
+
     return (
       <div
         className="kbnDocTableWrapper eui-yScroll eui-xScroll"
@@ -237,6 +275,7 @@ export const DocTableWrapper = forwardRef(
         data-render-complete={!isLoading}
         ref={ref as React.MutableRefObject<HTMLDivElement>}
       >
+        {maxHeight !== 0 && truncateStyles}
         {rows.length !== 0 &&
           render({
             columnLength: columns.length,
@@ -246,18 +285,7 @@ export const DocTableWrapper = forwardRef(
             renderHeader,
             renderRows,
           })}
-        {!rows.length && (
-          <div className="kbnDocTable__error">
-            <EuiText size="xs" color="subdued">
-              <EuiIcon type="visualizeApp" size="m" color="subdued" />
-              <EuiSpacer size="m" />
-              <FormattedMessage
-                id="discover.docTable.noResultsTitle"
-                defaultMessage="No results found"
-              />
-            </EuiText>
-          </div>
-        )}
+        {!rows.length && noResultsError}
       </div>
     );
   }

src/plugins/discover/public/application/apps/main/components/doc_table/lib/formatters/mocks.ts

@@ -0,0 +1,42 @@
+/*
+ * 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 { IndexPattern } from '../../../../../../../../../data/common';
+import { stubbedSavedObjectIndexPattern } from '../../../../../../../../../data/common/stubs';
+import { fieldFormatsMock } from '../../../../../../../../../field_formats/common/mocks';
+import { DocTableRow } from '../../components/table_row';
+
+export const hit = {
+  _id: 'a',
+  _type: 'doc',
+  _score: 1,
+  _source: {
+    foo: 'bar',
+    number: 42,
+    hello: '<h1>World</h1>',
+    also: 'with "quotes" or \'single quotes\'',
+  },
+} as DocTableRow;
+
+const createIndexPattern = () => {
+  const id = 'my-index';
+  const {
+    type,
+    version,
+    attributes: { timeFieldName, fields, title },
+  } = stubbedSavedObjectIndexPattern(id);
+
+  return new IndexPattern({
+    spec: { id, type, version, timeFieldName, fields: JSON.parse(fields), title },
+    fieldFormats: fieldFormatsMock,
+    shortDotsEnable: false,
+    metaFields: [],
+  });
+};
+
+export const indexPattern = createIndexPattern();

src/plugins/discover/public/application/apps/main/components/doc_table/lib/row_formatter.test.ts → src/plugins/discover/public/application/apps/main/components/doc_table/lib/formatters/row_formatter.test.ts

@@ -8,43 +8,11 @@
 
 import ReactDOM from 'react-dom/server';
 import { formatRow, formatTopLevelObject } from './row_formatter';
-import { IndexPattern } from '../../../../../../../../data/common';
-import { fieldFormatsMock } from '../../../../../../../../field_formats/common/mocks';
-import { setServices } from '../../../../../../kibana_services';
-import { DiscoverServices } from '../../../../../../build_services';
-import { stubbedSavedObjectIndexPattern } from '../../../../../../../../data/common/stubs';
+import { setServices } from '../../../../../../../kibana_services';
+import { DiscoverServices } from '../../../../../../../build_services';
+import { indexPattern, hit } from './mocks';
 
 describe('Row formatter', () => {
-  const hit = {
-    _id: 'a',
-    _type: 'doc',
-    _score: 1,
-    _source: {
-      foo: 'bar',
-      number: 42,
-      hello: '<h1>World</h1>',
-      also: 'with "quotes" or \'single quotes\'',
-    },
-  };
-
-  const createIndexPattern = () => {
-    const id = 'my-index';
-    const {
-      type,
-      version,
-      attributes: { timeFieldName, fields, title },
-    } = stubbedSavedObjectIndexPattern(id);
-
-    return new IndexPattern({
-      spec: { id, type, version, timeFieldName, fields: JSON.parse(fields), title },
-      fieldFormats: fieldFormatsMock,
-      shortDotsEnable: false,
-      metaFields: [],
-    });
-  };
-
-  const indexPattern = createIndexPattern();
-
   const fieldsToShow = indexPattern.fields.getAll().map((fld) => fld.name);
 
   // Realistic response with alphabetical insertion order

src/plugins/discover/public/application/apps/main/components/doc_table/lib/row_formatter.tsx → src/plugins/discover/public/application/apps/main/components/doc_table/lib/formatters/row_formatter.tsx

@@ -8,8 +8,8 @@
 
 import React, { Fragment } from 'react';
 import type { IndexPattern } from 'src/plugins/data/common';
-import { MAX_DOC_FIELDS_DISPLAYED } from '../../../../../../../common';
-import { getServices } from '../../../../../../kibana_services';
+import { MAX_DOC_FIELDS_DISPLAYED } from '../../../../../../../../common';
+import { getServices } from '../../../../../../../kibana_services';
 
 import './row_formatter.scss';
 
@@ -18,7 +18,7 @@ interface Props {
 }
 const TemplateComponent = ({ defPairs }: Props) => {
   return (
-    <dl className={'source truncate-by-height'}>
+    <dl className="source truncate-by-height">
       {defPairs.map((pair, idx) => (
         <Fragment key={idx}>
           <dt>{pair[0]}:</dt>

src/plugins/discover/public/application/apps/main/components/doc_table/lib/formatters/source_formatter.test.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 { formatSource } from './source_formatter';
+import { hit, indexPattern } from './mocks';
+
+describe('_source formatter', () => {
+  it('should format properly', () => {
+    const element = formatSource({ hit, indexPattern, isShortDots: true });
+    expect(element).toMatchInlineSnapshot(`
+      <TemplateComponent
+        defPairs={
+          Array [
+            Array [
+              "also",
+              "with \\"quotes\\" or 'single quotes'",
+            ],
+            Array [
+              "foo",
+              "bar",
+            ],
+            Array [
+              "hello",
+              "<h1>World</h1>",
+            ],
+            Array [
+              "number",
+              42,
+            ],
+          ]
+        }
+      />
+    `);
+  });
+});