[APM] Improve client-side routes

[cauemarcondes]

The client side routes should resemble the server side routes:

• No globally shared declaration of path and query params (aka let's kill useUrlParams and resolveUrlParams)
• statically typed boundaries for path and query params (use io-ts)
• Instead of calling useLocation or useUrlParams components should receive their route params as props.

Currently client side routes look like:

  {
    exact: true,
    path: '/settings/agent-configuration',
    component: () => (
      <Settings>
        <AgentConfigurations />
      </Settings>
    ),
    breadcrumb: i18n.translate(
      'xpack.apm.breadcrumb.settings.agentConfigurationTitle',
      {
        defaultMessage: 'Agent Configuration'
      }
    ),
    name: RouteName.AGENT_CONFIGURATION
  },

In the future it should look something like

"/services/{serviceName}/errors": {
  params: {
    path: t.type({
      serviceName: t.string
    }),
    query: t.partial({
      rangeFrom: t.string,
      rangeTo: t.string
    })
  },
  handler: async ({ query, path }) => {
    return <ErrorGroupDetails routeParams={{ query, path }} />;
  }
}

Then from the component:

function ErrorGroupDetails({ routeParams: RouteParams<'/services/{serviceName}/errors'> }) {
  routeParams.path.serviceName // required string
  routeParams.query.rangefrom // optional string
}

Retrieve route params from deeply nested component

We could also make a helper to make it easier to obtain route params deep down in the tree (although we can't ensure it's called from the right component, so its use should be limited):

const { path, query } = getRouteParams('/services/:serviceName/nodes')

Linking to a route

Get the full href string:

const href = link('/services/{service}/transaction', {
  path: { service: 'opbeans-node' },
  query: { foo: 'bar'}
}).href();

push new item to history API:

link('/services/{service}/transaction', {
  path: { service: 'opbeans-node' }
  query: { foo: 'bar'}
}).push();

Replace existing item on history API

link('/services/{service}/transaction', {
  path: { service: 'opbeans-node' }, 
  query: { foo: 'bar'}
}).replace();

As a component:

<APMLink 
  path="/services/{service}/transaction" 
  params={{ 
    path: { service: 'opbeans-node' }, 
    query: { foo: 'bar'}
  }} 
/>

[elasticmachine]

Pinging @elastic/apm-ui (Team:apm)

[sorenlouv]

I have intentionally left out breadcrumb support in the issue above. It's currently making everything even more complicated so we might drop our implementation and try something a lot simpler (more dumb).

[dgieselaar]

react-router v6 has first-class support for nested routes as config.

Here's a POC for inferring params from routes:

[sorenlouv]

Super cool @dgieselaar. Do we need to wait for react-router v6 to land before starting this?

[dgieselaar]

@sqren no, we can work with react-router-config in the meantime: #104274