[SIEM] Fix url state request once initial state (#38955) (#39004)

[SIEM] Fix url state request once initial state

x-pack/plugins/siem/public/components/url_state/index.tsx

@@ -58,7 +58,8 @@ export class UrlStateContainerLifecycle extends React.Component<UrlStateContaine
     location: prevLocation,
     urlState: prevUrlState,
   }: UrlStateContainerPropTypes) {
-    const { urlState } = this.props;
+    const { location, urlState } = this.props;
+
     if (JSON.stringify(urlState) !== JSON.stringify(prevUrlState)) {
       URL_STATE_KEYS.forEach((urlKey: KeyUrlState) => {
         if (
@@ -83,10 +84,12 @@ export class UrlStateContainerLifecycle extends React.Component<UrlStateContaine
           }
         }
       });
+    } else if (location.pathname !== prevLocation.pathname) {
+      this.handleInitialize(location);
     }
   }
 
-  public componentDidMount() {
+  public componentWillMount() {
     const { location } = this.props;
     this.handleInitialize(location);
   }

x-pack/plugins/siem/public/components/url_state/index_mocked.test.tsx

@@ -9,7 +9,7 @@ import { throttle } from 'lodash/fp';
 import * as React from 'react';
 import { UrlStateContainerLifecycle } from './';
 import { getMockPropsObj, mockHistory, filterQuery, testCases } from './test_dependencies';
-import { networkModel } from '../../store';
+import { hostsModel, networkModel } from '../../store';
 import { UrlStateContainerPropTypes } from './types';
 import { CONSTANTS } from './constants';
 
@@ -128,6 +128,39 @@ describe('UrlStateContainer - lodash.throttle mocked to test update url', () =>
           });
         });
       });
+
+      test('url state is set from redux data when location updates', () => {
+        mockProps = getMockPropsObj({
+          page: CONSTANTS.hostsPage,
+          examplePath: '/hosts',
+          namespaceLower: 'hosts',
+          type: hostsModel.HostsType.page,
+        }).noSearch.undefinedQuery;
+        const updatedProps = getMockPropsObj({
+          page: CONSTANTS.networkPage,
+          examplePath: '/network',
+          namespaceLower: 'network',
+          type: networkModel.NetworkType.page,
+        }).noSearch.undefinedQuery;
+        const wrapper = shallow(<UrlStateContainerLifecycle {...mockProps} />);
+
+        // @ts-ignore ignore staticContext warning
+        wrapper.setProps(updatedProps);
+        wrapper.update();
+        // sets new kqlQuery
+        expect(mockHistory.replace.mock.calls[2][0]).toEqual({
+          hash: '',
+          pathname: '/network',
+          search: `?_g=()&kqlQuery=(filterQuery:!n,queryLocation:${CONSTANTS.networkPage},type:${
+            networkModel.NetworkType.page
+          })`,
+          state: '',
+        });
+        // sets same timeline
+        expect(mockHistory.replace.mock.calls[3][0].search).toEqual(
+          mockHistory.replace.mock.calls[1][0].search
+        );
+      });
     });
   });
 });

x-pack/plugins/siem/public/pages/home/index.tsx

@@ -26,6 +26,7 @@ import { NetworkContainer } from '../network';
 import { Overview } from '../overview';
 import { Timelines } from '../timelines';
 import { WithSource } from '../../containers/source';
+import { UrlStateContainer } from '../../components/url_state';
 
 const WrappedByAutoSizer = styled.div`
   height: 100%;
@@ -71,7 +72,7 @@ export const HomePage = pure(() => (
           <HelpMenu />
 
           <WithSource sourceId="default">
-            {({ browserFields }) => (
+            {({ browserFields, indexPattern }) => (
               <DragDropContextWrapper browserFields={browserFields}>
                 <AutoSaveWarningMsg />
                 <Flyout
@@ -98,6 +99,7 @@ export const HomePage = pure(() => (
                     <EuiFlexGroup alignItems="center" gutterSize="m" justifyContent="spaceBetween">
                       <EuiFlexItem>
                         <SiemNavigation />
+                        <UrlStateContainer indexPattern={indexPattern} />
                       </EuiFlexItem>
 
                       <EuiFlexItem grow={false}>

x-pack/plugins/siem/public/pages/hosts/host_details.tsx

@@ -35,7 +35,6 @@ import { hostsModel, hostsSelectors, State } from '../../store';
 import { HostsEmptyPage } from './hosts_empty_page';
 import { HostsKql } from './kql';
 import * as i18n from './translations';
-import { UrlStateContainer } from '../../components/url_state';
 
 const type = hostsModel.HostsType.details;
 
@@ -63,7 +62,6 @@ const HostDetailsComponent = pure<HostDetailsComponentProps>(
           <StickyContainer>
             <FiltersGlobal>
               <HostsKql indexPattern={indexPattern} type={type} />
-              <UrlStateContainer indexPattern={indexPattern} />
             </FiltersGlobal>
 
             <HeaderPage

x-pack/plugins/siem/public/pages/hosts/hosts.tsx

@@ -35,7 +35,6 @@ import { hostsModel, hostsSelectors, State } from '../../store';
 import { HostsEmptyPage } from './hosts_empty_page';
 import { HostsKql } from './kql';
 import * as i18n from './translations';
-import { UrlStateContainer } from '../../components/url_state';
 
 const AuthenticationTableManage = manageQuery(AuthenticationTable);
 const HostsTableManage = manageQuery(HostsTable);
@@ -55,7 +54,6 @@ const HostsComponent = pure<HostsComponentProps>(({ filterQuery }) => (
         <StickyContainer>
           <FiltersGlobal>
             <HostsKql indexPattern={indexPattern} type={hostsModel.HostsType.page} />
-            <UrlStateContainer indexPattern={indexPattern} />
           </FiltersGlobal>
 
           <HeaderPage

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

@@ -35,7 +35,6 @@ import * as i18n from './translations';
 import { TlsQuery } from '../../containers/tls';
 import { UsersTable } from '../../components/page/network/users_table';
 import { UsersQuery } from '../../containers/users';
-import { UrlStateContainer } from '../../components/url_state';
 
 const DomainsTableManage = manageQuery(DomainsTable);
 const TlsTableManage = manageQuery(TlsTable);
@@ -62,7 +61,6 @@ export const IPDetailsComponent = pure<IPDetailsComponentProps>(
           <StickyContainer>
             <FiltersGlobal>
               <NetworkKql indexPattern={indexPattern} type={networkModel.NetworkType.details} />
-              <UrlStateContainer indexPattern={indexPattern} />
             </FiltersGlobal>
 
             <HeaderPage

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

@@ -28,7 +28,6 @@ import { networkModel, networkSelectors, State } from '../../store';
 import { NetworkKql } from './kql';
 import { NetworkEmptyPage } from './network_empty_page';
 import * as i18n from './translations';
-import { UrlStateContainer } from '../../components/url_state';
 
 const NetworkTopNFlowTableManage = manageQuery(NetworkTopNFlowTable);
 const NetworkDnsTableManage = manageQuery(NetworkDnsTable);
@@ -45,7 +44,6 @@ const NetworkComponent = pure<NetworkComponentProps>(({ filterQuery }) => (
         <StickyContainer>
           <FiltersGlobal>
             <NetworkKql indexPattern={indexPattern} type={networkModel.NetworkType.page} />
-            <UrlStateContainer indexPattern={indexPattern} />
           </FiltersGlobal>
 
           <HeaderPage