[SIEM] Removing draggability from message field (#38166) (#38230)

## Summary

Currently, searching the `message` field within Timeline will not function properly, so in effort to prevent the user from searching with it, this PR removes the areas where `message` is draggable, which includes:

* Host Events Table
* Host Details Events Table
* Timeline Renderers
* Timeline Event Details

### Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

- [ ] ~This was checked for cross-browser compatibility, [including a check against IE11](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility)~
- [ ] ~Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md)~
- [ ] ~[Documentation](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#writing-documentation) was added for features that require explanation or tutorials~
- [x] [Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios
- [ ] ~This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist)~

### For maintainers

- [ ] ~This was checked for breaking API changes and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~
- [ ] ~This includes a feature addition or change that requires a release note and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~

x-pack/plugins/siem/public/components/event_details/columns.tsx

@@ -25,6 +25,7 @@ import { WithCopyToClipboard } from '../../lib/clipboard/with_copy_to_clipboard'
 import { WithHoverActions } from '../with_hover_actions';
 
 import * as i18n from './translations';
+import { OverflowField } from '../tables/helpers';
 
 const HoverActionsContainer = styled(EuiPanel)`
   align-items: center;
@@ -135,23 +136,27 @@ export const getColumns = ({
                     </EuiToolTip>
                   </HoverActionsContainer>
                 }
-                render={() => (
-                  <DefaultDraggable
-                    data-test-subj="ip"
-                    field={data.field}
-                    id={`event-details-field-value-${eventId}-${data.field}-${i}-${value}`}
-                    tooltipContent={data.field}
-                    value={value}
-                  >
-                    <FormattedFieldValue
-                      contextId={'event-details-field-value'}
-                      eventId={eventId}
-                      fieldName={data.field}
-                      fieldType={data.type}
+                render={() =>
+                  data.field === 'message' ? (
+                    <OverflowField value={value} />
+                  ) : (
+                    <DefaultDraggable
+                      data-test-subj="ip"
+                      field={data.field}
+                      id={`event-details-field-value-${eventId}-${data.field}-${i}-${value}`}
+                      tooltipContent={data.field}
                       value={value}
-                    />
-                  </DefaultDraggable>
-                )}
+                    >
+                      <FormattedFieldValue
+                        contextId={'event-details-field-value'}
+                        eventId={eventId}
+                        fieldName={data.field}
+                        fieldType={data.type}
+                        value={value}
+                      />
+                    </DefaultDraggable>
+                  )
+                }
               />
             </EuiFlexItem>
           ))}

x-pack/plugins/siem/public/components/page/hosts/events_table/index.tsx

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiToolTip } from '@elastic/eui';
 import { getOr } from 'lodash/fp';
 import React from 'react';
 import moment from 'moment';
@@ -18,12 +17,11 @@ import { hostsModel, hostsSelectors, State } from '../../../../store';
 import { getEmptyTagValue, getOrEmptyTag } from '../../../empty_value';
 import { HostDetailsLink, IPDetailsLink } from '../../../links';
 import { Columns, ItemsPerRow, LoadMoreTable } from '../../../load_more_table';
-
-import * as i18n from './translations';
-import { getRowItemDraggable, getRowItemDraggables } from '../../../tables/helpers';
+import { getRowItemDraggable, getRowItemDraggables, OverflowField } from '../../../tables/helpers';
 import { PreferenceFormattedDate } from '../../../formatted_date';
 import { LocalizedDateTooltip } from '../../../localized_date_tooltip';
-import { MoreRowItems } from '../../index';
+
+import * as i18n from './translations';
 
 interface OwnProps {
   data: Ecs[];
@@ -232,25 +230,11 @@ const getEventsColumns = (
     width: '25%',
     render: ({ node }) => {
       const message = getOr(null, 'message[0]', node);
-      const overflowLength = 50;
-      return message != null
-        ? getRowItemDraggable({
-            rowItem: message,
-            attrName: 'message',
-            idPrefix: `host-${pageType}-events-table-${node._id}`,
-            dragDisplayValue: message.substring(0, overflowLength),
-            render: () => (
-              <>
-                {message.substring(0, overflowLength)}
-                {message.length > overflowLength && (
-                  <EuiToolTip content={message}>
-                    <MoreRowItems type="boxesHorizontal" />
-                  </EuiToolTip>
-                )}
-              </>
-            ),
-          })
-        : getEmptyTagValue();
+      return message != null ? (
+        <OverflowField value={message} showToolTip={false} />
+      ) : (
+        getEmptyTagValue()
+      );
     },
   },
 ];

x-pack/plugins/siem/public/components/page/index.tsx

@@ -100,6 +100,10 @@ export const Spacer = styled.span`
   margin-left: 5px;
 `;
 
+export const Badge = styled(EuiBadge)`
+  vertical-align: top;
+`;
+
 export const MoreRowItems = styled(EuiIcon)`
   margin-left: 5px;
 `;

x-pack/plugins/siem/public/components/tables/__snapshots__/helpers.test.tsx.snap

@@ -125,3 +125,18 @@ exports[`Table Helpers #getRowItemOverflow it returns correctly against snapshot
   </EuiToolTip>
 </div>
 `;
+
+exports[`Table Helpers OverflowField it returns correctly against snapshot 1`] = `
+<span>
+  This string is exactly fifty-one chars in length!!
+  <EuiToolTip
+    content="This string is exactly fifty-one chars in length!!!"
+    delay="regular"
+    position="top"
+  >
+    <Styled(EuiIcon)
+      type="boxesHorizontal"
+    />
+  </EuiToolTip>
+</span>
+`;

x-pack/plugins/siem/public/components/tables/helpers.test.tsx

@@ -4,7 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getRowItemDraggables, getRowItemOverflow, getRowItemDraggable } from './helpers';
+import {
+  getRowItemDraggables,
+  getRowItemOverflow,
+  getRowItemDraggable,
+  OverflowField,
+} from './helpers';
 import * as React from 'react';
 import { mount, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
@@ -202,4 +207,24 @@ describe('Table Helpers', () => {
       );
     });
   });
+
+  describe('OverflowField', () => {
+    test('it returns correctly against snapshot', () => {
+      const overflowString = 'This string is exactly fifty-one chars in length!!!';
+      const wrapper = shallow(<OverflowField value={overflowString} showToolTip={false} />);
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
+    test('it does not truncates as per custom overflowLength value', () => {
+      const overflowString = 'This string is short';
+      const wrapper = mount(<OverflowField value={overflowString} overflowLength={20} />);
+      expect(wrapper.text()).toBe('This string is short');
+    });
+
+    test('it truncates as per custom overflowLength value', () => {
+      const overflowString = 'This string is exactly fifty-one chars in length!!!';
+      const wrapper = mount(<OverflowField value={overflowString} overflowLength={20} />);
+      expect(wrapper.text()).toBe('This string is exact');
+    });
+  });
 });

x-pack/plugins/siem/public/components/tables/helpers.tsx

@@ -173,3 +173,24 @@ export const getRowItemOverflow = (
     </>
   );
 };
+
+export const OverflowField = React.memo<{
+  value: string;
+  showToolTip?: boolean;
+  overflowLength?: number;
+}>(({ value, showToolTip = true, overflowLength = 50 }) => (
+  <span>
+    {showToolTip ? (
+      <EuiToolTip data-test-subj={'message-tooltip'} content={'message'}>
+        <>{value.substring(0, overflowLength)}</>
+      </EuiToolTip>
+    ) : (
+      <>{value.substring(0, overflowLength)}</>
+    )}
+    {value.length > overflowLength && (
+      <EuiToolTip content={value}>
+        <MoreRowItems type="boxesHorizontal" />
+      </EuiToolTip>
+    )}
+  </span>
+));

x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_details.tsx

@@ -4,8 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup } from '@elastic/eui';
-import { EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiSpacer } from '@elastic/eui';
 import { get } from 'lodash/fp';
 import * as React from 'react';
 import { pure } from 'recompose';
@@ -13,14 +12,16 @@ import { pure } from 'recompose';
 import { BrowserFields } from '../../../../../containers/source';
 import { Ecs } from '../../../../../graphql/types';
 import { DraggableBadge } from '../../../../draggables';
+import { OverflowField } from '../../../../tables/helpers';
 
 import * as i18n from './translations';
 import { NetflowRenderer } from '../netflow';
 import { UserHostWorkingDir } from '../user_host_working_dir';
-import { TokensFlexItem, Details } from '../helpers';
+import { Details, TokensFlexItem } from '../helpers';
 import { ProcessDraggable } from '../process_draggable';
 import { Package } from './package';
 import { AuthSsh } from './auth_ssh';
+import { Badge } from '../../../../page';
 
 interface Props {
   contextId: string;
@@ -114,14 +115,9 @@ export const SystemGenericLine = pure<Props>(
           <EuiSpacer size="xs" />
           <EuiFlexGroup justifyContent="center" gutterSize="none" wrap={true}>
             <TokensFlexItem grow={false} component="span">
-              <DraggableBadge
-                contextId={contextId}
-                eventId={id}
-                field="message"
-                queryValue={message}
-                value={message}
-                iconType="editorComment"
-              />
+              <Badge iconType="editorComment" color="hollow">
+                <OverflowField value={message} />
+              </Badge>
             </TokensFlexItem>
           </EuiFlexGroup>
         </>

x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_file_details.tsx

@@ -4,8 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup } from '@elastic/eui';
-import { EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiSpacer } from '@elastic/eui';
 import { get } from 'lodash/fp';
 import * as React from 'react';
 import { pure } from 'recompose';
@@ -13,15 +12,17 @@ import { pure } from 'recompose';
 import { BrowserFields } from '../../../../../containers/source';
 import { Ecs } from '../../../../../graphql/types';
 import { DraggableBadge } from '../../../../draggables';
+import { OverflowField } from '../../../../tables/helpers';
 
 import * as i18n from './translations';
 import { NetflowRenderer } from '../netflow';
 import { UserHostWorkingDir } from '../user_host_working_dir';
-import { TokensFlexItem, Details } from '../helpers';
+import { Details, TokensFlexItem } from '../helpers';
 import { ProcessDraggableWithNonExistentProcess } from '../process_draggable';
 import { Args } from '../args';
 import { AuthSsh } from './auth_ssh';
 import { Package } from './package';
+import { Badge } from '../../../../page';
 
 interface Props {
   args: string | null | undefined;
@@ -120,14 +121,9 @@ export const SystemGenericFileLine = pure<Props>(
           <EuiSpacer size="xs" />
           <EuiFlexGroup justifyContent="center" gutterSize="none" wrap={true}>
             <TokensFlexItem grow={false} component="span">
-              <DraggableBadge
-                contextId={contextId}
-                eventId={id}
-                field="message"
-                queryValue={message}
-                value={message}
-                iconType="editorComment"
-              />
+              <Badge iconType="editorComment" color="hollow">
+                <OverflowField value={message} />
+              </Badge>
             </TokensFlexItem>
           </EuiFlexGroup>
         </>