Added component to truncate text programmatically and add tooltips. (#80198)

* Added component to truncate text programmatically and add tooltips. Changed all field text values to use this component.

* Fixed build failures.

* Switched from FC component to one without children

Co-authored-by: Paul Tavares <[email protected]>

* Added some docs for the shared component.

* Updated snapshots.

Co-authored-by: Paul Tavares <[email protected]>

Author: efreeti

x-pack/plugins/security_solution/public/common/components/item_details_card/__snapshots__/index.test.tsx.snap

@@ -66,16 +66,13 @@ const DescriptionListDescription = styled(EuiDescriptionListDescription)`
 interface ItemDetailsPropertySummaryProps {
   name: ReactNode | ReactNode[];
   value: ReactNode | ReactNode[];
-  title?: string;
 }
 
-export const ItemDetailsPropertySummary: FC<ItemDetailsPropertySummaryProps> = memo(
-  ({ name, value, title = '' }) => (
+export const ItemDetailsPropertySummary = memo<ItemDetailsPropertySummaryProps>(
+  ({ name, value }) => (
     <>
       <DescriptionListTitle>{name}</DescriptionListTitle>
-      <DescriptionListDescription>
-        <span title={title}>{value}</span>
-      </DescriptionListDescription>
+      <DescriptionListDescription>{value}</DescriptionListDescription>
     </>
   )
 );

x-pack/plugins/security_solution/public/common/components/item_details_card/index.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { storiesOf, addDecorator } from '@storybook/react';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+
+import { TextFieldValue } from '.';
+
+addDecorator((storyFn) => (
+  <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>{storyFn()}</ThemeProvider>
+));
+
+const longText = [...new Array(20).keys()].map((i) => ` super long text part ${i}`).join(' ');
+
+storiesOf('Components/TextFieldValue', module)
+  .add('short text, no limit', () => <TextFieldValue fieldName="Field name" value="Small value" />)
+  .add('short text, with limit', () => (
+    <TextFieldValue fieldName="Field name" value="Small value" maxLength={100} />
+  ))
+  .add('long text, no limit', () => <TextFieldValue fieldName="Field name" value={longText} />)
+  .add('long text, with limit', () => (
+    <TextFieldValue fieldName="Field name" value={longText} maxLength={100} />
+  ));

x-pack/plugins/security_solution/public/common/components/text_field_value/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { TextFieldValue } from '.';
+
+describe('text_field_value', () => {
+  describe('TextFieldValue', () => {
+    const longText = [...new Array(20).keys()].map((i) => ` super long text part ${i}`).join(' ');
+
+    it('should render small text correctly, when there is no limit', () => {
+      expect(shallow(<TextFieldValue fieldName="field 1" value="value 1" />)).toMatchSnapshot();
+    });
+
+    it('should render small text correctly, when there is limit', () => {
+      const element = shallow(
+        <TextFieldValue fieldName="field 1" value="value 1" maxLength={100} />
+      );
+
+      expect(element).toMatchSnapshot();
+    });
+
+    it('should render long text correctly, when there is no limit', () => {
+      expect(shallow(<TextFieldValue fieldName="field 1" value={longText} />)).toMatchSnapshot();
+    });
+
+    it('should render long text correctly, when there is limit', () => {
+      const element = shallow(
+        <TextFieldValue fieldName="field 1" value={longText} maxLength={100} />
+      );
+
+      expect(element).toMatchSnapshot();
+    });
+  });
+});

x-pack/plugins/security_solution/public/common/components/text_field_value/index.stories.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import React from 'react';
+
+const trimTextOverflow = (text: string, maxLength?: number) => {
+  if (maxLength !== undefined && text.length > maxLength) {
+    return `${text.substr(0, maxLength)}...`;
+  } else {
+    return text;
+  }
+};
+
+interface Props {
+  fieldName: string;
+  value: string;
+  maxLength?: number;
+  className?: string;
+}
+
+/*
+ * Component to display text field value. Text field values can be large and need
+ * programmatic truncation to a fixed text length. As text can be truncated the tooltip
+ * is shown displaying the field name and full value. If the use case allows single
+ * line truncation with CSS use eui-textTruncate class on this component instead of
+ * maxLength property.
+ */
+export const TextFieldValue = ({ fieldName, value, maxLength, className }: Props) => {
+  return (
+    <EuiToolTip
+      anchorClassName={className}
+      content={
+        <EuiFlexGroup data-test-subj="dates-container" direction="column" gutterSize="none">
+          <EuiFlexItem grow={false}>{fieldName}</EuiFlexItem>
+          <EuiFlexItem grow={false}>{value}</EuiFlexItem>
+        </EuiFlexGroup>
+      }
+    >
+      <span>{trimTextOverflow(value, maxLength)}</span>
+    </EuiToolTip>
+  );
+};