[APM] Hash-based links into APM app don't work (#108777) (#109342)

* fixing navigation issues

* addressing PR comments

Co-authored-by: Cauê Marcondes <55978943+cauemarcondes@users.noreply.github.com>

x-pack/plugins/apm/public/components/routing/apm_route_config.tsx

@@ -53,6 +53,12 @@ const apmRoutes = route([
         }),
       }),
     ]),
+    defaults: {
+      query: {
+        rangeFrom: 'now-15m',
+        rangeTo: 'now',
+      },
+    },
   },
   {
     path: '/',

x-pack/plugins/apm/public/components/routing/home/index.tsx

@@ -8,7 +8,7 @@ import { i18n } from '@kbn/i18n';
 import { Outlet } from '@kbn/typed-react-router-config';
 import * as t from 'io-ts';
 import React from 'react';
-import { Redirect } from 'react-router-dom';
+import { RedirectTo } from '../redirect_to';
 import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
 import { environmentRt } from '../../../../common/environment_rt';
 import { BackendDetailOverview } from '../../app/backend_detail_overview';
@@ -121,7 +121,7 @@ export const home = {
     },
     {
       path: '/',
-      element: <Redirect to="/services" />,
+      element: <RedirectTo pathname="/services" />,
     },
   ],
 } as const;

x-pack/plugins/apm/public/components/routing/redirect_to.tsx

@@ -6,33 +6,50 @@
  */
 
 import React from 'react';
-import { Redirect, RouteComponentProps } from 'react-router-dom';
+import { Location } from 'history';
+import { Redirect, useLocation, RouteComponentProps } from 'react-router-dom';
 
 /**
- * Given a path, redirect to that location, preserving the search and maintaining
- * backward-compatibilty with legacy (pre-7.9) hash-based URLs.
+ * Function that returns a react component to redirect to a given pathname removing hash-based URLs
+ * @param pathname
  */
-export function redirectTo(to: string) {
+export function redirectTo(pathname: string) {
   return ({ location }: RouteComponentProps<{}>) => {
-    let resolvedUrl: URL | undefined;
+    return <RenderRedirectTo location={location} pathname={pathname} />;
+  };
+}
 
-    // Redirect root URLs with a hash to support backward compatibility with URLs
-    // from before we switched to the non-hash platform history.
-    if (location.pathname === '' && location.hash.length > 0) {
-      // We just want the search and pathname so the host doesn't matter
-      resolvedUrl = new URL(location.hash.slice(1), 'http://localhost');
-      to = resolvedUrl.pathname;
-    }
+/**
+ * React component to redirect to a given pathname removing hash-based URLs
+ * @param param0
+ */
+export function RedirectTo({ pathname }: { pathname: string }) {
+  const location = useLocation();
+  return <RenderRedirectTo location={location} pathname={pathname} />;
+}
 
-    return (
-      <Redirect
-        to={{
-          ...location,
-          hash: '',
-          pathname: to,
-          search: resolvedUrl ? resolvedUrl.search : location.search,
-        }}
-      />
-    );
-  };
+interface Props {
+  location: Location;
+  pathname: string;
+}
+
+/**
+ * Given a pathname, redirect to that location, preserving the search and maintaining
+ * backward-compatibilty with legacy (pre-7.9) hash-based URLs.
+ */
+function RenderRedirectTo(props: Props) {
+  const { location } = props;
+  let search = location.search;
+  let pathname = props.pathname;
+
+  // Redirect root URLs with a hash to support backward compatibility with URLs
+  // from before we switched to the non-hash platform history.
+  if (location.pathname === '' && location.hash.length > 0) {
+    // We just want the search and pathname so the host doesn't matter
+    const resolvedUrl = new URL(location.hash.slice(1), 'http://localhost');
+    search = resolvedUrl.search;
+    pathname = resolvedUrl.pathname;
+  }
+
+  return <Redirect to={{ ...location, hash: '', pathname, search }} />;
 }