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

…ink (#75755) (#75986) * replaces the route when parmeter is missing * fixing unit test Co-authored-by: Elastic Machine <[email protected]>
elastic · Aug 27, 2020 · c4722ca · c4722ca
1 parent 802ef8e
commit c4722ca
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/x-pack/plugins/apm/public/components/shared/DatePicker/__test__/DatePicker.test.tsx b/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();
 const MockUrlParamsProvider: React.FC<{
   params?: IUrlParams;
@@ -63,8 +64,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',
       })
@@ -76,8 +77,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',
       })
@@ -91,18 +92,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',

diff --git a/x-pack/plugins/apm/public/components/shared/DatePicker/index.tsx b/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 (