[ML] Anomaly Detection: Fix persist/restore of refreshInterval in glo…

…balState. (#56113) (#56165)

Fixes persist/restore of the date picker's refreshInterval in globalState.

x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/top_nav.test.tsx

@@ -4,8 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 
 import { EuiSuperDatePicker } from '@elastic/eui';
 
@@ -34,8 +35,13 @@ describe('Navigation Menu: <TopNav />', () => {
     const refreshListener = jest.fn();
     const refreshSubscription = mlTimefilterRefresh$.subscribe(refreshListener);
 
-    const wrapper = shallow(<TopNav />);
-    expect(wrapper).toMatchSnapshot();
+    const wrapper = mount(
+      <MemoryRouter>
+        <TopNav />
+      </MemoryRouter>
+    );
+    expect(wrapper.find(TopNav)).toHaveLength(1);
+    expect(wrapper.find('EuiSuperDatePicker')).toHaveLength(1);
     expect(refreshListener).toBeCalledTimes(0);
 
     refreshSubscription.unsubscribe();

x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/top_nav.tsx

@@ -15,6 +15,7 @@ import {
   mlTimefilterTimeChange$,
 } from '../../../services/timefilter_refresh_service';
 import { useUiContext } from '../../../contexts/ui/use_ui_context';
+import { useUrlState } from '../../../util/url_state';
 
 interface Duration {
   start: string;
@@ -40,9 +41,17 @@ function updateLastRefresh(timeRange: OnRefreshProps) {
 
 export const TopNav: FC = () => {
   const { chrome, timefilter, timeHistory } = useUiContext();
+  const [globalState, setGlobalState] = useUrlState('_g');
   const getRecentlyUsedRanges = getRecentlyUsedRangesFactory(timeHistory);
 
-  const [refreshInterval, setRefreshInterval] = useState(timefilter.getRefreshInterval());
+  const [refreshInterval, setRefreshInterval] = useState(
+    globalState?.refreshInterval ?? timefilter.getRefreshInterval()
+  );
+  useEffect(() => {
+    setGlobalState({ refreshInterval });
+    timefilter.setRefreshInterval(refreshInterval);
+  }, [refreshInterval?.pause, refreshInterval?.value]);
+
   const [time, setTime] = useState(timefilter.getTime());
   const [recentlyUsedRanges, setRecentlyUsedRanges] = useState(getRecentlyUsedRanges());
   const [isAutoRefreshSelectorEnabled, setIsAutoRefreshSelectorEnabled] = useState(
@@ -96,20 +105,13 @@ export const TopNav: FC = () => {
   }
 
   function updateInterval({
-    isPaused,
-    refreshInterval: interval,
+    isPaused: pause,
+    refreshInterval: value,
   }: {
     isPaused: boolean;
     refreshInterval: number;
   }) {
-    const newInterval = {
-      pause: isPaused,
-      value: interval,
-    };
-    // Update timefilter for controllers listening for changes
-    timefilter.setRefreshInterval(newInterval);
-    // Update state
-    setRefreshInterval(newInterval);
+    setRefreshInterval({ pause, value });
   }
 
   return (