From 585b5481c723cf6e290fc9f2f9958241ab831b52 Mon Sep 17 00:00:00 2001
From: Steph Milovic <stephanie.milovic@elastic.co>
Date: Mon, 9 Sep 2019 21:27:13 -0600
Subject: [PATCH] [SIEM] ip details heading draggable (#45179)

---
 .../header_page/header_page.test.tsx          | 15 +++++++++++++
 .../components/header_page/header_page.tsx    | 21 ++++++++++++++++---
 .../siem/public/pages/network/ip_details.tsx  |  1 +
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/x-pack/legacy/plugins/siem/public/components/header_page/header_page.test.tsx b/x-pack/legacy/plugins/siem/public/components/header_page/header_page.test.tsx
index 9d9efa0b51d6b..16f2156e568e5 100644
--- a/x-pack/legacy/plugins/siem/public/components/header_page/header_page.test.tsx
+++ b/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();
+  });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/header_page/header_page.tsx b/x-pack/legacy/plugins/siem/public/components/header_page/header_page.tsx
index a6f6aebccb5ac..2ba543b34307a 100644
--- a/x-pack/legacy/plugins/siem/public/components/header_page/header_page.tsx
+++ b/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 && (
                 <>
                   {' '}
diff --git a/x-pack/legacy/plugins/siem/public/pages/network/ip_details.tsx b/x-pack/legacy/plugins/siem/public/pages/network/ip_details.tsx
index 6e723c1c83a78..3d6af211907c8 100644
--- a/x-pack/legacy/plugins/siem/public/pages/network/ip_details.tsx
+++ b/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>