[SIEM] Tab headers openable in a new tab (elastic#39702)

[SIEM] Tab headers openable in a new tab

x-pack/legacy/plugins/siem/public/components/link_to/redirect_to_hosts.tsx

@@ -11,12 +11,16 @@ import { RedirectWrapper } from './redirect_wrapper';
 
 export type HostComponentProps = RouteComponentProps<{
   hostName: string;
+  search: string;
 }>;
 
 export const RedirectToHostsPage = ({
   match: {
     params: { hostName },
   },
-}: HostComponentProps) => <RedirectWrapper to={hostName ? `/hosts/${hostName}` : '/hosts'} />;
+  location: { search },
+}: HostComponentProps) => {
+  return <RedirectWrapper to={hostName ? `/hosts/${hostName}${search}` : `/hosts/${search}`} />;
+};
 
 export const getHostsUrl = () => '#/link-to/hosts';

x-pack/legacy/plugins/siem/public/components/link_to/redirect_to_network.tsx

@@ -11,12 +11,16 @@ import { RedirectWrapper } from './redirect_wrapper';
 
 export type NetworkComponentProps = RouteComponentProps<{
   ip: string;
+  search: string;
 }>;
 
 export const RedirectToNetworkPage = ({
   match: {
     params: { ip },
   },
-}: NetworkComponentProps) => <RedirectWrapper to={ip ? `/network/ip/${ip}` : '/network'} />;
+  location: { search },
+}: NetworkComponentProps) => (
+  <RedirectWrapper to={ip ? `/network/ip/${ip}${search}` : `/network/${search}`} />
+);
 
 export const getNetworkUrl = () => '#/link-to/network';

x-pack/legacy/plugins/siem/public/components/link_to/redirect_to_overview.tsx

@@ -5,8 +5,15 @@
  */
 
 import React from 'react';
+import { RouteComponentProps } from 'react-router';
 import { RedirectWrapper } from './redirect_wrapper';
 
-export const RedirectToOverviewPage = () => <RedirectWrapper to={'/overview'} />;
+export type OverviewComponentProps = RouteComponentProps<{
+  search: string;
+}>;
+
+export const RedirectToOverviewPage = ({ location: { search } }: OverviewComponentProps) => (
+  <RedirectWrapper to={`/overview${search}`} />
+);
 
 export const getOverviewUrl = () => '#/link-to/overview';

x-pack/legacy/plugins/siem/public/components/link_to/redirect_to_timelines.tsx

@@ -5,10 +5,17 @@
  */
 
 import React from 'react';
+import { RouteComponentProps } from 'react-router';
 import { RedirectWrapper } from './redirect_wrapper';
 
+export type TimelineComponentProps = RouteComponentProps<{
+  search: string;
+}>;
+
 export const TIMELINES_PAGE_NAME = 'timelines';
 
-export const RedirectToTimelinesPage = () => <RedirectWrapper to={`/${TIMELINES_PAGE_NAME}`} />;
+export const RedirectToTimelinesPage = ({ location: { search } }: TimelineComponentProps) => (
+  <RedirectWrapper to={`/${TIMELINES_PAGE_NAME}${search}`} />
+);
 
 export const getTimelinesUrl = () => `#/link-to/${TIMELINES_PAGE_NAME}`;

x-pack/legacy/plugins/siem/public/components/navigation/index.tsx

@@ -12,7 +12,10 @@ import { TabNavigation } from './tab_navigation';
 
 export class SiemNavigationComponent extends React.Component<RouteComponentProps> {
   public shouldComponentUpdate(nextProps: Readonly<RouteComponentProps>): boolean {
-    if (this.props.location.pathname === nextProps.location.pathname) {
+    if (
+      this.props.location.pathname === nextProps.location.pathname &&
+      this.props.location.search === nextProps.location.search
+    ) {
       return false;
     }
     return true;
@@ -33,7 +36,7 @@ export class SiemNavigationComponent extends React.Component<RouteComponentProps
 
   public render() {
     const { location } = this.props;
-    return <TabNavigation location={location.pathname} />;
+    return <TabNavigation location={location.pathname} search={location.search} />;
   }
 }
 

x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/index.test.tsx

@@ -11,25 +11,28 @@ import { TabNavigation } from './';
 
 describe('Tab Navigation', () => {
   test('it mounts with correct tab highlighted', () => {
-    const wrapper = shallow(<TabNavigation location={'/hosts'} />);
+    const wrapper = shallow(
+      <TabNavigation location={'/hosts'} search={'?thisisareallycoolsearch'} />
+    );
     const hostsTab = wrapper.find('[data-test-subj="navigation-hosts"]');
 
     expect(hostsTab.prop('isSelected')).toBeTruthy();
   });
-  test('it changes active tab to clicked tab', () => {
-    const wrapper = shallow(<TabNavigation location={'/hosts'} />);
-    const networkTab = () => wrapper.find('[data-test-subj="navigation-network"]');
-    expect(networkTab().prop('isSelected')).toBeFalsy();
-    networkTab().simulate('click');
-    wrapper.update();
-    expect(networkTab().prop('isSelected')).toBeTruthy();
-  });
   test('it changes active tab when nav changes by props', () => {
-    const wrapper = shallow(<TabNavigation location={'/hosts'} />);
+    const wrapper = shallow(
+      <TabNavigation location={'/hosts'} search={'?thisisareallycoolsearch'} />
+    );
     const networkTab = () => wrapper.find('[data-test-subj="navigation-network"]');
     expect(networkTab().prop('isSelected')).toBeFalsy();
     wrapper.setProps({ location: '/network' });
     wrapper.update();
     expect(networkTab().prop('isSelected')).toBeTruthy();
   });
+  test('it carries the url state in the link', () => {
+    const wrapper = shallow(
+      <TabNavigation location={'/hosts'} search={'?thisisareallycoolsearch'} />
+    );
+    const firstTab = wrapper.find('[data-test-subj="navigation-link-network"]');
+    expect(firstTab.props().href).toBe('#/link-to/network?thisisareallycoolsearch');
+  });
 });

x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/index.tsx

@@ -3,8 +3,9 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { EuiTab, EuiTabs } from '@elastic/eui';
+import { EuiTab, EuiTabs, EuiLink } from '@elastic/eui';
 import * as React from 'react';
+import styled from 'styled-components';
 
 import { getHostsUrl, getNetworkUrl, getOverviewUrl, getTimelinesUrl } from '../../link_to';
 import { trackUiAction as track } from '../../../lib/track_usage';
@@ -20,6 +21,7 @@ interface NavTab {
 
 interface TabNavigationProps {
   location: string;
+  search: string;
 }
 
 const navTabs: NavTab[] = [
@@ -49,6 +51,17 @@ const navTabs: NavTab[] = [
   },
 ];
 
+const MyEuiTab = styled(EuiTab)`
+  .euiLink {
+    color: inherit !important;
+    background-color: inherit !important;
+  }
+  .euiLink.euiLink--primary:focus {
+    outline: none !important;
+    background: none !important;
+  }
+`;
+
 interface TabNavigationState {
   selectedTabId: string;
 }
@@ -58,9 +71,7 @@ export class TabNavigation extends React.PureComponent<TabNavigationProps, TabNa
     super(props);
     const pathname = props.location;
     const selectedTabId = this.mapLocationToTab(pathname);
-    this.state = {
-      selectedTabId,
-    };
+    this.state = { selectedTabId };
   }
   public componentWillReceiveProps(nextProps: TabNavigationProps): void {
     const pathname = nextProps.location;
@@ -85,26 +96,23 @@ export class TabNavigation extends React.PureComponent<TabNavigationProps, TabNa
       return res;
     }, '');
 
-  private handleTabClick = (href: string, id: string) => {
-    this.setState(prevState => ({
-      ...prevState,
-      selectedTabId: id,
-    }));
-    track(`tab_${id}`);
-    window.location.assign(href);
-  };
-
   private renderTabs = () =>
     navTabs.map((tab: NavTab) => (
-      <EuiTab
+      <MyEuiTab
         data-href={tab.href}
         data-test-subj={`navigation-${tab.id}`}
         disabled={tab.disabled}
         isSelected={this.state.selectedTabId === tab.id}
         key={`navigation-${tab.id}`}
-        onClick={() => this.handleTabClick(tab.href, tab.id)}
+        onClick={() => track(`tab_${tab.id}`)}
       >
-        {tab.name}
-      </EuiTab>
+        <EuiLink
+          className={'navigation-link'}
+          data-test-subj={`navigation-link-${tab.id}`}
+          href={tab.href + this.props.search}
+        >
+          {tab.name}
+        </EuiLink>
+      </MyEuiTab>
     ));
 }

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

@@ -68,7 +68,7 @@ const getMockProps = (ip: string) => ({
     state: '',
     hash: '',
   },
-  match: { params: { ip }, isExact: true, path: '', url: '' },
+  match: { params: { ip, search: '' }, isExact: true, path: '', url: '' },
   setAbsoluteRangeDatePicker: (jest.fn() as unknown) as ActionCreator<{
     id: InputsModelId;
     from: number;

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

@@ -57,7 +57,7 @@ interface IPDetailsComponentReduxProps {
   }>;
 }
 
-type IPDetailsComponentProps = IPDetailsComponentReduxProps & NetworkComponentProps;
+export type IPDetailsComponentProps = IPDetailsComponentReduxProps & NetworkComponentProps;
 
 export const IPDetailsComponent = pure<IPDetailsComponentProps>(
   ({