From f8a45274a92f14de97c2a4f84ca58b9f8df8c5ed Mon Sep 17 00:00:00 2001 From: cauemarcondes Date: Mon, 24 Aug 2020 15:30:10 +0200 Subject: [PATCH 1/2] replaces the route when parmeter is missing --- .../apm/public/components/shared/DatePicker/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) 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 ( From a31359c57d891f6163a72b7b64dc935c7228e043 Mon Sep 17 00:00:00 2001 From: cauemarcondes Date: Mon, 24 Aug 2020 16:05:21 +0200 Subject: [PATCH 2/2] fixing unit test --- .../shared/DatePicker/__test__/DatePicker.test.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 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 2434d898389d..7a63b9e767fe 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(); 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',