[SIEM] ip details heading draggable (#45179) (#45232)

x-pack/legacy/plugins/siem/public/components/header_page/header_page.test.tsx

@@ -24,4 +24,19 @@ describe('rendering', () => {
     );
     expect(toJson(wrapper)).toMatchSnapshot();
   });
+  test('renders as a draggable when provided arguments', () => {
+    const wrapper = shallow(
+      <HeaderPage
+        badgeLabel="Beta"
+        badgeTooltip="My test tooltip."
+        subtitle="My Test Subtitle"
+        title="My Test Title"
+        draggableArguments={{ field: 'neat', value: 'cool' }}
+      >
+        <p>{'My test supplement.'}</p>
+      </HeaderPage>
+    );
+    const draggableHeader = wrapper.dive().find('[data-test-subj="page_headline_draggable"]');
+    expect(draggableHeader.exists()).toBeTruthy();
+  });
 });

x-pack/legacy/plugins/siem/public/components/header_page/header_page.tsx

@@ -8,6 +8,7 @@ import { EuiBetaBadge, EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@ela
 import React from 'react';
 import { pure } from 'recompose';
 import styled from 'styled-components';
+import { DefaultDraggable } from '../draggables';
 
 const Header = styled.header`
   ${({ theme }) => `
@@ -19,23 +20,37 @@ const Header = styled.header`
 
 Header.displayName = 'Header';
 
+interface DraggableArguments {
+  field: string;
+  value: string;
+}
+
 export interface HeaderPageProps {
   badgeLabel?: string;
   badgeTooltip?: string;
   children?: React.ReactNode;
+  draggableArguments?: DraggableArguments;
   subtitle?: string | React.ReactNode;
   title: string | React.ReactNode;
-  'data-test-subj'?: string;
 }
 
 export const HeaderPage = pure<HeaderPageProps>(
-  ({ badgeLabel, badgeTooltip, children, subtitle, title, ...rest }) => (
+  ({ badgeLabel, badgeTooltip, children, draggableArguments, subtitle, title, ...rest }) => (
     <Header {...rest}>
       <EuiFlexGroup alignItems="center">
         <EuiFlexItem>
           <EuiTitle size="l">
             <h1 data-test-subj="page_headline_title">
-              {title}
+              {!draggableArguments ? (
+                title
+              ) : (
+                <DefaultDraggable
+                  data-test-subj="page_headline_draggable"
+                  id={`header-page-draggable-${draggableArguments.field}-${draggableArguments.value}`}
+                  field={draggableArguments.field}
+                  value={`${draggableArguments.value}`}
+                />
+              )}
               {badgeLabel && (
                 <>
                   {' '}

x-pack/legacy/plugins/siem/public/pages/network/ip_details.tsx

@@ -77,6 +77,7 @@ export const IPDetailsComponent = pure<IPDetailsComponentProps>(
                 data-test-subj="ip-details-headline"
                 subtitle={<LastEventTime indexKey={LastEventIndexKey.ipDetails} ip={ip} />}
                 title={ip}
+                draggableArguments={{ field: `${flowTarget}.ip`, value: ip }}
               >
                 <FlowTargetSelectConnected />
               </HeaderPage>