From 9d4cdf52005234bde9ad01ce3c6c8024825d3ecb Mon Sep 17 00:00:00 2001
From: Carlos Crespo <carloshenrique.leonelcrespo@elastic.co>
Date: Thu, 7 Sep 2023 17:28:18 +0200
Subject: [PATCH] Reset flyout url state after closing it

---
 .../components/asset_details/hooks/use_date_range.ts  |  5 +++--
 .../components/asset_details/template/flyout.tsx      | 11 +++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/infra/public/components/asset_details/hooks/use_date_range.ts b/x-pack/plugins/infra/public/components/asset_details/hooks/use_date_range.ts
index 9089b88d78ba..43ad0fa7b418 100644
--- a/x-pack/plugins/infra/public/components/asset_details/hooks/use_date_range.ts
+++ b/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()),
diff --git a/x-pack/plugins/infra/public/components/asset_details/template/flyout.tsx b/x-pack/plugins/infra/public/components/asset_details/template/flyout.tsx
index f45aca765610..f8b4272dae0e 100644
--- a/x-pack/plugins/infra/public/components/asset_details/template/flyout.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/template/flyout.tsx
@@ -7,7 +7,7 @@
 
 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';
@@ -15,6 +15,7 @@ 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}