Use platform history

x-pack/plugins/apm/public/application/application.test.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { act } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+import { Observable } from 'rxjs';
+import { AppMountParameters, CoreStart, HttpSetup } from 'src/core/public';
+import { mockApmPluginContextValue } from '../context/ApmPluginContext/MockApmPluginContext';
+import { ApmPluginSetupDeps } from '../plugin';
+import { createCallApmApi } from '../services/rest/createCallApmApi';
+import { renderApp } from './';
+import { disableConsoleWarning } from '../utils/testHelpers';
+
+describe('renderApp', () => {
+  let mockConsole: jest.SpyInstance;
+
+  beforeAll(() => {
+    // The RUM agent logs an unnecessary message here. There's a couple open
+    // issues need to be fixed to get the ability to turn off all of the logging:
+    //
+    // * https://github.com/elastic/apm-agent-rum-js/issues/799
+    // * https://github.com/elastic/apm-agent-rum-js/issues/861
+    //
+    // for now, override `console.warn` to filter those messages out.
+    mockConsole = disableConsoleWarning('[Elastic APM]');
+  });
+
+  afterAll(() => {
+    mockConsole.mockRestore();
+  });
+
+  it('renders the app', () => {
+    const { core, config } = mockApmPluginContextValue;
+    const plugins = {
+      licensing: { license$: new Observable() },
+      triggers_actions_ui: { actionTypeRegistry: {}, alertTypeRegistry: {} },
+      usageCollection: { reportUiStats: () => {} },
+    };
+    const params = {
+      element: document.createElement('div'),
+      history: createMemoryHistory(),
+    };
+    jest.spyOn(window, 'scrollTo').mockReturnValueOnce(undefined);
+    createCallApmApi((core.http as unknown) as HttpSetup);
+
+    jest
+      .spyOn(window.console, 'warn')
+      .mockImplementationOnce((message: string) => {
+        if (message.startsWith('[Elastic APM')) {
+          return;
+        } else {
+          console.warn(message); // eslint-disable-line no-console
+        }
+      });
+
+    let unmount: () => void;
+
+    act(() => {
+      unmount = renderApp(
+        (core as unknown) as CoreStart,
+        (plugins as unknown) as ApmPluginSetupDeps,
+        (params as unknown) as AppMountParameters,
+        config
+      );
+    });
+
+    expect(() => {
+      unmount();
+    }).not.toThrowError();
+  });
+});

x-pack/plugins/apm/public/application/index.tsx

@@ -5,32 +5,32 @@
  */
 
 import { ApmRoute } from '@elastic/apm-rum-react';
+import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
-import styled, { ThemeProvider, DefaultTheme } from 'styled-components';
-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
-import { CoreStart, AppMountParameters } from '../../../../../src/core/public';
-import { ApmPluginSetupDeps } from '../plugin';
+import 'react-vis/dist/style.css';
+import styled, { DefaultTheme, ThemeProvider } from 'styled-components';
+import { ConfigSchema } from '../';
+import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
+import {
+  KibanaContextProvider,
+  RedirectAppLinks,
+  useUiSetting$,
+} from '../../../../../src/plugins/kibana_react/public';
+import { AlertsContextProvider } from '../../../triggers_actions_ui/public';
+import { routes } from '../components/app/Main/route_config';
+import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange';
+import { UpdateBreadcrumbs } from '../components/app/Main/UpdateBreadcrumbs';
 import { ApmPluginContext } from '../context/ApmPluginContext';
 import { LicenseProvider } from '../context/LicenseContext';
 import { LoadingIndicatorProvider } from '../context/LoadingIndicatorContext';
 import { LocationProvider } from '../context/LocationContext';
 import { MatchedRouteProvider } from '../context/MatchedRouteContext';
 import { UrlParamsProvider } from '../context/UrlParamsContext';
-import { AlertsContextProvider } from '../../../triggers_actions_ui/public';
-import {
-  KibanaContextProvider,
-  useUiSetting$,
-} from '../../../../../src/plugins/kibana_react/public';
+import { ApmPluginSetupDeps } from '../plugin';
 import { px, units } from '../style/variables';
-import { UpdateBreadcrumbs } from '../components/app/Main/UpdateBreadcrumbs';
-import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange';
-import { routes } from '../components/app/Main/route_config';
-import { history, resetHistory } from '../utils/history';
-import { ConfigSchema } from '..';
-import 'react-vis/dist/style.css';
 
 const MainContainer = styled.div`
   padding: ${px(units.plus)};
@@ -64,12 +64,12 @@ function App() {
 function ApmAppRoot({
   core,
   deps,
-  routerHistory,
+  history,
   config,
 }: {
   core: CoreStart;
   deps: ApmPluginSetupDeps;
-  routerHistory: typeof history;
+  history: AppMountParameters['history'];
   config: ConfigSchema;
 }) {
   const i18nCore = core.i18n;
@@ -80,36 +80,38 @@ function ApmAppRoot({
     plugins,
   };
   return (
-    <ApmPluginContext.Provider value={apmPluginContextValue}>
-      <AlertsContextProvider
-        value={{
-          http: core.http,
-          docLinks: core.docLinks,
-          capabilities: core.application.capabilities,
-          toastNotifications: core.notifications.toasts,
-          actionTypeRegistry: plugins.triggers_actions_ui.actionTypeRegistry,
-          alertTypeRegistry: plugins.triggers_actions_ui.alertTypeRegistry,
-        }}
-      >
-        <KibanaContextProvider services={{ ...core, ...plugins }}>
-          <i18nCore.Context>
-            <Router history={routerHistory}>
-              <LocationProvider>
-                <MatchedRouteProvider routes={routes}>
-                  <UrlParamsProvider>
-                    <LoadingIndicatorProvider>
-                      <LicenseProvider>
-                        <App />
-                      </LicenseProvider>
-                    </LoadingIndicatorProvider>
-                  </UrlParamsProvider>
-                </MatchedRouteProvider>
-              </LocationProvider>
-            </Router>
-          </i18nCore.Context>
-        </KibanaContextProvider>
-      </AlertsContextProvider>
-    </ApmPluginContext.Provider>
+    <RedirectAppLinks application={core.application}>
+      <ApmPluginContext.Provider value={apmPluginContextValue}>
+        <AlertsContextProvider
+          value={{
+            http: core.http,
+            docLinks: core.docLinks,
+            capabilities: core.application.capabilities,
+            toastNotifications: core.notifications.toasts,
+            actionTypeRegistry: plugins.triggers_actions_ui.actionTypeRegistry,
+            alertTypeRegistry: plugins.triggers_actions_ui.alertTypeRegistry,
+          }}
+        >
+          <KibanaContextProvider services={{ ...core, ...plugins }}>
+            <i18nCore.Context>
+              <Router history={history}>
+                <LocationProvider>
+                  <MatchedRouteProvider routes={routes}>
+                    <UrlParamsProvider>
+                      <LoadingIndicatorProvider>
+                        <LicenseProvider>
+                          <App />
+                        </LicenseProvider>
+                      </LoadingIndicatorProvider>
+                    </UrlParamsProvider>
+                  </MatchedRouteProvider>
+                </LocationProvider>
+              </Router>
+            </i18nCore.Context>
+          </KibanaContextProvider>
+        </AlertsContextProvider>
+      </ApmPluginContext.Provider>
+    </RedirectAppLinks>
   );
 }
 
@@ -119,17 +121,11 @@ function ApmAppRoot({
 export const renderApp = (
   core: CoreStart,
   deps: ApmPluginSetupDeps,
-  { element }: AppMountParameters,
+  { element, history }: AppMountParameters,
   config: ConfigSchema
 ) => {
-  resetHistory();
   ReactDOM.render(
-    <ApmAppRoot
-      core={core}
-      deps={deps}
-      routerHistory={history}
-      config={config}
-    />,
+    <ApmAppRoot core={core} deps={deps} history={history} config={config} />,
     element
   );
   return () => {

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx

@@ -6,40 +6,40 @@
 
 import {
   EuiButtonEmpty,
+  EuiIcon,
   EuiPanel,
   EuiSpacer,
   EuiTab,
   EuiTabs,
   EuiTitle,
-  EuiIcon,
   EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { Location } from 'history';
+import { first } from 'lodash';
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
-import { first } from 'lodash';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ErrorGroupAPIResponse } from '../../../../../server/lib/errors/get_error_group';
 import { APMError } from '../../../../../typings/es_schemas/ui/apm_error';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
 import { px, unit, units } from '../../../../style/variables';
+import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
 import { DiscoverErrorLink } from '../../../shared/Links/DiscoverLinks/DiscoverErrorLink';
 import { fromQuery, toQuery } from '../../../shared/Links/url_helpers';
-import { history } from '../../../../utils/history';
 import { ErrorMetadata } from '../../../shared/MetadataTable/ErrorMetadata';
 import { Stacktrace } from '../../../shared/Stacktrace';
+import { Summary } from '../../../shared/Summary';
+import { HttpInfoSummaryItem } from '../../../shared/Summary/HttpInfoSummaryItem';
+import { UserAgentSummaryItem } from '../../../shared/Summary/UserAgentSummaryItem';
+import { TimestampTooltip } from '../../../shared/TimestampTooltip';
 import {
   ErrorTab,
   exceptionStacktraceTab,
   getTabs,
   logStacktraceTab,
 } from './ErrorTabs';
-import { Summary } from '../../../shared/Summary';
-import { TimestampTooltip } from '../../../shared/TimestampTooltip';
-import { HttpInfoSummaryItem } from '../../../shared/Summary/HttpInfoSummaryItem';
-import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
-import { UserAgentSummaryItem } from '../../../shared/Summary/UserAgentSummaryItem';
 import { ExceptionStacktrace } from './ExceptionStacktrace';
 
 const HeaderContainer = styled.div`
@@ -71,6 +71,7 @@ function getCurrentTab(
 }
 
 export function DetailView({ errorGroup, urlParams, location }: Props) {
+  const history = useHistory();
   const { transaction, error, occurrencesCount } = errorGroup;
 
   if (!error) {

x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/List.test.tsx

@@ -6,10 +6,11 @@
 
 import { mount } from 'enzyme';
 import React from 'react';
+import { MockApmPluginContextWrapper } from '../../../../../context/ApmPluginContext/MockApmPluginContext';
+import { MockUrlParamsContextProvider } from '../../../../../context/UrlParamsContext/MockUrlParamsContextProvider';
 import { mockMoment, toJson } from '../../../../../utils/testHelpers';
 import { ErrorGroupList } from '../index';
 import props from './props.json';
-import { MockUrlParamsContextProvider } from '../../../../../context/UrlParamsContext/MockUrlParamsContextProvider';
 
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
   return {
@@ -36,9 +37,11 @@ describe('ErrorGroupOverview -> List', () => {
 
   it('should render with data', () => {
     const wrapper = mount(
-      <MockUrlParamsContextProvider>
-        <ErrorGroupList items={props.items} />
-      </MockUrlParamsContextProvider>
+      <MockApmPluginContextWrapper>
+        <MockUrlParamsContextProvider>
+          <ErrorGroupList items={props.items} />
+        </MockUrlParamsContextProvider>
+      </MockApmPluginContextWrapper>
     );
 
     expect(toJson(wrapper)).toMatchSnapshot();