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

## Summary Closes #62920 ![image](https://github.com/elastic/kibana/assets/1280964/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 <[email protected]>
elastic · Aug 23, 2023 · d12b2b7 · d12b2b7
1 parent 7df5672
commit d12b2b7
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 93 deletions.
diff --git a/...gins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table.test.tsx b/...gins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table.test.tsx
@@ -127,39 +127,34 @@ describe('DocViewTable at Discover', () => {
     {
       _property: '_index',
       addInclusiveFilterButton: true,
-      collapseBtn: false,
       noMappingWarning: false,
       toggleColumnButton: true,
       underscoreWarning: false,
     },
     {
       _property: 'message',
       addInclusiveFilterButton: false,
-      collapseBtn: true,
       noMappingWarning: false,
       toggleColumnButton: true,
       underscoreWarning: false,
     },
     {
       _property: '_underscore',
       addInclusiveFilterButton: false,
-      collapseBtn: false,
       noMappingWarning: false,
       toggleColumnButton: true,
       underScoreWarning: true,
     },
     {
       _property: 'scripted',
       addInclusiveFilterButton: false,
-      collapseBtn: false,
       noMappingWarning: false,
       toggleColumnButton: true,
       underScoreWarning: false,
     },
     {
       _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];
-
-      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', '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);
+          });
+        }
       }
-    });
+    );
   });
 });
 
@@ -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', () => {

diff --git a/...r/public/services/doc_views/components/doc_viewer_table/legacy/table_row_btn_collapse.tsx b/...r/public/services/doc_views/components/doc_viewer_table/legacy/table_row_btn_collapse.tsx
diff --git a/...ugins/discover/public/services/doc_views/components/doc_viewer_table/table_cell_value.tsx b/...ugins/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} />

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/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",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/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": "インデックスがないフィールドまたは無視された値は検索できません",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/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": "无法搜索未编入索引的字段或被忽略的值",

diff --git a/x-pack/test/functional_with_es_ssl/apps/discover_ml_uptime/discover/search_source_alert.ts b/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\: `);