[APM] User can't navigate back home using browser nav when clicking l…

…ink (#75755)

* replaces the route when parmeter is missing

* fixing unit test

x-pack/plugins/apm/public/components/shared/DatePicker/__test__/DatePicker.test.tsx

@@ -20,6 +20,7 @@ import { wait } from '@testing-library/react';
 import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext';
 
 const mockHistoryPush = jest.spyOn(history, 'push');
+const mockHistoryReplace = jest.spyOn(history, 'replace');
 const mockRefreshTimeRange = jest.fn();
 function MockUrlParamsProvider({
   params = {},
@@ -69,8 +70,8 @@ describe('DatePicker', () => {
 
   it('sets default query params in the URL', () => {
     mountDatePicker();
-    expect(mockHistoryPush).toHaveBeenCalledTimes(1);
-    expect(mockHistoryPush).toHaveBeenCalledWith(
+    expect(mockHistoryReplace).toHaveBeenCalledTimes(1);
+    expect(mockHistoryReplace).toHaveBeenCalledWith(
       expect.objectContaining({
         search: 'rangeFrom=now-15m&rangeTo=now',
       })
@@ -82,8 +83,8 @@ describe('DatePicker', () => {
       rangeTo: 'now',
       refreshInterval: 5000,
     });
-    expect(mockHistoryPush).toHaveBeenCalledTimes(1);
-    expect(mockHistoryPush).toHaveBeenCalledWith(
+    expect(mockHistoryReplace).toHaveBeenCalledTimes(1);
+    expect(mockHistoryReplace).toHaveBeenCalledWith(
       expect.objectContaining({
         search: 'rangeFrom=now-15m&rangeTo=now&refreshInterval=5000',
       })
@@ -97,18 +98,19 @@ describe('DatePicker', () => {
       refreshPaused: false,
       refreshInterval: 5000,
     });
-    expect(mockHistoryPush).toHaveBeenCalledTimes(0);
+    expect(mockHistoryReplace).toHaveBeenCalledTimes(0);
   });
 
   it('updates the URL when the date range changes', () => {
     const datePicker = mountDatePicker();
+    expect(mockHistoryReplace).toHaveBeenCalledTimes(1);
     datePicker.find(EuiSuperDatePicker).props().onTimeChange({
       start: 'updated-start',
       end: 'updated-end',
       isInvalid: false,
       isQuickSelection: true,
     });
-    expect(mockHistoryPush).toHaveBeenCalledTimes(2);
+    expect(mockHistoryPush).toHaveBeenCalledTimes(1);
     expect(mockHistoryPush).toHaveBeenLastCalledWith(
       expect.objectContaining({
         search: 'rangeFrom=updated-start&rangeTo=updated-end',

x-pack/plugins/apm/public/components/shared/DatePicker/index.tsx

@@ -89,7 +89,14 @@ export function DatePicker() {
     ...timePickerURLParams,
   };
   if (!isEqual(nextParams, timePickerURLParams)) {
-    updateUrl(nextParams);
+    // When the default parameters are not availbale in the url, replace it adding the necessary parameters.
+    history.replace({
+      ...location,
+      search: fromQuery({
+        ...toQuery(location.search),
+        ...nextParams,
+      }),
+    });
   }
 
   return (