Update to latest rum-react (#78193) (#78517)

The latest version fixes a problem where you would get a bunch of warnings that you couldn't turn off if you used `render` instead of component with a route. This was causing us to use `component` in some places where `render` should be used.

The latest version fixes this problem so we change back to `render`
where appropriate.

Also make our `ApmRoute` a `Route` instead of `any`.

x-pack/package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@cypress/webpack-preprocessor": "^4.1.0",
-    "@elastic/apm-rum-react": "^1.2.2",
+    "@elastic/apm-rum-react": "^1.2.4",
     "@elastic/maki": "6.3.0",
     "@kbn/dev-utils": "1.0.0",
     "@kbn/es": "1.0.0",

x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx

@@ -62,15 +62,6 @@ export function renderAsRedirectTo(to: string) {
 // If you provide an inline function to the component prop, you would create a
 // new component every render. This results in the existing component unmounting
 // and the new component mounting instead of just updating the existing component.
-//
-// This means you should use `render` if you're providing an inline function.
-// However, the `ApmRoute` component from @elastic/apm-rum-react, only supports
-// `component`, and will give you a large console warning if you use `render`.
-//
-// This warning cannot be turned off
-// (see https://github.com/elastic/apm-agent-rum-js/issues/881) so while this is
-// slightly more code, it provides better performance without causing console
-// warnings to appear.
 function HomeServices() {
   return <Home tab="services" />;
 }
@@ -153,7 +144,7 @@ export const routes: APMRouteDefinition[] = [
   {
     exact: true,
     path: '/',
-    component: renderAsRedirectTo('/services'),
+    render: renderAsRedirectTo('/services'),
     breadcrumb: 'APM',
   },
   {
@@ -175,7 +166,7 @@ export const routes: APMRouteDefinition[] = [
   {
     exact: true,
     path: '/settings',
-    component: renderAsRedirectTo('/settings/agent-configuration'),
+    render: renderAsRedirectTo('/settings/agent-configuration'),
     breadcrumb: i18n.translate('xpack.apm.breadcrumb.listSettingsTitle', {
       defaultMessage: 'Settings',
     }),
@@ -219,7 +210,7 @@ export const routes: APMRouteDefinition[] = [
     exact: true,
     path: '/services/:serviceName',
     breadcrumb: ({ match }) => match.params.serviceName,
-    component: (props: RouteComponentProps<{ serviceName: string }>) =>
+    render: (props: RouteComponentProps<{ serviceName: string }>) =>
       renderAsRedirectTo(
         `/services/${props.match.params.serviceName}/transactions`
       )(props),

x-pack/plugins/apm/public/components/app/Main/route_config/route_config.test.tsx

@@ -14,7 +14,7 @@ describe('routes', () => {
       it('redirects to /services', () => {
         const location = { hash: '', pathname: '/', search: '' };
         expect(
-          (route as any).component({ location } as any).props.to.pathname
+          (route!.render!({ location } as any) as any).props.to.pathname
         ).toEqual('/services');
       });
     });
@@ -28,9 +28,7 @@ describe('routes', () => {
           search: '',
         };
 
-        expect(
-          ((route as any).component({ location }) as any).props.to
-        ).toEqual({
+        expect((route!.render!({ location } as any) as any).props.to).toEqual({
           hash: '',
           pathname: '/services/opbeans-python/transactions/view',
           search:

x-pack/plugins/apm/typings/apm_rum_react.d.ts

@@ -3,7 +3,10 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+
 declare module '@elastic/apm-rum-react' {
+  import { RouteProps } from 'react-router-dom';
+
   export function indexManagementStore(): any;
-  export const ApmRoute: any;
+  export const ApmRoute: React.ComponentClass<RouteProps>;
 }

yarn.lock

@@ -1155,15 +1155,6 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@elastic/apm-rum-core@^5.6.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@elastic/apm-rum-core/-/apm-rum-core-5.6.0.tgz#d1f643eb00e590d5884598a20bb54efb1490ee13"
-  integrity sha512-hG+lITWBQd0mw00BQ1zYVRKDCh5b9FKFiht9fMXcT0SENOsT5J37RIbQHPdVawluT7/mhDF07t4fR8V0xRB1/g==
-  dependencies:
-    error-stack-parser "^1.3.5"
-    opentracing "^0.14.3"
-    promise-polyfill "^8.1.3"
-
 "@elastic/apm-rum-core@^5.6.1":
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/@elastic/apm-rum-core/-/apm-rum-core-5.6.1.tgz#0870e654e84e1f2ffea7c8a247a2da1b72918bcd"
@@ -1173,21 +1164,14 @@
     opentracing "^0.14.3"
     promise-polyfill "^8.1.3"
 
-"@elastic/apm-rum-react@^1.2.2":
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/@elastic/apm-rum-react/-/apm-rum-react-1.2.3.tgz#fdf28492daca0ee6aa67c53a457eea1f16739e1e"
-  integrity sha512-oCjF/L46OYDRLHKt60l7aU+DFE484dwb/kKN12VZCOgueDZm4BCJd7yaosBtWDhnw0tl0Iqc0X3r4U7pQ+g9aA==
+"@elastic/apm-rum-react@^1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@elastic/apm-rum-react/-/apm-rum-react-1.2.4.tgz#f5b908f69f2696af10d19250226559ceb33dc1e9"
+  integrity sha512-zjig55n4/maU+kAEePS+DxgD12t4J0X9t3tB9YuO0gUIJhgT7KTL1Nv93ZmJ3u2tCJSpdYVfKQ0GBgSfjt1vVQ==
   dependencies:
-    "@elastic/apm-rum" "^5.5.0"
+    "@elastic/apm-rum" "^5.6.0"
     hoist-non-react-statics "^3.3.0"
 
-"@elastic/apm-rum@^5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@elastic/apm-rum/-/apm-rum-5.5.0.tgz#24a8b4db0fa328c1e54710d18837e1adba7e51e0"
-  integrity sha512-uEOJG7Lm0CLtGfXOLXSsiPLpTPvrNUqlWQEKf/D77lpHRVWxBb56xa4X4CK2on8V1XzHDufcYBPcBcKSGozTLw==
-  dependencies:
-    "@elastic/apm-rum-core" "^5.6.0"
-
 "@elastic/apm-rum@^5.6.0":
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/@elastic/apm-rum/-/apm-rum-5.6.0.tgz#0af2acb55091b9eb315cf38c6422a83cddfecb6f"