[Discover] Removing large string truncation from doc viewer (#164236)

## Summary

Closes https://github.com/elastic/kibana/issues/62920


![image](a1f07fe3-be6c-47c8-81e3-4ee8767ed426)



### Checklist

Delete any items that are not applicable to this PR.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table.test.tsx

@@ -127,7 +127,6 @@ describe('DocViewTable at Discover', () => {
     {
       _property: '_index',
       addInclusiveFilterButton: true,
-      collapseBtn: false,
       noMappingWarning: false,
       toggleColumnButton: true,
       underscoreWarning: false,
@@ -135,7 +134,6 @@ describe('DocViewTable at Discover', () => {
     {
       _property: 'message',
       addInclusiveFilterButton: false,
-      collapseBtn: true,
       noMappingWarning: false,
       toggleColumnButton: true,
       underscoreWarning: false,
@@ -143,7 +141,6 @@ describe('DocViewTable at Discover', () => {
     {
       _property: '_underscore',
       addInclusiveFilterButton: false,
-      collapseBtn: false,
       noMappingWarning: false,
       toggleColumnButton: true,
       underScoreWarning: true,
@@ -151,7 +148,6 @@ describe('DocViewTable at Discover', () => {
     {
       _property: 'scripted',
       addInclusiveFilterButton: false,
-      collapseBtn: false,
       noMappingWarning: false,
       toggleColumnButton: true,
       underScoreWarning: false,
@@ -159,7 +155,6 @@ describe('DocViewTable at Discover', () => {
     {
       _property: 'not_mapped',
       addInclusiveFilterButton: false,
-      collapseBtn: false,
       noMappingWarning: true,
       toggleColumnButton: true,
       underScoreWarning: false,
@@ -171,26 +166,21 @@ describe('DocViewTable at Discover', () => {
       expect(rowComponent.length).toBe(1);
     });
 
-    (
-      [
-        'addInclusiveFilterButton',
-        'collapseBtn',
-        'toggleColumnButton',
-        'underscoreWarning',
-      ] as const
-    ).forEach((element) => {
-      const elementExist = check[element];
+    (['addInclusiveFilterButton', 'toggleColumnButton', 'underscoreWarning'] as const).forEach(
+      (element) => {
+        const elementExist = check[element];
 
-      if (typeof elementExist === 'boolean') {
-        const btn = findTestSubject(rowComponent, 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);
-        });
+          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);
+          });
+        }
       }
-    });
+    );
   });
 });
 
@@ -236,17 +226,6 @@ describe('DocViewTable at Discover Context', () => {
     btn.simulate('click');
     expect(props.filter).toBeCalled();
   });
-
-  it(`renders functional collapse button`, () => {
-    const btn = findTestSubject(component, `collapseBtn`);
-    const html = component.html();
-
-    expect(component.html()).toContain('dscTruncateByHeight');
-
-    expect(btn.length).toBe(1);
-    btn.simulate('click');
-    expect(component.html() !== html).toBeTruthy();
-  });
 });
 
 describe('DocViewTable at Discover Doc', () => {

src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table_row_btn_collapse.tsx

@@ -1,34 +0,0 @@
-/*
- * 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 { i18n } from '@kbn/i18n';
-import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
-
-export interface Props {
-  onClick: () => void;
-  isCollapsed: boolean;
-}
-
-export function DocViewTableRowBtnCollapse({ onClick, isCollapsed }: Props) {
-  const label = i18n.translate('discover.docViews.table.toggleFieldDetails', {
-    defaultMessage: 'Toggle field details',
-  });
-  return (
-    <EuiToolTip content={label}>
-      <EuiButtonIcon
-        aria-expanded={!isCollapsed}
-        aria-label={label}
-        data-test-subj="collapseBtn"
-        onClick={() => onClick()}
-        iconType={isCollapsed ? 'arrowRight' : 'arrowDown'}
-        iconSize={'s'}
-      />
-    </EuiToolTip>
-  );
-}

src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table_cell_value.tsx

@@ -9,13 +9,10 @@
 import { css } from '@emotion/react';
 import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiTextColor, EuiToolTip } from '@elastic/eui';
 import classNames from 'classnames';
-import React, { Fragment, useState } from 'react';
+import React, { Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
 import { IgnoredReason } from '@kbn/discover-utils';
 import { FieldRecord } from './table';
-import { DocViewTableRowBtnCollapse } from './legacy/table_row_btn_collapse';
-
-const COLLAPSE_LINE_LENGTH = 350;
 
 interface IgnoreWarningProps {
   reason: IgnoredReason;
@@ -95,29 +92,14 @@ export const TableFieldValue = ({
   rawValue,
   ignoreReason,
 }: TableFieldValueProps) => {
-  const [fieldOpen, setFieldOpen] = useState(false);
-
-  const value = String(rawValue);
-  const isCollapsible = value.length > COLLAPSE_LINE_LENGTH;
-  const isCollapsed = isCollapsible && !fieldOpen;
-
   const valueClassName = classNames({
     // eslint-disable-next-line @typescript-eslint/naming-convention
     kbnDocViewer__value: true,
-    dscTruncateByHeight: isCollapsible && isCollapsed,
   });
-
-  const onToggleCollapse = () => setFieldOpen((fieldOpenPrev) => !fieldOpenPrev);
-
   return (
     <Fragment>
-      {(isCollapsible || ignoreReason) && (
+      {ignoreReason && (
         <EuiFlexGroup gutterSize="s">
-          {isCollapsible && (
-            <EuiFlexItem grow={false}>
-              <DocViewTableRowBtnCollapse onClick={onToggleCollapse} isCollapsed={isCollapsed} />
-            </EuiFlexItem>
-          )}
           {ignoreReason && (
             <EuiFlexItem grow={false}>
               <IgnoreWarning reason={ignoreReason} rawValue={rawValue} />

x-pack/plugins/translations/translations/fr-FR.json

@@ -2334,7 +2334,6 @@
     "discover.docViews.table.tableTitle": "Tableau",
     "discover.docViews.table.toggleColumnInTableButtonAriaLabel": "Afficher/Masquer la colonne dans le tableau",
     "discover.docViews.table.toggleColumnInTableButtonTooltip": "Afficher/Masquer la colonne dans le tableau",
-    "discover.docViews.table.toggleFieldDetails": "Afficher/Masquer les détails du champ",
     "discover.docViews.table.unableToFilterForPresenceOfMetaFieldsTooltip": "Impossible de filtrer sur les champs méta",
     "discover.docViews.table.unableToFilterForPresenceOfScriptedFieldsTooltip": "Impossible de filtrer sur les champs scriptés",
     "discover.docViews.table.unindexedFieldsCanNotBeSearchedTooltip": "Les champs non indexés ou les valeurs ignorées ne peuvent pas être recherchés",

x-pack/plugins/translations/translations/ja-JP.json

@@ -2349,7 +2349,6 @@
     "discover.docViews.table.tableTitle": "表",
     "discover.docViews.table.toggleColumnInTableButtonAriaLabel": "表の列を切り替える",
     "discover.docViews.table.toggleColumnInTableButtonTooltip": "表の列を切り替える",
-    "discover.docViews.table.toggleFieldDetails": "フィールド詳細を切り替える",
     "discover.docViews.table.unableToFilterForPresenceOfMetaFieldsTooltip": "メタフィールドの有無でフィルタリングできません",
     "discover.docViews.table.unableToFilterForPresenceOfScriptedFieldsTooltip": "スクリプトフィールドの有無でフィルタリングできません",
     "discover.docViews.table.unindexedFieldsCanNotBeSearchedTooltip": "インデックスがないフィールドまたは無視された値は検索できません",

x-pack/plugins/translations/translations/zh-CN.json

@@ -2349,7 +2349,6 @@
     "discover.docViews.table.tableTitle": "表",
     "discover.docViews.table.toggleColumnInTableButtonAriaLabel": "在表中切换列",
     "discover.docViews.table.toggleColumnInTableButtonTooltip": "在表中切换列",
-    "discover.docViews.table.toggleFieldDetails": "切换字段详细信息",
     "discover.docViews.table.unableToFilterForPresenceOfMetaFieldsTooltip": "无法筛选元数据字段是否存在",
     "discover.docViews.table.unableToFilterForPresenceOfScriptedFieldsTooltip": "无法筛选脚本字段是否存在",
     "discover.docViews.table.unindexedFieldsCanNotBeSearchedTooltip": "无法搜索未编入索引的字段或被忽略的值",

x-pack/test/functional_with_es_ssl/apps/discover_ml_uptime/discover/search_source_alert.ts

@@ -199,7 +199,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const getResultsLink = async () => {
     // getting the link
     await dataGrid.clickRowToggle();
-    await testSubjects.click('collapseBtn');
     const contextMessageElement = await testSubjects.find('tableDocViewRow-context_message-value');
     const contextMessage = await contextMessageElement.getVisibleText();
     const [, link] = contextMessage.split(`Link\: `);