From 8f43b3fb9a2e8e864cd370d6d93feadc50f49644 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Marcondes?=
 <55978943+cauemarcondes@users.noreply.github.com>
Date: Tue, 25 Aug 2020 08:03:22 +0100
Subject: [PATCH] [APM] User can't navigate back home using browser nav when
 clicking link  (#75755)

* replaces the route when parmeter is missing

* fixing unit test
---
 .../shared/DatePicker/__test__/DatePicker.test.tsx | 14 ++++++++------
 .../public/components/shared/DatePicker/index.tsx  |  9 ++++++++-
 2 files changed, 16 insertions(+), 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
index d4eeaf8b290e..a6e23d049cd7 100644
--- 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
index 403a8cad854c..35b9525733e9 100644
--- 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 (