Reset flyout url state after closing it

x-pack/plugins/infra/public/components/asset_details/hooks/use_date_range.ts

@@ -42,10 +42,11 @@ export function useDateRangeProvider({
   );
 
   const getParsedDateRange = useCallback(() => {
-    const { from = dateRange.from, to = dateRange.to } = parsedDateRange;
+    const defaultDateRange = getDefaultDateRange();
+    const { from = defaultDateRange.from, to = defaultDateRange.to } = parsedDateRange;
 
     return { from, to };
-  }, [dateRange, parsedDateRange]);
+  }, [parsedDateRange]);
 
   const getDateRangeInTimestamp = useCallback(
     () => toTimestampRange(getParsedDateRange()),

x-pack/plugins/infra/public/components/asset_details/template/flyout.tsx

@@ -7,14 +7,15 @@
 
 import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import React, { useCallback } from 'react';
 import useEffectOnce from 'react-use/lib/useEffectOnce';
 import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
 import { InfraLoadingPanel } from '../../loading';
 import { ASSET_DETAILS_FLYOUT_COMPONENT_NAME } from '../constants';
 import { Content } from '../content/content';
 import { FlyoutHeader } from '../header/flyout_header';
 import { useAssetDetailsRenderPropsContext } from '../hooks/use_asset_details_render_props';
+import { useAssetDetailsUrlState } from '../hooks/use_asset_details_url_state';
 import { usePageHeader } from '../hooks/use_page_header';
 import { useTabSwitcherContext } from '../hooks/use_tab_switcher';
 import type { ContentTemplateProps } from '../types';
@@ -23,6 +24,7 @@ export const Flyout = ({
   header: { tabs = [], links = [] },
   closeFlyout,
 }: ContentTemplateProps & { closeFlyout: () => void }) => {
+  const [, setUrlState] = useAssetDetailsUrlState();
   const { asset, assetType, loading } = useAssetDetailsRenderPropsContext();
   const { rightSideItems, tabEntries } = usePageHeader(tabs, links);
   const { activeTabId } = useTabSwitcherContext();
@@ -38,9 +40,14 @@ export const Flyout = ({
     });
   });
 
+  const handleOnClose = useCallback(() => {
+    closeFlyout();
+    setUrlState(null);
+  }, [closeFlyout, setUrlState]);
+
   return (
     <EuiFlyout
-      onClose={closeFlyout}
+      onClose={handleOnClose}
       ownFocus={false}
       data-component-name={ASSET_DETAILS_FLYOUT_COMPONENT_NAME}
       data-asset-type={assetType}