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/csmApp.tsx

@@ -16,11 +16,11 @@ import { ApmPluginSetupDeps } from '../plugin';
 import {
   KibanaContextProvider,
   useUiSetting$,
+  RedirectAppLinks,
 } from '../../../../../src/plugins/kibana_react/public';
 import { px, units } from '../style/variables';
 import { UpdateBreadcrumbs } from '../components/app/Main/UpdateBreadcrumbs';
 import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange';
-import { history, resetHistory } from '../utils/history';
 import 'react-vis/dist/style.css';
 import { RumHome } from '../components/app/RumDashboard/RumHome';
 import { ConfigSchema } from '../index';
@@ -70,12 +70,12 @@ function CsmApp() {
 export function CsmAppRoot({
   core,
   deps,
-  routerHistory,
+  history,
   config,
 }: {
   core: CoreStart;
   deps: ApmPluginSetupDeps;
-  routerHistory: typeof history;
+  history: AppMountParameters['history'];
   config: ConfigSchema;
 }) {
   const i18nCore = core.i18n;
@@ -86,19 +86,21 @@ export function CsmAppRoot({
     plugins,
   };
   return (
-    <ApmPluginContext.Provider value={apmPluginContextValue}>
-      <KibanaContextProvider services={{ ...core, ...plugins }}>
-        <i18nCore.Context>
-          <Router history={routerHistory}>
-            <UrlParamsProvider>
-              <LoadingIndicatorProvider>
-                <CsmApp />
-              </LoadingIndicatorProvider>
-            </UrlParamsProvider>
-          </Router>
-        </i18nCore.Context>
-      </KibanaContextProvider>
-    </ApmPluginContext.Provider>
+    <RedirectAppLinks application={core.application}>
+      <ApmPluginContext.Provider value={apmPluginContextValue}>
+        <KibanaContextProvider services={{ ...core, ...plugins }}>
+          <i18nCore.Context>
+            <Router history={history}>
+              <UrlParamsProvider>
+                <LoadingIndicatorProvider>
+                  <CsmApp />
+                </LoadingIndicatorProvider>
+              </UrlParamsProvider>
+            </Router>
+          </i18nCore.Context>
+        </KibanaContextProvider>
+      </ApmPluginContext.Provider>
+    </RedirectAppLinks>
   );
 }
 
@@ -109,19 +111,13 @@ export function CsmAppRoot({
 export const renderApp = (
   core: CoreStart,
   deps: ApmPluginSetupDeps,
-  { element }: AppMountParameters,
+  { element, history }: AppMountParameters,
   config: ConfigSchema
 ) => {
   createCallApmApi(core.http);
 
-  resetHistory();
   ReactDOM.render(
-    <CsmAppRoot
-      core={core}
-      deps={deps}
-      routerHistory={history}
-      config={config}
-    />,
+    <CsmAppRoot core={core} deps={deps} history={history} config={config} />,
     element
   );
   return () => {

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

@@ -5,36 +5,36 @@
  */
 
 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 { ApmPluginSetupDeps } from '../plugin';
+import { createCallApmApi } from '../services/rest/createCallApmApi';
 import { createStaticIndexPattern } from '../services/rest/index_pattern';
-import {
-  KibanaContextProvider,
-  useUiSetting$,
-} from '../../../../../src/plugins/kibana_react/public';
-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 { setHelpExtension } from '../setHelpExtension';
+import { px, units } from '../style/variables';
 import { setReadonlyBadge } from '../updateBadge';
-import { createCallApmApi } from '../services/rest/createCallApmApi';
-import { ConfigSchema } from '..';
-import 'react-vis/dist/style.css';
 
 const MainContainer = styled.div`
   padding: ${px(units.plus)};
@@ -68,12 +68,12 @@ function App() {
 export function ApmAppRoot({
   core,
   deps,
-  routerHistory,
+  history,
   config,
 }: {
   core: CoreStart;
   deps: ApmPluginSetupDeps;
-  routerHistory: typeof history;
+  history: AppMountParameters['history'];
   config: ConfigSchema;
 }) {
   const i18nCore = core.i18n;
@@ -84,36 +84,38 @@ export 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>
   );
 }
 
@@ -124,7 +126,7 @@ export function ApmAppRoot({
 export const renderApp = (
   core: CoreStart,
   deps: ApmPluginSetupDeps,
-  { element }: AppMountParameters,
+  { element, history }: AppMountParameters,
   config: ConfigSchema
 ) => {
   // render APM feedback link in global help menu
@@ -133,21 +135,14 @@ export const renderApp = (
 
   createCallApmApi(core.http);
 
-  resetHistory();
-
   // Automatically creates static index pattern and stores as saved object
   createStaticIndexPattern().catch((e) => {
     // eslint-disable-next-line no-console
     console.log('Error creating static index pattern', e);
   });
 
   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) {