[SIEM] fix ipv6 bug and write tests for ip details page (#37528)

fix ipv6 bug and write tests for ip details page

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

@@ -23,11 +23,12 @@ export interface HeaderPageProps {
   children?: React.ReactNode;
   subtitle?: string | React.ReactNode;
   title: string | React.ReactNode;
+  'data-test-subj'?: string;
 }
 
 export const HeaderPage = pure<HeaderPageProps>(
-  ({ badgeLabel, badgeTooltip, children, subtitle, title }) => (
-    <Header>
+  ({ badgeLabel, badgeTooltip, children, subtitle, title, ...rest }) => (
+    <Header {...rest}>
       <EuiFlexGroup alignItems="center">
         <EuiFlexItem>
           <EuiTitle size="l">

x-pack/plugins/siem/public/pages/network/__snapshots__/ip_details.test.tsx.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ip Details it matches the snapshot 1`] = `
+<Component
+  filterQuery="coolQueryhuh?"
+  flowTarget="source"
+  history={
+    Object {
+      "action": "POP",
+      "block": [MockFunction],
+      "createHref": [MockFunction],
+      "go": [MockFunction],
+      "goBack": [MockFunction],
+      "goForward": [MockFunction],
+      "length": 2,
+      "listen": [MockFunction],
+      "location": Object {
+        "hash": "",
+        "pathname": "/network/ip/123.456.78.90",
+        "search": "",
+        "state": "",
+      },
+      "push": [MockFunction],
+      "replace": [MockFunction],
+    }
+  }
+  location={
+    Object {
+      "hash": "",
+      "pathname": "/network/ip/123.456.78.90",
+      "search": "",
+      "state": "",
+    }
+  }
+  match={
+    Object {
+      "isExact": true,
+      "params": Object {
+        "ip": "123.456.78.90",
+      },
+      "path": "",
+      "url": "",
+    }
+  }
+/>
+`;

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

@@ -0,0 +1,91 @@
+/*
+ * 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 { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import * as React from 'react';
+import { Router } from 'react-router-dom';
+
+import '../../mock/match_media';
+import { apolloClientObservable, mockGlobalState, TestProviders } from '../../mock';
+import { IPDetailsComponent, IPDetails } from './ip_details';
+import { FlowTarget } from '../../graphql/types';
+import { createStore, State } from '../../store';
+
+type Action = 'PUSH' | 'POP' | 'REPLACE';
+const pop: Action = 'POP';
+
+const getMockHistory = (ip: string) => ({
+  length: 2,
+  location: {
+    pathname: `/network/ip/${ip}`,
+    search: '',
+    state: '',
+    hash: '',
+  },
+  action: pop,
+  push: jest.fn(),
+  replace: jest.fn(),
+  go: jest.fn(),
+  goBack: jest.fn(),
+  goForward: jest.fn(),
+  block: jest.fn(),
+  createHref: jest.fn(),
+  listen: jest.fn(),
+});
+
+const getMockProps = (ip: string) => ({
+  filterQuery: 'coolQueryhuh?',
+  flowTarget: FlowTarget.source,
+  history: getMockHistory(ip),
+  location: {
+    pathname: `/network/ip/${ip}`,
+    search: '',
+    state: '',
+    hash: '',
+  },
+  match: { params: { ip }, isExact: true, path: '', url: '' },
+});
+
+describe('Ip Details', () => {
+  const state: State = mockGlobalState;
+
+  let store = createStore(state, apolloClientObservable);
+
+  beforeEach(() => {
+    store = createStore(state, apolloClientObservable);
+  });
+  test('it renders', () => {
+    const wrapper = shallow(<IPDetailsComponent {...getMockProps('123.456.78.90')} />);
+    expect(
+      wrapper
+        .dive()
+        .find('[data-test-subj="ip-details-page"]')
+        .exists()
+    ).toBe(true);
+  });
+
+  test('it matches the snapshot', () => {
+    const wrapper = shallow(<IPDetailsComponent {...getMockProps('123.456.78.90')} />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  test('it renders ipv6 headline', () => {
+    const ip = 'fe80--24ce-f7ff-fede-a571';
+    const wrapper = mount(
+      <TestProviders store={store}>
+        <Router history={getMockHistory(ip)}>
+          <IPDetails {...getMockProps(ip)} />
+        </Router>
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find('[data-test-subj="ip-details-headline"] [data-test-subj="page_headline_title"]')
+        .text()
+    ).toEqual('fe80::24ce:f7ff:fede:a571');
+  });
+});

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

@@ -48,7 +48,7 @@ interface IPDetailsComponentReduxProps {
 
 type IPDetailsComponentProps = IPDetailsComponentReduxProps & NetworkComponentProps;
 
-const IPDetailsComponent = pure<IPDetailsComponentProps>(
+export const IPDetailsComponent = pure<IPDetailsComponentProps>(
   ({
     match: {
       params: { ip },
@@ -56,7 +56,7 @@ const IPDetailsComponent = pure<IPDetailsComponentProps>(
     filterQuery,
     flowTarget,
   }) => (
-    <WithSource sourceId="default">
+    <WithSource sourceId="default" data-test-subj="ip-details-page">
       {({ indicesExist, indexPattern }) =>
         indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
           <StickyContainer>
@@ -66,8 +66,11 @@ const IPDetailsComponent = pure<IPDetailsComponentProps>(
             </FiltersGlobal>
 
             <HeaderPage
-              subtitle={<LastEventTime indexKey={LastEventIndexKey.ipDetails} ip={ip} />}
-              title={ip}
+              data-test-subj="ip-details-headline"
+              subtitle={
+                <LastEventTime indexKey={LastEventIndexKey.ipDetails} ip={decodeIpv6(ip)} />
+              }
+              title={decodeIpv6(ip)}
             >
               <FlowTargetSelectConnected />
             </HeaderPage>
@@ -182,7 +185,7 @@ const IPDetailsComponent = pure<IPDetailsComponentProps>(
           </StickyContainer>
         ) : (
           <>
-            <HeaderPage title={ip} />
+            <HeaderPage title={decodeIpv6(ip)} />
 
             <NetworkEmptyPage />
           </>