[Security Solution] Fix source.ip and destination.ip draggables (#79399…

…) (#79489)

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

@@ -53,7 +53,7 @@ export const getDefaultWhenTooltipIsUnspecified = ({
 /**
  * Renders the content of the draggable, wrapped in a tooltip
  */
-const Content = React.memo<{
+export const Content = React.memo<{
   children?: React.ReactNode;
   field: string;
   tooltipContent?: React.ReactNode;

x-pack/plugins/security_solution/public/network/components/ip/index.test.tsx

@@ -43,7 +43,7 @@ describe('Port', () => {
     );
 
     expect(
-      wrapper.find('[data-test-subj="draggable-content-destination.ip"]').find('a').first().props()
+      wrapper.find('[data-test-subj="draggable-truncatable-content"]').find('a').first().props()
         .href
     ).toEqual('/ip/10.1.2.3/source');
   });

x-pack/plugins/security_solution/public/network/components/ip/index.tsx

@@ -30,6 +30,7 @@ export const Ip = React.memo<{
     fieldName={fieldName}
     fieldType={IP_FIELD_TYPE}
     value={value}
+    truncate
   />
 ));
 

x-pack/plugins/security_solution/public/network/components/source_destination/source_destination_ip.test.tsx

@@ -772,7 +772,7 @@ describe('SourceDestinationIp', () => {
       </TestProviders>
     );
 
-    expect(wrapper.find('[data-test-subj="draggable-content-source.ip"]').first().text()).toEqual(
+    expect(wrapper.find('[data-test-subj="draggable-truncatable-content"]').first().text()).toEqual(
       '192.168.1.2'
     );
   });
@@ -823,7 +823,7 @@ describe('SourceDestinationIp', () => {
       </TestProviders>
     );
 
-    expect(wrapper.find('[data-test-subj="draggable-content-source.ip"]').first().text()).toEqual(
+    expect(wrapper.find('[data-test-subj="draggable-truncatable-content"]').first().text()).toEqual(
       '192.168.1.2'
     );
   });
@@ -874,9 +874,9 @@ describe('SourceDestinationIp', () => {
       </TestProviders>
     );
 
-    expect(
-      wrapper.find('[data-test-subj="draggable-content-destination.ip"]').first().text()
-    ).toEqual('10.1.2.3');
+    expect(wrapper.find('[data-test-subj="draggable-truncatable-content"]').first().text()).toEqual(
+      '10.1.2.3'
+    );
   });
 
   test('it renders the expected destination IP when type is `destination`, but the length of the destinationIp and destinationPort port arrays is different', () => {
@@ -925,9 +925,9 @@ describe('SourceDestinationIp', () => {
       </TestProviders>
     );
 
-    expect(
-      wrapper.find('[data-test-subj="draggable-content-destination.ip"]').first().text()
-    ).toEqual('10.1.2.3');
+    expect(wrapper.find('[data-test-subj="draggable-truncatable-content"]').first().text()).toEqual(
+      '10.1.2.3'
+    );
   });
 
   test('it renders the expected source port when type is `source`, and both sourceIp and sourcePort are populated', () => {

x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_name.tsx

@@ -21,6 +21,7 @@ import {
  */
 export const FieldNameContainer = styled.span`
   border-radius: 4px;
+  display: flex;
   padding: 0 4px 0 8px;
   position: relative;
 

x-pack/plugins/security_solution/public/timelines/components/formatted_ip/index.tsx

@@ -12,6 +12,7 @@ import {
   DraggableWrapper,
 } from '../../../common/components/drag_and_drop/draggable_wrapper';
 import { escapeDataProviderId } from '../../../common/components/drag_and_drop/helpers';
+import { Content } from '../../../common/components/draggables';
 import { getOrEmptyTagFromValue } from '../../../common/components/empty_value';
 import { NetworkDetailsLink } from '../../../common/components/links';
 import { parseQueryValue } from '../../../timelines/components/timeline/body/renderers/parse_query_value';
@@ -148,9 +149,11 @@ const AddressLinksItemComponent: React.FC<AddressLinksItemProps> = ({
           <Provider dataProvider={dataProviderProp} />
         </DragEffects>
       ) : (
-        <NetworkDetailsLink data-test-subj="network-details" ip={address} />
+        <Content field={fieldName} tooltipContent={address}>
+          <NetworkDetailsLink data-test-subj="network-details" ip={address} />
+        </Content>
       ),
-    [address, dataProviderProp]
+    [address, dataProviderProp, fieldName]
   );
 
   return (

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.tsx

@@ -54,6 +54,7 @@ const FormattedFieldValueComponent: React.FC<{
         contextId={contextId}
         fieldName={fieldName}
         value={!isNumber(value) ? value : String(value)}
+        truncate={truncate}
       />
     );
   } else if (fieldType === DATE_FIELD_TYPE) {