[APM]: Correctly parse relative time ranges when refreshing (#38645)

* [APM]: Correctly parse relative time ranges when refreshing

Closes #38410.

* Make UrlParamsContext test local timezone agnostic

x-pack/plugins/apm/public/context/UrlParamsContext/__tests__/UrlParamsContext.test.tsx

@@ -9,8 +9,10 @@ import { UrlParamsContext, UrlParamsProvider } from '..';
 import { mount } from 'enzyme';
 import { Location, History } from 'history';
 import { MemoryRouter, Router } from 'react-router-dom';
+import moment from 'moment-timezone';
 import { IUrlParams } from '../types';
 import { tick } from '../../../utils/testHelpers';
+import { getParsedDate } from '../helpers';
 
 function mountParams(location: Location) {
   return mount(
@@ -31,6 +33,14 @@ function getDataFromOutput(wrapper: ReturnType<typeof mount>) {
 }
 
 describe('UrlParamsContext', () => {
+  beforeEach(() => {
+    moment.tz.setDefault('Etc/GMT');
+  });
+
+  afterEach(() => {
+    moment.tz.setDefault('');
+  });
+
   it('should have default params', () => {
     const location = { pathname: '/test/pathname' } as Location;
 
@@ -82,6 +92,21 @@ describe('UrlParamsContext', () => {
     expect(params.end).toEqual('2009-04-10T12:00:00.000Z');
   });
 
+  it('should parse relative time ranges on mount', () => {
+    const location = {
+      pathname: '/test/updated',
+      search: '?rangeFrom=now-1d%2Fd&rangeTo=now-1d%2Fd&transactionId=UPDATED'
+    } as Location;
+
+    const wrapper = mountParams(location);
+
+    // force an update
+    wrapper.setProps({ abc: 123 });
+    const params = getDataFromOutput(wrapper);
+    expect(params.start).toEqual(getParsedDate('now-1d/d'));
+    expect(params.end).toEqual(getParsedDate('now-1d/d', { roundUp: true }));
+  });
+
   it('should refresh the time range with new values', async () => {
     const calls = [];
     const history = ({
@@ -130,4 +155,51 @@ describe('UrlParamsContext', () => {
     expect(params.start).toEqual('2005-09-20T12:00:00.000Z');
     expect(params.end).toEqual('2005-10-21T12:00:00.000Z');
   });
+
+  it('should refresh the time range with new values if time range is relative', async () => {
+    const history = ({
+      location: {
+        pathname: '/test'
+      },
+      listen: jest.fn()
+    } as unknown) as History;
+
+    jest
+      .spyOn(Date, 'now')
+      .mockImplementation(() => new Date('2000-06-15T12:00:00Z').getTime());
+
+    const wrapper = mount(
+      <Router history={history}>
+        <UrlParamsProvider>
+          <UrlParamsContext.Consumer>
+            {({ urlParams, refreshTimeRange }) => {
+              return (
+                <React.Fragment>
+                  <span id="data">{JSON.stringify(urlParams, null, 2)}</span>
+                  <button
+                    onClick={() =>
+                      refreshTimeRange({
+                        rangeFrom: 'now-1d/d',
+                        rangeTo: 'now-1d/d'
+                      })
+                    }
+                  />
+                </React.Fragment>
+              );
+            }}
+          </UrlParamsContext.Consumer>
+        </UrlParamsProvider>
+      </Router>
+    );
+
+    await tick();
+
+    wrapper.find('button').simulate('click');
+
+    await tick();
+
+    const params = getDataFromOutput(wrapper);
+    expect(params.start).toEqual('2000-06-14T00:00:00.000Z');
+    expect(params.end).toEqual('2000-06-14T23:59:59.999Z');
+  });
 });

x-pack/plugins/apm/public/context/UrlParamsContext/index.tsx

@@ -59,7 +59,7 @@ const UrlParamsProvider: React.ComponentClass<{}> = withRouter(
         refUrlParams.current = {
           ...refUrlParams.current,
           start: getParsedDate(timeRange.rangeFrom),
-          end: getParsedDate(timeRange.rangeTo)
+          end: getParsedDate(timeRange.rangeTo, { roundUp: true })
         };
 
         forceUpdate(uniqueId());