[7.5] fix tab url link (#51993) (#52006)

* fix tab url link (#51993)

* fix cherry pick imports

x-pack/legacy/plugins/siem/cypress/integration/lib/hosts/selectors.ts

@@ -16,6 +16,6 @@ export const ALL_HOSTS_WIDGET_DRAGGABLE_HOSTS = `${ALL_HOSTS_WIDGET} ${ALL_HOSTS
 /** Clicking this button displays the `Events` tab */
 export const EVENTS_TAB_BUTTON = '[data-test-subj="navigation-events"]';
 
-export const NAVIGATION_HOSTS_ALL_HOSTS = '[data-test-subj="navigation-link-allHosts"]';
+export const NAVIGATION_HOSTS_ALL_HOSTS = '[data-test-subj="navigation-allHosts"]';
 
-export const NAVIGATION_HOSTS_ANOMALIES = '[data-test-subj="navigation-link-anomalies"]';
+export const NAVIGATION_HOSTS_ANOMALIES = '[data-test-subj="navigation-anomalies"]';

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

@@ -11,49 +11,51 @@ import { CONSTANTS } from '../url_state/constants';
 import { SiemNavigationComponent } from './';
 import { setBreadcrumbs } from './breadcrumbs';
 import { navTabs } from '../../pages/home/home_navigations';
-import { TabNavigationProps } from './tab_navigation/types';
 import { HostsTableType } from '../../store/hosts/model';
 import { RouteSpyState } from '../../utils/route/types';
+import { SiemNavigationProps, SiemNavigationComponentProps } from './types';
 
 jest.mock('./breadcrumbs', () => ({
   setBreadcrumbs: jest.fn(),
 }));
 
 describe('SIEM Navigation', () => {
-  const mockProps: TabNavigationProps & RouteSpyState = {
+  const mockProps: SiemNavigationComponentProps & SiemNavigationProps & RouteSpyState = {
     pageName: 'hosts',
     pathName: '/hosts',
     detailName: undefined,
     search: '',
     tabName: HostsTableType.authentications,
     navTabs,
-    [CONSTANTS.timerange]: {
-      global: {
-        [CONSTANTS.timerange]: {
-          from: 1558048243696,
-          fromStr: 'now-24h',
-          kind: 'relative',
-          to: 1558134643697,
-          toStr: 'now',
+    urlState: {
+      [CONSTANTS.timerange]: {
+        global: {
+          [CONSTANTS.timerange]: {
+            from: 1558048243696,
+            fromStr: 'now-24h',
+            kind: 'relative',
+            to: 1558134643697,
+            toStr: 'now',
+          },
+          linkTo: ['timeline'],
         },
-        linkTo: ['timeline'],
-      },
-      timeline: {
-        [CONSTANTS.timerange]: {
-          from: 1558048243696,
-          fromStr: 'now-24h',
-          kind: 'relative',
-          to: 1558134643697,
-          toStr: 'now',
+        timeline: {
+          [CONSTANTS.timerange]: {
+            from: 1558048243696,
+            fromStr: 'now-24h',
+            kind: 'relative',
+            to: 1558134643697,
+            toStr: 'now',
+          },
+          linkTo: ['global'],
         },
-        linkTo: ['global'],
       },
-    },
-    [CONSTANTS.appQuery]: { query: '', language: 'kuery' },
-    [CONSTANTS.filters]: [],
-    [CONSTANTS.timeline]: {
-      id: '',
-      isOpen: false,
+      [CONSTANTS.appQuery]: { query: '', language: 'kuery' },
+      [CONSTANTS.filters]: [],
+      [CONSTANTS.timeline]: {
+        id: '',
+        isOpen: false,
+      },
     },
   };
   const wrapper = mount(<SiemNavigationComponent {...mockProps} />);

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

@@ -11,60 +11,46 @@ import { connect } from 'react-redux';
 
 import { RouteSpyState } from '../../utils/route/types';
 import { useRouteSpy } from '../../utils/route/use_route_spy';
-
+import { makeMapStateToProps } from '../url_state/helpers';
 import { setBreadcrumbs } from './breadcrumbs';
 import { TabNavigation } from './tab_navigation';
-import { TabNavigationProps } from './tab_navigation/types';
-import { SiemNavigationComponentProps } from './types';
-import { makeMapStateToProps } from '../url_state/helpers';
+import { SiemNavigationProps, SiemNavigationComponentProps } from './types';
 
-export const SiemNavigationComponent = React.memo<TabNavigationProps & RouteSpyState>(
-  ({
-    query,
-    detailName,
-    display,
-    filters,
-    navTabs,
-    pageName,
-    pathName,
-    savedQuery,
-    search,
-    showBorder,
-    tabName,
-    timeline,
-    timerange,
-  }) => {
+export const SiemNavigationComponent = React.memo<
+  SiemNavigationComponentProps & SiemNavigationProps & RouteSpyState
+>(
+  ({ detailName, display, navTabs, pageName, pathName, showBorder, search, tabName, urlState }) => {
     useEffect(() => {
       if (pathName) {
         setBreadcrumbs({
-          query,
+          query: urlState.query,
           detailName,
-          filters,
+          filters: urlState.filters,
           navTabs,
           pageName,
           pathName,
-          savedQuery,
+          savedQuery: urlState.savedQuery,
           search,
           tabName,
-          timerange,
-          timeline,
+          timerange: urlState.timerange,
+          timeline: urlState.timeline,
         });
       }
-    }, [query, pathName, search, filters, navTabs, savedQuery, timerange, timeline]);
+    }, [pathName, search, navTabs, urlState]);
 
     return (
       <TabNavigation
-        query={query}
+        query={urlState.query}
         display={display}
-        filters={filters}
+        filters={urlState.filters}
         navTabs={navTabs}
         pageName={pageName}
         pathName={pathName}
-        savedQuery={savedQuery}
         showBorder={showBorder}
+        savedQuery={urlState.savedQuery}
         tabName={tabName}
-        timeline={timeline}
-        timerange={timerange}
+        timeline={urlState.timeline}
+        timerange={urlState.timerange}
       />
     );
   },
@@ -72,12 +58,8 @@ export const SiemNavigationComponent = React.memo<TabNavigationProps & RouteSpyS
     return (
       prevProps.pathName === nextProps.pathName &&
       prevProps.search === nextProps.search &&
-      prevProps.savedQuery === nextProps.savedQuery &&
-      isEqual(prevProps.query, nextProps.query) &&
-      isEqual(prevProps.filters, nextProps.filters) &&
       isEqual(prevProps.navTabs, nextProps.navTabs) &&
-      isEqual(prevProps.timerange, nextProps.timerange) &&
-      isEqual(prevProps.timeline, nextProps.timeline)
+      isEqual(prevProps.urlState, nextProps.urlState)
     );
   }
 );
@@ -85,12 +67,12 @@ export const SiemNavigationComponent = React.memo<TabNavigationProps & RouteSpyS
 SiemNavigationComponent.displayName = 'SiemNavigationComponent';
 
 export const SiemNavigationRedux = compose<
-  React.ComponentClass<SiemNavigationComponentProps & RouteSpyState>
+  React.ComponentClass<SiemNavigationProps & RouteSpyState>
 >(connect(makeMapStateToProps))(SiemNavigationComponent);
 
-export const SiemNavigation = React.memo<SiemNavigationComponentProps>(props => {
+export const SiemNavigation = React.memo<SiemNavigationProps>(props => {
   const [routeProps] = useRouteSpy();
-  const stateNavReduxProps: RouteSpyState & SiemNavigationComponentProps = {
+  const stateNavReduxProps: RouteSpyState & SiemNavigationProps = {
     ...routeProps,
     ...props,
   };

x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/types.ts

@@ -11,9 +11,9 @@ import { CONSTANTS } from '../../url_state/constants';
 import { Timeline } from '../../url_state/types';
 import { HostsTableType } from '../../../store/hosts/model';
 
-import { SiemNavigationComponentProps } from '../types';
+import { SiemNavigationProps } from '../types';
 
-export interface TabNavigationProps extends SiemNavigationComponentProps {
+export interface TabNavigationProps extends SiemNavigationProps {
   pathName: string;
   pageName: string;
   tabName: HostsTableType | undefined;

x-pack/legacy/plugins/siem/public/components/navigation/types.ts

@@ -4,14 +4,32 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { UrlStateType } from '../url_state/constants';
+import { Filter } from '@kbn/es-query';
+import { Query } from '../../../../../../../src/plugins/data/public';
+import { HostsTableType } from '../../store/hosts/model';
+import { UrlInputsModel } from '../../store/inputs/model';
+import { CONSTANTS, UrlStateType } from '../url_state/constants';
+import { Timeline } from '../url_state/types';
 
-export interface SiemNavigationComponentProps {
+export interface SiemNavigationProps {
   display?: 'default' | 'condensed';
   navTabs: Record<string, NavTab>;
   showBorder?: boolean;
 }
 
+export interface SiemNavigationComponentProps {
+  pathName: string;
+  pageName: string;
+  tabName: HostsTableType | undefined;
+  urlState: {
+    [CONSTANTS.appQuery]?: Query;
+    [CONSTANTS.filters]?: Filter[];
+    [CONSTANTS.savedQuery]?: string;
+    [CONSTANTS.timerange]: UrlInputsModel;
+    [CONSTANTS.timeline]: Timeline;
+  };
+}
+
 export type SearchNavTab = NavTab | { urlKey: UrlStateType; isDetailPage: boolean };
 
 export interface NavTab {